/* Global Styles Start */
html {
width: 100%;
font-size: 16px;
}
body, input, h1, h2, *{
font-family: 'Roboto', sans-serif;
}
body {
overflow-y: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none;
}
a {
text-decoration: none;
}
.blocked-link {
pointer-events: none !important;
cursor: not-allowed !important;
color: #777c80 !important;
}
b {
font-weight: bold;
}
twilioMark {
background-color: red;
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* disable highlight when clicking on mobile */
}
.Spartan {
font-family: Spartan !important;
}
.wuwta-a {
color: #4a90e2;
text-decoration: none;
cursor: pointer;
}
.iphone-to-top-cont {
width: 100vw;
display: flex;
justify-content: center;
}
#chatToTopContainer {
width: 100vw;
display: flex;
justify-content: center;
}
/* #layoutToTop {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
} */
.no-scroll {
overflow: hidden !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.ten-twelve {
width: 83.33% !important;
}
/* for hiding elements that only render in mobile view */
.mobile-show-block {
display: none;
}
.mobile-show-flex {
display: none;
}
.phone-show {
display: none;
}
.qprm-blue {
color: #007dc4 !important;
}
.blue-placeholder::placeholder {
color: #4a90e2 !important;
}
.blue-hover-green-bg {
background-color: #4a90e2;
transition: background-color .3s;
cursor: pointer;
}
.blue-hover-green-bg:hover {
background-color: #7dbe3e !important;
}
.blue-hover-green {
color: #4a90e2;
transition: color .3s;
cursor: pointer;
}
.blue-hover-green:hover {
color: #7dbe3e !important;
}
.white-hover-green {
color: white;
transition: color .3s;
cursor: pointer;
}
.white-hover-green:hover {
color: #7dbe3e !important;
}
.red-hover-green {
color: #ff0000;
transition: color .3s;
cursor: pointer;
}
.red-hover-green:hover {
color: #7dbe3e !important;
}
.tub-input-wrapper {
position: relative;
}
.tub-input-wrapper label {
position: absolute;
top: 0px;
left: 46px;
background-color: #eef2f5;
padding: 0 9px;
font-size: 12px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
}
.tub-input-wrapper input {
border: solid 2px #777c80;
border-radius: 28px;
padding: 18px 40px;
height: 56px;
width: 100%;
margin-top: 5px;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #777c80 !important;
}
.light-blue-input {
height: 56px;
border-radius: 28px;
padding-left: 40px;
padding-right: 30px;
border: solid 2px #4a90e2;
color: #4a90e2;
font-size: 16px;
font-weight: bold;
}
/* Fonts */
.light-text {
font-weight: normal !important;
}
.heading-1 {
font-size: 1.75rem;
font-family: Spartan !important;
color: #9b9b9b;
line-height: 1.36;
}
.heading-2 {
font-size: 1.5rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
line-height: 1.42;
}
.heading-3 {
font-size: 1.25rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
line-height: 1.4;
}
.heading-4 {
font-size: 1rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
line-height: 1.5;
}
.heading-5 {
font-size: 0.875rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
line-height: 1.71;
}
.body-large {
font-size: 1.25rem;
color: #545454;
line-height: 1.4;
}
.body-medium {
font-size: 1rem;
color: #545454;
line-height: 1.5;
}
.body-small {
font-size: 0.75rem;
color: #545454;
line-height: 1.5;
}
.callout {
font-size: 1.25rem;
font-family: Spartan !important;
color: #777c80;
line-height: 1.7;
}
.callout-all-cap {
font-size: 1rem;
font-family: Spartan !important;
text-transform: capitalize;
color: #777c80;
line-height: 1.5;
}
.callout-all-cap-small {
font-size: 0.625rem;
font-family: Spartan !important;
text-transform: capitalize;
color: #777c80;
line-height: 2;
}
.chat {
font-size: 0.874rem;
color: #545454;
line-height: 1.57;
}
.chat-small {
font-size: 0.625rem;
color: #545454;
line-height: 1.6;
}
/* blue dot select options */
.dot-select-wrapper {
display: flex;
}
.dot-select-input {
/* make sure to use type="checkbox" */
display: none;
}
.dot-select-label {
font-size: 14px;
font-family: Roboto;
font-weight: 500;
color: #4a90e2;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.dot-select-selected {
display: inline-block;
width: 28px;
height: 28px;
border: solid 3px #ffffff;
border-radius: 8px;
background-color: #ffffff;
cursor: pointer;
margin-right: 10px;
}
.dot-select-dot {
background-color: #ffffff;
border-radius: 100%;
width: 22px;
height: 22px;
cursor: pointer;
}
.dot-select-input:checked + label .dot-select-dot {
background-color: #4a90e2;
}
/* ===== FLEX UTILITIES START ===== */
/* Display */
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
/* Flex Direction */
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
/* Justify Content */
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
/* Align Items */
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
/* Align Content */
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-center {
align-content: center;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-stretch {
align-content: stretch;
}
/* Flex Wrap */
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
/* Align Self */
.self-auto {
align-self: auto;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.self-baseline {
align-self: baseline;
}
/* Flex Grow */
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow-1 {
flex-grow: 1;
}
/* Flex Shrink */
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink-1 {
flex-shrink: 1;
}
/* ===== FLEX UTILITIES END ===== */
.flex-column {
display: flex;
flex-direction: column;
}
/* radio select */
.settings-radio {
display: flex;
align-items: center;
margin-top: 1.875rem;
}
.settings-radio-input {
display: none;
}
.select-radio-dot {
display: inline-block;
width: 1.75rem;
height: 1.75rem;
border: solid .1875rem #ffffff;
border-radius: 1.5rem;
background-color: #ffffff;
cursor: pointer;
}
.grey-radio {
border: solid 3px #f4f4f4;
background-color: #f4f4f4;
}
.settings-radio-input:checked + label .select-radio-dot {
background-color: #4a90e2;
}
.settings-radio-input:checked + .select-radio-dot {
display: inline;
background-color: red !important;
width: 50px !important;
height: 50px !important;
}
.userProf_alerts-radio {
display: flex;
justify-content: space-between;
margin-top: 16px;
}
.edit-save-container {
display: flex;
align-items: flex-end;
gap: 32px;
}
.select-radio-text {
font-size: 14px;
font-family: Roboto;
font-weight: 500;
color: #4a90e2;
margin-left: 43px;
display: flex;
align-items: center;
}
.timeselect {
font-size: 16px;
height: 40px;
width: 170px;
padding: 0 14px;
border-radius: 20px;
color: #4a90e2;
border: solid 2px #4a90e2;
}
/* changing clock inside of time picker to be #4a90e2 */
.timeselect::-webkit-calendar-picker-indicator {
filter: invert(58%) sepia(44%) saturate(3278%) hue-rotate(189deg) brightness(94%) contrast(88%);
}
.timeselect::-webkit-calendar-picker-indicator:hover {
cursor: pointer;
}
.no-access {
opacity: 0.5 !important;
cursor: not-allowed !important;
}
.color-dot-select {
display: none;
}
.select-radio-dot {
display: inline-block;
width: 1.75rem;
height: 1.75rem;
border: solid .1875rem #ffffff;
border-radius: 1.5rem;
background-color: #ffffff;
cursor: pointer;
}
.color-dot-select:checked + label .select-radio-dot {
border: solid .1875rem #4a90e2;
}
.color-dot-select:checked + .select-radio-dot {
display: inline;
background-color: red !important;
width: 50px !important;
height: 50px !important;
}
.c_0047ff {
background-color: #0047ff;
}
.c_00ff75 {
background-color: #00ff75;
}
.c_ff60a8 {
background-color: #ff60a8;
}
.c_4dd091 {
background-color: #4dd091;
}
.c_5bc0de {
background-color: #5bc0de;
}
.c_ffec59 {
background-color: #ffec59;
}
.c_6803ff {
background-color: #6803ff;
}
.select-radio-text div {
margin-right: 13px;
}
.settings-input-input {
border: solid 2px #777c80;
border-radius: 28px;
padding: 18px 40px;
height: 56px;
width: 100%;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
margin-top: 13px;
}
.settings-input-input.for-select {
padding: 0 40px;
background-color: #f4f4f4;
display: flex;
align-items: center;
}
.settings-select {
background-color: transparent;
border: none;
height: 56px;
width: 350px;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
}
/* drop down */
.wuwta-dropdown-container {
display: flex;
align-items: baseline;
font-size: .625rem;
font-family: Spartan !important;
color: #4a90e2;
margin-right: 1.25rem;
border: 2px solid;
border-radius: 20px;
padding: 0.4375rem 1.25rem 0.4375rem;
}
.wuwta-dropdown-container label {
font-weight: bold;
color: #4a90e2;
}
.wuwta-dropdown-container select {
font-size: 10px;
font-family: Spartan !important;
margin-left: 5px;
padding-right: 25px;
}
.grey-canvas {
border-radius: 14px;
padding: 30px 30px 42px 30px;
background-color: #f4f4f4;
margin-top: 20px;
}
.grey-canvas h1 {
font-size: 16px;
font-weight: bold;
color: #545454;
text-align: center;
}
.canvas-list-wrapper {
width: 100%;
background-color: #ffffff;
padding: 29px 62px 42px 62px;
border-radius: 14px;
margin-top: 13px;
}
.canvas-title {
font-size: 16px;
font-family: Roboto;
font-weight: bold;
text-align: center;
color: #545454;
}
.canvas-flex {
display: flex;
justify-content: center;
}
.canvas-list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
}
.canvas-input {
display: none;
}
.canvas-label {
display: flex;
justify-content: center;
align-items: center;
width: 144px;
height: 32px;
font-size: 14px;
font-family: Roboto;
font-weight: bold;
line-height: 1.71;
color: #4a90e2;
border: solid 2px #4a90e2;
border-radius: 24px;
background-color: #ffffff;
margin: 10px 0;
cursor: pointer;
margin-left: 10px;
}
.canvas-input:checked + .canvas-label {
color: #ffffff;
background-color: #4a90e2;
}
.back-btn {
display: flex;
color: #1a467c;
font-size: 11px;
font-weight: bold;
position: absolute;
top: 130px;
left: 125px;
cursor: pointer;
}
.sb-back-btn {
top: 2.5rem;
display: flex;
color: #1a467c;
font-size: 11px;
font-weight: bold;
top: 8.125rem;
left: 7.8125rem;
cursor: pointer;
}
.back-stack {
font-size: 12px;
font-weight: bold;
color: #4a90e2;
cursor: pointer;
text-decoration: none;
}
/* use */
.x-close-btn {
color: #4a90e2;
cursor: pointer;
}
.header-container {
max-width: 100% !important;
min-height: 6.25rem;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 55px;
}
.dash-left {
display: flex;
align-items: center;
}
.dash-right {
display: flex;
align-items: center;
}
.content-left-padding{
padding-left: 126px !important;
}
.page-header{
font-size: 28px !important;
font-family: Spartan !important;
font-weight: normal !important;
color: #9b9b9b !important;
padding-bottom: 0px !important;
margin-right: 34px;
}
.page-header-sub {
font-size: .875rem;
font-family: Spartan !important;
font-weight: 500;
color: #1a467c;
margin-left: .75rem;
}
.video-wrapper {
position: relative;
padding-bottom: 50.62%;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
}
.video-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-helper-container {
display: flex;
border-radius: 7px;
padding: 5px;
}
.header-helper {
margin: 5px 0 0 8px;
font-size: 14px;
font-weight: 500;
line-height: 1;
color: #1a467c;
}
.header-helper a {
cursor: pointer;
}
.header-helper-link {
color: #4a90e2;
margin-left: 5px;
text-decoration: none;
}
#header-helper-link:hover {
cursor: pointer;
}
.forms-helper-container, .reviews-helper-container, .home-helper-container {
margin-bottom: 10px;
display: flex;
justify-content: flex-end;
}
.consult-dash-container {
padding-left: 55px;
}
.select-wrapper {
padding: 0 40px;
display: flex;
align-items: center;
border: solid 2px #4a90e2;
border-radius: 24px;
height: 44px;
}
select {
background: url(/images/angle-down-blue.png) no-repeat right #ddd;
-webkit-appearance: none;
background-size: 10px;
outline: none !important;
cursor: pointer;
background-color: transparent;
border: none;
font-weight: bold;
color: #4a90e2;
width: 100%;
}
.error-text {
font-size: 12px;
font-family: Roboto;
line-height: 1.5;
color: #ff3333 !important;
}
.quick-link {
font-family: 'Roboto', sans-serif;
text-align: center;
display:inline-block;
font-size:.875em;
padding: 13px 0px;
width:184px !important;
border-radius: 25px;
text-decoration: none;
border: 2px solid #4a90e2;
color: #4a90e2;
line-height: 14px;
background-color:transparent;
cursor: pointer;
transition: color .3s, border .3s, background-color .3s;
}
.quick-link:hover {
color: #7dbe3e;
border: 2px solid #7dbe3e !important;
}
.quick-link:active {
color: #4a90e2 !important;
border: 2px solid #4a90e2 !important;
}
.green {
color: #7dbe3e;
}
.green-background {
background-color: #7dbe3e !important;
}
.dark-grey {
color: #777c80;
}
.light-blue {
color: #4a90e2;
}
.dark-blue {
color: #1A467C;
}
.wuwta-cta {
color: #4a90e2;
cursor: pointer;
transition: color .3s;
}
.wuwta-cta:hover {
color: #7dbe3e;
}
.wuwta-select-bar {
display: flex;
border: 2px solid #4a90e2;
border-radius: 16px;
overflow: hidden;
height: 34px;
}
.wuwta-select-bar-option {
width: 150px;
padding: 4px;
background-color: #fff;
color: #4a90e2;
font-size: 12px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color .3s, color .3s;
}
.wuwta-select-bar-active {
color: #fff;
background-color: #4a90e2;
}
.solid-blue-btn {
border: solid 2px #4a90e2;
border-radius: 24px;
background-color: #4a90e2;
padding: 8px 41px;
font-size: 1rem;
font-family: Roboto;
font-weight: bold;
color: #ffffff;
text-align: center;
text-decoration: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
min-width: 184px;
min-height: 40px;
transition: background-color .3s, border .3s;
}
.solid-blue-btn:hover {
background-color: #7dbe3e;
border: solid 2px #7dbe3e;
}
.solid-blue-btn:active {
opacity: 0.7;
}
.solid-blue-btn:disabled {
border: solid 2px #dadada;
background-color: #dadada;
cursor: not-allowed;
}
.red-btn {
border: solid 2px #ff0000;
background-color: #ff0000;
}
.white-blue-btn {
border: solid 2px #4a90e2;
border-radius: 24px;
background-color: transparent;
padding: 8px 41px;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #4a90e2;
text-align: center;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
min-width: 184px;
min-height: 40px;
transition: color .3s, background-color .3s, border .3s;
}
.white-blue-btn:hover {
border: solid 2px #7dbe3e;
color: #7dbe3e;
}
.white-blue-btn:active {
opacity: 0.7;
}
.white-blue-btn:disabled {
border: solid 2px #dadada;
background-color: #dadada;
cursor: not-allowed;
}
/* add class circleButtonClicked to render active button (solid green instead of blue) */
.circleButton {
position: relative;
color: #4a90e2;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
min-height: 44px;
width: 44px;
min-width: 44px;
margin-right: 8px;
border: 2px solid #4a90e2;
border-radius: 50%;
transition: color .3s, border .3s;
padding: 12px 0px;
text-align: center;
}
.circleButton .circle-loader {
width: 1.25rem;
height: 1.25rem;
transition: color .3s, border .3s;
}
.circleButton:hover, .circleButton:active {
color: #7dbe3e;
border: 2px solid #7dbe3e;
cursor: pointer;
}
.circleButtonClicked {
color: white;
background-color: #4a90e2;
border: 2px solid #4a90e2;
transition: color .3s, border .3s, background-color .3s;
}
.circleButtonClicked:hover {
color: white;
border: 2px solid #7dbe3e;
background-color: #7dbe3e;
}
/* wrap this in a square container with equal weight and height to make it a circle */
.solid-blue-circle-btn {
width: 100%;
height: 100%;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
color: #ffffff;
cursor: pointer;
transition: color .3s, border .3s, background-color .3s;
}
.solid-blue-circle-btn:hover {
color: #ffffff;
border: 2px solid #7dbe3e !important;
}
.solid-blue-circle-btn:active {
color: #4a90e2 !important;
border: 2px solid #4a90e2 !important;
}
.wuwta-admin-input {
border: 2px solid #4a90e2 !important;
margin-top: .625rem;
}
.blue-border-input {
height: 44px;
font-size: 16px;
display: flex;
align-items: center;
padding: 0 40px;
border: solid 2px #4a90e2;
border-radius: 24px;
color: #4a90e2;
}
.blue-border-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #4a90e2 !important;
opacity: 1; /* Firefox */
}
.blue-border-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #4a90e2 !important;
}
.blue-border-input::-ms-input-placeholder { /* Microsoft Edge */
color: #4a90e2 !important;
}
.full-dialog,
.full-dialog-secondary
{
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 90000;
background-color: rgba(216, 216, 216, .8);
}
.full-dialog-h {
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
color: #1a467c;
margin: 18px 0 0 0;
text-align: center;
}
.full-dialog p,
.full-dialog-secondary p
{
max-width: 100%;
}
.full-dialog-note {
font-size: .875rem;
margin-top: 8px;
color: #777c80;
display: flex;
align-items: center;
justify-content: center;
}
.full-dialog-btn-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: 2.5rem;
gap: .875rem;
}
.full-dialog-date-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 1.25rem;
width: 100%;
padding: 0 8.33%;
margin-top: 1.25rem;
}
.full-dialog-date-item-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.full-dialog-date-h {
color: #1a467c;
font-size: 16px;
font-weight: bold;
}
.full-dialog-date-selector {
width: 9.375rem;
height: 2.5rem;
border: none;
padding: 0 1.25rem;
border-radius: .625rem;
margin-top: .625rem;
border: 2px solid #4a90e2;
}
.conf-dialog-btn-flex {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
}
/* successful save modal */
#succSaved .confirm {
display: flex;
flex-direction: column;
align-items: center;
padding: 2.875rem !important;
}
.confirm-icon-img {
width: 4rem;
height: 4rem;
}
.confirm-icon-text {
font-size: 1.25rem;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
margin-top: 1.5rem;
}
/* middle of the screen modal */
.modal-content-flex {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0px 8px 24px rgb(16 22 26 / 20%);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 10px;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
}
.x-modal {
font-size: 24px;
position: absolute;
top: 25px;
right: 39px;
color: #4a90e2;
transition: color .3s;
}
.x-modal .fa-times {
font-weight: 1000;
}
.x-modal:hover {
color: #7dbe3e;
}
/* fullscreen slide up modal */
.fullscreen-slideup-modal {
z-index: 901; /* to go over nav bar */
background-color: #f4f4f4;
display: none;
width: 100vw;
height: 100vh;
position: absolute;
bottom: 0;
left: 0;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.fullscreen-slideup-content {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.slideup-h1 {
margin-top: 106px;
margin-left: 25vw;
}
.slideup-body {
color: #777c80;
padding: 0 20vw 0 25vw;
}
.load-gif-size {
height: 3rem;
width: 3rem;
}
div.loader {
z-index: 99999;
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(214,214,214,.4);
}
.loader > img {
position: absolute;
top: 47%;
left: 47%;
width: 3rem;
height: 3rem;
}
.loader > h1 {
text-align: center;
margin-top: 10%;
}
button:focus{
outline: none !important;
}
.to-lowercase{
text-transform: lowercase !important;
}
h4.standard-h4{
font-size: .875em;
font-weight: bold;
color:#9b9b9b;
}
.nav-content {
display: table;
white-space : nowrap;
overflow : hidden;
list-style: none;
width: 100%;
}
.nav-content li {
height: 48px;
display: table-cell;
vertical-align: middle;
}
.ui-menu {
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
li.ui-menu-item {
background-color: #f4f4f4;
font-size: .65em;
line-height: 1.5;
width: 100%;
}
li.ui-menu-item .ui-menu-item-wrapper {
display: inline-block !important;
white-space: nowrap;
text-overflow: ellipsis;
color: #4a90e2;
overflow: hidden;
width: 300px;
}
span.constrict-name {
display: inline-block;
max-width: 165px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom;
}
.ref-detail-container span#refNamePlace{
display: inline-block;
width: 300px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom;
}
li.ui-menu-item div:focus{
outline: none !important;
color: #4a90e2;
opacity: 1;
}
input:focus {
outline: unset !important;
}
.ui-state-active, .ui-widget-content .ui-state-active{
margin: 0 !important;
outline: none;
color: #ffffff !important;
background-color: #4a90e2;
opacity: 1;
border: none !important;
}
.ui-state-active:focus, .ui-widget-content .ui-state-active:focus{
background-color: transparent !important;
outline: none;
color: #9b9b9b;
border:none !important;
}
.ui-menu .ui-menu-item-wrapper {
padding: 15px 5% 15px 19% !important;
}
input#customerFilter, input#referralFilter, input#groupDetailFilter, #customerFilter_quick{
outline: none;
}
input#referralFilter {
margin-bottom: 28px !important;
}
input#customerFilter, input#groupDetailFilter {
margin-bottom: 0px !important;
transition: width .3s;
}
li.ui-menu-item:focus {
/* color: #d8d8d8 !important; */
outline: none !important;
}
li.ui-menu-item:hover {
/* background-color: #d8d8d8; */
outline: none;
}
li.ui-menu-item:active {
/* background-color: #d8d8d8; */
outline: none;
}
/* ul#ui-id-1 {
margin-top:1px;
margin-left: 0px !important;
border: unset !important;
} */
h1,h2,h3,h4,h5,p,span,div {
font-family: 'Roboto', sans-serif !important;
}
/* Global Styles Start */
div#_growlDialog_ .confirm {
padding: 60px 20px 50px 20px !important;
width: 330px;
background-color: #fff;
}
div#_growlDialog_ .confirm h1 {
color: #1a467c;
}
div#_growlDialog_ .confirm-body{
margin-bottom: 20px;
}
.left-nav-section{
text-align: left;
width: 31%;
}
.middle-nav-section{
text-align: center;
width:0%;
}
.right-nav-section {
position: relative;
text-align: right;
width:50%;
}
.main-ham-wrapper .hamburger .line{
z-index: 1000;
background-color: white;
}
.ham {
float: right;
z-index: 1000;
vertical-align: middle;
margin-right: 11px;
margin-left: 17px;
}
.ham-open {
right:0px;
height: 30px;
margin-top: 12px;
}
.phone-icon {
display: inline-block;
font-size: 17px;
color: #4a90e2 !important;
margin-right: 26px;
}
.phone-icon i.fal.fa-phone-rotary {
color: #4a90e2;
}
.hide-phone{
display: none;
}
/* Tool Tip Styles */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #fff;
color: #232323;
border-radius: 10px;
padding-bottom:15px;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 14px;
left:0px;
width:100%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip-h4{
color:#1a467c;
}
.tooltip-h4, .tooltip-body{
padding: 5px 10px;
}
.tooltiptext i {
width: 100%;
text-align: center;
}
.tooltip-h4::first-letter{
text-transform: capitalize;
}
.tooltip-h4{
color: #1a467c;
font-size: .875em;
font-weight: bold;
}
.tooltip-subhead{
font-weight: 600;
color: #9b9b9b;
padding: 0px 10px 0px 10px;
font-size: .75em;
}
.tooltip-body{
color:#000;
font-size:.625em
}
.single-col {
width: 100%;
}
.round-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.round-switch input {
opacity: 0;
width: 0;
height: 0;
}
.round-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.round-slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .round-slider {
background-color: #2196F3;
}
input:focus + .round-slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .round-slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.round-slider {
border-radius: 34px;
}
.round-slider:before {
border-radius: 50%;
}
/* Global Styles End */
/* Forms Style Start */
.forms-container h3{
font-family: 'Spartan' !important;
display: inline-block;
font-size: 20px;
font-weight: bold;
color: #1a467c;
vertical-align: top;
padding-right: 20px;
/* margin-bottom: 14px; */
}
li div.form-list-item {
display: inline-block !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
line-height: 1.2;
font-size: 12px;
padding: 0px 2%;
}
#formStatus{
color:#1a467c;
font-size: 16px !important;
width: 6%;
text-overflow: unset !important;
}
#formStatus i.fa-regular.fa-shield-halved {
color: #9b9b9b;
}
div#formAction {
font-size: 24px !important;
color: #4a90e2;
height: 16px;
margin-top: -8px;
}
.form-quick-text{
width: 17%;
}
.form-list-header-status {
width: 6%;
padding-left: 2%;
text-align: center;
}
.form-list-header-cont {
display: flex;
padding: 0px 0% 0px 2%;
margin-bottom: 7px;
}
.form-list-header-cont div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 2%;
text-transform: uppercase;
}
.table-header-text {
font-size: 10px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
}
li.form-submission-list-item {
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 4px;
padding: 16px 0% 16px 2%;
transition: background-color .3s;
}
li.form-submission-list-item:hover{
background-color: #c5dbf5 !important;
}
div#formTopic {
max-height: 12px;
}
.form-unopened .form-item-style{
font-weight: bold;
}
.form-opened .form-item-style{
font-weight: normal;
}
.form-list-item .fa-circle-xmark{
color: #ff0000;
}
.right-legend p {
display: inline-block;
font-size: 11px;
color: #9b9b9b;
vertical-align: middle;
padding-right: 12px;
margin-top: 2px;
margin: 0 8px;
background-color: lightgray;
padding: 8px;
border-radius: 8px;
cursor: pointer;
}
@media screen and (max-width:1100px){
.right-legend p {
padding-right: 3px !important;
}
}
.dob-select {
padding: 0 5px !important;
height: 40px !important;
width: 120px !important;
justify-content: center;
}
.dob-select select {
width: 75% !important;
}
.dob-container {
display: flex;
justify-content: space-evenly;
}
/*Special style for hamburger to maintain position inside nav slider*/
.right-legend i {
margin-top: -2px;
}
.right-legend .fa-circle{
font-size: 14px !important;
color: #1a467c;
vertical-align: middle;
}
.right-legend .fa-circle-check{
font-size: 14px !important;
color: #7dbe3e;
vertical-align: middle;
}
.right-legend .fa-circle-xmark{
font-size: 14px !important;
color: #ff3b30;
vertical-align: middle;
}
.right-legend .fa-shield-halved{
font-size: 14px !important;
color: #9b9b9b;
vertical-align: middle;
}
.right-legend {
text-align: right;
width: auto;
display: inline-block;
float: right;
/* margin-top: -42px; */
}
.left-sort p {
font-size: 11px;
color: #9b9b9b;
}
.left-sort {
display: inline-block;
vertical-align: text-bottom;
}
.forms-status-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.forms-status-export {
color: #4a90e2;
font-size: 12px;
margin-left: 8px;
}
.forms-statuses-cont {
display: flex;
gap: 8px;
}
.forms-status-item, .forms-status-item-custom {
font-size: 12px;
color: #4a90e2;
background-color: #f2f3f3;
padding: 8px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.forms-status-item-custom {
position: relative;
}
.custom-form-status-wrap {
position: absolute;
top: 34px;
width: 170px;
right: 0;
max-height: 150px;
padding: 10px;
border: 1px solid #4a90e2;
color: #4a90e2;
background-color: white;
border-radius: 8px;
overflow-y: scroll;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 1001;
font-size: 12px;
}
.custom-form-status-item, .custom-form-status-none {
padding: 6px 12px;
}
.custom-form-status-item-clicked {
color: white;
background-color: #4a90e2;
border-radius: 10px;
}
.forms-status-item-clicked {
background-color: #4a90e2;
color: white;
}
.forms-status-item .fa-circle {
font-size: 14px !important;
color: #1a467c;
}
.forms-status-item .fa-circle-check{
font-size: 14px !important;
color: #7dbe3e;
}
.forms-status-item .fa-circle-xmark {
font-size: 14px !important;
color: #ff3b30;
}
.forms-status-item .fa-shield-halved{
font-size: 14px !important;
color: #9b9b9b;
}
/* Forms Style End */
/* Radio button styles */
/* Validator style */
.is-empty{
border: 2px solid red !important;
background-color:#ffebeb;
}
input.form-radio.is-empty {
background-color: #ffebeb;
}
/* */
.form-radio
{
vertical-align: middle;
font-size: .625em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
position: relative;
background-color: #fff;
color: #fff;
border: solid 5px #f4f4f4 !important;
height: 27px !important;
width: 34px !important;
border: 0;
border-radius: 50px !important;
cursor: pointer;
margin-right: 7px;
outline: none;
margin-bottom: 25px !important;
}
.main .right-add .form-radio{
background-color: #fff !important;
padding: 12px !important;
}
.main .right-add .form-radio:checked::before{
top: 6px !important;
}
.form-radio:checked::before
{
position: absolute;
font: 10px/1 'Open Sans', sans-serif;
left: 9px;
top: 5px;
content: '\02143';
transform: rotate(40deg);
}
.form-radio:hover
{
background-color: #f7f7f7;
}
body.main .form-radio:checked
{
background-color: #4a90e2 !important;
border: solid 5px #fff;
color:#fff !important;
}
.form-textarea
{
border:solid 1px #9b9b9b !important;
font-size: .625em;
padding-bottom:5px;
font-size: .75em;
width: 96%;
padding: 12px 4%;
border-radius: 25px;
border: unset;
margin-bottom: 23px;
}
label.radio-label {
display: inline-block !important;
font-size: .75em !important;
color: #232323 !important;
vertical-align: top !important;
margin-top: 15px !important;
font-weight: normal !important;
margin-right:10px !important;
}
.multi-select.dob-select {
width: 31%;
margin-right: 1%;
display: inline-block;
}
.dob-select select {
width: 75% !important;
margin-right: 2%;
text-align: right !important;
}
/*
.dob-container {
margin-bottom: 23px;
} */
/*Special style for hamburger to maintain position inside nav slider*/
.nav-to-top {
vertical-align: top !important;
}
/*Begin Sliding Nav Style*/
div#location-container {
position: absolute;
text-align: center;
left: 0px;
width: 100%;
bottom: 14vh;
}
div#location-container h2{
color: #7dbe3e;
font-weight: bold;
font-size: .75em;
padding-bottom: 5px;
}
div#location-container p{
color: #4a90e2;
font-size: .75em;
font-weight: bold;
}
#change-location{
display: none;
}
.slide-box {
z-index: 900;
background-color: #d8d8d8;
position: absolute;
bottom: 0px;
height: 100%;
width: 100%;
display: none;
}
.slide-box .form-badge {
display: none;
}
.user-box {
margin-top:100px;
margin-left:6.25%;
width:87.5%;
margin-right:6.25%;
border-bottom: solid 1px #979797;
padding-bottom:20px;
}
.non-user{
width:87.5%;
padding: 20px 6.25%;
}
.non-user p{
padding-bottom: 25px;
font-size: 1em;
line-height: 1.4em;
}
nav.main-nav {
margin-left: 12.5%;
width: 75%;
padding-top: 20px;
margin-top: 120px;
}
.nav-link{
text-decoration: none;
color:#000;
font-size:1.6em;
width: 100%;
padding-left: 1px;
}
.nav-highlight {
width: 7px;
height: 44px;
background-color: #7dbe3e;
display: none;
position: absolute;
}
.nav-link:hover .nav-highlight {
display: block;
}
.nav-text{
padding: 0 0%;
line-height: 2em;
}
.slide-box .nav-text {
font-family: Spartan !important;
font-size: 36px;
line-height: 54px;
color: #4a90e2;
}
.slide-box .nav-text:hover {
color: #7dbe3e;
}
.profileImage{
border-radius: 50%;
position: absolute;
left: 80px;
bottom: 90px;
}
p.opes-logo-admin {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
font-size: 0.6em;
font-weight: bold;
color: #afb1b5;
}
p.opes-logo-admin span {
font-size: 1.25em;
color: #1a467c;
line-height: 1.4;
}
/* .active-page-view{
visibility: visible !important;
display: block !important;
height: auto !important;
} */
/* .page-start{
visibility: hidden;
height: 0px;
width: 100%;
} */
/* Paging style start */
/* .page-button-hide{
display:none !important;
} */
/* Paging style end */
/* Admin nav */
ul.dash-nav-list li {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #4a90e2;
}
ul.dash-nav-list {
width: fit-content;
float: right;
padding-right: 61px;
}
img.admin-logo {
width: 167px;
margin-left: 61px;
}
nav.admin-dash {
padding: 30px 0px 35px 0px;
background-color: #e9e9e9;
}
.quick-link.logout-link {
width: fit-content !important;
padding: 8px 36px;
margin-left: 47px;
width: unset !important;
}
div#otherNav {
overflow-y: auto;
display: none;
position: absolute;
top: 92px;
padding: 40px 100px;
width: 100%;
height: 100%;
background-color: #fff !important;
}
.show-other{
display: block !important;
}
.nav-box {
display: inline-block;
width: 25%;
}
.nav-box a{
text-decoration: none;
}
.nav-box li {
list-style: none;
text-decoration: none;
}
a.box-link {
background-color: #e9e9e9;
display: block;
width: 70%;
margin: 0 auto;
padding: 86px 0px 16px 16px;
margin-bottom: 60px;
font-size: 16px;
font-weight: bold;
color: #4a90e2;
}
a.box-link:hover{
color: #7dbe3e !important;
box-shadow: 0px 0px 3px #a1a1a1;
}
/* Admin login */
div#darkAdmin {
width: 100%;
height: 100vh;
background-color: #003A6E;
/* background-image: linear-gradient(#060614, #003A6E); */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo-block {
margin-top: 15vh;
margin-bottom: 10vh;
flex: 1;
text-align: center;
width: 100%;
}
.logo-block * {
display: block;
margin: 0 auto;
color: #fff !important;
}
.logo-block i {
font-size: 33px;
margin-bottom: 10px;
}
.logo-block img {
width: 278px;
}
.admin-welcome {
font-size: 42px;
color: #fff;
/* margin-bottom: 52px; */
flex: 1;
}
.admin-welcome-btn-wrapper {
flex: 5;
}
.admin-button {
background-color: #fff !important;
font-weight: bold;
}
/* Main Dashboard Style Start */
h3.no-alerts {
color: #9b9b9b;
font-size: .875em;
line-height: 1.3;
}
.row.main-content {
padding-left: 70px;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
-webkit-transition: margin-left .5s; /* Safari */
transition: margin-left .5s;
}
.row.main-content.admin-row {
padding-left: 0;
margin-left: unset;
}
.row.main-content2 {
margin-left: 216px;
}
nav.main-dash {
width: 215px;
height: 97.5vh;
border-radius: 32px;
margin: 10px 5px 10px 5px;
z-index: 901;
position: absolute;
top: 0;
left: 0;
background-color: #eef2f5;
display: flex;
flex-direction: column;
}
nav.main-dash .flex-nav-component {
padding-top: 60px;
padding-bottom: 10px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.flex-nav-component .compose-wrapper {
flex: 0.5;
display: flex;
align-items: center;
}
nav.main-dash .nav-items-wrapper {
flex: 2;
margin-top: 15px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-icon {
width: 15px;
padding: 0px 20px;
}
.onlyForDropDown {
display: none;
}
.main-dash li.nav-text.nav-list-item {
padding: 7px 0px;
font-size: 0.6em;
font-weight: lighter;
margin-bottom: 0px;
color:#9b9b9b;
-webkit-transition: color .6s; /* Safari */
transition: color .6s;
white-space: nowrap;
}
.main-dash li.nav-text.nav-list-item-admin {
padding: 3px 0px;
font-size: 0.6em;
font-weight: bold;
margin-bottom: 0px;
color:#9b9b9b;
border-left:7px solid #eef2f5;
-webkit-transition: color .6s; /* Safari */
transition: color .6s;
white-space: nowrap;
}
li.nav-text.nav-list-item:hover {
color: #7dbe3e;
border-color: #7dbe3e;
}
li.nav-text.nav-list-item:active {
color: #4a90e2;
border-color: #4a90e2;
}
li.nav-text.nav-list-item-admin:hover {
color: #7dbe3e;
border-color: #7dbe3e;
}
li.nav-text.nav-list-item-admin:active {
color: #4a90e2;
border-color: #4a90e2;
}
.active-dash-menu {
width: 65px;
color: #4a90e2 !important;
background-color: #f2f3f3;
margin-right: 1px;
}
.sap-icons-wrapper {
width: 100%;
}
@media screen and (min-width: 1025px) {
.sap-icons-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
}
@media screen and (max-height: 715px),
screen and (max-width: 1024px) {
.sap-icons-wrapper {
display: flex;
flex-direction: row;
align-items: center;
}
}
/* get rid of green hover on mobile devices */
@media screen and (max-width: 1024px) {
.active-dash-menu {
width: 55.45px;
height: 68px !important;
}
.nav-slider-container .active-dash-menu {
width: inherit;
border-left: 0 !important;
background-color: #d8d8d8;
}
}
@media screen and (max-height: 715px),
screen and (max-width: 1024px) {
.active-dash-menu {
width: 55.45px;
height: 68px !important;
}
.nav-slider-container .active-dash-menu {
width: inherit;
border-left: 0 !important;
background-color: #d8d8d8;
}
}
div#avatar-logo {
width: 44px;
height: 44px;
display: block;
position: absolute;
left: 10px;
top: 10px;
background-color: #fff;
border-radius: 50%;
overflow: hidden;
padding: 7px;
}
div#avatar-logo img {
width: 100%;
}
#main-dash-logo{
width: 140px;
margin-left:35px;
margin-top:50px;
position: absolute;
}
p.opes-logo {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
font-size: 0.6em;
font-weight: bold;
color: #afb1b5;
}
p.opes-logo span {
font-size: 1.25em;
color: #1a467c;
line-height: 1.4;
}
nav .user-profilePic {
background-color: white;
min-width: 2.125rem;
min-height: 2.125rem;
width: 2.125rem;
height: 2.125rem;
margin: .375rem .9375rem 0;
box-shadow: 0 0 .1875rem .0625rem rgba(0, 0, 0, 0.2);
border: solid .1062rem #1a467c;
border-radius: 100%;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-decoration: none;
}
.user-profilePic .user-profileImg {
height: 100%;
border-radius: 100%;
}
.user-profilePic .user-in {
color: #1a467c;
}
/* START drop down hamburger in nav */
.nav-slider-container {
display: none;
width: 100%;
height: 100%;
padding: 0 72px;
}
.nav-link-container {
display: flex;
margin-top: 26px;
text-decoration: none;
}
.nav-slider-container .form-badge {
margin-top: -5px;
}
.nav-slider-container .chat-badge {
margin-top: -5px;
}
.nav-link-icon {
width: 18px;
height: 18px;
text-align: center;
}
.nav-link-text {
font-size: 18px;
margin-left: 22px;
font-family: 'Spartan' !important;
font-weight: bold;
text-decoration: none;
color: #fff;
}
#navLocSelector {
max-width: 11.875rem;
margin-top: 48px;
width: fit-content;
padding-left: 1.25rem;
}
#navLocSelector .wuwta-dropdown-container {
color: #fff;
}
.nav-loc-toggle-label {
color: #fff !important;
}
.nav-loc-toggle-select {
background: url(/images/angle-down-white.png) no-repeat right #1a467c;
background-size: 10px;
color: #fff;
}
.main-ham-wrapper {
margin-right: 20px;
font-size: 13px;
}
.drop-nav-ham {
color: white;
padding: 16px;
border: none;
cursor: pointer;
}
.drop-nav-ham {
position: relative;
display: inline-block;
}
.dropdown-nav-content {
right: 0vw;
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: 10px;
padding-left: 14px;
border-radius: 10px;
z-index: 1;
}
.dropdown-nav-content a {
color: #4a90e2;
padding: 12px 16px;
text-decoration: none;
display: inline;
}
.dropdown-nav-content a .form-badge {
display: none;
}
.show-drop-down {display: block;}
.nav-slider-container a.hide-in-tablet {
display: none;
}
.bottom-nav-items {
display: flex;
flex-direction: column;
align-items: center;
}
/* END drop down hamburger in nav */
/* Main Dash Style End */
/* Main Dash Panel 2 Style w/ Activities */
.twocolumn{
height: 100vh;
overflow-y: auto;
padding: 30px 3%;
}
#col2{
overflow-x: hidden;
background-color: #f2f3f3;
width:450px !important;
}
#col3{
width: 100%;
background-color: rgba(255, 255, 255, 1);
}
.col2{
background-color: #f8fafb;
width:500px !important;
}
.col3{
width: 100%;
background-color: rgba(255, 255, 255, 0);
}
.total-messages {
/* width: 1307px;
height: 139px; */
font-family: 'Spartan' !important;
font-size: 124px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #1a467c
}
.total-messages-sent {
/* width: 638px;
height: 53px; */
font-family: 'Spartan' !important;
font-size: 48px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #9b9b9b;
}
#welcome-message{
position: absolute;
padding-top: 7px;
padding-bottom: 40px;
font-size: 28px;
font-weight: normal;
color: #9b9b9b;
}
body div#welcomeWrapper input.message-radio {
background-color: #fff !important;
width: 20px !important;
}
body div#welcomeWrapper input.message-radio:checked {
background-color: #4a90e2!important;
}
div#welcomeWrapper .form-radio:checked::before{
top: 6px !important;
}
.dash-container{
font-family: 'Roboto', sans-serif !important;
min-height:100px;
max-width: 700px;
}
.dash-container.ref-info-box{
max-width: unset !important;
}
.hide-activity{
display: none;
}
.hide-activity-rec{
display: none;
}
#activity-container, #quick-links-container{
margin-top: 85px;
}
#customerListContent h2, #adminListContent h2, #customerList-inactiveContent h2, #adminList-inactiveContent h2 {
color: #7dbe3e;
font-weight: bold;
font-size: .875em;
padding-bottom: 20px;
padding-bottom: 0px !important;
}
.main-content-h2 {
font-family: 'Spartan' !important;
display: block;
font-size: 18px;
font-weight: 500;
color: #1a467c;
vertical-align: top;
padding-right: 20px;
padding-bottom: 20px !important;
}
.contact-info h2 {
font-weight: 500 !important;
}
.activity-time{
font-size: 0.5em;
color: #9b9b9b;
font-weight: bold;
}
.activity-content{
margin-top:3px;
font-size: 0.75em;
line-height: 1.43em;
max-height: 4.29em;
overflow-y: hidden;
}
#nav-shrink i {
float: right;
padding: 10px 15px;
cursor: pointer;
color: #4a90e2;
}
.activity-box{
height:50px;
margin-bottom: 30px;
}
.no-wrap{
display: inline-block;
height: 80px;
float: left;
width: inherit;
}
img.activity-icon {
float: left;
height: 32px;
margin-top: 9px;
margin-bottom: 9px;
margin-right: 18px;
}
.submit-quick{
font-family: 'Roboto', sans-serif;
display:inline-block;
outline: none !important;
padding: 13px 0px;
width:184px !important;
border-radius: 25px;
text-decoration: none;
border: 2px solid #4a90e2 !important;
color: #4a90e2;
line-height: 14px;
background-color:transparent !important;
}
.small-button{
width:144px !important;
height:32px !important;
}
.blue-spacer-line {
border: 1px solid #4a90e2;
border-radius: 25px;
margin: 40px 0;
}
.quick-link-long{
text-align: center;
display:inline-block;
font-size:1em;
padding: 8px 8px;
width:200px !important;
border-radius: 25px;
text-decoration: none;
border: 2px solid #4a90e2;
color: #4a90e2;
cursor:pointer;
text-wrap: nowrap;
}
.quick-link-long:hover{
color: #7dbe3e;
border: 2px solid #7dbe3e;
}
.submit-quick:hover{
color: #7dbe3e ;
border: 2px solid #7dbe3e !important;
}
.quick-link-active{
color: #fff;
border: 2px solid #4a90e2 !important;
background-color: #4a90e2 !important;
}
/* End Main Dash 2 */
/* Dash shrink */
#main-dash-logo, #location-container, .opes-logo{
display: none;
}
#location-container, .opes-logo{
min-width: 215px;
}
.delay-show{
display:none;
}
nav.main-dash.shrink {
width: 65px;
display: block;
}
/* @media screen and (max-width: 1200px) {
nav.main-dash.shrink {
width: 115vh;
}
} */
.shrink li.nav-text.nav-list-item{
/* max-height: 2.35em; */
overflow: hidden;
}
.shrink li.nav-text.nav-list-item-admin{
/* max-height: 2.35em; */
overflow: hidden;
}
.shrink.row.main-content{
margin-left:65px !important;
}
.shrink div#nav-shrink {
text-align: center;
width: 100%;
}
.shrink #nav-shrink i{
width: 100%;
}
.shrink.singleRightPane{
margin-left: 65px;
}
.scrollbar-blue-override::-webkit-scrollbar {
width: 6px !important;
border-radius: 8px !important;
}
.scrollbar-blue-override::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1); */
border-radius: 8px !important;
}
.scrollbar-blue-override::-webkit-scrollbar-thumb {
background-color: #4a90e2 !important;
border-radius: 8px !important;
}
/* End dash shrink*/
/* Main Dash 3 */
select#reportSpan {
padding-right:20px;
text-align: right;
float: right;
background-color: unset;
border: unset;
font-family: Roboto;
font-weight: 600;
color: #9b9b9b;
font-size: .75em;
text-align-last: right;
}
select#reportSpan:focus{
outline: none !important;
}
select#reportSpan > option {
/* direction: rtl; */
padding: 10px 5px !important;
background-color: #fff;
position: relative;
display: block;
border: none !important;
}
.stat-item {
display: inline-block;
text-align: center;
}
#reportContainer{
position: relative;
}
#stats-container{
position: relative;
width: 50%;
float:right;
height:240px;
margin-top:10px;
}
p.stat-title {
font-size: 10px;
color: #1a467c;
text-transform: uppercase;
margin-bottom: 8px;
line-height: 1.34;
}
span.stat-num {
font-size: 64px;
display: inline-block;
color: #1a467c;
font-weight: bold;
}
p.stat-sub{
font-size: .625em;
color: #9b9b9b;
margin-top: 5px;
line-height: 1.4em;
padding: 0 15px;
}
.trend-box {
display: inline-block;
position: absolute;
font-size: .625em;
color: #1a467c;
margin-top: 7px;
margin-left:7px;
}
div#youSent {
position: absolute;
top:0;
left: 0;
}
div#officeSent{
position: absolute;
top:0;
right:0;
}
div#reqSent{
position: absolute;
bottom: 0;
right:0;
}
div#revRec{
position: absolute;
bottom: 0;
left:0;
}
div#user-info {
position: absolute;
right: 5%;
background-color: unset;
display: table;
}
div#user-initials {
text-transform: uppercase;
height: 45px;
width: 45px;
min-width: 45px;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 15px;
font-weight: 100;
color: #f0f4f6;
/* background-image: url(/images/name-bg.png);
background-position: 50% 50%;
background-repeat: no-repeat; */
}
div#user-initials img {
width: 2.5rem;
height: 2.5rem;
}
.contact-details div#user-initials {
height: 64px;
width: 64px;
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 26px;
font-weight: bold;
color: #f0f4f6;
border-radius: .75rem;
/* background-image: url(/images/bg-circle-large.png);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 64px; */
}
div#open-info {
display: table-cell;
vertical-align: middle;
}
div#open-info img {
width: 12px;
vertical-align: middle;
margin-left: 10px;
}
div#user-alert {
display: table-cell;
vertical-align: middle;
position: relative;
padding-right:20px;
}
span#alert-number {
text-align: center;
display: block;
width: 12px;
font-size: 10px;
padding: 1px 0px;
background-color: #ff3b30;
color: #fff;
border-radius: 52%;
position: absolute;
right: 20px;
}
/* User box style */
div#user-info-box {
display: none;
position: absolute;
right: 5%;
width: 300px;
padding: 20px 24px;
background-color: #fff;
border-radius: 13px;
z-index: 1000;
}
p.user-biz-name {
font-size: .75em;
font-weight: bold;
color: #232323;
width: 80%;
}
.basic-info i.fa-edit{
font-size:18px;
}
.basic-info i.fa-edit:hover{
opacity: .5;
cursor: pointer;
}
@media screen and (max-width:1160px){
p#locationInfo {
margin-top: 0px !important;
}
}
select#locationSelect {
font-size: .5em;
border: none;
padding: unset;
margin-left: -3px;
}
select#locationSelect:focus{
outline-color: #fff;
}
ul#user-nav {
padding: 20px 0px;
border-bottom: solid 1px rgba(151, 151, 151, 0.3);
}
#user-nav a {
color: #9b9b9b;
text-decoration: none;
font-size: .75em;
margin-bottom: 20px;
display: block;
}
#user-nav > li:last-child a{
margin-bottom: 0px !important;
}
.info-box-bottom {
display: table;
padding-top: 15px;
width:100%;
}
a.user-logout {
color: #4a90e2;
font-size: .873em;
display: table-cell;
text-decoration: none;
}
p.opes-version {
font-size: .5em;
color: #9b9b9b;
display: table-cell;
text-align: right;
vertical-align: middle;
}
i.close-x {
cursor: pointer;
font-size: 1.15em;
color: #afb1b5;
position: absolute;
top:15px;
right: 0;
margin-right: 24px;
}
/* User box style End */
/* Main Dash 3 End */
/* Alerts Main Section Start */
h3.alert-content, .alerts-main-icon {
display: table-cell;
font-size: .7em;
vertical-align: middle;
padding-bottom: 20px;
color:#4a90e2;
}
h3.alert-content{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 180px;
}
.alert-box{
position: relative;
}
.close-alert {
position: absolute;
right: 0;
top: -4px;
}
.alerts-main-icon{
margin-right: 17px;
width: 25px;
}
.close-alert i {
font-size: .75em;
color: #4a90e2;
}
/* Alerts Main Section End */
/* Contacts Start*/
.back-from-add-edit {
font-size: 11px;
font-weight: bold;
color: #1a467c;
position: absolute;
left: 5%;
cursor: pointer;
}
.contact-flex {
display: flex;
justify-content: center;
}
.contact-column {
width: 50%;
padding-bottom: 124px;
display: flex;
align-items: center;
flex-direction: column;
}
.custFormBox {
width: 440px;
display: flex;
flex-direction: column;
}
.cust-main-header-wrapper {
display: flex;
align-items: center;
}
.cust-h2 {
font-size: 16px;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
margin-top: 64px;
}
.cust-req-msg {
margin-left: 16px;
font-size: 12px;
color: #9b9b9b;
}
.first-h2{
display:inline-block;
}
.cust-header{
display: inline-block !important;
}
.add-contact{
font-size: 12px;
display: inline-block;
background-color: transparent;
padding: 3px 0px !important;
margin-top: -7px;
color: #4a90e2;
}
.leftNavListItem{
border: 1px solid #B9B9B9;
border-radius: 5px;
padding:5px;
}
div#contact-container, div#group-container, div#dupReviewContainer {
position: absolute;
top: 0;
background-color: #f2f3f3;
width: calc(100% - 65px);
height: 100vh;
display: none;
overflow-x: hidden;
overflow-y: auto;
}
#group-container .page-header {
white-space: nowrap;
}
div#contact-container2 {
position: absolute;
z-index: 2;
top: 0;
background-color: #ffffff;
width: calc(100% - 65px);
height: 100vh;
display: none;
overflow-x: hidden;
overflow-y: auto;
}
div#contact-container2 .tub-input-wrapper label {
background-color: #ffffff !important;
}
div#contact-container2 .tub-input-wrapper input {
background-color: #ffffff !important;
}
.pat-col{
padding-top: 58px;
}
.add-pat{
width: 20% !important;
}
.contact-box{
cursor: pointer;
border-radius: 60px;
margin: 5px 0px;
padding: 8px;
}
.contact-box:hover {
opacity: .6;
}
.active-list-cust{
background-color:#fff;
}
.contact-info{
display: table-cell;
padding-left:10px;
}
.contact-info h2{
padding-bottom:2px;
}
.contact-info p {
font-size: .6em;
color: #9b9b9b;
margin-top: 3px;
}
.user-initials{
color:#fff !important;
}
div#top-info {
text-transform: uppercase;
margin-top:20px;
font-weight: 600;
color: #9b9b9b;
font-size: .75em;
}
#adminListContent, #adminList-inactiveContent{
margin-top:20px;
}
#customerFilter_quick, input#referralFilter {
background-color: #fff !important;
font-family: "Roboto";
border: unset;
font-size: .75em;
color: #4a90e2 !important;
border-radius: 30px;
margin-bottom: 5px;
height: 39px !important;
width:100% !important;
margin-top:25px;
}
div#fieldFilter {
margin: 10px 0px 20px 0px;
padding: 7%;
background-color: #f4f4f4;
border: 1px solid #9b9b9b;
border-radius: 10px;
}
.filter-modal-btn-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 3.625rem;
}
#fieldFilter .small-link {
color: #4a90e2;
}
#fieldFilter .small-link:hover {
color: #7dbe3e;
}
.customerFieldFilter{
font-size: .75em;
color: #9b9b9b !important;
border-radius: 30px;
margin-bottom: 5px;
margin-top:5px;
position: relative;
}
.customerFieldFilterBadge{
font-size: .8em;
vertical-align: top !important;
}
.customerFieldFilterBadgeOff{
color: #9b9b9b;
}
.search { position: relative;
}
.search input { text-indent: 30px;}
.search .fa-search {
color: #9b9b9b;
position: absolute;
top: 13px;
left: 15px;
font-size: 15px;
}
.search .fa-filter {
color: #9b9b9b;
position: absolute;
top: 13px;
right: 15px;
font-size: 15px;
}
.search .dash-search-clear {
display: none;
position: absolute;
right: 20px;
top: 13px;
}
.basic-info{
position: relative;
margin-top:30px !important;
}
.user-essentials {
display: table-cell;
vertical-align: middle;
}
.cust-name, .cust-contact-info{
padding-left:14px;
display: block;
}
ul.cust-contact-info li {
font-size: .75em !important;
color: #9b9b9b !important;
}
.cust-email{
/* width: 250px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}
.cust-email span {
color: #4a90e2;
}
.user-essentials ul.cust-contact-info li.cust-overflow-bounce {
color: #ff3333 !important;
}
.cust-contact-bounced {
margin-right: 15px;
font-weight: bold;
color: #ff3333 !important;
position: relative;
cursor: pointer;
}
.cust-contact-bounced i {
margin-right: 6px;
font-weight: 500;
color: #ff3333 !important;
}
h1.cust-name {
font-size: 1.5em;
font-weight: bold;
color: #232323;
}
ul.cust-contact-info{
margin-top:3px;
}
ul.cust-contact-info li {
display: inline-block;
font-size: .875em;
margin-right: 23px;
line-height: 1.2em !important;
font-weight: normal;
color: #000;
}
.user-essentials ul.cust-contact-info li{
font-size: 12px !important;
color: #4a90e2 !important;
margin-top: 8px;
display: block !important;
}
.sub-info{
margin-top:45px;
}
.input-skinny {
background-color: #fff !important;
border: solid 2px #4a90e2;
font-size: 15px;
color: #4a90e2 !important;
border-radius: 30px;
margin-bottom: 5px;
height: 28px !important;
width: 144px !important;
padding: 0 20px;
}
.sub-info-box {
display: inline-block;
padding-right:3%;
margin-bottom: 38px;
}
.sub-info-box:last-of-type{
padding-right:0% !important;
}
.info-box{
width:100%;
}
.pref-box{
width:40%;
}
.doc-box{
width:27%;
}
.sub-info h2{
padding-bottom:16px !important;
}
.sub-info table {
width: 100%;
}
tr.sub-info-titles td {
font-family: "Montserat";
font-size: .625em;
color: #1a467c;
text-align: center;
/* padding-bottom:7px; */
}
tr.sub-info-values td {
text-align: left;
font-size: .825em;
color: #000;
}
.sub-info-box table tr td {
display: inline-block;
width: 130px;
padding: unset !important;
vertical-align: top;
}
.sub-info-box table tr {
display: block;
width: 100%;
padding-left: 23px;
}
div#addCont {
padding-left: 23px;
}
h3.pi-label {
font-size: 10px;
color: #1a467c;
padding-bottom: 10px;
text-transform: capitalize;
font-weight: 600;
}
img#balloon {
width: 70%;
margin-left: 15%;
margin-top: 10vh;
}
/* .documents td:first-of-type{
padding-bottom: 4px;
}
.documents td:last-of-type{
color: #4a90e2;
} */
.journey-container {
display: none;
}
table.status-table {
width: 100%;
}
/* .status-container {
width: 600px;
} */
.status-table i.fa-check {
font-size: 22px !important;
padding: 3px;
position: relative;
font-size: 1.5em;
border: 2px solid #7dbe3e;
background-color: #fff;
color: #fff;
border-radius: 25px;
width: 30px;
height: 30px;
cursor: pointer;
pointer-events: none;
}
.status-table .sent-message i.fa-check {
padding: 3px;
border: 2px solid #7dbe3e;
background-color: #7dbe3e;
color: #fff;
border-radius: 25px;
width: 30px;
height: 30px;
cursor: pointer;
}
table.status-table h3 {
width: fit-content;
margin: 0 auto;
font-size: 10px;
color:#545454;
padding-top: 5px;
padding-bottom: 6px;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inner-journey {
text-align: center;
}
.inner-journey:hover .icons .fa-check {
background-color: #b8d999;
color: #b8d999;
border-color: #b8d999 ;
}
.sent-message .inner-journey:hover .icons .fa-check {
background-color: #b8d999 !important;
color: #fff !important;
border-color: #b8d999 !important;
}
p.status-text.status-sent-message {
font-size: 8px;
color: #232323;
cursor: pointer;
}
p.status-text.status- {
font-size: 8px;
color: #232323;
cursor: pointer;
}
#svg{
pointer-events: none;
z-index:0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
#line{
stroke-width:2px;
stroke:#7dbe3e;
}
/* Add Customer Form */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #d6d6d6 !important;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #d6d6d6 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #d6d6d6 !important;
}
div#top-info-divide {
text-transform: uppercase;
margin-bottom: 20px;
font-weight: 600;
color: #9b9b9b;
font-size: .75em;
}
.top-info-divide {
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 20px;
font-weight: 600;
color: #9b9b9b;
font-size: .75em;
}
.right-add input[type=radio] {
margin-bottom: 30px !important;
}
div.optional-fields, .show-contacts {
text-transform: capitalize;
cursor: pointer;
margin-top:25px;
margin-bottom: 25px;
padding-bottom: 8px;
margin-bottom: 20px;
font-weight: normal;
color: #4a90e2 !important;
font-size: 14px !important;
}
#contactsContainer{
display: none;
}
.left-add {
width: 50%;
display: inline-block;
}
#adminDialog .left-add{
position: relative;
width: 50%;
display: block !important;
margin: 0 auto !important;
max-width: 440px;
}
.left-add select, .left-add input{
background-color:#fff !important;
}
.right-add {
width: 50%;
padding-left:9%;
display: inline-block;
vertical-align: top;
}
#contact-container label {
display: block;
font-size: .625em;
color: #9b9b9b;
font-weight: bold;
padding-bottom:5px;
}
#contact-container input, #contact-container select {
font-size: .75em;
width: 96%;
padding: 12px 4%;
border-radius: 25px;
border: unset;
margin-bottom: 23px;
}
.multi-select {
width: 96%;
background-color: #fff;
border-radius: 40px;
text-align: center;
margin-bottom: 23px;
}
div#admin-editor .multi-select {
background-color: #f2f3f3;
}
div#admin-editor .left-add input {
background-color: transparent !important;
}
.contact-container .multi-select, div#admin-editor .left-add .multi-select select {
background-color: #f2f3f3 !important;
}
#contact-container select {
height: 40px;
width: 88%;
margin-bottom:0px !important;
border: 0px solid !important;
background-color: #f4f4f4;
padding: 12px 4% 12px 0% !important;
}
div#edit-cust-pop {
position: absolute;
right: 3%;
top: 25px;
font-size: 1.375em;
color: #4a90e2;
cursor: pointer;
}
#edit-cust-pop:hover {
color: #7dbe3e !important;
}
div.edit-popover{
display: none;
width: 328px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
position: absolute;
right: 0;
top: 15px;
}
.edit-popover i.fas.fa-times {
position: relative;
float: right;
clear: both;
color: #9b9b9b;
}
.fa-times{
cursor: pointer;
}
.edit-popover p {
margin-top: 20px;
font-size: .75em;
font-weight: 600;
color: #9b9b9b;
cursor: pointer;
width: fit-content;
}
.edit-popover p:hover{
color:#1a467c;
}
.single-history{
margin-bottom: 25px;
padding-left: 23px;
}
.history-messages {
width: 100%;
/* max-height: 175px; */
/* overflow-y: auto; */
}
.history-messages::-webkit-scrollbar {
width: 4px;
border-radius: 8px;
}
.history-messages::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1);
border-radius: 8px;
}
.history-messages::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
/* outline: 1px solid #1a467c; */
}
.history-container #load-more{
padding-left: 23px;
}
a.page-chat {
display: block;
margin-top: 20px;
margin-bottom: 40px;
text-align: center;
text-decoration: none;
}
.history-date{
font-size: 13px;
font-weight: 500;
color: #1A467C;
font-family: 'Roboto';
margin-bottom: 7px;
}
.history-date a {
text-decoration: none;
}
.history-details{
font-size: 13px;
font-weight: normal;
line-height: 1.3;
color: #545454;
display: flex;
align-items: center;
}
.history-details::first-letter{
text-transform: capitalize;
}
.history-details a {
text-decoration: none;
}
.status-icon-circle {
margin-right: 5px;
}
.patient-profile-go-to-message {
color: #4a90e2;
cursor: pointer;
margin-left: 10px;
font-weight: normal;
}
.patient-profile-go-to-message:hover {
color: #7dbe3e;
}
.event-history-opened {
color: #7dbe3e;
}
.history-container-half {
width: 60% !important;
}
.history-container{
margin-top: 46px;
display: none;
width: 100%;
display: inline-block;
}
.documents-container {
margin-top: 46px;
display: none;
width: 30%;
/* display: inline-block; */
}
.single-document {
padding-left: 20px;
margin-bottom: 18px;
color: #4a90e2;
font-size: 12px;
line-height: normal;
text-align: left;
cursor: pointer;
}
.single-document:hover {
color: #7dbe3e;
}
.cust-hist-doc-container {
display: flex;
justify-content: space-between;
}
.consult-container {
width: 100%;
/* margin-left: 3%; */
vertical-align: top;
margin-top: 46px;
}
ul.consults-wrapper {
/* width: 310px; */
/* overflow-y: auto; */
/* height: 205px; */
}
ul.consults-wrapper::-webkit-scrollbar {
width: 4px;
border-radius: 8px;
}
ul.consults-wrapper::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1);
border-radius: 8px;
}
ul.consults-wrapper::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
/* outline: 1px solid #1a467c; */
}
.cust-submit-btn-flex {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 60px;
}
/* Contacts End */
/* Editor container - abstration of contact container */
#businessAdDialog_text {
height: 150px !important;
}
.toastHelpForum {
color: #4a90e2;
transition: color .3s;
cursor: pointer;
margin-left: 8px;
}
.toastHelpForum:hover {
color: #7dbe3e;
}
#_mediaSourcePopup.editor-container label {
margin-top: 14px;
display: block;
font-size: 14px;
color: #414141;
font-family: Spartan;
font-weight: bold;
line-height: 1.5;
margin-bottom: 3px;
margin-left: 20px;
}
.editor-container textarea {
color: #9b9b9b;
font-size: .75em;
width: 96%;
padding: 20px;
border-radius: 10px;
border: unset;
margin-bottom: 23px;
border: unset !important;
background-color: #f4f4f4;
}
/* to offset style aboce... */
#graceconfPlaceHolder textarea {
width: 100%;
padding: 0;
border-radius: 0;
margin-bottom: 0;
background-color: transparent;
}
.editor-container input, .editor-container select {
font-size: .75em;
width: 96%;
padding: 12px 4%;
border-radius: 25px;
border: unset;
margin-bottom: 23px;
}
/* to offset style aboce... */
#graceconfPlaceHolder input {
width: 100%;
padding: 16.5px 14px;
border-radius: 0;
margin-bottom: 0;
}
#adminDialog input {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
max-width: 480px;
font-size: 16px;
background: transparent !important;
padding: 17px 41px;
border: solid 2px #232323;
color: #232323;
border-radius: 40px;
}
input {
background-color: #f4f4f4 !important;
}
.editor-container select {
height: 40px;
width: 88%;
margin-bottom:0px !important;
border: 0px solid;
background-color: #f4f4f4;
}
.platformParent{
width:100%;
border:solid 1px black;
background: rgb(230, 228, 228);
height:550px;
overflow-y:scroll;
}
.platformContainer{
background: rgb(255, 255, 255);
color: #161515;
border-style: solid;border-width:1px;
margin: 2px;
padding:12px;
border-radius: 15px;
}
.removePlatform {
font-size: 1.15em;
color: #afb1b5;
position: absolute;
right: 0;
margin-right: 4px;
cursor:pointer;
}
.editPlatform {
font-size: 1.15em;
color: #afb1b5;
position: absolute;
left: 0;
margin-right: 4px;
cursor:pointer;
}
.availablePlatforms{
max-height:500px !important;
overflow:scroll;
}
.clickable{
cursor: pointer;
}
.imageUploadPanel{
padding:20px;
border-radius: 40px;
text-align: center;
border-style: solid;border-width:1px;
}
.imageUploadPanel label{
font-size: 1.15em;
color: #afb1b5;
}
.uploadFileName{
font-size: .8em;
color: #6e6e70;
margin-bottom: 5px;
}
.editor-container select[multiple] {
height: auto;
width: 88%;
margin-bottom:0px !important;
border: 0px solid !important;
background-color: #fff;
}
.thanks-text p {
text-align: left !important;
padding-bottom: 50px !important;
}
.preview-dialog-sms {
padding: 8px 12px;
background: #e5e6ea;
color: #000000;
border: 1px solid #e5e6ea;
border-radius: 17px;
width: 90%;
vertical-align: middle;
margin: 3% 5% 0% 3%;
font-size: 15px;
line-height: 1.2;
}
span.previewInitials {
font-size: 9px;
display: inline-block;
color: #fff;
background-color: #1a467c;
width: 25px;
text-align: center;
padding: 8px 0px;
border-radius: 25px;
font-weight: normal;
}
div#previewCustInfo {
padding: 0px 2% 15px 2%;
background-color: white;
flex-direction: column;
}
div.previewHead {
font-family: Spartan !important;
font-size: 14px;
}
div.previewButtons {
display: flex;
margin-top: 8px;
}
span.previewName {
margin-left: 3px;
font-size: 13px;
font-weight: bold;
color: #1a467c;
}
span.previewPhone {
font-size: 10px;
color: #4a90e2;
margin-left: 5px;
vertical-align: middle;
display: inline-block;
}
.preview-dialog {
/* max-width: 375px !important;
max-height: 642px !important; */
height: 768px !important;
width: 375px !important;
background: transparent !important;
position: relative !important;
margin: 0 auto;
}
.preview-dialog-tablet {
width: 768px !important;
}
.preview-dialog-desktop {
width: 1024px !important;
}
.preview-dialog-content{
display: none;
overflow-x: hidden;
height: 615px;
background: #fff;
}
#previewEmailPreviewContent {
overflow: hidden;
}
.ls-email-prev {
width: 100%;
height: 100%;
margin-top: 1.25rem;
}
.preview-mesg-text {
display: flex;
justify-content: space-evenly;
background-color: white;
text-align: center;
color: #4a90e2;
/* text-decoration: underline; */
font-weight: bold;
font-size: 12px;
}
.preview-mesg-text-ul {
text-decoration: underline;
}
.preview-mesg-text-bubble {
height: 571px;
overflow: scroll;
margin-top: 44px;
}
.preview-mesg-text-bubble div {
width: 75%;
font-size: 16px;
line-height: 1.4;
}
.preview-mesg-text-bubble img.engagement-text-tail {
z-index: -1;
}
.preview-mesg-img {
width: 100%;
max-height: 31.25rem;
object-fit: contain;
}
.show-mesg-prev-butt:hover {
cursor: pointer;
color: #7dbe3e;
}
.lightningPreviewShadow {
box-shadow: 0 8px 24px 0 rgb(16 22 26 / 20%), 0 2px 4px 0 rgb(16 22 26 / 20%);
border-radius: 10px;
}
.preview-dialog-close-container{
height: 40px;
border-radius: 0px 0px 10px 10px;
background: white;
}
.singleRightPane{
width:80%;
margin-top: 50px;
-webkit-transition: margin-left .5s; /* Safari */
transition: margin-left .5s;
}
.singleRightPaneHeader{
color: #7dbe3e;
font-weight: bold;
font-size: 1em;
padding-bottom: 10px;
}
.opesReviewsContainer{
max-height: 80%;width:90%;overflow:scroll;
}
.opesReviewUser {
font-size: .6em;
color: #9b9b9b;
margin-top: 3px;
}
.opesReviewText {
font-size: 1em;
color: #3d3b3b;
margin-top: 3px;
}
.socialRatingHeader{
margin-left:15px;
margin-top: 20px;
}
.socialRatings{
width: 96%
}
span.reviewError {
display: block;
font-size: .75em;
color: #ff0000;
margin-top: 10px;
}
.pctStarParent {
display: block;
font-size: 16px;
position: relative;
overflow: hidden;
margin-top:5px;
}
.pctStarParentWrap {
display: inline-block;
position: relative;
height: 19px;
}
.pctStarParent .pctStarActive {
color: #EEBD01;
position: relative;
z-index: 10;
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
.pctStarParent .pctStarInactive {
color: grey;
position: absolute;
top: 0;
left: 0;
-webkit-text-stroke: initial;
}
.handWave{
margin-bottom: 10px;
margin-top: 20px;
width: 100%;
display: block;
height: 42px;
font-family: AppleColorEmoji;
font-size: 32px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: var(--black);
}
/* Contacts End */
/* Login Style Start */
#login-page{
display: block;
height: 100vh;
overflow: hidden;
}
.media-container {
width: 50%;
height: 100vh;
display: inline-block;
}
.login-image{
background-image: url(/images/rocket.svg);
background-size: cover;
background-position: center center;
}
.forgot-image
.media-container img{
width: 100%;
display: block;
}
.login-container {
width: 49%;
display: inline-block !important;
vertical-align: top;
height: 100% !important;
vertical-align: middle;
margin-top: -530px !important;
overflow-y: auto;
}
h1.login-title {
width: 100%;
text-align: center;
font-size: 2em;
font-weight: bold;
color: #1a467c;
}
p.slogan {
width: 100%;
font-size: .75em;
color: #9b9b9b;
margin-top:16px;
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}
.login-container .parentContainer {
width: 400px !important;
display: block !important;
margin: 0 auto !important;
overflow-y: hidden;
overflow-x: hidden;
height: auto !important;
}
#login-page form input {
height: 48px;
width: 88%;
margin-left: 2%;
border: unset;
border-radius: 40px;
font-size:10px !important;
padding: 0 4%;
color:#9b9b9b !important;
background-color: #f4f4f4 !important;
margin-bottom: 23px;
}
.invalid{
border: 2px solid #ff0000 !important;
}
.invalid-label{
color: #ff0000 !important;
}
#login-page form h3 {
font-size: .625em;
color: #9b9b9b;
margin-bottom:5px;
padding-left: 4%;
font-weight: bold;
}
#login-page h2 {
padding-left:4%;
color: #7dbe3e;
font-weight: bold;
font-size: 1em;
padding-bottom: 20px;
}
h5.little-header{
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.4;
letter-spacing: normal;
color:#9b9b9b;
font-size:.625em;
}
.dash-container h5.little-header{
margin-top:30vh;
}
.sponsored-banner-container{
width:100%;
height:112px;
}
.sponsored-banner-image{
max-width:100%;
max-height:110px;
display: block;
}
.biz-message-container{
width:100%;
border:2px dotted #9b9b9b;
}
.biz-list-desc{
font-size: 9pt;
font-weight: bold;
}
.biz-message-container h3{
color: #000000;
font-weight: bold;
font-size: 1em;
}
.biz-message-container pre{
font: 10pt 'Open Sans', sans-serif;
}
#powered-by{
text-decoration: none !important;
color:#afb1b5;
}
#submit-container{
width: 100%;
text-align: center;
}
a.back-link {
text-decoration: none;
font-size: 1em;
color: #4a90e2;
display: inline-block;
}
h3#login-alert {
padding-left:4%;
height: 10px;
font-size: .625em;
width: 100%;
text-align: left;
margin-top: -25px;
margin-bottom: 22px;
color: #ff0000;
}
div#email-alert {
font-size: .75em;
color: #ff0000;
margin-bottom: 7px;
line-height: 1.3;
}
.alert-message{
font-size: .75em;
color:#ff0000;
}
div#add-confirmed {
width: 100%;
text-align: center;
padding: 10% 0;
background-color: #eff9f5;
}
.dead-button{
color: #9b9b9b;
border-color: #9b9b9b;
background-color:#f4f4f4;
pointer-events: none;
}
.dead-link{
color: #9b9b9b !important;
pointer-events: none;
}
.dead-link span {
color:#9b9b9b !important;
}
#add-confirmed h2 {
padding-bottom: 0px !important;
}
#success-check{
color:#7dbe3e;
font-size:2em;
}
.filter-buttons{
color:#7dbe3e;
font-size:.70em;
}
/* Login Style End */
/* forgot password page start */
#forgot-page{
display: block;
height: 100vh;
overflow: hidden;
}
.forgot-image{
background-image: url(/images/mountain.svg);
background-size: cover;
background-position: center center;
}
.password-reset{
text-align: center;
}
.password-reset h1{
font-size: 1.625em;
color: #9b9b9b;
width: 100%;
text-align: center;
margin-bottom: 3vh;
}
.password-reset h3{
font-size:.875em;
color: #000;
width: 88% !important;
margin-left: 6%;
text-align: center;
margin-bottom:3vh;
}
#forgot-page #login-alert{
margin-top:-10px !important;
}
#forgot-page form input {
height: 48px;
width: 88%;
margin-left: 2%;
border: unset;
border-radius: 40px;
padding: 0 4%;
background-color: #f4f4f4 !important;
margin-bottom: 23px;
}
/* Admins View */
ul#adminListContent li i, ul#adminList-inactiveContent li i {
color: #4a90e2;
padding: 5px;
font-size: .825em;
position: absolute;
right: 0;
top: 16px;
}
button.clickable.quick-link.small-link {
margin-top: 34px;
}
ul#adminListContent li i.fa-envelope, ul#adminList-inactiveContent li i.fa-envelope {
vertical-align: middle;
}
div#adminDialog_locations label {
display: inline-block;
vertical-align: middle;
font-size: .5em;
color: #9b9b9b;
}
div#adminDialog_locations input {
display: inline-block;
}
div#adminDialog_locations input {
display: inline-block;
padding: 2px !important;
width: 20px !important;
height: 20px !important;
margin-bottom: 5px !important;
}
div#adminDialog_locations .form-radio:checked::before {
position: absolute;
font: 5px/1 'Open Sans', sans-serif;
left: 3px;
top: 2px !important;
content: '\02143';
transform: rotate(40deg);
}
.cancel-link{
border:none !important;
font-size: 10px;
width: 100px !important;
background-color: transparent !important;
}
.cancel-link:hover {
background-color: unset;
border: unset !important;
}
.cancel-link:active {
background-color: unset !important;
color: #4a90e2;
border: unset !important;
}
#add-staff{
/* margin-left: 24px; */
margin-top: 20px;
/* margin-bottom: 20px; */
font-size: 12px !important;
}
#add-staff.skinny-button{
width: 144px !important;
padding: 8px 10px !important;
font-size: 14px !important;
}
ul#adminListContent li, ul#adminList-inactiveContent li {
position: relative;
margin-bottom: 10px;
}
.new-staff{
display:none !important;
}
#submit-container button{
cursor: pointer;
}
.is-user{
background: #fff;
border-radius: 40px;
}
ul#adminListContent .contact-info, ul#adminList-inactiveContent .contact-info {
padding-top:7px;
}
/* Admins End */
/* Profile Start */
.not-profile{
display:none !important;
}
.profile-editor .right-add input, .profile-editor .right-add label:first-of-type, .profile-editor .right-add .small-link, .profile-editor .nope
, .profile-editor #adminDialog_cancel {
display: none;
}
.profile-editor .right-add{
margin-top:-16px;
}
#admin-editor input {
border-color: #777c80 !important;
color: #777c80 !important;
}
#admin-editor .swift-input label{
color: #777c80 !important;
}
#admin-editor input.form-radio {
color: #fff !important;
}
input#adminDialog_active,
input#adminDialog_immu {
color: #fff !important;
}
#user-info{
display: none !important;
}
p.cur-loc {
font-size: .625em;
color: #9b9b9b;
display: inline-block;
}
/* Profile End */
/* forgot password page end */
/* FontAwesome */
.address-book {
width: 18px;
height: 21px;
object-fit: contain;
font-family: FontAwesome5FreeSolid;
font-size: 20px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #9b9b9b;
}
.storyHeaderLogo {
max-height: 40px;
max-width: 87px;
margin-left: 30px;
}
/* Confirmation Dialog Pop-Up */
*, *:after, *:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@keyframes fade {
from {
opacity: 0;
transform: translate(-50%, -50%) scale(0.8);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
.confirm {
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
padding: 40px 40px 80px 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 280px;
max-width: 400px;
max-height: 90vh;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
overflow-y: auto;
}
.confirm h1 {
text-align: center;
font-family: Spartan !important;
font-size: 1.25rem;
font-weight: bold;
color: #1a467c;
margin: 0 0 .625rem 0;
}
.confirm p {
text-align: center;
font-size: .875em;
color: #232323;
line-height: 1.33;
margin: 0 0 15px 0;
}
.confirm button {
font-size:1em;
padding: 8px 25px;
width: 50% !important;
max-width: 180px;
border-radius: 25px;
text-decoration: none;
border: 1px solid #4a90e2;
color: #4a90e2;
cursor: pointer;
text-wrap: nowrap;
}
@media screen and (max-width: 450px){
.confirm button {
padding: 8px;
width: 110px !important;
}
}
.confirm button:nth-of-type(1) {
background-color: transparent;
}
.confirm button:nth-of-type(2) {
right: 40px;
background-color: #f4f4f4;
border-color:#9b9b9b !important;
color: #9b9b9b;
}
.confirm button:hover {
outline:0 !important;
border: 1px solid #7dbe3e !important;
color: #7dbe3e;
font-weight: normal;
background: #fff;
}
.confirm button.filled-button:hover{
border: 2px solid #7dbe3e !important;
}
#helpForumLinky {
color: #4a90e2;
}
#helpForumLinky:hover {
color: #7dbe3e;
cursor: pointer;
}
.modal-forum-wrapper {
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
padding: 40px 40px 80px 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 280px;
max-width: 638px;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
}
.modal-forum-wrapper .x-help-forum {
float: right;
height: 19px;
width: 19px;
cursor: pointer;
}
.modal-forum-wrapper .forum-content {
margin-left: 41px;
margin-right: 41px;
margin-top: 23px;
}
.modal-forum-wrapper h1 {
font-size: 1.2rem;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1.5;
color: #1a467c;
margin-bottom: 11px;
}
.modal-forum-wrapper p {
font-family: Roboto;
font-size: 16px;
line-height: 1.5;
color: #1a467c;
margin-bottom: 21px;
}
.modal-forum-wrapper p .forum-imp {
font-weight: bold;
}
.modal-forum-wrapper p a {
color: #4a90e2;
}
.modal-forum-wrapper .req-msg {
font-size: Roboto;
font-size: 12px;
color: #9b9b9b;
margin-bottom: 31px;
}
.modal-forum-wrapper input, .form-textarea {
width: 100%;
border-radius: 28px;
border: solid 2px #777c80 !important;
padding: 18px 18px !important;
margin-bottom: 24px;
min-height: 56px;
max-height: 140px;
font-size: 12px;
color: #777c80;
text-decoration: none;
resize: none;
outline: none;
background-color: #f4f4f4;
}
.modal-forum-wrapper .forum-btn-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0px;
margin: 0px;
}
.modal-forum-wrapper button {
margin-top: 38px;
}
.modal-forum-wrapper button.filled-button:hover{
border: 2px solid #7dbe3e !important;
}
/* Tablet */
@media screen and (max-width: 1024px) {
.modal-forum-wrapper {
max-height: 100%;
max-width: 511px;
}
.modal-forum-wrapper .forum-content {
margin: 56px;
}
}
/* Mobile device */
@media screen and (max-width: 606px) {
.modal-forum-wrapper {
height: 100%;
width: 100%;
padding: 0 !important;
margin: 0 !important
}
.modal-forum-wrapper .x-help-forum {
margin-top: 19px;
margin-right: 19px;
cursor: pointer;
}
}
button#profileImageDialog_submit {
width: 186px !important;
position: relative;
margin: 0 auto;
left: unset !important;
right: unset;
display: block;
margin-top: 30px;
}
div#closeProfileUpload i {
font-size: 22px;
color: #4a90e2;
}
div#closeProfileUpload {
position: absolute;
right: 26px;
top: 18px;
}
div#profileImageDialog .confirm {
padding-top: 56px !important;
padding-bottom: 40px !important;
}
h6#profileImageDialog_err {
font-size: 12px;
width: 100%;
color: #ff0000;
text-align: center;
margin-top: 10px;
}
.confirm button:active,
.confirm button:focus {
outline:0 !important;
}
.confirm button:active{
border-color: #4a90e2 !important;
background-color: #4a90e2 !important;
color:#fff !important;
}
.confirm-lg {
padding: 40px 40px 80px 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 400px;
max-width: 800px;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
}
.confirm-lg h1 {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #232323;
margin: 0 0 10px 0;
}
.confirm-lg p {
text-align: center;
font-size: .875em;
color: #232323;
line-height: 1.33;
margin: 0 0 15px 0;
}
.confirm-lg button {
font-size:1em;
padding: 8px 25px;
/* width:38% !important; */
border-radius: 25px;
text-decoration: none;
border: 1px solid #4a90e2;
color: #4a90e2;
position: absolute;
bottom: 27px;
cursor: pointer;
}
.confirm-lg button:nth-of-type(1) {
background-color: transparent;
}
.confirm-lg button:nth-of-type(2) {
right: 40px;
background-color: #f4f4f4;
border-color:#9b9b9b !important;
color: #9b9b9b;
}
.confirm-lg button:hover {
outline:0 !important;
border: 1px solid #7dbe3e !important;
color: #7dbe3e;
font-weight: normal;
background: #fff;
}
.confirm-lg button:active,
.confirm-lg button:focus {
outline:0 !important;
}
.confirm button:active{
border-color: #4a90e2 !important;
background-color: #4a90e2 !important;
color:#fff !important;
}
.video-chat-messages-table-parent{
height: 300px;
overflow: scroll;
}
.video-chat-messages-table{
width: 100%;
}
.video-chat-messages-table th, td {
padding: 3px;
text-align: left;
}
.video-chat-messages-table td input[type="checkbox"] {
float: left;
margin: 0 auto;
width: 100%;
}
.video-chat-messages-table td {
vertical-align: middle;
}
.video-chat-messages-table th {
font-weight: bold;
}
/* .video-chat-messages-table th, td {
border-bottom: 1px solid #ddd;
} */
.video-chat-messages-table tr:nth-child(even) {
background-color: #f2f2f2;
}
h3.activity-content a {
text-decoration: none;
color: #4a90e2;
cursor: pointer;
}
h3.activity-content a:hover {
color: #7dbe3e;
}
h3.activity-content a:active {
color: #4a90e2;
text-decoration: underline !important;
}
#_location_dialog_ p{
font-size:.825em !important;
}
#_locSelect{
color: #9b9b9b;
}
#_location_dialog_ h1 {
font-size:30px !important;
}
#_location_dialog_ .multi-select{
background-color: #f4f4f4;
}
select#_locSelect {
background-color: #f4f4f4;
}
#_location_dialog_ .confirm button {
font-size: 1em;
padding: 11px 25px;
width: 182px !important;
margin: unset !important;
position: relative !important;
left:unset;
top:unset;
bottom: unset;
right: unset;
}
#_location_dialog_ .confirm button:hover{
font-weight:normal !important;
}
#_location_dialog_ .submit-container {
width: 100%;
text-align: center;
}
#_location_dialog_ .confirm{
max-width:500px !important;
padding: 25px 100px 80px 100px !important;
}
/* Messages Style Start */
.journey-link {
cursor: pointer;
}
.journey-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 80px 12%;
height: 100%;
z-index: 1000;
background-color: rgba(190, 190, 190, 0.8);
overflow: hidden;
}
.journey-box .journey-container{
margin-top: 5px !important;
z-index: 10000;
position: relative;
background-color: #fff;
display: block !important;
}
.journey-box .history-container{
display: block !important;
}
.journey-box #svg{
height: unset !important;
}
.journey-box .fa-times {
z-index: 2 !important;
float: right;
font-size: 1.3em !important;
margin-top: -5px;
margin-right: -7%;
}
.journey-box table.status-table p.status-text{
display:none;
}
.journey-box table.status-table h3 {
/* width: 110px !important; */
}
.journey-wrapper{
padding: 39px 95px;
background-color: #fff;
height: inherit;
overflow-y: auto;
width: 775px;
margin: 0 auto;
border-radius: 10px;
}
.more-history{
display:none;
}
a#load-more, a#load-more-messages, a.more-reviews {
font-size: .625em;
font-weight: 600;
color: #4a90e2;
cursor: pointer;
}
.load-more {
font-size: .625em;
font-weight: 600;
color: #4a90e2;
cursor: pointer;
}
#refresh-act{
cursor: pointer;
display: none;
/* hidden refresh button */
}
span.close-journey {
width: 100%;
text-align: center;
display: block;
margin-bottom: 30px;
font-size: .825em;
color: #9b9b9b;
font-weight: 600;
}
div#previewContainer {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
overflow-x: hidden;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 90000;
background-color: rgba(214,214,214,.8);
padding: 20px 0;
}
#preAppointment div#previewTop{
z-index: 1000;
position: absolute;
top: calc(50vh - 350px);
background-color: transparent;
display: flex;
align-items: center;
justify-content: space-between;
}
div#previewTop {
width: 100%;
padding: 21px 0px;
background-color: white;
text-align: center;
font-size: .875em;
color: #9b9b9b;
font-weight: 600;
font-family: 'Roboto', sans-serif;
border-radius: 10px 10px 0px 0px;
/* border-bottom: 2px solid #b6b6b6; */
}
button.clickable.close-x.preview-close {
position: absolute;
top: 7px;
font-size: 1.2em;
color: #4a90e2;
background: unset;
border: none;
right: 20px;
}
div#_dateDialog_ > .confirm {
width: 400px;
}
div#destination {
margin-bottom: 20px;
}
span.display-email {
display: block;
width: 170px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 12px;
}
div#sendMessageDialogPreview {
width: fit-content;
}
#info-alert h3 {
font-size: .925em;
color: #ff0000;
font-weight: bold;
margin-bottom: 7px;
}
#info-alert p {
font-size: .875em;
line-height: 1.33;
}
#info-alert a {
color: #4a90e2 !important;
text-decoration: none;
}
div#info-alert {
padding: 14px;
border: 1px solid #979797;
margin-left: -15px;
border-radius: 10px;
max-width: 430px;
margin-bottom: 25px;
}
.message-override{
display:none;
}
.type-name{
text-transform: capitalize;
}
.tip-message{
font-size: .875em;
color: #000;
font-weight: normal;
padding-top:12px;
line-height: 20px;
max-width:400px;
}
.info-header{
font-size:.8em;
color: #1a467c;
font-weight: bold;
}
.highlight{
color: #4a90e2;
}
.highlight:hover{
color: #7dbe3e;
cursor: pointer;
}
.highlight:active{
color: #4a90e2;
text-decoration: underline;
}
.action-text{
cursor: pointer;
}
#message-action{
margin-top:5px;
}
.prediction-container {
padding-left: 15px;
padding-top: 20px;
max-width: 425px;
}
#show-options{
display: block;
}
.hide-options{
display:none;
}
.message-override {
padding: 25px;
border: solid 1px #979797;
border-radius: 13px;
margin-bottom:50px;
}
#sendMsgDialog_err{
margin-top:-20px;
margin-bottom:20px;
font-size: .75em;
color:#ff0000;
}
.comm-selected{
color: #f4f4f4;
background-color: #4a90e2;
}
p#select-sms {
margin-top: 15px;
margin-right:10px;
}
.message-override .standard-h4 {
margin: 15px 0px;
}
.message-override select{
margin-bottom:15px;
font-size: .75em;
width: 92%;
padding: 12px 4%;
border-radius: 25px;
}
#msgWrapper textarea#sendMsgDialog_msg {
background-color: #f4f4f4;
width: 96% !important;
padding: 3% 4%;
resize: none;
cursor: inherit;
outline: none;
margin-bottom:23px;
}
#msgWrapper input#sendMsgDialog_title {
background-color: #f4f4f4;
border: 1px solid #9b9b9b;
border-radius: 0px !important;
cursor: inherit;
outline: none;
}
#sendMsgDialog_preview{
width: 100%;
display: block !important;
}
div#sendMessageDialog {
max-width: 430px;
}
.small-link {
width: 104px !important;
font-size: .625em;
padding: 6px 0px !important;
font-weight: 600;
}
.message-radio {
padding: 12px !important;
}
div#sendMessageDialogSocial label {
width: fit-content;
display: inline-block;
vertical-align: top;
margin-top: 13px;
margin-right: 25px;
}
.msgLabel{
width: fit-content;
display: inline-block !important;
vertical-align: top;
margin-top: 13px;
margin-right: 25px;
}
div#previewMessageParent {
position: relative;
height: 30px;
margin-left: 225px;
margin-bottom: -49px;
font-size: .875em;
}
.dest{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 65px;
}
.appointment-date p{
font-size: .825em;
color:#1a467c;
}
.appointment-date{
text-align: center;
}
.appointment-date input.dt_.flatpickr-input{
border: solid 1px #9b9b9b !important;
margin-right: 5px !important;
}
#_dateDialog_ .confirm{
padding-bottom: 40px !important;
}
#_dateDialog_ button{
width:70% !important;
background-color: transparent !important;
}
h3.version {
font-size: .625em;
font-weight: bold;
color: #1a467c;
padding-top: 20px;
padding-bottom: 13px;
}
/* Messages Style End */
/* Start Help form style */
.help-layout #col2{
width: 100% !important;
padding: 60px 40px;
overflow-y: auto;
}
.help-layout #col3{
padding-top: 60px !important;
max-width: 600px !important;
}
#helpMessage_subject {
padding: 16px 16px !important;
}
textarea#helpMessage_msg {
outline: none;
height: 30vh;
border-radius: 24px !important;
padding: 16px !important;
background-color: #f2f3f3;
resize: none;
}
button#submitHelp {
margin: 0 auto;
display: block;
}
#helpMessage_msg::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #d6d6d6 !important;
opacity: 1; /* Firefox */
line-height: 1.625em;
font-weight: normal !important;
}
.help-header{
font-size: 1.125em;
color: #7dbe3e;
font-weight: 500;
}
h3.version {
font-size: .625em;
font-weight: bold;
color: #1a467c;
padding-top: 20px;
padding-bottom: 13px;
}
i{
font-style: italic;
}
span.note-date {
font-weight: normal;
padding-left: 5px;
}
ul.note-list {
list-style: disc;
padding-left: 30px;
font-size: 12px;
line-height: 1.52;
color: #9b9b9b;
padding-top: 8px;
padding-bottom: 16px;
}
ol.release-list li {
margin-bottom: 8px;
}
ol.release-list {
list-style: decimal;
font-size: .75em;
line-height: 20px;
color: #9b9b9b;
padding-left: 25px;
}
h2.whats-new {
color: #9b9b9b;
font-weight: normal;
line-height: 20px;
padding-bottom: 0;
font-size: 1em;
}
h4.note-title {
font-size: .75em;
line-height: 20px;
color: #9b9b9b;
font-weight: bold;
}
p.note-paragraph {
color: #9b9b9b;
font-size: .75em;
line-height: 20px;
padding-bottom: 20px;
}
.cur-ver{
font-size: 10px !important;
padding-bottom: 0px !important;
padding-top: 8px;
}
h1.help-h1 {
font-size: 1.75em;
color: #9b9b9b;
padding-bottom: 32px;
}
/* End help form style */
/* Start Referral Detail */
.semi-bold{
font-weight: 500 !important;
}
div#formDetail {
position: absolute;
top: 0;
background-color: #fff;
height: 100vh;
margin-left: 65px;
overflow: hidden;
width: 100%;
}
div#refDetail {
z-index: 1000;
position: absolute;
display: none;
top: 0;
background-color: #fff;
height: 100vh;
margin-left: 65px;
overflow: hidden;
width: 100%;
}
div#formGeneralInfo {
margin-bottom: 20px;
}
a#backToForms, a#backToDetail, #backToCustomers, .back-button {
width: fit-content;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: #4a90e2;
margin-top: 60px;
display: block;
cursor: pointer;
text-decoration: none;
}
#backToForms i.fal.fa-long-arrow-left, #backToCustomers i.fal.fa-long-arrow-left {
font-size: 12px;
font-weight: 500;
vertical-align: middle;
}
.input-row {
position: relative;
}
#refDetail h3 , #formDetail h3{
font-size: 20px;
font-weight: bold;
color: #1a467c;
}
#refDetail h4, #formDetail h4 {
display: inline-block;
font-size: 14px;
font-weight: bold;
color: #1a467c;
margin-bottom: 18px;
}
#formDetail input{
/* pointer-events:none; */
}
#refDetail input, #formDetail input, #formDetail textarea{
background-color: #fff;
-webkit-transition: background-color 0.2s ease-out;
-moz-transition: background-color 0.2s ease-out;
-ms-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}
#formDetail input.is-copied, #formDetail textarea.is-copied{
background-color: #7ebe3e2f !important;
}
div#formReferrer {
margin-top: 20px;
}
#refFromLabel{
display: inline-block;
max-width: 190px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: bottom;
}
.title-container {
vertical-align: top;
height: 100vh;
overflow: hidden;
background-color: #f2f3f3;
display: inline-block;
width: 15%;
padding: 58px 0px 0% 58px;
}
.cust-title.title-container{
width: 17% !important;
padding: 58px 0px 0px 58px !important;
}
p.basic-info {
font-size: 12px;
margin-right: 20px;
display: inline-block;
margin-top: 14px;
margin-bottom: 20px;
color: #232323;
}
.archive-form {
margin-top: 0px !important;
color: #4a90e2 !important;
cursor: pointer;
}
.archive-form:hover {
color: #7dbe3e !important;
}
.form-detail-container i {
font-size: 15px;
margin-right: 8px;
}
.ref-detail-container , .form-detail-container {
display: inline-block;
width: 50%;
overflow-y: auto;
padding: 40px;
height: 100vh;
margin-left: -5px;
background-color: #f2f3f3;
}
.ref-detail-container::-webkit-scrollbar , .form-detail-container::-webkit-scrollbar, .referrer-history-container::-webkit-scrollbar {
width: 4px;
}
.ref-detail-container::-webkit-scrollbar-track ,.form-detail-container::-webkit-scrollbar-track, .referrer-history-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.3);
}
.ref-detail-container::-webkit-scrollbar-thumb ,.form-detail-container::-webkit-scrollbar-thumb, .referrer-history-container::-webkit-scrollbar-thumb {
background-color: #4a90e2;
outline: 1px solid #1a467c;
}
/* ref hist */
/* .referrer-history-container::-webkit-scrollbar {
width: 4px;
}
.referrer-history-container::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.3);
}
.referrer-history-container::-webkit-scrollbar-thumb {
background-color: #4a90e2;
outline: 1px solid #1a467c;
} */
.form-action-container, .referrer-history-container {
background-color: #fff;
overflow-y: auto;
width: 35%;
display: inline-block;
height: 100vh;
padding: 75px 0% 40px 4%;
float: right;
}
.form-action-container {
position: relative;
}
.right-input {
display: inline-block;
width: 39%;
position: relative;
}
.left-input {
display: inline-block;
width: 58%;
margin-right: 2%;
position: relative;
}
a.to-clipboard {
position: absolute;
top: 28px;
right: 0px;
padding: 10px;
cursor: pointer;
}
a.to-clipboard i{
font-size: 10px;
color: #4a90e2;
}
.ref-detail-container input, .form-detail-container input {
width: 100%;
padding: 15px 16px;
border: none;
background-color: #fff !important;
border-radius: 24px;
font-size: 14px;
color: #232323;
margin-bottom: 20px;
}
.ref-detail-container label, .form-detail-container label {
width: 100%;
display: inline-block;
color: #1a467c;
font-weight: 500;
font-size: 10px;
padding-left: 16px;
margin-bottom: 8px;
}
.tiny-input {
display: inline-block;
position: relative;
width: 22.5%;
}
.middle-input{
margin-left: 2%;
margin-right: 2%;
}
.third-input {
position: relative;
display: inline-block;
width: 31.3%;
}
.medium-input {
display: inline-block;
width: 49%;
position: relative;
}
.half-input {
width: 48.5%;
display: inline-block;
position: relative;
}
.first-half{
margin-right: 2%;
}
textarea.ref-form-textarea {
border: none !important;
width: 100%;
height: 86px;
padding: 16px !important;
border-radius: 24px;
outline: none !important;
}
select#companySelection {
width: 97%;
background-color: #fff;
border: none;
padding: 16px 16px;
border-radius: 24px;
}
.company-selection {
width: 100%;
background-color: #fff;
border-radius: 24px;
margin-bottom: 16px;
}
.ref-detail-container .to-clipboard {
right: 5px;
}
/* Tooltip style */
.ui-tooltip {
padding: 10px 20px;
color: #979797 !important;
border-radius: 8px;
font-size: 8px !important;
text-transform: uppercase;
box-shadow: 2px 2px 4px rgb(165, 165, 165);
}
.swift-tooltip {
padding: 8px 18px;
color: #979797 !important;
border-radius: 8px;
font-size: 8px !important;
text-transform: uppercase;
box-shadow: 2px 2px 4px rgb(165, 165, 165);
}
.copied-tooltip{
/* color: #7dbe3e !important; */
}
#formDetail .form-action-container h4 {
margin-bottom: 6px !important;
margin-top: 8px;
}
li.form-action-col p {
font-size: 13px;
line-height: 20px;
color: #545454;
margin-bottom: 20px;
}
.check-col{
display: inline-block;
text-align: center;
width: 30px;
height: 30px;
vertical-align: top;
}
.icons {
width: 30px;
position: relative;
margin: 0 auto;
}
.icons .opened-status {
position: absolute;
top: -5px;
right: -12px;
font-size: 13.6px;
}
.opened-status.read {
color: #7dbe3e;
}
/* ff3b30 */
.opened-status.unread {
color: #ff3b30;
}
.check-col i.fal.fa-check {
font-size: 20px;
background-color: #fff;
border: solid 2px #7dbe3e;
padding: 3px 4.25px;
border-radius: 50%;
color: #fff;
z-index: 1000;
position: absolute;
margin-left: -15px;
}
.check-col i.fal.fa-check.completed-check{
background-color: #7dbe3e;
}
li.form-action-col {
display: inline-block;
min-height: 170px;
margin-left: 8px;
}
.char-max-200 {
max-width: 200px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
span.char-max {
max-width: 115px;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
.char-max-global {
max-width: 90%;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.xs-button{
padding: 5px 0px;
width: 104px !important;
font-size: 12px;
}
.xs-button i.fas.fa-file-excel {
margin-right: 2px;
}
#line1{
height: 0;
position: absolute;
width: 2px;
background-color: #7dbe3e;
margin-left: 14px;
margin-top: 14px;
}
div#formUsername {
line-height: 1.4;
}
@media screen and (max-width:1225px){
.title-container{
width:14%;
padding: 58px 0px 0% 20px;
}
.form-action-container{
padding: 75px 0% 0px 1%;
width: 36%;
}
.form-detail-container{
width: 49%;
}
}
#refFilters li {
position: relative;
font-size: 14px;
color: #4a90e2;
line-height: 1.86em;
vertical-align: middle;
cursor: pointer;
padding: 0px 10px;
}
.refs-load-more {
text-align: center;
font-weight: bold;
margin: 10px auto;
padding: 4px 16px;
width: fit-content;
}
.direct-to-ref {
color: #4a90e2 !important;
position: absolute;
top: 0;
right: 25px;
}
body .direct-to-ref:hover{
color: #7dbe3e !important;
}
span.cust-agg-count {
float: right;
font-size: 10px;
color: #9b9b9b;
vertical-align: middle;
display: block;
padding-left: 24px;
}
div#custFilters i {
padding-right: 4px;
}
#refFilters li.selected-range, li.selected-ref, .selected-active, .selected-msg-type, .selected-service-type, .selected-spec, .selected-loc, .selected-spec-filter, .selected-loc-filter {
background-color: #c5dbf5;
color: #232323 !important;
border-radius: 29px;
}
.is-disabled{
opacity: .4;
pointer-events: none;
}
#refFilters h3 {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
color: #9b9b9b;
margin-left: 10px;
}
span.filter-count {
float: right;
font-size: 10px;
vertical-align: middle;
color: #9b9b9b;
font-weight: normal !important;
}
span.limit-filter-length {
display: inline-block;
width: 70%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: bottom;
}
.ref-select-circle {
padding: 0 5px;
width: 16px;
height: 16px;
border: solid 2px #dadada;
border-radius: 25px;
position: absolute;
left: -20px;
top: 5px;
}
.ref-select-circle:hover {
border-color: #7dbe3e;
}
.ref-selected-circle {
border-radius: 29px;
/* border: 2px solid #7dbe3e !important; */
box-shadow: inset 0px 0px 0px 2px #7dbe3e;
}
.ref-toaster-cont {
display: flex;
align-items: center;
gap: 20px;
background-color: #7dbe3e;
position: fixed;
width: fit-content;
height: 48px;
padding: 24px;
margin: 1px auto;
border-radius: 8px;
left: 0;
right: 0;
color: white;
font-size: 16px;
font-weight: bold;
white-space: nowrap;
}
.ref-select-action-bttn {
background-color: #7dbe3e;
width: 135px;
height: 24px;
font-size: 11px;
font-weight: 500;
color: #ffffff;
/* margin: 0 25.5px 0 54px; */
/* padding: 0 30px; */
text-align: center;
border-radius: 24px;
border: solid 2px #ffffff;
cursor: pointer;
}
.merge-modal-size {
width: 600px;
height: 500px;
padding: 30px 50px;
justify-content: space-between;
}
.merge-modal-size .modal-head-icon {
border: 3px solid #1a467c;
border-radius: 35px;
padding: 18px;
font-size: 24px;
color: #4a90e2;
}
.merge-modal-size h1 {
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
color: #1a467c;
margin: 18px 0 0 0;
text-align: center;
}
.merge-modal-size h3 {
color: red;
font-size: 10px;
margin-top: 10px;
text-align: center;
}
.merge-ref-row-head {
display: flex;
gap: 16px;
padding: 6px;
color: #4a90e2;
font-size: 14px;
width: 100%;
margin-top: 12px;
}
.merge-ref-row-cont {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
height: 220px;
overflow: scroll;
/* padding: 14px 0; */
padding-bottom: 14px;
}
.merge-ref-row {
display: flex;
gap: 16px;
padding: 6px;
color: #4a90e2;
font-size: 14px;
}
.merge-ref-row-content {
width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.selected-merge-ref .merge-ref-selector {
border: 2px solid #4a90e2 !important;
background-color: #4a90e2 !important;
}
.selected-merge-ref {
box-shadow: inset 0px 0px 0px 2px #4a90e2;
border-radius: 20px;
}
.merge-ref-selector {
padding: 0 5px;
width: 16px;
height: 16px;
border: solid 2px #dadada;
border-radius: 25px;
}
.ref-provider-header {
display: flex;
justify-content: space-between;
margin: 10px 0;
font-size: 14px;
font-weight: bold;
color: #4a90e2;
background-color: white;
padding: 6px 10px;
border-radius: 25px;
}
@media screen and (max-width: 1024px) {
.merge-modal-size {
width: calc(100vw - 26px) !important;
height: calc(100vh - 26px) !important;
/* overflow: scroll; */
padding: 64px 30px 114px 30px;
justify-content: start;
}
.merge-ref-row-cont {
height: 50%;
}
}
#refFilters i {
margin-right: 5px;
}
div#statBoxes {
margin-bottom: 34px;
}
#statBoxes li.stat-box {
background-color: #f2f3f3;
padding: 14px 25px 10px !important;
width: 49.5%;
display: inline-block;
vertical-align: top;
border-radius:8px;
}
.stat-box div.top-number div{
display: none;
}
.stat-box div.top-number {
font-size: 64px;
font-weight: bold;
color: #1a467c;
line-height: 1em;
padding-bottom: 10px;
height: 74px;
}
.bottom-content div {
display: inline-block;
}
.left-bot-content {
width: 70%;
}
.right-bot-content {
width: 30%;
float: right;
text-align: right;
position: relative;
}
.right-bot-content i {
font-size: 48px;
color: #1A467C;
position: absolute;
bottom: 0;
right: 0;
}
p.box-stat-title {
font-size: 12px;
color: #1a467c;
font-weight: 600;
vertical-align: middle;
line-height: 1.42;
max-width: 120px;
}
.form-h-wrapper {
display: flex;
gap: 20px;
align-items: center;
}
.form-h-link {
text-decoration: none;
font-size: 12px;
color: #4a90e2;
cursor: pointer;
margin-bottom: 18px;
}
p.view-profile-button {
margin-left: 12px;
font-size: 12px;
color: #4a90e2;
display: inline-block;
cursor: pointer;
}
p.view-profile-button a#toCust:hover {
color: #7dbe3e;
}
/* End Referral Detail */
/* local platform icons */
@font-face {
font-family: 'icomoon';
src: url('/fonts/platforms.eot?a4n8cw');
src: url('/fonts/platforms.eot?a4n8cw#iefix') format('embedded-opentype'),
url('/fonts/platforms.ttf?a4n8cw') format('truetype'),
url('/fonts/platforms.woff?a4n8cw') format('woff'),
url('/fonts/platforms.svg?a4n8cw#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-Ahrefs:before {
content: "\e900";
}
.icon-Bing:before {
content: "\e901";
}
.icon-Google-My-Biz:before {
content: "\e902";
}
.icon-Gravity:before {
content: "\e903";
}
@media screen and (max-width:1200px){
table.status-table h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* width: 110px; */
/* padding: 10px; */
}
}
.too-small{
display:none;
}
/* BELOW IS THE CODE THAT STOPS OUR PAGE FROM WORKING AT SMALL SCREEN*/
@media screen and (max-width: 1024px){
.too-small{
display: block !important;
background-color: #fff;
}
.fail-image{
height:60vh;
width: 100%;
background-image: url(/images/rocket-fail.svg);
background-position: center;
background-size: cover;
}
.fail-text{
min-height: 40vh;
padding: 25px 18%;
}
.fail-text h1{
font-size:1.25em;
color: #232323;
font-weight: bold;
margin-bottom: 15px;
}
.fail-text p{
font-size: .875em;
line-height: 1.5;
color:#000;
}
.main-content, .main-dash{
display: none !important;
}
/* for specific pages we want to show for mobile */
.no-hide {
display: block !important;
}
.no-hide-flex {
display: flex !important;
}
}
@media screen and (max-width: 600px){
.fail-image{
height:60vh;
width: 100%;
background-image: url(/images/rocket-fail.svg);
background-position: right;
background-size: cover;
}
}
/* Sent message style */
.success-sent {
max-width: 400px;
line-height: 1.4;
}
.success-sent h2{
color: #000000 !important;
}
/* OPES logo pointer event */
a#powered-by {
pointer-events: none;
}
/* CSS Tricks */
.radial-out {
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition: color 300ms;
transition: color 300ms;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.radial-out:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #4a90e2;
border-radius: 100%;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition: 300ms ease-out;
transition: 300ms ease-out;
}
.status-table td:hover > .radial-out:before {
-webkit-transform: scale(2);
transform: scale(2);
}
.inner-journey {
cursor: pointer;
}
/* .status-table td{
pointer-events: none;
} */
h2.display-name {
max-width: 600px;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
}
/* force Dup Style */
div#forceContainer {
position: absolute;
display: none;
width: 100%;
height: 100vh;
z-index: 4000;
left: 0;
top: 0;
background-color: rgba(171, 171, 171, 0.5);
}
div#forceSave {
position: relative;
width: 50%;
margin: 0 auto;
margin-top: 4vh;
background-color: #efefef;
padding: 50px;
}
.force-error{
color: #7dbe3e;
font-size: 14px;
}
label.force-label {
width: fit-content;
display: inline-block;
}
.opesImagesConfirm{
padding: 40px 40px 80px 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 350px;
max-width: 700px;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
}
.opesImages {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-moz-column-count: 5;
-moz-column-gap: 0px;
column-count: 5;
column-gap: 0px;
min-height: 300px;
overflow: scroll;
}
.opesImagesActive {
border: solid 2px blue;
}
.opesImages img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
.opesImages {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
@media (max-width: 1000px) {
.opesImages {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media (max-width: 800px) {
.opesImages {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media (max-width: 400px) {
.opesImages {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
/* SendWidget Style */
/* .lightningGray {
position: absolute;
height: calc(100vh - 149px);
width: 100%;
top: 149px;
z-index: -1;
background-color: #f2f3f3;
border-radius: 28px 28px 0 0;
} */
.lightningToggleFontSize {
font-size: 14px;
}
#sendHeaderCust {
font-family: Spartan !important;
font-size: 14px;
text-align: center;
margin-bottom: 20px;
}
#sendHeaderGroup {
font-family: Spartan !important;
font-size: .875rem;
text-align: center;
margin-bottom: 1.25rem;
}
.lightningGroupsPad {
padding-left: 40px;
padding-right: 40px;
}
.lightningGroupsStyling {
/* border-radius: 28px !important; */
height: 56px;
margin-top: 12px !important;
}
#lightningGroupsSelectContainer {
z-index: 1001;
}
#lightningStoriesSelectContainer {
z-index: 1000;
}
.customSelectItems {
display: none;
position: absolute;
top: 100%;
width: 480px;
left: -2px;
right: 0;
background-color: white;
color: #4a90e2;
font-size: 16px;
max-height: 164px;
padding: 0 20px 20px;
overflow: auto;
/* border: 2px solid #4a90e2; */
border-right: 2px solid #4a90e2;
border-bottom: 2px solid #4a90e2;
border-left: 2px solid #4a90e2;
border-radius: 0 0 25px 25px;
}
.customSelectItems div {
padding: 16px 21px 15px 21px;
}
.customSelectItems div:hover {
background-color: rgba(218, 218, 218, 0.23);
font-weight: bold;
}
.group-send-select-loader {
display: flex;
justify-content: center;
}
.group-send-select-loader img {
width: 36px;
}
.customSelect {
padding: 4px 40px;
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border: solid 2px #4a90e2;
border-radius: 28px;
}
.customSelected {
font-size: 16px;
font-weight: bold;
}
/* outer select2 container */
.wuwta-select2-parent
.select2-container,
.select2-match-input-style
{
height: 3rem;
margin-top: .75rem !important;
padding: .25rem 2.5rem;
display: flex;
position: relative;
flex-direction: column;
align-items: flex-start;
justify-content: center;
border: solid .125rem #4a90e2;
border-radius: 1.5rem;
font-size: 1rem;
font-weight: bold;
}
/* remove outline when unfocus input */
.wuwta-select2-parent .select2-selection:focus {
outline: none;
}
/* class for when selec2 input is open */
.select2_is_open_bottom {
border-bottom: none !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
padding-bottom: 6px !important;
}
.select2_is_open_top {
border-top: none !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
padding-top: 6px !important;
}
/* allowing user to clikc on the input to open */
.wuwta-select2-parent
.select2-container
.selection {
width: 100%;
}
/* inner select2 container */
.wuwta-select2-parent
.select2-container
.selection
.select2-selection {
background-color: transparent;
border: none;
font-size: 16px;
font-family: 'Spartan' !important;
}
/* select2 input text */
.wuwta-select2-parent
.select2-container
.selection
.select2-selection
.select2-selection__rendered {
color: #4a90e2;
font-weight: bold;
padding: 0;
}
.select2-search {
padding-left: 40px !important;
padding-right: 40px !important;
}
.select2-search__field {
border-radius: 8px;
}
/* select2 drop down option text */
.select2-results__option {
color: #4a90e2 !important;
font-size: 16px;
padding-top: 10px !important;
padding-bottom: 10px !important;
padding-left: 40px !important;
}
/* .select2-results__option:hover {
color: #ffffff !important;
} */
/* select2 dropdown arrow */
.wuwta-select2-parent
.select2-container
.selection
.select2-selection
.select2-selection__arrow {
top: 12px;
right: 10px;
}
/* select2 drop down highlighted */
.select2-results__option--highlighted {
color: white !important;
}
.ls_s2_offset {
left: 15px !important;
}
.group-send-dropdown {
position: absolute;
right: 10%;
font-size: 1.25rem;
color: #4a90e2;
}
.selected-serv-desc {
margin-top: .375rem;
color: #777c80;
font-size: .625rem;
}
.selected-serv-name-ls {
color: #4a90e2;
}
.service-group-list {
margin-top: .625rem;
display: flex;
}
.groupServSelect {
height: 1.75rem;
padding: .375rem .625rem;
font-size: .625rem;
}
.group-serv-drop-cont {
border-radius: 1.25rem;
}
.customSelectOpen {
border-radius: 28px 28px 0 0;
background-color: white;
border-bottom: none;
}
.selectedCustomItem {
background-color: rgba(218, 218, 218, 0.23);
font-weight: bold;
}
.group-send-credits-preview-container {
color: #4a90e2;
font-size: 16px;
background-color: white;
margin-top: 32px;
border-radius: 16px;
padding: 24px;
font-weight: bold;
display: flex;
flex-direction: column;
gap: 16px;
}
.gs-credits-text-cont {
display: flex;
justify-content: space-between;
}
.gs-req-creds {
font-size: 16px;
/* text-align: center; */
margin-top: 12px;
}
.gs-req-creds-err-text {
margin-bottom: 11px;
font-weight: 600;
font-size: 12px;
text-align: center;
}
.lightning-services-select-drop #lightningServSelectContainer, .lightning-services-select-drop #lightningServGrpSelectContainer {
max-width: 504px;
height: 32px;
margin-top: 12px !important;
z-index: 2;
background-color: #fff;
}
.lightning-services-select-drop #lightningServGrpSelectContainer {
/* to make sure srvice group is over service buttons */
z-index: 3;
}
.lightning-services-select-drop .customSelectItems {
width: calc(100% + 4px);
}
.lightning-services-select-drop .customSelected, .lightning-services-select-drop .customSelectItems div {
font-size: 10px;
border-radius: 25px;
height: 28px;
display: flex;
align-items: center;
}
/* .lightning-services-select-drop .selected-service {
border-radius: 25px;
height: 28px;
display: flex;
align-items: center;
} */
.lightning-services-dropdown {
position: absolute;
right: 5%;
font-size: 12px;
color: #4a90e2;
}
.lightning-services-select-drop .customSelectItems div:hover {
border-radius: 25px;
}
.lightningHeader {
display: flex;
align-items: center;
margin: 42px 0 0 0px;
height: 70px;
}
.lightningHeader span {
margin: 0 auto;
font-family: Spartan !important;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #1a467c;
}
.lightningHeaderClose p {
display: flex;
flex-direction: column;
align-items: center;
color: #4a90e2;
font-size: 12px;
margin-top: 4px;
cursor: pointer;
}
.lightningCustSend {
display: flex;
padding: 15px 25px 17px 25px;
justify-content: space-between;
align-items: center;
background-color: white;
margin-top: 32px;
border-radius: 16px;
}
.lightningCustSendStyle {
display: flex;
flex-direction: column;
}
.lighting-footer-p-wrapper {
text-align: center;
}
.lightningSendToggleCustWidth {
width: 53px !important;
}
.lightningCustSendText {
font-size: 10px;
font-family: Spartan !important;
font-weight: bold;
text-align: center;
line-height: 2;
color: #1a467c;
}
.lighting-footer-p {
display: none;
}
.lightningHipaaToggleCust {
background-color: white;
width: 107px !important;
height: 28px !important;
position: relative;
margin: 0 0 0 0 !important;
border: 2px solid #f4f4f4;
}
.lightningHipaaToggleCustSlide {
width: 107px !important;
height: 26px !important;
}
.lightningHipaaToggleCustSlider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -4px;
/* border: solid 2px white; */
-webkit-transition: .2s;
transition: .2s;
border-radius: 22px;
}
.lightningHipaaToggleCustSlider:before {
width: 53px !important;
position: absolute;
content: "";
height: 20px;
left: 3px;
bottom: 2px;
border-radius: 22px;
background-color: #4a90e3;
-webkit-transition: .2s;
transition: .2s;
}
.lightningHipaaToggleCust input:checked + .lightningHipaaToggleCustSlider:before {
-webkit-transform: translateX(45px);
-ms-transform: translateX(45px);
transform: translateX(45px);
}
/* patient preview */
.lightningPreviewToggleCust, .lightningHipaaToggleGroupsContainer {
background-color: white;
width: 107px !important;
height: 28px !important;
position: relative;
margin: 0 0 0 0 !important;
border: 2px solid #f4f4f4;
}
.lightningPreviewToggleCustSlide {
width: 107px !important;
height: 26px !important;
}
.lightningPreviewToggleCustSlider, .groupSendPreviewToggleCustSlider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -0.25rem;
/* border: solid 2px white; */
-webkit-transition: .2s;
transition: .2s;
border-radius: 1.375rem;
}
.groupSendPreviewToggleCustSlider {
bottom: .0625rem;
}
.lightningPreviewToggleCustSlider:before, .groupSendPreviewToggleCustSlider:before {
width: 3.3125rem !important;
position: absolute;
content: "";
height: 1.25rem;
left: .1875rem;
bottom: .125rem;
border-radius: 1.375rem;
background-color: #4a90e3;
-webkit-transition: .2s;
transition: .2s;
}
.lightningPreviewToggleCust input:checked + .lightningPreviewToggleCustSlider:before,
.lightningPreviewToggleCust input:checked + .groupSendPreviewToggleCustSlider:before,
.lightningHipaaToggleGroupsContainer input:checked + .groupSendPreviewToggleCustSlider:before {
-webkit-transform: translateX(2.8125rem);
-ms-transform: translateX(2.8125rem);
transform: translateX(2.8125rem);
}
#lightningToggleContainer {
display: none;
position: relative;
height: 2.75rem;
margin-top: .75rem;
}
#lightningToggleContainer i {
font-size: 18px;
}
.hiddenLightningToggle {
height: 0px !important;
pointer-events: none !important;
opacity: 0 !important;
margin-top: 0px !important;
}
.lightningHideStoriesHeader {
background-color: #4a90e2;
width: 180px;
height: 40px;
margin: 0 auto;
border-radius: 22px;
font-size: 14px;
font-weight: bold;
border: 2px solid white;
display: flex;
justify-content: center;
align-items: center;
}
.lightningToggle {
background-color: white;
width: 365px !important;
height: 44px !important;
position: absolute !important;
left: 0;
right: 0;
margin-top: unset !important;
/* top: 98px; */
}
.lightningToggleSlide {
width: 365px !important;
height: 44px !important;
}
.lightningToggleSlider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 2px white;
-webkit-transition: .2s;
transition: .2s;
border-radius: 22px;
}
.lightningToggleWidth {
width: 180px !important;
}
.lightningToggleSlider:before {
width: 180px !important;
position: absolute;
content: "";
height: 36px;
left: 3px;
bottom: 2px;
border-radius: 22px;
background-color: #4a90e3;
-webkit-transition: .2s;
transition: .2s;
}
#lightningToggle input:checked + .lightningToggleSlider:before {
-webkit-transform: translateX(175px);
-ms-transform: translateX(175px);
transform: translateX(175px);
}
/* .lightningHipaaToggleGroupsContainer {
width: 200px !important;
margin: unset !important;
background-color: white;
} */
.lightningHippaSlide {
width: 200px !important;
}
.lightningHippaSlider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 2px #f4f4f4;
-webkit-transition: .2s;
transition: .2s;
border-radius: 22px;
}
.lightningHippaWidth {
width: 98px !important;
}
.lightningHippaSlider:before {
width: 98px !important;
position: absolute;
content: "";
height: 36px;
left: 3px;
bottom: 2px;
border-radius: 22px;
background-color: #4a90e3;
-webkit-transition: .2s;
transition: .2s;
}
#lightningHipaaToggleGroups input:checked + .lightningHippaSlider:before {
-webkit-transform: translateX(95px);
-ms-transform: translateX(95px);
transform: translateX(95px);
}
/* .storySelectorContainer {
margin-top: 50px;
margin-bottom: 34px;
} */
.lightningGroupsTopSpacing {
margin-top: 50px;
}
.flexedRowBetween {
display: flex;
justify-content: space-between;
align-items: center;
}
.flexedRowCenter {
display: flex;
justify-content: center;
}
.lightBlue {
color: #4a90e2 !important;
}
.lightBlue2 {
color: #54b5ff !important;
}
.lightBlueBackground {
background-color: #4a90e2 !important;
}
.greenBackground {
background-color: #7dbe3e !important;
}
.yellowBackground {
background-color: #ffec59 !important;
}
.redBackground {
background-color: #ff3333 !important;
}
.grayBackground {
background-color: #777c80 !important;
}
.lightBlueBorder {
border: 2px solid #4a90e2 !important;
}
.greenBorder {
border: 2px solid #7dbe3e !important;
}
.yellowBorder {
border: 2px solid #ffec59 !important;
}
.redBorder {
border: 2px solid #ff3333 !important;
}
.grayBorder {
border: 2px solid #777c80 !important;
}
.brownGrayBackground {
background-color: rgba(155, 155, 155, 0.5);;
}
.green-score {
background-color: #fff;
color: #7dbe3e !important;
border: 1px solid #7dbe3e !important;
}
.yellow-score {
background-color: #fff;
color: #ffec59 !important;
border: 1px solid #ffec59 !important;
}
.red-score {
background-color: #fff;
color: #ff3333 !important;
border: 1px solid #ff3333 !important;
}
.gray-score {
background-color: #fff;
color: #777c80 !important;
border: 1px solid #777c80 !important;
}
.yellow {
color: #ffec59 !important;
}
.gray {
color: #777c80 !important;
}
.red {
color: #ff3333 !important;
}
.green {
color: #7dbe3e !important;
}
.lightGray {
color: #545454 !important;
}
.cobalt {
color: #1a467c !important;
}
.disabledGray {
pointer-events: none !important;
background-color: #c7c7c7 !important;
border: 2px solid #c7c7c7 !important;
color: white !important;
}
.activeBlue {
background-color: #4a90e2;
color: white !important;
}
.groupSendStats {
display: flex;
align-items: center;
height: 22px;
margin-top: 5px;
padding: 0 20px;
gap: 6px;
}
.groupSendStats span {
font-size: 12px;
font-weight: bold;
white-space: break-spaces;
}
.groupSendStats a {
text-decoration: none;
}
#mmsWarning-txt {
display: none;
}
.mms-warning-text {
height: 22px;
margin-top: 10px;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
margin-left: 2px;
color: #777c80;
}
.groupSendDetailsModalSize {
max-height: 484px !important;
display: flex;
flex-direction: column;
}
#groupSendDuplicateDetails h1{
font-size: 16px;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
}
#groupSendDetailsSortHeader {
margin-top: 18px;
}
.groupSendHalf {
width: 50%;
}
.groupSendHalf i{
font-size: 15px;
}
.lightningGroupSendStats {
display: flex;
margin-top: 22px;
flex-direction: column;
align-items: center;
}
.lightningGroupSendStats h3 {
margin-top: 5px;
}
.ls-loader-img-cont {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
margin-top: 200px;
}
.ls-loader-img {
width: 160px;
height: 160px;
}
.lightningGroupsContainer {
padding: 21px 100px 67px 100px;
background-color: #f4f4f4;
/* margin: 45px 94px 0 94px; */
display: flex;
flex-direction: column;
border-radius: 28px 28px 0 0;
/* margin-top: 73px; */
}
.lightningGroupsContainer #groupsField label {
top: 54px !important;
}
.lightningGroupsContainer #groupsField .move-label {
top: 26px !important;
}
.lightningGroupsContainer #groupsField #searchGroupsList {
top: 89px !important;
}
.lightningGroupsContainer #groupsField .lightning-an-bar {
top: 32px !important;
}
.lightningGroupsContainer h3 {
margin-top: 5px;
font-family: Roboto;
font-size: 14px;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
}
.lightningGroupsSend {
background-color: white;
width: 480px;
height: 80px;
padding: 18px 40px 17px 40px;
border-radius: 16px;
align-self: center;
}
#lightningGroupsConfirmSend:hover {
background-color: #7dbe3e !important;
}
#sendWidget-backdrop {
width: 100vw;
height: 100vh;
position: absolute;
z-index: 3999;
background-color: rgba(119, 124, 128, 0.8);
}
div#sendWidget-container {
overflow: hidden;
z-index: 4000;
position: absolute;
bottom: 0px;
/* width: fit-content; */
width: 680px;
height: 100%;
right: 0;
display: none;
border-radius: 19.5px 0 0 19.5px;
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
}
.flexed {
display: flex !important;
}
.sendWidget-opener {
overflow-y: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
height: 100%;
min-width: 680px;
z-index: 4000;
position: relative;
color: #fff;
background-color: #f4f4f4;
/* border: 1px solid; */
/* padding: 40px; */
font-size: 30px;
display: block;
-webkit-transition: max-width 2s, max-height 2s; /* Safari prior 6.1 */
transition: max-height 2s;
}
.sendWidget-opener::-webkit-scrollbar {
display: none;
}
#lightningPreviewContainer {
/* display: none; */
width: 344px;
height: 100%;
background-color: #f4f4f4;
}
.widget-open{
cursor: auto !important;
}
.sendWidget-opener i.fas.fa-times {
position: absolute;
right: 15px;
}
.rep-con{
margin-top: 60px;
}
.sendWidget-opener input#customerFilter_quick {
background-color: #fff;
font-size: 12px;
/* margin-top: 40px !important; */
}
#removeAsyncPreviewCont i{
float: right;
font-size: 24px;
position: unset;
}
span.select2-dropdown.select2-dropdown--below {
margin-top: 0px;
background-color: #f2f3f3;
border-top: 0px !important;
border-left: 2px solid #4a90e2 !important;
border-right: 2px solid #4a90e2 !important;
border-bottom: 2px solid #4a90e2 !important;
}
span.select2-dropdown.select2-dropdown--above {
padding-top: 14px;
margin-top: 0px;
background-color: #f2f3f3;
/* border-top: 0px !important; */
border-left: 2px solid #4a90e2 !important;
border-right: 2px solid #4a90e2 !important;
border-top: 2px solid #4a90e2 !important;
border-bottom: 0px !important;
}
img#hipaaBadge {
position: absolute;
right: 20px;
top: 15px;
width: 58px;
height: 18px;
}
p.addCc {
position: absolute;
right: 15px;
top: 7px;
}
.cust-hipaa-img {
width: 58px;
height: 18px;
}
#tempLabel{
margin: 16px 0px 0px 0px !important;
font-weight: bold !important;
}
body .send-green{
color: #fff;
background-color: #4a90e2;
border-color: #fff;
font-weight: bold;
/* padding-top:10px; */
/* padding-bottom:10px; */
}
body .send-green:hover{
color: #fff;
border-color: #fff !important;
background-color: #7dbe3e;
}
body .send-green:active{
color: #fff !important;
border-color: #fff !important;
background-color: #7dbe3e;
}
#createContainer input:disabled{
background-color: #f4f4f4 !important;
color: #4a90e2 !important;
}
span.select2-selection.select2-selection--multiple {
height: 48px !important;
border: 2px solid #4a90e2 !important;
background-color: #f3f3f3;
/* border: none !important; */
border-radius: 24px;
padding: 4px 2px 2px 8px;
/* width: 336px !important; */
overflow-y: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
span.select2-selection.select2-selection--multiple::-webkit-scrollbar {
display: none;
}
h3.contact-header.showCC {
font-size: 12px;
color: #5a5a5a;
padding-top: 10px;
padding-left: 16px;
font-weight: bold;
width: 100%;
margin-bottom: 10px;
}
li.select2-results__option {
font-size: 12px;
color: #232323;
}
li.select2-selection__choice {
font-size: 12px;
color: #1a467c;
border-radius: 20px !important;
border: none !important;
padding: 5px 12px !important;
line-height: 16px;
}
li.select2-selection__choice span {
font-size: 16px;
vertical-align: middle;
padding-left: 8px;
float: right;
}
#sendWidget-container .toggler{
margin-left: -3px;
margin-top: -2px;
}
input.select2-search__field {
font-size: 13px !important;
vertical-align: top;
color: #777c80;
padding-left: 15px;
}
/* SendAddWidget Style */
div#sendAddWidget-container {
z-index: 3000;
position: absolute;
bottom: 1px;
width: fit-content;
right: 90px;
}
.sendAddWidget-opener {
z-index: 4000;
height: 70px;
width: 70px;
display: block;
position: relative;
color: #fff;
background-color: #4a90e2;
border: 1px solid;
padding: 20px;
margin-right:10px;
margin-bottom: 15px;
font-size: 30px;
border-radius: 50%;
display: block;
-webkit-transition: max-width 2s, max-height 2s; /* Safari prior 6.1 */
transition: max-height 2s;
cursor: pointer;
}
.widget-open{
cursor: auto !important;
}
.sendAddWidget-opener i.fas.fa-times {
position: absolute;
right: 15px;
}
.ui-autocomplete{
z-index: 10000 !important;
}
select#sendMsgDialog_template {
text-align: center;
background-color: #fff;
width: 100%;
padding: 12px 30px;
border-radius: 30px;
border-color: #d6d6d6;
background-position: 95% 55%;
}
select#newMessage_select_ext {
text-align: center;
background-color: #fff;
width: 100%;
padding: 12px 30px;
border-radius: 30px;
border-color: #d6d6d6;
background-position: 95% 55%;
}
.send-button{
margin: 0 auto;
font-size: 14px !important;
display: block;
}
h3.customer-blurb {
color: #777c80;
font-size: 12px;
/* line-height: 1.46; */
/* padding: 20px 10px 9px 16px; */
font-weight: bold;
}
h3.customer-blurb span {
font-size: 9px !important;
font-weight: normal !important;
}
.post-search-item {
/* padding-top: 10px; */
display: none;
}
#closeAdditionalContacts {
display: none;
position: absolute;
right: 0;
top: 16px;
color: #4a90e2;
font-size: 16px;
z-index: 10000;
}
#closeAdditionalContacts:hover {
color: #7dbe3e;
}
.send-confirmation{
display: none;
}
h3.confirmation-text {
color: #7dbe3e;
font-size: 16px;
line-height: 1.23;
font-weight: 600;
margin-top: 30px;
padding-bottom: 20px;
}
.send-confirmation button {
text-align: center;
margin: 0 4%;
vertical-align: top;
background-color: #fff;
padding: 8px 25px;
width: 38% !important;
margin: 0 6%;
border-radius: 25px;
text-decoration: none;
border: 1px solid #4a90e2;
color: #4a90e2;
bottom: 27px;
cursor: pointer;
display: inline-block;
}
.send-confirmation .nope {
float: right;
}
.send-confirmation button:hover{
/* background-color: #fff;
color: #7dbe3e;
border-color: #7dbe3e; */
}
.send-confirmation button:active{
background-color: #4a90e2;
color: #fff;
border-color: #4a90e2;
}
.existing-form h2, .addSend-form h2 {
color: #1a467c;
font-size: 24px;
font-weight: bold;
margin-top: 18px;
text-align: center;
}
p#showAddCC {
color: #4a90e2;
font-size: 12px;
margin-left: 17px;
margin-top: 12px;
margin-bottom: 10px;
cursor: pointer;
}
p#showAddCC:hover {
color: #7dbe3e;
}
.existing-form .select2{
display: none;
}
.dropdown-gap {
border-radius: 20px 20px 0px 0px !important;
}
body span.select2-selection.select2-selection--multiple.s2_error{
/* border:2px solid #ff0000 !important; */
background: #fff7f7;
}
.select2-selection__choice.s2_error{
border:2px solid #ff0000 !important;
background: #fff !important;
}
div#sendMsgDialog_template button, #newMessage_select button{
background: #fff;
padding: 2px 2px 2px 4px;
border: 2px solid #4a90e2;
border-radius: 20px;
font-size: 10px;
line-height: 2;
color: #4a90e2;
font-weight: bold;
cursor: pointer;
}
div#newMessage_select_ext button, #newMessage_select button{
background: #fff;
padding: 2px 2px 2px 4px;
border: 2px solid #4a90e2;
border-radius: 20px;
font-size: 10px;
line-height: 2;
color: #4a90e2;
font-weight: bold;
cursor: pointer;
}
.loc-chooser-button{
margin-bottom: 24px;
min-width: 144px;
width: 144px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #4a90e2 !important;
padding: 8px;
background-color: #fff;
border-radius: 25px;
border: 2px solid #4a90e2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.loc-chooser-button.selected-loc{
background-color: #4a90e2 !important;
color: #fff !important;
}
.loc-chooser-button.selected-loc:hover{
color: #fff !important;
background-color: #7dbe3e !important;
border-color: #7dbe3e !important;
}
.panel-title{
margin-top: 20px !important;
width: 435px;
margin: 0 auto;
margin-bottom: 31px;
font-size: 16px;
font-family: 'Spartan' !important;
font-weight: bold;
color: #1A467C;
}
.admin-created-date {
margin: 0 auto;
margin-bottom: 20px;
width: 435px;
color: #9b9b9b;
}
span.micro-profile {
font-size: 12px;
font-weight: normal;
color: #9b9b9b;
vertical-align: middle;
padding-left: 8px;
}
.loc-chooser-button:hover{
color: #7dbe3e !important;
border-color: #7dbe3e !important;
}
/* .loc-chooser-button.selected-loc {
background: #fff;
padding: 8px 0px !important;
border: solid 1px #4a90e2 !important;
border-radius: 20px;
font-size: 8px;
color: #4a90e2 !important;
font-weight: bold;
cursor: pointer;
} */
.admin-notification-prefs {
width: 434px;
margin: 0 auto;
}
.admin-knockbrush-listen {
margin-left: 14px;
font-family: Roboto;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
cursor: pointer;
color: #4a90e2;
}
.admin-knockbrush-listen:hover {
color: #7dbe3e;
}
#createContainer button{
cursor: pointer;
}
.newLightningButtonWidth {
width: 97px !important;
margin-right: 5px;
margin-top: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.count-4, .count-13,.count-14, .count-15, .count-16, .count-17,.count-18,.count-19,.count-20,.count-21,.count-22,.count-23,.count-24,.count-25,.count-26,.count-27,.count-28,.count-29,
.count-13-doc,.count-14-doc, .count-15-doc, .count-16-doc, .count-17-doc,.count-18-doc,.count-19-doc,.count-20-doc,.count-21-doc,.count-22-doc,.count-23-doc,.count-24-doc,.count-25-doc,.count-26-doc,.count-27-doc,.count-28-doc,.count-29-doc{
width:25%;
}
.count-3, .count-5, .count-6, .count-7, .count-8, .count-9, .count-10, .count-11, .count-12{
width: 33%;
}
.count-2, .count-1{
width: 50%;
}
.count-2-doc, .count-1-doc, .count-4-doc , .count-3-doc, .count-5-doc, .count-6-doc, .count-7-doc, .count-8-doc, .count-9-doc, .count-10-doc, .count-11-doc, .count-12-doc{
width: 50%;
}
#addInfoContainer textarea {
width: 100%;
height: 96px;
padding: 15px 31.5px 7px 41px;
border-radius: 28px;
line-height: 1.5;
overflow-y: auto;
resize: none;
outline: none;
font-size: 16px;
font-weight: bold;
background-color: #f4f4f4;
color: #4a90e2;
border: 2px solid #4a90e2;
}
#addInfoContainer p {
font-size: 14px;
padding-left: 16px;
color: #777c80;
width: 100%;
}
.msls-list-container {
background-color: white;
border-radius: 14px;
height: 200px;
width: 100%;
margin-top: 14px;
padding: 16px;
padding-right: 0;
}
.msls-service-req {
font-size: 18px;
color: #9b9b9b;
display: flex;
justify-content: center;
margin-top: 30px;
}
.msls-list-right {
display: flex;
align-items: center;
}
.msls-list-dot {
font-size: 6px;
margin-right: 4px;
}
.msls-list {
color: #4a90e2;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
margin-right: 4px;
}
.msls-list-x {
transition: color .3s;
}
.msls-list-x:hover {
color: red;
}
.msls-list-ol {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
scrollbar-gutter: stable;
height: 170px;
}
.mslsButton-wrapper {
display: flex;
margin-top: 1.75rem;
}
#infoDisplay, .mslsButton, #custTagDisplay, #pdfInfoDisplay {
color: #4a90e2 !important;
font-size: .875rem !important;
line-height: 1.43 !important;
font-weight: bold !important;
cursor: pointer;
margin-top: 1.75rem;
transition: color .3s;
}
.mslsButton {
margin-top: 0;
}
#infoDisplay:hover, .mslsButton:hover, #custTagDisplay:hover {
color: #7dbe3e !important;
}
#infoToggle, #custTagToggle {
display: none;
margin-top: 1.75rem;
}
.ls-pdf-prev {
display: none;
}
.ls-pdf-prev-active {
aspect-ratio: 4 / 5;
}
.ls-pdf-wrap {
display: flex;
align-items: center;
margin-bottom: 6px;
height: 20px;
}
.ls-pdf-plus-wrap {
font-size: .875rem !important;
line-height: 1.43 !important;
font-weight: bold !important;
}
.ls-upload-pdf-bttn {
color: #4a90e2 !important;
margin: 0px !important;
font-size: 14px !important;
font-weight: bold !important;
}
.ls-async-attach-wrap {
display: flex;
align-items: center;
margin-bottom: 6px;
height: 20px;
color: #4a90e2 !important;
font-size: 14px !important;
font-weight: normal;
}
.record-asyncattach-bttn {
margin-right: 6px;
font-weight: bold;
}
.upload-asyncattach-bttn {
margin: 0 6px;
font-weight: bold;
}
.ls-upload-async-attach-bttn {
color: #4a90e2 !important;
font-size: 14px !important;
font-weight: bold !important;
}
.ls-clear-pdf-x {
position: unset !important;
font-size: 20px;
}
.ls-pdf-name-wrap {
width: 80%;
display: flex;
justify-content: space-between;
align-items: center;
}
.ls-pdf-name-p {
font-size: 14px;
color: #777c80;
margin-left: 16px;
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ls-pdf-view-arrow-wrap {
color: #4a90e2;
font-size: 16px;
}
.ls-pdf-view-arr-disable {
pointer-events: none;
color: gray;
}
.pdf-info-cont {
margin-top: 16px;
}
.visible-info{
display: block !important;
}
.mslsinfo {
cursor: help;
padding-top: .125rem;
margin-left: 6px !important;
}
div#specialistContainer h3, div#serviceContainer h3, div#serviceGrpContainer h3, #locationsContainer h3, #genderContainer h3, div.attr-container h3 {
padding-top: 20px !important;
padding-bottom: 3px;
text-align: left;
}
#chartContainer {
position: relative;
height: 300px !important;
margin-bottom: 100px;
}
#lineChart{
position: relative;
height: 100% !important;
margin-top: 20px;
}
button#sendWidget_submit {
/* margin-top:40px; */
display: inline-block;
margin-left: 0px;
}
div#sendMsgDialog_template button.selected-template, div#newMessage_select_ext button.selected-template, #newMessage_select button.selected-template, .selected-service, .selected-service-grp, .selected-specialist, .selected-location, .selected-gender, .selected-attribute{
background:#4a90e2 !important;
color: white !important;
border-width: 2px !important;
font-weight: bold;
font-size: 10px;
}
.ls-no-service-err {
font-size: .75rem;
color: red;
margin-top: .75rem;
margin-bottom: .625rem;
line-height: 1.5;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
max-height: 26px;
list-style: none;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
overflow: initial !important;
padding-right: 40px !important;
}
/* Radio style gender buttons */
/* div#genderContainer * {
display: inline-block;
}
button.gender-button:first-of-type {
margin-left: 15px;
}
button.gender-button {
height: 32px;
width: 32px;
border: 4px solid #fff;
border-radius: 50%;
} */
.selected-hipaa{
background-color: #4a90e2 !important;
}
div#specialistContainer button, #serviceContainer button, #serviceGrpContainer button, #locationsContainer button, #genderContainer button, .attr-container button {
font-weight: bold;
padding: 2px 2px 2px 4px;
background: #fff;
border: 2px solid #4a90e2;
color: #4a90e2;
font-size: 10px;
line-height: 2;
border-radius: 20px;
display: inline-block;
}
.lightning-autocomplete {
width: 248px !important;
border-radius: 0 0 28px 28px !important;
border-top: 0px !important;
border-left: 2px solid #4a90e2 !important;
border-right: 2px solid #4a90e2 !important;
border-bottom: 2px solid #4a90e2 !important;
}
.disable-send {
pointer-events: none !important;
background-color: #c7c7c7 !important;
}
.sending{
opacity: .5 !important;
pointer-events: none !important;
}
/* .lightning-autocomplete li:nth-last-child(2){
padding-bottom: 45px !important;
}
/* .lightning-autocomplete li:last-of-type{
background: #4a90e2 !important;
color: #fff;
position: sticky;
bottom: 0px;
/* margin-top:45px !important;
} */
/* .lightning-autocomplete li:last-of-type .ui-menu-item-wrapper, .lightning-autocomplete li:last-of-type .ui-menu-item-wrapper:focus{
background: url(/images/plus-solid.svg) no-repeat 8% center !important;
color: #fff !important;
background-size: 12px !important;
} */
/* Start Create SendWidget */
div#createContainer{
background-color: #f4f4f4;
padding: 21px 52px 40px 52px;
/* margin-top: 73px; */
display: flex;
flex-direction: column;
border-radius: 28px 28px 0 0;
}
div#createContainer label {
font-size: 12px;
color: #777c80;
display: block;
/* padding-left: 16px; */
font-weight: 500;
/* width: 100%; */
margin-bottom:10px;
}
div#createContainer input {
background-color: #f4f4f4 !important;
width: 100% !important;
padding: 12px 30px 12px 16px;
/* border: none; */
border-radius: 28px;
height: 48px !important;
margin-bottom: 20px;
}
div#createContainer input.select2-search__field {
background-color: #f4f4f4 !important;
/* width: 100% !important; */
padding: 5px 12px;
/* border: none; */
border-radius: 20px !important;
height: 26px !important;
margin-bottom: 20px;
}
/* Start Add Send Widget */
.addSend-form label {
font-size: 12px;
color: #4a90e2;
font-weight: bold;
display: block;
margin: 9px 0px 0px;
}
.addSend-form select{
background-color: #fff;
width: 100%;
margin-top: 5px;
padding: 12px 30px;
border-radius: 30px;
border-color: #d6d6d6;
background-position: 95% 55%;
}
.addSend-form input{
font-size: 12px;
border: 1px solid #d6d6d6 !important;
width: 96%;
padding: 9px 4%;
border-radius: 25px;
margin-bottom: 5px;
}
.first-name {
width: 49%;
display: inline-block;
}
.last-name {
width: 49%;
display: inline-block;
}
.personal-contact-container{
background-color: transparent;
border-radius: 60px;
margin: 10px 0px;
padding: 8px;
display: table;
}
.personal-contact-container i{
color: #4a90e2;
}
.personal-contact-edit{
cursor: pointer;
margin-bottom: 10px;
vertical-align: middle;
width: 5%;
}
.personal-contact-details{
display: table-cell;
vertical-align: middle;
width: 100%;
}
.personal-contact-remove{
cursor: pointer;
vertical-align: middle;
width: 5%;
}
div#hipaa_message {
font-size: 12px;
color: #5a5a5a;
line-height: 18px;
width: 50%;
display: inline-block;
margin-top: 28px;
font-weight: bold;
margin-left: 16px;
}
#hipaa_buttons button {
height: 32px;
width: 32px;
background: #fff;
border: solid 4px #fff;
border-radius: 20px;
}
#hipaa_buttons p {
margin-top: -5px;
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: #9b9b9b;
padding-left: 9px;
}
div#hipaa_buttons {
width: 44%;
display: inline-flex;
justify-content: flex-end;
vertical-align: top;
margin-top: 30px;
/* padding-left: 10px; */
}
div#hipaa_yes{
margin-right: 15px;
}
div#hipaa_yes, div#hipaa_no {
display: inline-block;
}
#ls-err-display {
display: none;
}
.ls-err-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.ls-err-wrapper i.fa-triangle-exclamation {
font-size: 12px;
color: #ff0000;
}
div#lightning_addError {
margin-left: .625rem;
display: flex;
flex-direction: column;
gap: .3125rem;
}
div#lightning_addError p {
font-size: .75rem;
color: #ff0000;
}
.lightning-error {
background-color: #ffefef;
border: 1px solid #ff0000 !important;
}
.clear-ipqs-warning {
color: #4a90e2;
font-weight: bold;
cursor: pointer;
}
.lightning-update-cust-bounce {
text-decoration: none;
color: #4a90e2;
font-weight: bold;
}
button#sendWidget_addSubmit {
/* margin-top: 40px; */
display: inline-block;
/* margin-left: 70px; */
}
p#cancel_add, p#cancel_gs_add {
display: flex;
justify-content: center;
font-size: 12px;
color: #4a90e2;
margin-top: 10px;
cursor: pointer;
}
p#cancel_add_mobile, p#cancel_gs_mobile {
display: none;
justify-content: center;
font-size: 12px;
color: #4a90e2;
margin-top: 10px;
cursor: pointer;
}
/* Lightning Widget UI */
.close-lightning{
width: 54px;
height: 54px;
cursor: pointer;
color: #4a90e2;
font-size: 22px;
padding: 16px 0 0 18px;
border-radius: 50%;
font-weight: 500;
background-color: white;
}
h3.compose {
white-space: nowrap;
/* position: absolute; */
min-height: 44px;
font-size: 16px;
top: 19%;
left: 33px;
padding: 12px 20px;
background-color: #4a90e2;
border: 2px solid #fff;
color: #fff;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.24);
}
.shrink h3.compose i {
color: #fff;
}
.shrink h3.compose i:active {
color: #4a90e2;
}
.shrink h3.compose:active {
color: transparent;
}
.shrink h3.compose {
/* content: ' '; */
color: transparent;
left: 11px;
width: 44px;
overflow: hidden;
height: 44px;
padding: 12px 11px !important;
}
h3.compose:hover, div#lightning-opener i:hover{
background-color: #7dbe3e;
}
h3.compose:active, div#lightning-opener i:active{
background-color: #fff;
color: #4a90e2;
border-color: #4a90e2;
}
.compose i {
padding-right:10px;
}
i.fas.fa-arrow-right.close-lightning:hover {
/* color: #fff;
background-color: #4a90e2; */
}
i.fas.fa-arrow-right.close-lightning:active {
color: #fff;
background-color: #4a90e2;
}
.existing-form {
padding: 0px 33px;
}
div#newMessage_select {
/* text-align: center; */
margin-left: 38px;
/* margin-right: 38px; */
}
#messageInfo .swiper-wrapper {
display: block !important;
}
div#specialistContainer {
/* text-align: center; */
/* margin-left: 38px; */
/* margin-right: 38px; */
}
div.attr-container{
/* text-align: center; */
/* margin-left: 38px; */
/* margin-right: 38px; */
}
div#serviceContainer {
/* text-align: center; */
margin-left: 0px;
/* margin-right: 38px; */
}
div#serviceGrpContainer {
/* text-align: center; */
margin-left: 0px;
/* margin-right: 38px; */
}
#locationsContainer{
/* text-align: center; */
/* margin-left: 38px; */
/* margin-right: 38px; */
}
#genderContainer{
/* text-align: center; */
/* margin-left: 38px; */
/* margin-right: 38px; */
}
div#specialistContainer h3, div#serviceContainer h3, div.attr-container h3 {
text-align: left !important;
}
.main{
overflow-x: hidden;
}
div#lightning-opener {
display: block;
position: absolute;
bottom: 100px;
right: 100px;
cursor: pointer;
z-index: 2001;
}
div#lightning-opener i {
font-size: 32px;
padding: 18px 22px 22px 18px;
color: #fff;
background-color: #4a90e2;
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.24);
}
.lightningCustInputsContainer {
display: flex;
justify-content: center;
gap: .625rem;
margin-top: .625rem;
padding: 0 38px;
}
.lightningCustInputsContainer .custInfoLookup {
border: 2px solid #4a90e3 !important;
font-size: 16px !important;
font-weight: bold;
color: #4a90e3;
}
div#nameContainer {
position: relative;
width: 248px;
}
div#contactContainer {
position: relative;
width: 248px;
}
.ltn-form{
height: 39px !important;
font-size: 12px !important;
margin-bottom: 0px !important;
}
#customerFilter_quick{
background: url(/images/user-solid-blue.svg) no-repeat;
margin-top: 0px !important;
background-size: 12px;
background-position: 16px;
padding-left: 36px !important;
}
#acContact{
background: url(/images/phone-alt-blue.svg) no-repeat #fff;
background-size: 6px;
background-position: 16px;
padding-left: 36px !important;
}
#ccContainer {
position: relative;
margin-top: 20px;
}
#duplicateContactContainer {
display: flex;
justify-content: center;
margin-top: 10px;
margin: 10px 38px 0 38px;
}
#duplicateContact {
width: 100%;
height: 48px;
display: inline-flex;
justify-content: space-between;
align-items: center;
background-color: white;
border-radius: 8px;
}
#duplicateContact .dup-left {
display: flex;
align-items: center;
position: relative;
}
#duplicateContact .dup-right {
display: flex;
align-items: center;
}
#duplicateContact i.fa-triangle-exclamation {
margin-left: 21px;
object-fit: contain;
color: #ff3333;
font-size: 16px;
}
#duplicateContactName {
color: #4a90e2;
/* display: inline-block; */
/* font-weight: bold; */
/* position: relative; */
text-decoration: underline;
cursor: pointer;
}
#toolTipDescription {
display: grid;
grid-template-columns: auto auto;
/* visibility: visible; */
box-shadow: 1px 1px 6px #9b9b9b;
position: absolute;
min-width: 310px;
height: 216px;
margin: 3.5px 31.7px 2.3px 23.3px;
border-radius: 19.5px;
background-color: #ffffff;
/* left: -175px; */
z-index: 10001;
top: 10px;
/* opacity: 1; */
/* transition: visibility .3s, opacity .3s ease-in-out; */
cursor: auto;
}
#duplicateContactName:hover #toolTipDescription {
visibility: visible;
opacity: 1;
transition: opacity .3s ease-in-out;
}
#duplicateTooltipName {
margin: 25px 0px 3px 28px;
font-size: 18px;
font-weight: bold;
line-height: 1.11;
color: #1a467c;
}
#duplicateTooltipCol2 {
padding: 0px 10px 0px 20px;
}
#duplicateTooltipServSpec {
margin: 3px 0px 0 28px;
font-family: 'Roboto' !important;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
color: #232323;
}
#duplicateTooltipNumber {
margin: 0px 91.7px 21px 28px;
font-family: 'Roboto' !important;
font-size: 10px;
font-weight: normal;
line-height: 1.8;
color: #232323;
}
#duplicateTooltipHistory {
position: absolute;
bottom: 0;
margin: 0 96px 27px 28px;
font-size: 10px;
font-weight: bold;
line-height: normal;
color: #1a467c;
}
#duplicateTooltipHistoryList {
display: grid;
grid-template-columns: auto auto;
}
#duplicateOpened {
font-size: 12px;
width: 14px;
height: 14px;
margin: 15px 6px 0px 0;
object-fit: contain;
}
#duplicateTooltipHistoryItemType {
margin: 8px 0px 2px 0px;
/* font-family: Roboto; */
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #777c80;
}
#duplicateTooltipHistoryItemDate {
/* font-family: Roboto; */
font-size: 10px;
font-weight: normal;
line-height: normal;
color: #777c80;
}
#duplicateTooltipMessagesNum {
margin: 25px 21px 0px 21px;
font-size: 24px;
font-weight: bold;
line-height: normal;
text-align: center;
color: #4a90e2;
}
#duplicateTooltipMessagesText {
font-family: Roboto;
font-size: 8px;
font-weight: 500;
line-height: 1.5;
text-align: center;
color: #4a90e2;
}
#duplicateDivider {
width: 60px;
height: 1px;
margin: 4px auto 7px auto;
border: solid 1px #dadada;
}
#duplicatePercent {
position: absolute;
margin: 5px 0 0 0;
font-size: 8px;
font-weight: bold;
line-height: normal;
color: #4a90e2;
}
#duplicateProflieButton {
position: absolute;
bottom: 22px;
right: 10px;
margin: 59px 8px 0 59px;
font-size: 12px;
font-weight: 500;
line-height: 1.83;
text-align: right;
color: #4a90e2;
}
#duplicateText1 {
max-width: 14.375rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: .375rem;
font-family: 'Roboto' !important;
font-size: .75rem;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
color: #ff3333;
}
#duplicateYesResponse {
width: 103px;
min-width: 103px;
height: 24px;
margin-left: 15px;
border-radius: 18px;
border: solid 2px #4a90e2;
background-color: #4a90e2;
font-size: 8px;
font-weight: bold;
color: white;
white-space: nowrap;
}
#duplicateNoResponse {
margin: 0px 21px 0px 17px;
font-size: 16px;
color: #4a90e2;
}
#duplicateNoResponse:hover, #duplicateYesResponse:hover {
cursor: pointer;
}
.showCC{
display: block !important;
}
.lds-dual-ring {
display: inline-block;
width: 64px;
height: 64px;
position: absolute;
left: 235px;
top: 8px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 23px;
height: 23px;
margin: 1px;
border-radius: 50%;
border: 2px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Global toast notification style */
.toast-notifications {
position: absolute;
width: 100%;
z-index: 4001;
}
.toaster-notification{
position: absolute;
left: 0;
right: 0;
z-index: 4000;
background-color: #7dbe3e;
color: #fff;
width: fit-content;
margin: 0 auto;
top:-100px;
padding: 12px 40px;
border-radius: 8px;
margin-top: 5px;
}
@media screen and (max-width: 600px) {
.toaster-notification {
width: 100vw !important;
}
}
.toaster-notification .toast{
text-align: center;
}
.select2Force{
width: 88% !important;
min-width: 100% !important;
}
/* Leaderboard Style */
div#leaderboardContainer table {
width: 100%;
background-color: rgba(155, 155, 155, 0.37);
position: absolute;
top: 40px;
margin-bottom: 50px;
overflow-x: auto;
display: inline-table;
}
div#leaderboardContainer tr{
/* border-bottom:1px solid rgba(155, 155, 155, 0.37); */
margin-bottom: 1px;
margin-bottom:1px;
}
tr.spacer {
border-bottom: 1px solid #232323;
height: 1px;
}
div#leaderboardContainer th {
position: relative;
text-transform: uppercase;
padding:8px 0px;
background-color: rgba(244, 244, 244, 0.8);
border-right:5px solid #fff;
vertical-align: middle;
cursor: pointer;
min-width: 90px;
transition: background-color .2s;
}
div#leaderboardContainer th:hover{
background-color: #d0d1d2 !important;
}
/* Start column count */
.col-count-lb-6{
width:20%;
}
.col-count-lb-7{
width:16%;
}
.col-count-lb-8{
width:14%;
}
.col-count-lb-9{
width:12%;
}
.col-count-lb-10 {
width: 11%;
}
.col-count-lb-11 {
width: 10%;
}
.col-count-lb-12 {
width: 9%;
}
.col-count-lb-13, .col-count-lb-14 {
width: 9%;
}
span.leader-name {
display: block;
width: 85px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
div#leaderboardContainer td {
text-align: center;
width: 14%;
padding:16px 0px;
background-color: rgba(244, 244, 244, 0.8);
border-right:5px solid #fff;
font-size: 11px;
color: #232323;
vertical-align: middle;
}
div#leaderboardContainer td:first-child, div#leaderboardContainer th:first-child {
text-align: left;
width: auto !important;
background-color: #fff;
padding-left:16px;
}
div#leaderboardContainer th:first-child{
pointer-events: none;
}
p.leader-error {
position: absolute;
width: 100%;
text-align: center;
font-size: 12px;
color: #cccccc;
top: 140px;
}
p.numbers-error {
position: absolute;
width: 100%;
text-align: center;
font-size: 12px;
color: #cccccc;
top: 120px;
}
th.lb-header {
font-size: 10px;
font-weight: 600;
color: #9b9b9b;
}
.nuvoEdgeLink{
color: #f4f4f4;
background-color: #4a90e2;
font-family: 'Roboto', sans-serif;
text-align: center;
display: inline-block;
font-size: .875em;
padding: 13px 0px;
width: 184px !important;
border-radius: 25px;
text-decoration: none;
border: 2px solid #4a90e2;
line-height: 14px;
cursor: pointer;
margin-top:10px;
margin-bottom:20px;
}
.more-row{
display:none;
}
.spacer.more-row{
display: none;
}
div#leaderboardContainer td.more-leaders{
width:100% !important;
text-align: center;
}
.more-leaders a {
cursor: pointer;
font-size: 10px;
font-weight: 500;
color:#4a90e2;
}
ul.reports-date-chooser {
text-align: right;
width: fit-content;
display: inline-block;
right: 0;
float: right;
}
ul.reports-date-chooser li {
display: inline-block;
}
ul.reports-date-chooser .line-time, ul.reports-date-chooser .leader-time, ul.reports-date-chooser .numbers-time {
display: block;
font-weight: 500;
text-align: center;
font-size: 10px;
color: #9b9b9b;
padding: 6px 9px;
cursor: pointer;
border-radius: 4px;
transition: background-color .5s, color .5s;
}
.selected-line-time, .selected-leader-time, .selected-numbers-time{
color:#fff !important;
background-color: #4a90e2;
}
ul.reports-date-chooser .line-time:hover, ul.reports-date-chooser .leader-time:hover, ul.reports-date-chooser .numbers-time:hover{
color:#fff !important;
background-color: #7dbe3e;
}
div#filterButton a {
display: block;
font-size: 10px;
color: #4a90e2;
border: 1px solid #4a90e2;
width: fit-content;
padding: 3px 6px;
border-radius: 5px;
font-weight: 500;
cursor: pointer;
background-color: #fff;
transition: background-color .3s, color .3s;
}
div#filterButton a:hover {
color:#fff;
background-color: #7dbe3e;
border-color: #7dbe3e !important;
}
div#filterScreen {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,.2);
z-index: 100;
display: none;
}
div#filterDialog {
width: 312px;
background-color: #fff;
margin: 0 auto;
padding:30px 40px;
display: block;
margin-top: 15vh;
border-radius: 8px;
}
.dialog-header * {
display: inline-block;
font-size: 20px;
color: #1a467c;
font-weight: bold;
}
.dialog-header {
position: relative;
text-align: center;
margin-bottom: 30px;
}
i.fas.fa-times.close-filter {
position: absolute;
right: 0px;
font-size: 22px !important;
color: #4a90e2 !important;
}
.filter-options input.form-radio {
height: 34px !important;
}
.filter-options label {
font-size: 12px !important;
color: #9b9b9b !important;
margin-top: 12px !important;
text-transform: capitalize;
}
.filter-options h4{
font-size: 10px;
color: #545454;
font-weight: bold;
margin-bottom: 16px;
}
div#filterButton {
position: relative;
width: fit-content;
display: inline-block;
vertical-align: top;
z-index: 20;
}
div#chartContainer h3, #leaderboardContainer h3, #numbersContainer h3 {
font-family: 'Spartan' !important;
display: inline-block;
font-size: 18px;
font-weight: 500;
color: #1a467c;
vertical-align: top;
padding-right: 20px;
float: left;
}
#leaderboardContainer h3{
float: left;
}
.line-legend{
padding-right: 20px;
vertical-align: top;
}
.line-legend, .line-legend * {
display: inline-block;
}
.line-legend h4{
font-size: 10px;
color: #9b9b9b;
font-weight: bold;
}
.team-dot .dot{
background-color: #1a467c;
}
.you-dot .dot{
background-color: #7dbe3e;
}
.dot {
display: inline-block;
height: 10px;
width: 10px;
vertical-align: middle;
border-radius: 20px;
}
div#filterDetail {
vertical-align: top;
position: relative;
display: inline-block;
font-size: 10px;
background-color: #4a90e2;
color: #fff;
padding: 4px 6px 4px 10px;
margin-left: -10px;
z-index: 10;
border-radius: 5px;
}
div#filterDetail *{
display: inline-block;
text-transform: capitalize;
}
.submit-container {
text-align: center;
}
.loader-wrapper{
position: relative;
display: block;
height: 300px;
}
#chartContainer .loader-wrapper{
margin-top: 25px;
}
img.green-loader {
position: absolute;
top: 20px;
width: 260px;
left: 0;
right: 0;
margin: 0 auto;
}
.inactive-state{
pointer-events: none;
opacity: 0.5;
}
/* Sort style on leaderboard */
.sort-arrow {
position: absolute;
top: 9px;
padding-left: 0px;
display: inline-block;
}
.sorted .fa-sort-down:before{
position: absolute;
top: -4px;
}
div#leaderboardContainer, #numbersContainer {
position: relative;
}
div#numbersContainer {
margin-top: 20px;
}
#statsRow {
position: absolute;
top: 60px;
width: 740px;
display: inline-flex;
justify-content: space-around;
max-width: 740px;
margin: 0 auto;
left: 0;
right: 0;
}
.stat-box {
padding: 0px 10px;
display: table-cell;
}
div#numbersContainer .loader-wrapper {
height: 240px;
}
div#numbersContainer img.green-loader{
top: 0px !important;
}
.stats-column{
overflow-x:hidden;
}
@media screen and (max-width:1200px){
.small-hide{
display: none;
}
.cappy{
text-transform: capitalize;
}
.stat-box {
padding: 0px !important;
}
#statsRow{
width: 600px;
max-width:600px;
}
span.stat-head {
display: inline-block;
width: 57px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div#chartContainer h3{
padding-right: 12px;
}
.line-legend {
padding-right: 12px;
}
ul.reports-date-chooser li {
margin-right: -4px !important;
}
}
/* New tooltip nav */
.nav-tooltip {
z-index: 5000;
display:none;
position: absolute;
left: 65px;
background-color: #7dbe3e;
padding: 0px 8px;
font-size: 12px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
border-radius: 8px;
box-shadow: 2px 4px 6px #b6b6b6;
}
.nav-tooltip:before{
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right:9px solid #7dbe3e;
left:-8px;
top:6px;
}
.nav-text:hover .nav-tooltip{
display: inline-block !important;
}
/* Hide tooltip when screen is too small and we move nav bar to the top */
/* NOTE: to not hide add .no-hide-flex to .main-content and add noHide=true in {{> mainDash parameter=this.currentLocationId noHide=true}} */
/* then delete {{> problemContent}} and its wrapper */
@media screen and (max-width: 1024px) {
.nav-text:hover .nav-tooltip{
display: block !important;
}
.nav-text:hover .nav-tooltip{
left: auto;
top: 80px;
}
.nav-tooltip:before{
border-top: 9px solid transparent;
border-bottom: 9px solid #7dbe3e;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
left: 17px;
top: -17px;
}
.nav.main-dash .nav-items-wrapper {
margin-top: 0px;
height: 100%;
flex-direction: row;
align-items: center;
}
}
@media screen and (max-height: 715px),
screen and (max-width: 1024px) {
.nav-text:hover .nav-tooltip{
display: block !important;
}
.nav-text:hover .nav-tooltip{
left: auto;
top: 80px;
}
.nav-tooltip:before{
border-top: 9px solid transparent;
border-bottom: 9px solid #7dbe3e;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
left: 17px;
top: -17px;
}
}
nav.main-dash.staff-nav.shrink {
background-color: #1A467C;
}
.staff-nav i {
color: #fff;
font-weight: 300;
}
.staff-nav li.nav-text.nav-list-item {
border-color: transparent;
display: flex;
justify-content: center;
height: 44px;
align-items: center;
}
.staff-nav li.nav-text.nav-list-item-admin {
border-color: transparent;
}
/* Form badge */
.form-badge, .chat-badge {
position: absolute;
margin-top: -30px;
}
p.form-number, p.chat-number {
position: absolute;
height: 18px;
min-width: 18px;
text-align: center;
margin-top: -4px;
left: 30px;
background-color: #ff0000;
vertical-align: top;
display: inline-block;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 1px 5.45px 2px;
border-radius: 50px;
line-height: 1.5em;
}
.plus-size{
width: unset !important;
}
p.telephony-size {
width: 12px !important;
height: 12px;
min-width: 12px;
left: 36px;
margin-top: -2px;
}
.staff-nav li.nav-text.nav-list-item:hover{
border-color:#7dbe3e;
}
.staff-nav li.nav-text.nav-list-item:hover i {
color:#7dbe3e;
}
.staff-nav li.nav-text.nav-list-item-admin:hover {
border-color:#7dbe3e;
}
.staff-nav li.nav-text.nav-list-item-admin:hover i {
color:#7dbe3e;
}
.staff-nav .active-dash-menu i {
color: #4a90e2 !important;
}
.staff-nav .nav-tele-chat-cont {
position: relative;
width: unset;
}
.staff-nav .nav-tele-chat-sm {
position: absolute;
right: 6px;
top: -4px;
font-size: 10px;
}
@media screen and (max-width: 1024px) {
.staff-nav li.nav-text.nav-list-item {
border-color: #1a467c !important;
}
}
@media screen and (max-height: 715px),
screen and (max-width: 1024px) {
.staff-nav li.nav-text.nav-list-item {
border-color: #1a467c !important;
}
}
.select2-container input {
background-color: #fff !important;
}
.form-submission-list-item{
padding:5px;
/* border:1px solid black; */
border-radius:5px;
}
.form-submission-user-match-item{
padding:5px;
border:1px solid black;
border-radius:5px;
}
.form-submission-user-match-item-new{
padding:5px;
border:1px solid blue;
border-radius:5px;
overflow: hidden;
}
.form-download{
color: blue;
cursor: pointer;
}
/* form table Style */
div#formTableContainer table {
width: 100%;
/* background-color: rgba(155, 155, 155, 0.37); */
top: 40px;
margin-bottom: 50px;
}
div#formTableContainer tr{
border-bottom:1px solid rgba(155, 155, 155, 0.37);
margin-bottom: 1px;
margin-bottom:1px;
}
div#formTableContainer tr.spacer {
border-bottom: 1px solid #232323;
height: 1px;
}
div#formTableContainer th {
position: relative;
text-transform: uppercase;
padding:8px 0px;
background-color: rgba(244, 244, 244, 0.8);
border-right:5px solid #fff;
vertical-align: middle;
cursor: pointer;
}
div#formTableContainer td {
padding:16px;
background-color: rgba(244, 244, 244, 0.8);
border-right:5px solid #fff;
font-size: 11px;
color: #232323;
vertical-align: middle;
}
.form-item-match-items{
overflow: scroll;
max-height: 200px;
}
div#formTableContainer th:first-child{
pointer-events: none;
}
/* Review page Style Start */
.opesReviewItemContainer{
padding:20px 0px 12px 0px;
}
.review-head * {
display: inline-block;
}
.review-head {
display: block;
padding-bottom: 12px;
}
.review-head .username {
font-size: 20px;
font-weight: bold;
color: #1a467c;
padding-bottom: 10px;
}
.review-head p.score-number {
font-size: 16px;
color: #4a90e2 !important;
}
.review-head i.fa.fa-star.fa-fw {
font-size: 14px;
vertical-align: top;
}
.review-head p.platform {
font-size: 14px;
color: #9b9b9b;
font-weight: bold;
padding: 0px 40px;
}
.review-head p.time-since {
font-size: 8px;
color: #9b9b9b;
vertical-align: middle;
}
.opesReviewItemContainer p.review-message {
font-size: 14px;
color: #000;
line-height: 1.43;
}
img.rec-icon {
width: 24px;
vertical-align: middle;
}
.agg-rating-container {
text-align: center;
padding-top: 44px;
}
p.rating-title {
font-size: 10px;
text-transform: uppercase;
color: #1a467c;
line-height: 1.2;
}
p.rating-number {
font-size: 64px;
font-weight: bold;
color: #1b467c;
}
.reviews-subhead{
font-size: 20px;
font-weight: bold;
color:#9b9b9b;
padding-bottom: 12px;
padding-top: 16px;
}
.reviews-name{
font-size: 14px;
line-height: 1.57;
font-weight: 500;
color: #1a467c;
}
.skinny-button{
width: 104px !important;
padding: 5px 0px !important;
margin: 0px 2px;
}
div#opesReviewsButtonBar {
text-align: center;
padding-bottom: 39px;
}
span.reviewsReceivedSortDesc, .reviewsReceivedTotal {
font-size: 10px;
color: #9b9b9b;
}
span.reviewsReceivedSortDesc{
float: right;
}
span.reviewsReceivedHeader {
font-family: 'Spartan' !important;
font-size: 18px;
font-weight: 500;
color: #1a467c;
padding-right: 17px;
}
.reviewsReceivedHeader span {
font-family: 'Spartan' !important;
}
div#filterReviews {
display: none;
font-size: 10px;
vertical-align: middle;
padding: 3px 12px 3px 8px;
border: 1px solid #4a90e2;
color: #4a90e2;
border-radius: 5px;
margin-left: 18px;
cursor: pointer;
}
div#filterReviews:hover{
color: #7dbe3e;
border-color: #7dbe3e;
}
#reviewFilterDialog {
display: none;
}
#reviewFilterDialog label.radio-label {
width: 179px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle !important;
margin-top: 0px !important;
}
#reviewFilterDialog .form-radio{
margin-bottom:0px !important;
}
.button-group-item{
margin-bottom: 20px;
}
p.spec-total {
font-size: 18px;
color: #1a467c;
font-weight: 500;
margin-top: 6px;
}
.message-template-filter-confirm{
padding: 40px 40px 80px 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 600px;
max-width: 400px;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
}
.message-template-filter-confirm h1 {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #232323;
margin: 0 0 10px 0;
}
.message-template-filter-confirm p {
text-align: center;
font-size: .875em;
color: #232323;
line-height: 1.33;
margin: 0 0 15px 0;
}
.message-template-filter-confirm button {
font-size:1em;
padding: 8px 25px;
width:38% !important;
border-radius: 25px;
text-decoration: none;
border: 1px solid #4a90e2;
color: #4a90e2;
position: absolute;
bottom: 27px;
cursor: pointer;
}
.message-template-filter-confirm button:nth-of-type(1) {
background-color: transparent;
}
.message-template-filter-confirm button:nth-of-type(2) {
right: 40px;
background-color: #f4f4f4;
border-color:#9b9b9b !important;
color: #9b9b9b;
}
.message-template-filter-confirm button:hover {
outline:0 !important;
border: 1px solid #7dbe3e !important;
color: #7dbe3e;
font-weight: normal;
background: #fff;
}
.message-template-filter-confirm button:active, .message-template-filter-confirm button:focus {
outline:0 !important;
}
.message-template-filter-confirm h3 {
font-weight:500;
}
.message-template-filter-confirm li {
color:blue;
border:1px solid black;
padding:3px;
font-size:10px;
}
.message-template-filter-scroll {
max-height: 450px;
overflow: scroll;
}
input.form-radio.is-empty{
border-color: #ffacac !important;
}
div#referralContainer {
font-size: 12px;
color: #5a5a5a;
line-height: 18px;
display: inline-block;
margin-bottom: 16px;
font-weight: bold;
margin-left: 38px;
}
#referral_buttons button {
height: 32px;
width: 32px;
background: #fff;
vertical-align: middle;
border: solid 4px #fff;
border-radius: 20px;
}
#referral_buttons p {
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: #9b9b9b;
padding-left: 9px;
}
div#referral_buttons {
display: inline-block;
vertical-align: top;
margin-top: 12px;
/* padding-left: 10px; */
}
div#referral_buttons div {
display: inline-block;
}
div#referral_yes{
margin-right: 15px;
}
div#referral_yes, div#hipaa_no {
display: inline-block;
}
.selected-referral{
background-color: #4a90e2 !important;
}
ul#formList i.fa-circle-check, .referrer-history-container i.fa-check-circle {
color: #7dbe3e;
}
.attachments-container a {
font-size: 14px;
color: #4a90e2;
text-decoration: none;
margin-left: 16px;
}
.ref-detail-container .fa-user-md{
margin-right: 5px;
}
a#toCust {
text-decoration: none;
color: #4a90e2;
}
.flippy {
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
}
i.flippy {
width: unset;
}
/* for non fliped icons in nav bar */
.offset-flippy {
width: unset;
}
textarea.long-input {
width: 100%;
outline: none !important;
border: none !important;
padding: 16px;
resize: none;
height: 76px;
overflow-y: auto;
overflow-x: hidden;
font-size: 14px;
color: #232323;
border-radius: 24px;
}
ul#referrerHistoryList, .history-header {
width: 70%;
max-width: 375px;
}
ul#referrerHistoryList div#formStatus {
width: 10%;
margin-left: 2%;
}
ul#referrerHistoryList div#formUsername {
width: 70%;
}
.history-header .left-sort {
float: right;
margin-top: 2px;
}
.history-header {
margin-top: 35px;
}
div#formError {
color: #ff0000;
font-size: 12px;
line-height: 1.42em;
}
.already-sent{
color: #9b9b9b;
border-color: #9b9b9b;
pointer-events: none;
opacity: .5;
}
.formSendContainer {
display: flex;
align-items: center;
position: relative;
}
.formSkipSend {
text-decoration: none;
color: #4a90e2;
font-size: 12px;
cursor: pointer;
margin-left: 10px;
}
.hideSkipSend {
display: none;
}
.load-more-container {
width: 100%;
text-align: center;
margin-top: 20px;
}
#loadMoreForms{
display: none;
}
.attachments-container {
margin: 32px 0px;
}
.caps{
text-transform: capitalize;
}
li.specialist-filter-item .caps, li.location-filter-item .caps, li.service-type-item .caps, li.message-type-item .caps {
max-width: 162px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
vertical-align: middle;
text-overflow: ellipsis;
}
/* NEW CUSTOMERS PAGE START */
.whiteBackground {
background-color: rgba(255, 255, 255, 1) !important;
}
.customersLeftPadding {
padding-left: 56px;
overflow-y: scroll !important;
}
.customersSelectedToastContainer {
display: flex;
background-color: #7dbe3e;
color: white;
border-radius: 8px;
text-align: center;
position: fixed;
z-index: 2;
width: 527px;
/* width: 56.8125rem; */
height: 48px;
margin: 1px auto;
left: 0;
right: 0;
}
.customersSelectedToast span {
margin-left: 24px;
font-size: 16px;
font-weight: bold;
white-space: nowrap;
}
.customersSelectedToast {
display: flex;
width: 50%;
/* margin-right: 32px; */
justify-content: space-evenly;
align-items: center;
}
.customerSelectedToastButton {
background-color: #7dbe3e;
width: 135px;
height: 24px;
font-size: 11px;
font-weight: 500;
color: #ffffff;
margin: 0 25.5px 0 54px;
/* padding: 0 30px; */
border-radius: 24px;
border: solid 2px #ffffff;
cursor: pointer;
}
.greenBackgroundBorder {
border: 2px solid #7dbe3e !important;
background-color: #7dbe3e !important;
}
.customerListMargins {
margin: 0 55px 0 0;
}
.to-cust-details-link {
color: unset;
}
#add-group, #add-staff {
display: none;
}
.contacts-add-group{
/* margin-left: 20px; */
margin-top: 0px !important;
font-size: 12px !important;
font-weight: bold !important;
}
.contacts-add-group.modal-button {
width: 184px !important;
height: 40px !important;
font-size: 16px !important;
}
.contacts-add-group.skinny-button{
width: 144px !important;
padding: 8px 10px !important;
font-size: 14px !important;
}
.customerButtonsContainer {
display: flex;
white-space: nowrap;
position: relative;
width: 33.3%;
justify-content: flex-end;
align-items: center;
}
.groupDetailsButtonsContainer {
display: flex;
white-space: nowrap;
position: relative;
}
.group-validate-tt {
width: 290px;
height: 220px;
background-color: #4a90e2;
z-index: 2;
color: #fff;
position: absolute;
top: 0;
right: calc(100% + 14px);
border-radius: 12px;
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.25);
}
.group-tt-arrow-right {
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 14px solid #4a90e2;
position: absolute;
right: -10px;
top: 7px;
}
.group-validate-tt-close {
text-align: right;
margin: 18px 18px 0 0;
}
.group-validate-tt-close i {
cursor: pointer;
}
.group-validate-tt-icon {
border-radius: 50%;
border: 2px solid white;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.group-validate-tt-head {
margin-top: 20px;
text-align: center;
font-weight: bold;
font-size: 18px;
font-family: 'Spartan' !important;
line-height: normal;
}
.group-validate-tt-text {
width: 217px;
margin: 10px auto;
font-size: 14px;
line-height: 1.43;
letter-spacing: normal;
text-align: center;
color: #fff;
white-space: pre-wrap;
}
.group-send-progress-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.progress-container {
background-color: #4a90e2;
height: 47px;
width: 100%;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
margin-bottom: 5px;
}
.progress-container:first-child {
margin-top: 42px;
}
.progress-text-wrapper {
display: flex;
}
.progress-h {
color: #fff;
font-weight: bold;
font-size: 16px;
}
.progress-text {
color: #fff;
font-size: 16px;
margin-left: 34px;
}
.customer-modal h1 {
margin: 18px 0 0 0;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
color: #1a467c;
}
#filterSearchDescription {
display: flex;
margin-bottom: 39px !important;
align-items: flex-end;
}
.blacklist-page-col #filterSearchDescription {
margin-bottom: 10px !important;
}
.filterListType {
margin-right: 12px;
font-size: 14px;
font-weight: bold;
color: #1a467c;
margin-top: 6px;
}
.filterListFilters {
margin-right: 16px;
font-size: 14px;
font-weight: bold;
color: #777c80;
}
#filterListReset {
font-size: 12px;
color: #4a90e2;
margin-left: 12px;
}
.modalButtonBadge {
position: absolute;
border-radius: 50%;
background-color: #7dbe3e;
color: white;
height: 18px;
width: fit-content;
min-width: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
top: -5px;
right: -5px;
}
.chatFilterBadge {
top: -7px;
right: -7px;
}
.filterModalImg {
height: 64px;
display: flex;
justify-content: center;
}
#filterModalClickedCount, #filterBtnClickedCount {
display: flex;
justify-content: center;
align-items: center;
color: white;
position: absolute;
margin-left: 50px;
height: 23px;
width: 23px;
text-align: center;
background-color: #7dbe3e;
border-radius: 50%;
}
#filterBtnClickedCount {
top: -8px;
left: -24px;
}
.filterModalSelected,
.filterModalSelectedAlt {
list-style: initial !important;
color: #7dbe3e !important;
background-color: white !important;
}
.listSelected {
width: 6px;
height: 6px;
background-color: #7dbe3e;
border-radius: 50%;
position: absolute;
left: -14px;
}
.filterModalFilters {
display: flex;
justify-content: flex-start;
flex-direction: column;
width: 176px !important;
height: 251px !important;
padding-left: 23px;
}
.filterModalFilters h3 {
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #9b9b9b;
}
.filterModalFilters ul {
margin-top: 10px;
width: 90%;
overflow: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.filterModalFilters ul::-webkit-scrollbar {
display: none;
}
.filterModalFilters li {
cursor: pointer;
font-size: 10px;
margin-top: 10px;
color: #4a90e2;
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
}
.filterModalContainers {
display: flex;
justify-content: space-evenly;
margin-top: 23px;
}
.filterModalSize {
min-height: 600px !important;
padding: 64px 75px !important;
}
.filterModalColumn {
width: 1px;
height: 251px;
border: solid 1px #dadada;
}
.msg-filter-date-cont {
display: flex;
margin: 10px 0;
flex-direction: column;
align-items: flex-start;
}
.msg-filter-date-cont-togg {
flex-direction: row;
gap: 8px;
}
.msg-filter-date-label {
font-size: 10px;
color: #4a90e2;
margin-bottom: 6px;
}
.centered {
margin: auto;
left: 0;
right: 0;
}
.twoToggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 240px;
height: 48px;
margin: 29px auto 0px;
border-radius: 22px;
}
.twoToggleSlide {
position: relative;
display: inline-block;
z-index: 1;
width: 240px;
height: 50px;
pointer-events: none;
}
.twoToggleSlide input {
opacity: 0;
width: 0;
height: 0;
}
.toggleSlider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 2px #f4f4f4;
-webkit-transition: .2s;
transition: .2s;
border-radius: 22px;
}
.toggleSlider:before {
position: absolute;
content: "";
height: 40px;
width: 120px;
left: 3px;
bottom: 3px;
border-radius: 22px;
background-color: #4a90e3;
-webkit-transition: .2s;
transition: .2s;
}
#groupsToggle input:checked + .toggleSlider:before {
-webkit-transform: translateX(110px);
-ms-transform: translateX(110px);
transform: translateX(110px);
}
.toggleActive {
display: flex;
align-items: center;
justify-content: center;
width: 117px;
height: 40px;
color: #4a90e2;
font-weight: bold;
position: absolute;
left: 4px;
z-index: 5;
}
.toggleInactive {
display: flex;
align-items: center;
justify-content: center;
width: 117px;
height: 40px;
color: #4a90e2;
font-weight: bold;
position: absolute;
right: 3px;
z-index: 5;
}
.toggleActiveColor {
color: white !important;
}
.groupActivityContainer {
margin-top: 30px;
overflow: auto;
width: 80%;
}
.groupActivityItem {
/* height: 70px; */
margin: 8px 0 0 0;
padding: 14px 40px 12px;
border-radius: 8px;
background-color: #f2f3f3;
}
.groupActivityItem div {
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
}
.groupActivityDateTime {
font-family: Roboto;
font-size: 12px;
font-weight: bold;
line-height: normal;
color: #545454;
}
.groupActivityAction {
margin: 6px 0 0;
font-family: Roboto;
font-size: 16px;
line-height: 1.5;
color: #545454;
}
.groupHistoryModalSize {
min-width: 750px !important;
min-height: 590px !important;
max-height: 590px !important;
display: flex;
flex-direction: column;
}
.groupsCount {
height: 22px;
/* margin-bottom: 14px; */
padding-right: 55px;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: normal;
color: #1a467c;
}
.groups-count-sort-cont {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 55px 14px 0;
}
.groupDetailsHeaderContainer {
display: flex;
justify-content: space-between;
/* min-width: 805px; */
white-space: nowrap;
margin-right: 15px;
}
.group-fail-csv {
color: #4a90e2;
margin-left: 12px;
font-weight: normal;
}
.groupDetailsHeaderLeft {
display: flex;
flex-direction: column;
overflow: hidden;
}
.groupDetailsHeaderLeft p {
height: 18px;
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
line-height: normal;
color: #1a467c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#groupNameEdit {
margin-top: 44px;
}
#groupDescriptionEdit {
margin-top: 30px;
}
#groupDescriptionEdit textarea{
height: 140px;
border: 2px solid #4a90e2;
padding: 15px 41px 21px;
font-size: 16px;
font-weight: bold;
color: #4a90e2;
resize: none;
border-radius: 28px;
outline: none;
}
.groupHistory {
display: flex;
margin-top: 8px;
}
.groupHistory p {
height: 14px;
font-size: 12px;
font-family: Roboto !important;
font-weight: normal;
line-height: normal;
color: #777c80;
}
.groupHistory span {
height: 11px;
margin: 2px 0px 0px 8px;
font-size: 10px;
font-weight: 500;
line-height: normal;
color: #4a90e2;
}
.groupDetailCardsCont {
display: flex;
justify-content: space-between;
margin-top: 38px;
}
.detailCard {
display: flex;
flex-direction: column;
/* min-width: 190px; */
width: 200px;
height: 86px;
margin-right: 15px;
/* margin: 36px 14.3px 37px 100px; */
/* padding: 15px 101px 10px 21px; */
border-radius: 8px;
border: solid 1px #4a90e2;
background-color: #ffffff;
}
.detailCard p {
height: 14px;
margin: 15px 0 0 21px;
font-family: Roboto;
font-size: 12px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.17;
letter-spacing: normal;
color: #4a90e2;
}
.detailCard span {
height: 36px;
margin: 11px 0 0 21px;
font-family: Spartan-Thin_;
font-size: 32px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
}
#detailCardHistoryButton {
height: 11px;
margin: 33px 16px 3px auto;
font-family: Roboto;
font-size: 10px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
white-space: nowrap;
}
#customerGroupList {
margin-top: 37px;
margin-right: 15px;
/* min-width: 805px; */
}
#customerGroupList .sort-col, #groupHistorySortHeader .sort-col {
margin-left: 0;
}
#groupHistorySortHeader {
margin-top: 41px;
}
#groupHistoryList, #groupSendDetailsList {
overflow: scroll;
}
#groupHistoryDate, #groupHistorySentBy, #groupHistoryStoryName {
font-family: Roboto;
font-size: 14px;
}
.groupListBigCol {
width: 27%;
}
.groupListMedCol {
width: 21%;
}
.groupHistoryBigCol {
width: 26%;
}
.groupHistoryMedCol {
width: 16%;
}
.groupHistorySmCol {
width: 14%;
text-align: center;
}
/* #groupHistorySortHeader .groupListSmCol, #groupHistoryList .groupListSmCol {
width: 16%;
text-align: center;
} */
#groupHistoryList .groupHistorySmCol {
font-size: 18px;
}
#group-history-modal h3 {
text-align: center;
margin-top: 30px;
color: #4a90e2;
}
.validateGroupModalSize {
width: 600px;
height: 389px;
}
.group-validate-mod-img, .group-export-mod-img{
color: #1a467c;
display: flex;
align-items: center;
justify-content: center;
height: 64px;
width: 64px;
border: 3px solid #1a467c;
border-radius: 50%;
margin: 0 auto;
margin-top: 53px;
}
/* EXPORT MODAL START */
.export-modal {
width: 21.875rem;
height: 15.625rem;
width: 21.875rem;
height: 250px;
padding: 1.25rem 1.625rem 1.875rem;
}
.export-dialog-loader {
width: 3rem;
height: 3rem;
margin-top: 1rem;
}
.group-export-mod-img {
width: 4rem;
height: 4rem;
margin-top: 1.625rem;
font-size: 28px;
}
/* EXPORT MODAL END */
.group-validate-mod-img i {
font-size: 24px;
}
.validate-group-load {
text-align: center;
margin-top: 56px;
}
.validate-group-load img {
height: 3rem;
width: 3rem;
}
.addCustCount {
margin-top: 31px;
font-family: Roboto;
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-align: center;
color: #777c80;
}
.addNewGroupNameErr {
margin-top: 67px;
height: 12px;
font-size: 12px;
color: red;
text-align: center;
}
.addNewGroupNameContainer {
display: flex;
justify-content: center;
margin-top: 10px;
width: 100%;
}
#customer-group-name {
max-width: 360px !important;
height: 44px !important;
background-color: #fff !important;
border: solid 2px #4a90e2;
font-size: 16px;
font-weight: bold;
color: #4a90e2 !important;
border-radius: 24px;
}
input#customer-group-name::placeholder {
color: #4a90e2 !important;
opacity: 1;
}
.customerExistingGroupSelect {
width: 360px !important;
height: 44px !important;
border-radius: 24px !important;
padding-left: 41px !important;
font-size: 16px !important;
}
#create-group-modal input {
display: flex;
justify-content: center;
padding-left: 41px;
}
#groupSorts {
display: none;
position: relative;
margin-right: 8px;
}
#groupsAlphaSort {
display: inline-block;
font-size: 12px;
padding: 4px 10px 4px 44px !important;
width: 180px !important;
border-radius: 20px;
/* position: relative; */
right: 0;
top: 10px;
}
.groups-alpha-label {
position: absolute;
font-family: Roboto;
font-size: 12px;
font-weight: bold;
line-height: 2;
color: #4a90e2;
left: 16px;
top: 1px;
}
#groupsList {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
grid-gap: 44px 16px;
}
.groupsListAddCard {
display: flex;
align-items: center;
justify-content: center;
width: 238px;
height: 282px;
/* margin: 14px 16px 44px 56px; */
/* padding: 64px 49px 64px 48px; */
border-radius: 8px;
border: solid 2px #4a90e2;
background-color: #ffffff;
}
.addCardBackground {
/* width: 141px; */
/* height: 154px; */
padding: 27px 23px 31px 22px;
border-radius: 8px;
background-color: #f4f4f4;
}
.groupCard {
display: flex;
flex-direction: column;
align-items: center;
width: 238px;
height: 282px;
border-radius: 8px;
background-color: #f2f3f3;
}
.groupCard img{
margin-top: 37px;
}
.groupCard h3 {
margin-top: 22px;
font-size: 16px;
font-weight: bold;
color: #1a467c;
text-align: center;
line-height: normal;
}
.groupCardLabel1 {
margin-top: 10px;
font-size: 12px;
font-weight: 500;
color: #545454;
}
.groupCardDate {
margin-top: 2px;
font-size: 10px;
font-weight: 500;
color: #9b9b9b;
}
.groupCardLabel2 {
margin-top: 13px;
font-size: 8px;
font-weight: bold;
color: #1a467c;
}
.groupCardCount {
margin-top: 2px;
font-size: 12px;
color: #1a467c;
}
.groupCardDetails {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 36px;
margin-top: auto;
border-radius: 0 0 8px 8px;
background-color: #4a90e2;
color: #ffffff;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.group-uploading {
background-color: #c7c7c7;
}
.customerFilterClicked {
color: white;
background-color: #4a90e2;
border: 2px solid #4a90e2;
transition: color .3s, border .3s, background-color .3s;
}
.customerFilterClicked:hover {
color: white;
border: 2px solid #7dbe3e;
background-color: #7dbe3e;
}
.chat-header-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.chat-header-right-mobile {
display: flex;
gap: 8px;
margin-right: 20px;
}
.chat-header-right-mobile .circleButton {
margin-right: 0;
}
.main-content .chat-page-header {
margin: 0;
padding-bottom: 0 !important;
/* margin-left: 40px; */
}
.customerClicked {
/* border: 2px solid #7dbe3e !important; */
box-shadow: inset 0px 0px 0px 2px #7dbe3e;
background-color: white !important;
}
.customerListHeader {
position: relative;
font-family: 'Roboto', sans-serif !important;
min-height:120px;
}
div#customerFiltersMain {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 28px;
padding-right: 55px;
}
.form-cust-filter {
display: none;
}
input#customerFilter, input#groupDetailFilter, input#staffMediaFilter, input#staffResponsesFilter {
background-color: #fff !important;
border: solid 2px #4a90e2;
font-size: 15px;
color: #4a90e2 !important;
border-radius: 30px;
margin-bottom: 5px;
height: 44px !important;
width: 44px !important;
}
input#staffMediaFilter, input#staffResponsesFilter {
width: 235px !important;
}
input#customerFilter::placeholder, input#groupDetailFilter::placeholder, textarea#groupDescription::placeholder, input#groupName, textarea#addInfoField::placeholder, input.custInfoLookup::placeholder, input#staffMediaFilter::placeholder, input#staffResponsesFilter::placeholder {
color: #4a90e2 !important;
opacity: 1;
}
.bluePlaceholder::placeholder {
color: #4a90e2 !important;
opacity: 1;
}
#chatCustFilter::placeholder {
color: #4a90e2 !important;
}
#chatCustFilter {
color: #4a90e2;
font-size: 15px;
border: solid 2px #4a90e2;
background-color: #fff !important;
border-radius: 30px;
margin-bottom: 30px;
height: 44px !important;
width: 90% !important;
}
#chatFilterText {
display: flex;
margin-left: 40px;
margin-bottom: 20px;
align-items: flex-end;
flex-wrap: wrap;
}
#chatFilterContent {
padding-bottom: 100px;
overflow-y: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
#chatFilterContent::-webkit-scrollbar {
display: none;
}
#readFilterWrapper {
overflow: hidden;
}
.chatFilterContainer, .chatFilterUnreadContainer {
min-height: 5.625rem;
display: flex;
padding: 0 20vw 0 25vw;
row-gap: 30px;
flex-wrap: wrap;
overflow-y: scroll;
padding-bottom: 80px;
margin-top: 30px;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chat-parent-with-select {
min-height: 200px;
max-height: 200px;
}
.chatFilterUnreadContainer .select2 .selection .select2-selection .select2-selection__rendered .select2-search .select2-search__field {
width: 6.25rem !important;
height: 1.625rem;
border-radius: .25rem !important;
padding: 0 .625rem;
}
.chatFilterContainer::-webkit-scrollbar {
display: none;
}
.chatFilterContainer-option {
width: 210px;
}
.filterByStatus-h {
margin-top: 1.25rem;
}
.chat-loc-filter-empty {
width: 210px;
height: 0;
}
.chatFilterSize {
min-width: 604px !important;
padding: 52px 55px 113px 55px !important;
max-height: 94vh;
overflow-y: scroll;
}
.chat-search-mobile-wrapper, .call-search-mobile-wrapper, .voice-search-mobile-wrapper {
display: none;
position: relative;
width: 257px;
}
.chat-search-mobile-wrapper .fa-search, .call-search-mobile-wrapper .fa-search, .voice-search-mobile-wrapper .fa-search {
position: absolute;
font-size: 16px;
color: #4a90e2;
top: 13px;
left: 18px;
}
.chat-search-mobile {
width: 100%;
height: 100%;
font-size: 16px;
color: #4a90e2;
border-radius: 60px;
border: 2px solid rgb(74, 144, 226);
background-color: #fff !important;
padding-left: 44px;
}
.chat-search-mobile::placeholder {
color: #4a90e2 !important;
}
#resetChatFilter, #resetCallFilter, #resetVoiceFilter {
font-size: 16px;
position: absolute;
top: 13px;
right: 18px;
}
#chatLocationFilter {
position: absolute;
right: -40px;
top: 0px;
}
#chatLocationFilter i {
right: 12px;
color: unset;
}
.chatLocationFilterItem {
cursor: pointer;
color: #4a90e2;
margin-top: 10px;
width: fit-content;
}
.selectedChatLoc {
color: #7dbe3e;
}
#chat-filter-close i, #chat-patient-prof-close {
z-index: 1;
font-size: 24px;
position: absolute;
top: 25px;
right: 39px;
color: #4a90e2;
transition: color .3s;
}
#chat-filter-close i:hover, #chat-patient-prof-close:hover {
color: #7dbe3e;
}
li.customer-filter-button {
position: relative;
display: inline-block;
color: #4a90e2;
margin-right: 20px;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 14px;
cursor: pointer;
}
li.customer-filter-button:hover{
color: #7dbe3e;
}
.customer-filter-button::after {
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
background:transparent;
height:4px;
border-radius:10px;
}
.customer-filter-button-bold {
font-weight: bold;
}
.customer-filter-button:hover::after{
background: #7dbe3e !important;
}
.customer-filter-button.customer-selected-filter:after{
background: #4a90e2;
}
.customer-selected-filter {
font-weight: bold;
}
.customerSelectCircle {
width: 20px;
position: absolute;
height: 20px;
margin: -1px 19px 2px -8px;
border: solid 2px #dadada;
border-radius: 50%;
}
.customerSelectCircle:hover {
background-color: #7dbe3e;
border-color: #7dbe3e;
}
.customerSelectAll {
width: 20px;
position: absolute;
height: 20px;
margin: -1px 19px 2px -8px;
border: solid 2px #dadada;
border-radius: 50%;
}
.customerSelectAll:hover {
background-color: #7dbe3e;
border-color: #7dbe3e;
}
.dups-review-cont {
margin-left: 120px;
}
.dups-review-cont h1 {
font-family: Spartan !important;
margin-bottom: 20px;
font-size: 24px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: normal;
color: #1a467c;
display: none;
}
.no-dups-toast {
display: none;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
color: #545454;
}
.dup-review-row {
display: flex;
align-items: center;
justify-content: space-between;
width: 90%;
height: 104px;
flex-grow: 0;
margin: 0px 0px 8px 0px;
padding: 27px 37px;
border-radius: 24px;
background-color: #f2f3f3;
}
.dup-review-row:first-of-type {
margin-top: 26px;
}
.dup-rev-row-left {
display: flex;
width: 75%;
align-items: center;
justify-content: flex-start;
padding-right: 16px;
}
.dup-rev-row-right {
display: flex;
width: 25%;
align-items: center;
justify-content: flex-end;
}
.dup-review-num {
font-family: Spartan !important;
margin-right: 42px;
border: solid 2px #1a467c;
color: #1a467c;
font-weight: bold;
line-height: 1.5;
display: flex;
border-radius: 50%;
min-width: 42px;
height: 42px;
justify-content: center;
align-items: center;
padding-top: 2px;
}
.dup-review-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.dup-review-info-count {
flex-grow: 0;
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
color: #1a467c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dup-review-info-contacts {
flex-grow: 0;
font-family: Spartan !important;
font-size: 16px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
color: #545454;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dup-review-button, .connect-dup-button {
background-color: #4a90e2;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8%;
}
.connect-dup-button {
margin-right: 0;
min-width: 144px;
}
.dup-review-button:hover, .connect-dup-button:hover {
background-color: #7dbe3e;
color: white;
}
.dup-review-skip {
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
color: #4a90e2;
cursor: pointer;
}
.dup-review-skip:hover {
color: #7dbe3e;
}
#showContactsSearch {
margin-right: 0;
}
.dup-review-box {
margin: 16px 0 56px 120px;
width: 80%;
}
.dup-review-box h1 {
margin-bottom: 11px;
font-family: Spartan !important;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: normal;
color: #1a467c;
}
.dup-review-box h2 {
margin-bottom: 32px;
padding: 0 !important;
font-family: Spartan !important;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
color: #1a467c;
}
.dup-rev-instructions-cont {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 30px;
}
.dup-rev-inst-head {
margin-bottom: 8px;
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: normal;
color: #777c80;
margin-right: 1rem;
}
.dup-rev-inst-subhead {
font-family: Spartan !important;
font-size: 16px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
color: #777c80;
margin-right: 1rem;
}
.dup-rev-list a {
text-decoration: none;
color: #4a90e2;
}
.dup-rev-list-headers {
display: flex;
justify-content: flex-start;
margin-bottom: 7px;
}
.dup-rev-list-headers div {
font-size: 10px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #4a90e2;
padding: 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dup-rev-list-prof {
display: flex;
height: 56px;
align-items: center;
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 8px;
cursor: pointer;
transition: background-color .3s;
}
.dup-rev-list-prof:hover {
background-color: #c5dbf5;
}
.dup-primary-selected {
box-shadow: inset 0px 0px 0px 2px #7dbe3e;
background-color: white;
}
.dup-rev-list-prof div {
color: #545454;
}
.dup-rev-list-col-select {
height: 20px;
width: 20px;
margin: 0 16px;
border: solid 2px #dadada;
border-radius: 50%;
}
.dup-rev-list-col-select:hover {
/* color: #7dbe3e; */
cursor: pointer;
border: 2px solid #7dbe3e;
background-color: #7dbe3e;
}
.dup-rev-list-col-ends {
width: 6%;
text-align: center;
color: #4a90e2 !important;
font-size: 24px;
margin-right: 18px;
}
.dup-rev-list-col-ends:hover {
color: #7dbe3e !important;
}
.dup-rev-list-col-lg {
width: 26%;
}
.dup-rev-list-col-med {
width: 21%;
}
.dup-rev-list-col-sm {
width: 15%;
}
.dup-rev-list-col-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
}
/* NEW CUSTOMERS PAGE END */
/* New patient style */
#custList {
display: none;
}
#custList .large-item {
width: 20%;
}
#custList .medium-item {
width: 16%;
}
#custList .small-item {
width: 12%;
}
#custList .sort-col.small-item {
width: 12% !important;
}
li.cust-list-header, li.group-history-header, li.groupSendDetailsSort, li.chat-media-header {
margin-bottom: 7px;
padding-left: 2%;
}
li.cust-list-header .sort-col, li.group-history-header .sort-col, li.groupSendDetailsSort .sort-col {
display: inline-block;
font-size: 10px;
color: #4a90e2;
padding: 0 2%;
margin-left: -4px;
}
.media-copy-url {
margin-top: 12px;
font-size: 14px;
color: #545454;
}
.load-more-cust, .load-more-messages, .loading-biz-media {
width: 100%;
display: flex;
justify-content: center;
padding-right: 15px;
margin-top: 10px;
}
.load-more-cust img, .load-more-messages img, .loading-biz-media img {
width: 3rem;
height: 3rem;
}
li.groupSendDetailsSort .sort-col {
font-family: Helvetica;
}
.sort-col.is-sortable.medium-item:first-of-type {
margin-left: -2px;
}
.active-sort {
font-weight: bold;
}
.is-sortable{
text-transform: uppercase;
cursor: pointer;
}
div#marquee {
font-family: 'Spartan' !important;
font-size: 20px;
color: #1A467C;
font-weight: bold;
display: inline-block;
}
#listHead{
margin-top: 64px;
margin-bottom: 25px;
}
div#openedLegend {
display: inline-block;
float: right;
font-size: 11px;
vertical-align: bottom;
margin-top: 5px;
color: #9b9b9b;
}
#openedLegend i{
font-size: 14px !important;
vertical-align: text-bottom;
}
#openedLegend .fa-plus-circle{
color: #7dbe3e;
padding-left: 9.5px;
padding-right: 5.5px;
}
#openedLegend .fa-minus-circle{
color: #ff3b30;
padding-left: 14.5px;
padding-right: 5.5px;
}
.legend-title{
font-weight: bold;
}
.wuwta-sort-icon,
.active-sort i {
color: #4a90e2;
font-weight: bold;
font-size: 16px;
line-height: .92;
padding-left: 4px;
vertical-align: text-bottom;
}
.wuwta-headers {
margin-bottom: 7px;
padding-left: 18px;
display: flex;
align-items: center;
justify-content: space-between;
color: #4a90e2;
font-size: 10px;
line-height: 1.6;
}
.wuwta-ul {
}
.wuwta-li {
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 4px;
cursor: pointer;
transition: background-color .3s;
padding-left: 18px;
}
.wuwta-li:hover, .online-customer-row:hover {
background-color: #c5dbf5 !important;
}
.wuwta-li div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #545454;
}
.wuwta-li div a {
text-decoration: none;
color: #4a90e2;
}
.wuwta-li-btn {
border: solid 2px #4a90e2;
border-radius: 24px;
background-color: #4a90e2;
font-size: 1rem;
font-family: Roboto;
font-weight: bold;
color: #ffffff;
text-align: center;
text-decoration: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
min-width: 156px;
min-height: 36px;
transition: background-color .3s, border .3s;
}
@media screen and (max-width: 720px) {
.wuwta-li-btn {
font-size: .625rem;
min-width: 4.375rem;
min-height: 1.375rem;
}
}
.wuwta-li-btn:hover {
background-color: #7dbe3e;
border: solid 2px #7dbe3e;
}
.wuwta-li-btn:active {
opacity: 0.7;
}
.wuwta-li-btn:disabled {
border: solid 2px #dadada;
background-color: #dadada;
cursor: not-allowed;
}
.wuwta-li-btn-alt {
background-color: #dadada;
border: solid 2px #dadada;
}
.wuwta-li-btn-alt:hover {
background-color: #979797;
border: solid 2px #979797;
}
.wuwta-li-btn-hide {
display: none;
}
.customer-history-container {
overflow: hidden;
background-color: #fff;
position: absolute;
width: 100%;
height: 100vh;
display: none;
z-index: 2;
}
div#customerDetails {
background-color: #f2f3f3;
display: inline-block;
max-width: 900px;
width: 75%;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding: 58px 100px 0px 58px ;
margin-left: -5px;
}
div#customerDetails h2 i {
padding-right: 5px;
}
h3.main-title {
font-size: 20px;
color: #1a467c;
font-weight: bold;
}
div#customerDetails h2 {
font-size: 14px;
font-weight: bold;
}
img.hipaa-badge {
position: absolute;
top: 22px;
width: 87px;
right: 18%;
}
a.direct-to-chat {
color: #4a90e2;
font-size: 20px;
position: absolute;
right: 10%;
top: 27px;
}
a.direct-to-chat:hover {
color: #7dbe3e !important;
}
.additional-contact-box {
position: relative;
width: 33%;
padding: 0px 42px 0px 1px;
display: inline-block;
font-size: 12px;
vertical-align: top;
line-height: 1.18em;
}
#contactsBox, #groupsBox {
display: none;
}
.groupsBoxContainer {
display: flex;
padding-left: 23px;
}
.groupsBoxContainer a {
text-decoration: none;
color: black;
}
.groupsBoxContainer a:hover {
color: #4a90e2;
}
.groupsBoxItem {
font-size: 0.825em;
margin-right: 10px;
}
.contact-specific{
color: #4a90e2;
padding-top: 5px;
}
.edit-cont {
width: fit-content;
position: absolute;
top: -2px;
right: 42px;
font-size: 16px;
color: #4a90e2;
cursor: pointer;
}
.hipaa-sort{
position: relative;
white-space: nowrap;
}
.hipaa-sort i {
position: absolute;
/* left: 72%; */
top: -3px;
}
/* Activity table */
#custActivityList .medium-item {
padding: 0% 2% !important;
width: 14.3%;
white-space: nowrap;
}
/* #custActivityList div#custListMessage {
position: relative;
} */
#custActivityList li.form-submission-list-item{
white-space: nowrap;
}
#custActivityList .large-item {
width: 18%;
padding: 0% 2% !important;
}
#custActivityList .small-item {
width: 10%;
padding: 0% 1% !important;
}
span.recent-subtext {
font-size: 14px;
color: #9b9b9b;
vertical-align: middle;
}
li.status-icon .fa-comment {
color: #7dbe3e;
}
#custActivityList li.message-name {
width: calc(100% - 26px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#custActivityList li.cust-list-header{
position: relative;
/* pointer-events: none; */
}
#custActivityList li.cust-list-header .sort-col {
pointer-events: none;
}
@media screen and (max-width:1199px){
div#custListHipaa img {
width: 49px;
}
.main #custList .sort-col.hipaa-sort{
text-align: left !important;
width: 12% !important;
/* padding-left: 4% !important; */
}
#custList .large-item {
width: 24% !important;
}
}
@media screen and (min-width: 1200px){
#custList .medium-item {
/* changed from 18 to 17 in old customers */
width: 16% !important;
}
#custList .small-item {
width: 12% !important;
}
#custList .sort-col.small-item {
/* changed from 12 to 11 in old customers */
width: 12% !important;
}
.main #custList .sort-col.hipaa-sort{
/* text-align: right !important; */
width: 16% !important;
padding-right: calc(2% + 30px) !important;
}
}
ul.message-status li {
display: inline-block;
vertical-align: middle;
}
ul.message-status .status-icon i{
font-size: 16px;
margin-right:10px;
line-height: 1.2;
}
ul.message-status .status-icon i.fa-plus-circle {
color: #7dbe3e;
}
ul.message-status .status-icon i.fa-minus-circle {
color: #ff3b30;
}
#custListHipaa{
line-height: unset !important;
padding-right: 28px !important;
/* text-align: right; */
text-overflow:unset !important;
}
/* Chat style start */
.chat-col{
padding-left: 15px !important;
padding-right: 0px !important;
padding-bottom: 0;
background-color: #fff !important;
overflow: hidden;
}
.convo-col, .dial-col {
background-color: #f2f3f3 !important;
position: relative;
}
#chatList::-webkit-scrollbar {
width: 0px !important;
background: transparent !important; /* make scrollbar transparent */
}
.chat-customer {
display: flex;
justify-content: space-between;
width: 100%;
padding: 16px 36px 16px 12px;
background-color: rgba(242, 243, 243, 0.5);
border-radius: 8px 0px 0px 8px;
margin-bottom: 4px;
}
.chat-customer-left {
max-width: 77%;
min-width: 77%;
display: flex;
align-items: center;
}
.chat-customer-right {
display: flex;
align-items: center;
}
.chat-customer .chat-item {
display: inline-block;
}
.chat-item.status-dot {
width: 10px;
height: 10px;
vertical-align: middle;
border-radius: 20px;
margin-right: 8px;
border: 1px solid #7dbe3e;
}
.chat-customer.unread-chat .status-dot {
background: #7dbe3e;
}
.chat-customer.read-chat .status-dot {
background: transparent;
}
.chat-customer.read-chat .status-dot:hover {
background: #7dbe3e;
}
.active-chat {
background-color: #f2f3f3;
}
.active-chat:hover {
background-color: #f2f3f3 !important;
}
.chat-customer:hover {
background-color: #f2f3f380;
}
.chat-item.initials, .chat-result .initials {
width: 34px;
text-align: center;
font-size: 14px;
padding: 9px 0px;
border-radius: 20px;
vertical-align: middle;
border: 1px solid #1a467c;
color: #1a467c !important;
font-weight: 500;
transition: background-color .3s, opacity .3s, color .3s;
}
.chat-item.initials:hover, .chat-result .initials:hover, .call-hist-inits:hover {
background-color: #7dbe3e;
border-color: #7dbe3e;
color: #fff !important;
}
.chat-item.chat-info {
width: 65%;
vertical-align: middle;
margin-left: 4px;
}
.name-space {
font-size: 14px;
font-weight: bold;
color: #545454;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 4px;
line-height: 1.1;
}
.chat-info .message-body {
font-size: 12px;
color: #545454;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 12px;
}
.chat-item.message-time {
min-width: 90px;
font-size: 10px;
color: #545454;
text-align: right;
line-height: 1.2;
}
/* Convo style */
.convo-bubble{
width:100%;
min-height:30px;
display:block;
}
.convo-bubble.today-bar {
clear: both;
margin: 24px 0px 16px 0px;
position: relative;
border-top: 1px solid #dadada;
float: left;
}
.today-bar div{
font-size: 10px;
color: #9b9b9b;
padding: 8px;
background-color: #f2f3f3;
width: 103px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
top: -14px;
text-align: center;
border: 1px solid #dadada;
border-radius: 20px;
}
.convo-content{
width: 60%;
margin-bottom: 12px;
}
.content-out{
float: right;
margin-right: 7px;
}
.content-in{
float: left;
margin-left: 7px;
}
.chat-editor-container {
position: relative;
}
textarea#adHocMessage,
.chat-blocked-cust-container {
font-size: 14px;
line-height: 1.43;
background: #fff !important;
width: 100%;
height: 52px;
border-radius: 50px;
padding-top: 16px !important;
outline: none;
padding-right: 80px !important;
padding-left: 70px !important;
resize: none;
border: unset !important;
margin-bottom: 0;
}
#adHocMessage::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
font-size: 14px;
color: #9b9b9b !important;
opacity: 1; /* Firefox */
}
#adHocMessage:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-size: 14px;
color: #9b9b9b !important;
}
#adHocMessage::-ms-input-placeholder { /* Microsoft Edge */
font-size: 14px;
color: #9b9b9b !important;
}
div#chatConversation {
background-color: #f2f3f3;
height: 80%;
top: 6px;
overflow-x: hidden;
overflow-y: auto;
display: block;
padding-right: 12px;
}
.convo-content p {
position: relative;
padding: 10px 14px;
border-radius: 16px;
width: fit-content;
min-height: 38px;
font-size: 14px;
font-weight: 500;
line-height: 18px;
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.convo-content.content-in p{
background-color: #dedfdf;
}
.convo-content.content-in p.media-bubble{
background-color: #00fff0;
flex-grow: 0;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
line-height: 1.29;
text-align: left;
color: #545454;
}
.convo-content.content-in p.media-bubble i{
transform: rotate(45deg) scaleX(-1);
margin-right: 11px;
}
.convo-content.content-in p.media-bubble a{
text-decoration: none;
}
p.call-missed-in {
background-color: white !important;
}
.chat-voicemail-listen {
float: right;
color: white !important;
background-color: #4a90e2 !important;
font-size: 14px;
padding: 6px 20px;
font-weight: bold;
border-radius: 20px;
cursor: pointer;
margin-left: 50px;
}
.convo-content.content-in h4{
margin-left: 14px;
}
.convo-content.content-out p{
background-color: #86d2f7;
float: right;
}
.convo-content.content-out h4{
float: right;
clear: both;
margin-right: 14px;
}
.convo-content h4 {
font-size: 10px;
color: #545454;
margin-top: 3px;
}
.convo-content.content-in p img {
position: absolute;
left: -7px;
bottom: 0px;
}
.convo-content.content-out p img{
position: absolute;
right: -7px;
bottom: 0px;
}
#chatConversation::-webkit-scrollbar {
width: 4px;
border-radius: 8px;
}
#chatConversation::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1);
border-radius: 8px;
}
#chatConversation::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
}
p.convo-info {
background-color: #7dbe3e !important;
font-size: 14px;
padding: 8px 16px;
color: #414141;
font-weight: 500;
}
p.convo-info i{
padding-right: 6px;
}
p.call-info, span.call-missed-info {
background-color: white !important;
font-size: 14px;
/* padding: 8px 16px; */
color: #414141;
font-weight: 500;
}
/* p.call-missed-info {
color: red;
} */
.sendAdHoc-container {
width: 34px;
height: 34px;
position: absolute;
top: 11px;
right: 12px;
}
button#sendAdHocMessage {
font-size: 12px;
font-weight: bold;
background-color: #dadada;
border: none;
transition: background-color .3s;
}
button#sendAdHocMessage:hover{
border: none !important;
background-color: #7dbe3e !important;
}
#sendAdHocMessage i {
font-size: 14px;
}
/* Start chat attachments*/
.chat-input-link {
position: absolute;
cursor: pointer;
height: 14px;
top: 20px;
color: #4a90e2;
font-size: 14px;
}
.chat-input-link:hover {
/* filter: invert(0%) sepia(107%) saturate(750%) hue-rotate(55deg) brightness(89%) contrast(92%); */
color: #7dbe3e;
}
.attach-media-loader {
left: 50px;
}
.wuwta-ai-chat {
left: 65px;
}
.attach-media-chat {
left: 45px;
}
.quick-chat-media-chat {
left: 20px;
}
.chat-media-size, .chatPatientAttachSize {
width: 610px;
height: 590px;
padding: 0 58px 100px 58px;
}
.chat-media-size ul, .chatPatientAttachSize ul {
width: 100%;
overflow: auto;
}
#chat-media-modal h1, #chat-patient-attach-modal h1 {
margin: 18px 0 0 0;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
color: #1a467c;
text-transform: capitalize;
}
.chatAttachBigCol {
width: 70%;
}
.chatAttachSmCol {
width: 15%;
}
#chatMediaSortHeader, #chatPatientAttachHeader {
margin-top: 22px;
overflow: revert;
}
li.chat-media-header .sort-col {
display: inline-block;
font-size: 10px;
color: #4a90e2;
padding: 0 2%;
}
#chatMediaSortHeader li, #chatPatientAttachHeader li {
display: flex;
align-items: center;
}
#chatMediaList i, #chatPatientAttachList i {
color: #4a90e2;
font-size: 16px;
cursor: pointer;
}
#chatMediaList i:hover, #chatPatientAttachList i:hover {
color: #7dbe3e;
}
#chatMediaList li, #chatPatientAttachList li {
height: 62px;
display: flex;
align-items: center;
margin: 0px 0 8px;
}
#chatUploadMediaLink {
position: absolute;
bottom: 45px;
font-size: 12px;
color: #4a90e2;
line-height: normal;
}
#chatUploadMediaLink span:hover {
cursor: pointer;
color: #7dbe3e;
}
.chat-media-size a {
/* width: 112px;
height: 24px; */
font-family: Roboto;
font-size: 14px;
/* font-weight: normal;
font-stretch: normal;
font-style: normal; */
line-height: 1.71;
/* letter-spacing: normal; */
text-align: center;
color: #4a90e2;
text-decoration: none;
}
#chatPatientInfoNav {
position: relative;
}
#chatPatientInfoNavButtons {
display: flex;
position: absolute;
top: 15px;
right: 40px;
}
#chatPatientInfoNavButtons i {
margin-right: 10px;
}
#chatPatientInfoNavButtons div {
white-space: nowrap;
font-family: Roboto;
font-size: 14px;
line-height: 1.29;
text-align: left;
color: #4a90e2;
}
#chatPatientAttach i {
transform: rotate(45deg) scaleX(-1);
}
#chatPatientProf {
margin-right: 35px;
cursor: pointer;
}
#chatPatientAttach {
cursor: pointer;
}
#chatPatientProf:hover, #chatPatientAttach:hover {
color: #7dbe3e;
}
.chatPatientProfileModalSize {
width: 611px;
min-width: 611px;
height: 611px;
padding: 36px !important;
border-radius: 19.5px;
overflow-y: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.chatPatientProfileModalSize::-webkit-scrollbar {
display: none;
}
.chat-miniprof-loader {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.chat-miniprof-loader img {
width: 3rem;
height: 3rem;
}
.chat-miniprof-header-container {
display: flex;
position: relative;
}
.chat-miniprof-score-cont {
width: 118px;
height: 118px;
border-radius: 19.5px;
display: flex;
justify-content: center;
align-items: center;
}
.chat-miniprof-score-num {
padding-top: 10px;
font-size: 48px;
font-family: Spartan !important;
font-weight: 800;
color: #ffffff;
}
.chatProfileHead {
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
/* line-height: 3; */
color: #545454;
margin-top: 6px;
display: flex;
gap: 8px;
align-items: flex-end;
}
.chat-prof-head-edit {
color: #4a90e2;
font-size: 20px;
}
.chat-miniprof-restrict-img {
position: absolute;
bottom: 13px;
right: 10px;
}
.chat-miniprof-restrict-img img {
width: 86.3px;
height: 26.4px;
object-fit: contain;
}
.chat-miniprof-header-col2 {
display: flex;
flex-direction: column;
margin-left: 32px;
margin-bottom: 4px;
}
.chat-miniprof-header-col2 h1 {
margin: 6px 0px 2px 0px;
font-family: Spartan !important;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.25;
letter-spacing: normal;
text-align: left;
color: #1a467c;
}
.chat-miniprof-header-sh {
font-size: 12px;
color: #545454;
}
.chat-ban-cust {
cursor: pointer;
}
.chat-ban-cust:hover {
color: #ff0000;
}
.chat-baned-cust {
color: #ff0000;
}
.chat-miniprof-h2 {
font-family: Roboto;
font-size: 13px;
font-weight: bold;
line-height: normal;
color: #1a467c;
margin-top: 32px;
}
#chat-profile-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#chat-profile-container h2 span {
margin-left: 10px;
}
#chat-profile-container h3 {
margin: 15px 0 7px;
font-size: 13px;
font-weight: bold;
line-height: normal;
text-align: left;
color: #545454;
}
#chat-profile-container h4 {
font-size: 14px;
line-height: 1.29;
color: #232323;
}
#chat-profile-container table tr {
display: block;
width: 100%;
padding-left: 23px;
}
.chat-patient-values {
display: flex;
padding-left: 21px;
}
.chat-miniprof-gender, .chat-miniprof-age {
width: 105px;
}
.chat-miniprof-dob {
width: 114px;
}
.chat-miniprof-proce, .chat-miniprof-ref-prov {
width: 210px;
}
.chat-miniprof-prov {
width: 114px;
}
.chat-miniprof-tocust-wrapper {
width: 100%;
display: flex;
justify-content: end;
margin-top: 40px;
}
.chat-miniprof-tocust {
font-size: 14px;
width: 144px;
height: 32px;
min-width: 0;
min-height: 0;
padding: 0;
}
#chatPatientRefLink {
text-decoration: none;
color: #4a90e2;
margin-right: 10px;
}
.chat-patient-view-ref h4 i {
margin-left: 14px;
}
.chat-patient-view-ref a:hover, .chat-patient-view-ref i:hover {
color: #7dbe3e !important;
cursor: pointer;
}
.chatPatientNoAttach, .online-customers-none {
display: none;
margin-top: 41px;
font-family: Roboto;
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-align: center;
color: #545454;
}
#chatPatientAttachHeader, #chatPatientAttachList {
display: none;
}
#chatMediaSortHeader, #chatMediaList {
display: none;
}
.chatViewCustAttachBigCol {
width: 52%;
}
.chatViewCustAttachSmCol {
width: 24%;
}
.downloadCustMedia i{
margin-left: 12px;
}
/* responsive for chat mini profile modal */
@media screen and (max-width: 620px) {
.chatPatientProfileModalSize {
width: calc(100vw - 26px);
min-width: calc(100vw - 26px);
height: calc(100vh - 30px);
padding: 20px !important;
}
.chat-miniprof-score-cont {
width: 66px;
height: 66px;
border-radius: 16px;
position: absolute;
top: 22px;
left: 22px;
}
.chat-miniprof-score-num {
padding-top: 4px;
font-size: 32px;
}
.chat-miniprof-restrict-img {
right: 50px;
top: 40px;
}
.chat-miniprof-header-col2 {
padding-top: 100px;
margin-left: 8.33vw;
}
.chat-miniprof-h2 {
margin-left: 8.33vw;
}
.chat-patient-values {
padding-left: 11.84vw;
flex-wrap: wrap;
}
.chat-patient-values div {
width: 35vw;
}
.chat-miniprof-tocust {
margin-bottom: 24px;
}
}
@media screen and (max-width: 480px) {
.chat-miniprof-mobile-hide {
display: none;
}
}
/* responsive for attachment */
@media screen and (max-width: 630px) {
.chat-media-size {
width: calc(100vw - 26px);
height: calc(100vh - 26px);
}
.chat-media-size .media-upload-modal-img {
margin-top: 10vh;
}
.chat-media-size ul {
width: calc(100vw - 62px);
}
li div.form-list-item {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
}
}
/* End chat attachments*/
input.hide-chat-media-input, input.hide-staff-media-input {
position: absolute;
pointer-events: none;
opacity: 0;
}
a.retry-send {
color: #ff0000;
cursor: pointer;
}
/* Chat search style */
div#chatSearchBox {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 80%;
width: 100%;
position: relative;
padding-top: 34px;
z-index: 1;
}
.chat-search-padding {
margin-left: 8.33%;
}
.chat-convo-grey-text {
font-size: 18px;
color: #777c80;
}
.cancel-add-chat {
position: absolute;
font-size: 24px;
font-weight: bold;
top: 4px;
right: 5%;
}
.start-chat-search-input {
margin-top: 26px;
}
.start-chat-search-btn {
margin-top: 32px;
}
#searchChatResults ul {
width: 100%;
margin-top: 33px;
display: flex;
flex-wrap: wrap;
gap: 18px;
padding-bottom: 130px;
}
.type-profile:hover {
box-shadow: none !important;
}
.type-profile * {
color: #9b9b9b !important;
}
#searchChatResults .type-profile .action-profile {
color: #4a90e2 !important;
}
.chat-result.type-profile .initials{
color: #9b9b9b !important;
border-color: #9b9b9b !important;
}
li.chat-result {
width: 166px;
height: 160px;
text-align: center;
background-color: #fff;
padding: 16px 8px 13px 8px;
border-radius: 8px;
transition: box-shadow .3s;
cursor: pointer;
}
li.chat-result *{
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
li.chat-result:hover {
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
}
li.chat-result:nth-child(4n){
margin-right: 0% !important;
}
.chat-result .initials {
margin: 0 auto;
border-width: 1.5px !important;
font-weight: 500 !important;
font-size: 15px;
padding: 8px 0px 10px 0px;
width: 36px;
margin-bottom: 7px;
}
h3.result-name {
font-size: 14px;
font-weight: bold;
color: #1a467c;
margin-bottom: 4px;
line-height: 1.1;
}
p.result-contact {
font-size: 12px;
color: #1a467c;
line-height: 15px;
margin-bottom: 4px;
}
p.result-service {
font-size: 8px;
height: 10px;
line-height: 10px;
color: #1a467c;
}
p.action-link {
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: #4a90e2;
margin-top: 20px;
}
.temp-chat .initials,.temp-chat .message-body{
opacity: 0;
}
div#optinError {
text-align: center;
height: 50vh;
width: 440px;
margin: 0 auto;
}
.triangle-icon i.fal.fa-exclamation-triangle {
font-size: 48px;
color: #1a467c;
margin-bottom: 28px;
}
p.before-chat {
font-size: 16px;
font-weight: bold;
color: #1a467c;
margin-bottom: 18px;
}
p.is-not-optin {
font-size: 42px;
font-weight: bold;
color: #545454;
margin-bottom: 20px;
line-height: 1.23;
}
p.you-should {
font-size: 18px;
font-weight: bold;
color: #545454;
margin-bottom: 10px;
}
p.do-you {
font-size: 16px;
font-weight: normal;
color: #545454;
margin-bottom: 35px;
}
.underline {
text-decoration: underline;
}
button.direct-opt {
font-size: 14px;
height: 32px !important;
padding: 6px;
font-weight: 500;
}
button#directOptin {
font-weight: bold !important;
color: #fff;
border: 2px solid #4a90e2 !important;
background-color: #4a90e2 !important;
white-space: nowrap;
}
button#directOptin:hover{
background-color: #7dbe3e !important;
border-color: #7dbe3e !important;
}
p.confirm-opt {
font-size: 18px;
font-weight: bold;
color: #7dbe3e;
margin-top: 20px;
text-transform: uppercase;
}
div#callList, div#chatList, div#voiceList {
height: calc(100vh - 144px);
overflow-y: auto;
margin-top: 32px;
}
.tele-left-main-chat div#callList, .tele-left-main-chat div#chatList, .tele-left-main-chat div#voiceList {
height: calc(100vh - 204px);
overflow-y: auto;
margin-top: 32px;
}
div#histList {
height: calc(100vh - 144px);
overflow-y: auto;
margin-top: 32px;
}
.opes-send * {
display: inline-block;
}
body .opes-send {
position: absolute;
z-index: 1;
right: .875rem;
top: .8125rem;
width: fit-content !important;
height: fit-content !important;
padding: .125rem .75rem .125rem .125rem;
}
.opes-bubble {
background: #fff;
padding: 4px 6px 4px 4px;
border-radius: 11px;
font-size: 12px;
color: #4a90e2;
}
h2#convoTitle {
padding-top: 3px;
font-family: 'Spartan' !important;
font-size: 20px;
font-weight: bold;
max-width: 600px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: none;
}
.goto-create {
font-size: 12px;
margin-top: 35px;
}
.goto-create .body-medium {
color: #777c80;
}
.goto-create a {
width: fit-content;
margin-top: 20px;
}
/* Some chat layout style */
body #col2.chat-col {
width: 358px !important;
min-width: 358px;
}
body #col3.convo-col {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width:100% !important;
height: unset;
padding: 86px 50px 30px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
/* #chatMiniProfiler {
position: absolute;
top: 34px;
right: 40px;
font-size: 18px;
} */
#chatMiniProfiler:hover {
opacity: 1;
}
.row.main-chat.main-content {
background-color: #fff;
}
.row.main-chat.main-content .cust-header {
padding-left: 58px;
}
.main-chat .search {
margin-left: 54px;
width: 235px;
}
.main-chat input#customerFilter {
border: 2px solid #dadada;
}
h2.no-chats {
color: #969696;
text-align: center;
margin-left: 18px;
}
#adHocMessage::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
#adHocMessage::-webkit-scrollbar-thumb {
background: #FF0000;
}
#adHocMessage:focus + #sendAdHocMessage{
background-color: #4a90e2;
}
#searchChatText:focus + #searchChat{
background-color: #4a90e2;
}
.disable-chat #sendAdHocMessage, .disable-chat i.attach-media-chat, .disable-chat i.quick-chat-media-chat, .disable-chat i.wuwta-ai-chat {
pointer-events: none;
}
.disable-chat textarea {
pointer-events: none !important;
}
#searchChat:hover{
background-color: #7dbe3e !important;
}
.type-count {
font-size: 10px;
color: #545454;
width: 100%;
text-align: right;
padding-right: 22px;
margin-top: 8px;
}
.max-char{
color: #ff0000;
}
h2.add-search-error {
font-size: 18px !important;
margin-top: 40px;
color: #545454;
}
span.brand-message {
width: 100%;
display: block;
padding-bottom: 6px;
font-size: 14px;
font-weight: bold;
color: #414141;
}
.brand-message i{
padding-right: 6px;
}
.brand-message .right-logo img {
width: 68px;
right: 0 !important;
left: 4px;
vertical-align: text-top;
position: relative !important;
filter: grayscale(100%);
}
span.right-logo {
float: right;
font-size: 8px;
font-weight: normal;
}
.general-error{
border: 1px solid #ff0000 !important;
color: #ff0000;
}
.admin-login-error{
text-align: center !important;
padding:20px !important;
font-size: 18px !important;
color: #ff0000 !important;
}
/**ported over videochat css - feel free to use/udpate/throw-away*/
.video-chat-dialog-acl-item{
border: 1px solid grey;
padding: 2px;
font-size: 10pt;
}
/* .chat-item{
border: 1px solid grey;
padding: 2px;
font-size: 10pt;
} */
.chat-tool-bar{
z-index: 9000;
text-align: center;
width: 100%;
height: 40px;
padding: 5px;
}
.chat-tool-bar button{
width: 32px;
height: 32px;
border: none;
cursor: pointer;
/* border-radius: 50%; */
color: #fff;
background: transparent;
}
.chats-header{
width: 100%;
height: 60px;
padding: 8px;
border-bottom: 1px solid grey;
margin-left:60px;
}
.chats-header-item{
margin-left: 10px;
display: inline-block;
}
.chats-header select {
margin-bottom: 23px;
font-family: 'Montserrat', sans-serif;
text-align: center;
font-size:.875em;
padding: 13px 0px;
width:184px !important;
border-radius: 25px;
text-decoration: none;
border: 2px solid #4a90e2;
color: #4a90e2;
line-height: 14px;
background-color:transparent;
cursor: pointer;
text-align-last: center;
}
.chat-page{
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.vc-room-ended-container {
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-content: center;
}
.vc-room-ended-text {
font-size: 20px;
font-family: Spartan !important;
font-weight: 500;
color: #1a467c;
}
.chat-message-toolbar{
display:flex;
align-items: center;
}
.chat-message-toolbar textarea{
width: 400px;
color: #9b9b9b;
font-size: .75em;
padding: 20px;
border-radius: 24px !important;
margin-bottom: 23px;
border: 1px solid grey;
background-color: #f4f4f4;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.chat-other-vids{
display: block;
bottom: 320px;
height: fit-content !important;
}
.chat-other-wrapper {
display: flex !important;
width: 155px !important;
height: 155px !important;
position:relative;
border-radius: 8px;
width: 155px;
height: 87px;
display: block;
margin-top:38px;
}
.chat-other-wrapper.is-big{
width: 155px;
height: 155px;
background-color: #4a90e2;
position: relative;
border: 1px solid #4a90e2 !important;
}
.chat-tool-bar {
background-color: unset;
border: unset;
position: absolute;
bottom: 0;
}
.speaker-initials {
display: flex;
justify-content: center;
align-items: center;
width: 155px;
height: 155px;
text-align: center;
color: #fff;
font-size: 40px;
margin: 0 auto;
border-radius: 50px;
padding-top: 4px;
}
.chat-other-vid-container{
height: 350px !important;
width: 350px !important;
}
/**
only for vonage video chat
*/
div.chat-local-vid .OT_publisher {
min-height: 250px;
min-width: 250px;
}
div.chat-other-vids .OT_subscriber {
min-height: 250px;
min-width: 250px;
}
/* video::-webkit-media-controls-panel
{
display: none !important;
} */
video::-webkit-media-controls-play-button
{
display: none !important;
}
video::-webkit-media-controls-volume-slider-container
{
display: none !important;
}
video::-webkit-media-controls-volume-slider
{
display: none !important;
}
video::-webkit-media-controls-mute-button
{
display: none !important;
}
video::-webkit-media-controls-timeline
{
display: none !important;
}
video::-webkit-media-controls-current-time-display
{
display: none !important;
}
video::-webkit-full-page-media::-webkit-media-controls-panel
{
display: none !important;
}
video::-webkit-media-controls-timeline-container
{
display: none !important;
}
video::-webkit-media-controls-time-remaining-display
{
display: none !important;
}
video::-webkit-media-controls-seek-back-button
{
display: none !important;
}
video::-webkit-media-controls-seek-forward-button
{
display: none !important;
}
video::-webkit-media-controls-rewind-button
{
display: none !important;
}
video::-webkit-media-controls-return-to-realtime-button
{
display: none !important;
}
video::-webkit-media-controls-toggle-closed-captions-button
{
display: none !important;
}
audio::-webkit-media-controls-panel
{
display: none !important;
}
audio::-webkit-media-controls-mute-button
{
display: none !important;
}
audio::-webkit-media-controls-play-button
{
display: none !important;
}
audio::-webkit-media-controls-timeline-container
{
display: none !important;
}
audio::-webkit-media-controls-current-time-display
{
display: none !important;
}
audio::-webkit-media-controls-time-remaining-display
{
display: none !important;
}
audio::-webkit-media-controls-timeline
{
display: none !important;
}
audio::-webkit-media-controls-volume-slider-container
{
display: none !important;
}
audio::-webkit-media-controls-volume-slider
{
display: none !important;
}
audio::-webkit-media-controls-seek-back-button
{
display: none !important;
}
audio::-webkit-media-controls-seek-forward-button
{
display: none !important;
}
/* audio::-webkit-media-controls-fullscreen-button
{
display: none !important;
} */
audio::-webkit-media-controls-rewind-button
{
display: none !important;
}
audio::-webkit-media-controls-return-to-realtime-button
{
display: none !important;
}
audio::-webkit-media-controls-toggle-closed-captions-button{
display: none !important;
}
/* Start swift input */
/* Swift input style */
.swift-input {
position: relative;
width: 100%;
max-width: 480px;
margin: 0 auto
}
.swift-input input{
z-index: 2;
font-weight: bold;
}
.swift-input label {
position: absolute;
font-weight: bold;
top: 21px;
left: 40px;
padding: 0px 4px;
transition: top .3s;
background-color: #e9e9e9 !important;
-webkit-transition: z-index 1 linear;
-ms-transition: z-index 1 linear;
transition: z-index 1 linear;
}
.confirm .swift-dropdown, #staffCol .swift-dropdown {
background: url(/images/angle-down-blue.png) no-repeat 94% transparent !important;
background-size: 14px !important;
width: 100%;
padding: 6px 36px 6px 20px;
border: 2px solid #4a90e2 !important;
color: #4a90e2;
font-weight: bold;
}
.editor-container .close-x{
text-align: right;
font-size: 24px;
margin-top: -12px;
color: #4a90e2;
}
.editor-container h1 {
width: fit-content;
display: inline-block;
font-family: Spartan !important;
font-size: 20px !important;
text-align: left !important;
padding-bottom: 6px !important;
color: #1A467C;
margin-left: 20px;
}
span.change-save {
display: inline-block;
vertical-align: middle;
font-size: 12px;
margin-left: 12px;
color: #7dbe3e;
display: none;
}
div#video-clock {
z-index: 9999;
position: absolute;
bottom: 55px;
left: 104px;
background-color: #ffffff99;
padding: 9px 12px;
color: #000;
font-size: 14px;
border-radius: 8px;
border: 2px solid #fff;
}
.live-text {
font-weight: bold !important;
}
.green-dot {
width: 8px;
height: 8px;
background-color: #7dbe3e;
display: inline-block;
vertical-align: top;
margin-top: 3px;
border-radius: 12px;
margin-right: 8px;
}
.red-dot {
width: 8px;
height: 8px;
background-color: red;
display: inline-block;
vertical-align: top;
margin-top: 3px;
border-radius: 12px;
margin-right: 8px;
}
.email-login{
margin-bottom: 30px;
}
.label-z{
z-index: 5 !important;
/* font-size: 13px; */
}
.move-label{
top: -7px !important;
background-color: #e9e9e9 !important;
-webkit-transition: z-index 1 linear;
-ms-transition: z-index 1 linear;
transition: z-index 1 linear;
}
.an-bar, .lightning-an-bar {
height: 4px;
position: absolute;
top: -1px;
left: 39px;
z-index: 3;
background-color: #e9e9e9;
}
.an-bar.open-bar{
height: 3px;
}
.swift-input-tooltip:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid #ff3333;
left: -6px;
top: 21px;
}
.swift-input-tooltip {
z-index: 100;
align-content: center;
display: none;
border-radius: 8px;
width: 120px;
position: absolute;
right: -135px;
top: 3px;
background-color: #ff3333;
color: #fff !important;
font-size: 10px !important;
line-height: 13px;
min-height: 53px;
padding: 6px 10px 7px 10px;
font-weight: bold;
}
input.swift-input.invalid{
color: #ff3333 !important;
border: 2px solid #ff3333 !important;
}
input.invalid + label{
color: #ff3333;
}
.swift-input-tooltip i {
position: absolute;
left: -50px;
font-size: 18px;
color: #ff3333;
top: 16px;
}
/* White bg */
.white-bg .swift-input{
max-width: unset !important;
}
.white-bg .swift-input input {
background-color: #fff !important;
border: 2px solid #4a90e2;
font-size: 16px;
width: 100%;
padding: 17px 20px 17px 40px;
border-radius: 36px;
}
.white-bg .swift-input label {
background-color: transparent !important;
color: #4a90e2;
z-index: 100;
pointer-events: none;
cursor: pointer;
}
#adminDialog .swift-input{
margin-bottom: 43px;
}
#adminDialog .swift-input label {
background-color: transparent !important;
z-index: 100;
pointer-events: none;
cursor: pointer;
}
#adminDialog label.move-label {
background-color: #f2f3f3 !important;
}
#adminDialog .an-bar{
background-color: #f2f3f3 !important;
}
#adminDialog .image-container {
width: 100px;
position: absolute;
right: calc(100% + 45px);
}
.right-radio-col {
width: 200px;
}
body #admin-editor .swift-radios input {
display: inline-block;
border-color: #fff !important;
width: 20px !important;
background-color: #fff !important;
margin-bottom: 13px !important;
}
body #admin-editor .swift-radios input:checked{
background-color: #4a90e2 !important;
}
body #admin-editor .swift-radios .form-radio:checked::before {
top:6px !important;
}
.swift-radios.swift-horizontal {
display: flex;
vertical-align: top;
justify-content: space-between;
margin-top: 35px;
}
.swift-horizontal p {
font-size: 11px;
padding-top: 5px;
line-height: 1.33;
color: #1a467c;
}
label.radio-mix-label.spacer-label {
padding-right: 39px;
}
.panel-title.short-not-title {
margin-bottom: 39px !important;
}
#profileImageDialog h1 {
font-size: 14px !important;
width: 100%;
text-align: center !important;
margin: unset;
}
label.upload-photo-button {
width: 144px !important;
margin: 0 auto;
font-size: 14px;
color: #4a90e2;
border: 2px solid #4a90e2;
display: block;
text-align: center;
padding: 7px 0px 6px 0px;
border-radius: 25px;
font-weight: 500;
margin-top: 33px;
cursor: pointer;
}
label.upload-photo-button:hover{
color: #7dbe3e;
border-color: #7dbe3e;
}
label.radio-mix-label {
display: inline-block;
font-size: 14px;
font-weight: 500;
color: #4a90e2;
vertical-align: top;
padding: 11px 0px 0px 13px;
}
.right-radio-col h4, .swift-radios.swift-horizontal h4 {
font-size: 12px;
font-weight: bold;
font-family: Spartan !important;
color: #1A467C;
}
.profile-nav {
margin-top: 80px;
}
#admin-editor h2.nope {
/* position: absolute; */
top: 56px;
left: 58px;
font-size: 28px;
font-family: Spartan !important;
color: #9b9b9b;
font-weight: normal !important;
}
ul.profile-nav-list {
justify-content: space-evenly;
width: 540px;
margin: 0 auto;
display: flex;
}
li.profile-nav-li {
display: inline-block;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #4a90e2;
cursor: pointer;
}
li.active-slide-nav:after {
content: '';
width: 100%;
height: 4px;
display: block;
background-color: #4a90e2;
border-radius: 11px;
margin-top: 10px;
}
.submit-profile-container {
margin: 0 auto;
width: fit-content;
margin-top: 52px;
}
.location-slide, .password-slide, .notifications-slide{
display: none;
}
#admin-editor button#cancel-reload {
position: absolute;
}
.panel-title.loc-wide-title {
width: 604px;
}
.password-slide .new-login {
max-width: 440px;
margin: 0 auto;
}
button.quick-link.login-button.filled-button{
font-weight: bold !important;
}
.avatar-image{
width: 97px;
height: 97px;
border-radius: 50%;
overflow: hidden;
position:relative;
border: solid 2.7px #1A467C;
object-fit: cover;
}
button#uploadProfileImage {
position: absolute;
top: 72px;
right: 0;
color: #fff;
background-color: #4a90e2;
padding: 4.5px 6px;
border: unset;
border-radius: 20px;
font-size: 14px;
}
.image-header {
font-size: 12px;
font-weight: bold;
color: #1a467c;
margin-top: 20px;
font-family: Spartan !important;
}
.image-info {
font-size: 11px;
margin-top: 9px;
line-height: 1.33;
color: #1a467c;
}
.right-radio-col {
position: absolute;
top: 0;
left: calc(100% + 45px);
}
#adminDialog input.swift-input.invalid {
color: #ff3333 !important;
border: 2px solid #ff3333 !important;
}
#adminDialog input.swift-input.invalid + label {
color: #ff3333 !important;
}
.location-chooser {
display: block;
text-align:center;
width: 604px;
background-color: #fff;
padding: 29px 62px 25px 62px;
border-radius: 14px;
margin: 0 auto;
}
.location-chooser h3 {
font-size: 16px;
font-weight: bold;
color: #545454;
}
.loc-options {
display: flex;
width: 100%;
justify-content: space-evenly;
margin-top: 25px;
flex-wrap: wrap;
}
.white-bg label.move-label {
background-color: #fff !important;
}
.white-bg .an-bar{
background-color: #fff !important;
}
.lightningGroupsContainer .lightning-an-bar, .lightningGroupsContainer label.move-label {
background-color: #f2f3f3 !important;
}
#lsGrpCont {
display: none;
}
.options-drop {
display: none;
width: 100%;
background-color: #f4f4f4;
position: absolute;
top: 56px;
z-index: 100000;
max-height: 400px;
overflow-y: auto;
overflow-x: hidden;
}
#aptSelStaffs, #aptSelPatients {
/* width: fit-content; */
height: 36px;
overflow-y: scroll;
margin-right: 50px;
}
#aptSelStaffs::-webkit-scrollbar, #aptSelPatients::-webkit-scrollbar, #remote-media::-webkit-scrollbar {
width: 6px;
border-radius: 8px;
}
#aptSelStaffs::-webkit-scrollbar-track, #aptSelPatients::-webkit-scrollbar-track, #remote-media::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1); */
border-radius: 8px;
}
#aptSelStaffs::-webkit-scrollbar-thumb, #aptSelPatients::-webkit-scrollbar-thumb, #remote-media::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
}
#remote-media {
height: 50% !important;
overflow-y: auto;
}
.drop-spacer {
display: none;
width: 100%;
height: 28px;
position: absolute;
top: 28px;
background-color: #f4f4f4;
}
div.swift-drop-option {
font-weight: bold;
padding: 12px 40px;
cursor: pointer;
color: #545454;
font-size: 16px;
transition: background-color .3s, color .3s;
}
.contact-detail {
font-size: 14px;
padding-left: 8px;
font-weight: normal !important;
}
span.selected-contact {
display: inline-block;
font-weight: normal;
padding-left: 8px;
font-size: 14px;
max-width: 175px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.swift-drop-option:hover, .arrow-target{
background-color: #4a90e2;
color: #fff !important;
}
.main-value{
display: inline-block;
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.swift-selected-box {
position: absolute;
top: 16px;
display: block;
left: 40px;
z-index: 999;
}
div.swift-select{
display: inline-block;
z-index: 1000;
background-color: #fff;
color: #4a90e2;
padding: 4px 6px 4px 6px;
font-weight: bold;
font-size: 16px;
}
.swift-disabled{
pointer-events: none;
}
.swift-select i {
font-size: 11px;
vertical-align: text-top;
padding-left: 8px;
cursor: pointer;
}
.staff-field .main-value{
max-width: 100px !important;
}
.staff-field{
margin-bottom: 40px;
}
.loc-options .invalid{
color: #ff0000 !important;
}
body #admin-editor .swift-radios input.invalid-radio {
background: #ff5757 !important;
}
h4#adminDialog_err {
text-align: center;
}
.image-container div#user-initials {
width: 97px;
height: 97px;
background-image: unset;
background-color: #fff;
border-radius: 50%;
font-size: 28px;
color: #1a467c !important;
border: 2px solid #1a467c;
font-weight: bold;
}
h4#adminDialog_password_err {
text-align: center;
margin-bottom: 12px;
}
/* End Swift input */
/* Start swift toggle */
.schedule-toggle{
margin-bottom: 14px;
}
.schedule-toggle .toggle-text {
white-space: nowrap;
vertical-align: top;
padding-top: 8px;
width: 49%;
display: inline-block;
padding-left: 40px;
}
.toggle-text h3{
font-weight:bold;
color: #545454;
padding-bottom: 5px;
}
.toggle-text p{
font-size: 10px;
color: #9b9b9b;
}
.schedule-toggle .toggle-options {
width: 50%;
display: inline-block;
padding-left: 60px;
}
.schedule-toggle ::before{
display: none !important;
}
body .schedule-toggle input.form-radio {
padding: 0px;
width: 28px !important;
height: 28px !important;
background-color: #fff !important;
border: 2px solid #fff !important;
}
.toggle-border {
display: inline-block;
border: 2px solid #4a90e2;
border-radius: 25px;
width: 32px;
height: 32px !important;
}
body .schedule-toggle label{
padding-left: 9px;
color: #545454 !important;
font-weight: 500 !important;
margin-top: 11px !important;
}
/* scheduler Style */
#videoChatDialog{
overflow: hidden;
width: 101%;
}
#videoChatDialog .create {
padding: 40px 60px !important;
position: absolute;
top: 49%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
width: 600px;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
animation: fade .2s ease 1 forwards;
box-shadow: 4px 8px 30px #9b9b9b;
}
#scheduleVcTimezone,
#selectLocAppt {
width: 100%;
height: 56px;
border: 2px solid #4a90e2 !important;
border-radius: 36px;
margin-bottom: 23px !important;
padding: 17px 20px 17px 40px;
font-size: 16px;
background: url(/images/angle-down-blue.png) no-repeat 90% #ddd;
background-size: 10px !important;
background-color: transparent !important;
}
.inline-input{
position: relative;
margin-bottom: 28px;
}
.inline-widget {
border: 2px solid #4a90e2;
border-radius: 40px;
padding: 17px 40px;
}
.inny {
max-width: 98px;
display: inline-block;
margin-bottom: 0px !important;
background: transparent !important;
padding: unset !important;
font-size: 16px !important;
font-weight: bold;
color: #4a90e2;
cursor: pointer;
text-align: center;
}
.dashy{
font-size: 20px;
color: #4a90e2;
}
.datepicker-days .next, .datepicker-days .prev{
cursor: pointer;
}
input.inner-picker {
font-size: 16px;
width: 124px;
background-color: transparent !important;
margin-bottom: 0px;
font-weight: bold;
color: #4a90e2;
cursor: pointer;
padding: 0px;
}
.create .sub-buttons{
text-align: center;
margin-top: 10px;
}
/* scheduler style end */
/* DAtepicker override */
.datepicker{
position: absolute !important;
background-color: #fff;
padding: 8px 12px;
box-shadow: 1px 1px 6px #9b9b9b;
}
.datepicker thead th.dow {
font-size: 16px;
padding: 6px;
text-align: center;
}
td.day {
padding: 9px 8.5px 9px 7.5px;
text-align: center;
cursor: pointer;
border-radius: 20px;
transition: background-color .3s;
}
td.day:hover {
background-color: #4a90e220;
}
td.old.day, td.new.day, td.disabled {
pointer-events: none;
color: #9b9b9b;
}
td.day.active{
background-color: #4a90e235;
}
td.today{
border: 1px solid #4a90e2;
border-radius: 20px;
display: block;
}
.datepicker thead tr:nth-child(2) {
font-size: 20px;
font-family: 'Roboto' !important;
color: #1a467c;
padding-bottom: 8px;
}
.datepicker thead tr th.dow {
padding-top: 20px !important;
font-weight: 500;
color: #1a467c;
}
input.left-time {
max-width: 89px;
text-align: right;
padding-right: 8px !important;
}
input.right-time {
max-width: 89px;
text-align: left;
padding-left: 8px !important;
}
label.stuck-label {
position: absolute;
top: 0;
left: 40px;
font-weight: bold;
text-align: center;
padding: 0px 6px;
color: #4a90e2;
}
.schedule-header{
margin-bottom: 35px;
}
.schedule-header h2{
display: inline-block;
font-size: 20px;
font-weight: bold;
color: #1A467C;
}
#scheduleError p {
text-align: center;
color: #ff0000;
font-size: 12px;
}
div.close-scheduler {
width: fit-content;
display: inline-block;
float: right;
color: #4a90e2;
font-size: 28px;
margin-top: -4px;
padding-right: 8px;
transition: color .2s;
}
div.close-scheduler:hover{
color: #7dbe3e;
}
/* other datepicker end */
#ui-datepicker-div{
width: fit-content;
}
a.ui-state-default {
width: 38px;
height: 38px;
background-color: #fff !important;
border: unset !important;
padding: 11px 9px 9px 8px !important;
text-align: center !important;
}
a.ui-state-default.ui-state-highlight.ui-state-active,.ui-state-active, .ui-widget-content .ui-state-active {
background-image: none !important;
background: #4a90e233 !important;
}
.ui-datepicker-today a.ui-state-default {
border-radius: 22px;
border: 1px solid #4a90e2 !important;
background-color: #fff !important;
}
.ui-datepicker-today a.ui-state-default.ui-state-highlight.ui-state-active {
background-color: #4a90e233 !important;
}
a.ui-state-default.ui-state-active {
border-radius: 20px;
}
a.ui-state-default:hover {
border-radius: 20px;
background-color: #4a90e215 !important;
}
.ui-datepicker-header .ui-icon{
top: 3px !important;
margin:unset !important;
left: 0px !important;
width: 100%;
height: 23px;
}
.ui-datepicker-prev .ui-icon {
background-image: url(/images/chevron-left.png) !important;
background-size: 20px;
background-position: center;
}
.ui-datepicker-next .ui-icon {
background-image: url(/images/chevron-right.png) !important;
background-size: 20px;
background-position: center;
}
.ui-datepicker-header {
border: none !important;
background-color: transparent !important;
color: #1a467c !important;
}
.ui-datepicker-calendar thead {
color: #1a467c;
}
/* datepicker end */
/* Consult Style Start */
.filter-column {
display: inline-block;
width: 400px;
height: 100vh;
/* margin-left: 65px; */
padding: 55px 42px 0px 55px;
}
.apt-list-column {
width: 462px;
position: relative;
vertical-align: top;
display: inline-block;
padding: 55px 42px 0px 0px;
}
ul#appointmentList {
height: calc(100vh - 200px);
overflow-y: scroll;
overflow-x: hidden;
min-height:50vh;
}
ul#appointmentList::-webkit-scrollbar {
display: none;
}
.vc-global-tz-select {
width: 200px;
height: 32px;
position: absolute;
top: 0;
border: 2px solid #4a90e2;
border-radius: 32px;
padding: 0 20px;
background: url(/images/angle-down-blue.png) no-repeat 95% #ddd;
background-size: 10px;
background-color: transparent;
}
/* Hide scrollbar for IE, Edge and Firefox */
ul#appointmentList {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.apt-break-box {
position: relative;
width: 100%;
text-align: center;
margin: 33px 0px 32px;
width: 420px;
}
.appointment-item {
width: 420px;
border-radius: 8px;
padding: 12px 8px 12px 19px;
background-color: #fff;
margin-bottom: 12px;
text-align: left;
}
.appointment-item:hover {
background-color: #c5dbf5 !important;
}
.appointment-item.state-ended {
pointer-events: none !important;
background-color: #dadada;
}
.appointment-item.state-open-started{
background-color:#dadada;
}
.appointment-item.state-open-ended {
opacity: .5;
}
.profile-apt.appointment-item{
width: 100% !important;
/* width: 300px !important; */
padding-right: 14px !important;
}
.apt-date-breaker {
font-family: Spartan !important;
width: 103px;
margin: 0 auto;
text-align: center;
font-size: 10px;
color: #9b9b9b;
border: 2px solid #dadada;
border-radius: 20px;
padding: 7px 0px;
background-color: #eef2f5;
margin-bottom: 30px;
}
.apt-date-line {
width: 100%;
position: absolute;
border-top: 2px solid #dadada;
top: 13px;
z-index: -1;
}
.dot-container {
display: inline-block;
font-size: 8px;
margin-right: 11px;
}
.apt-info {
vertical-align: middle;
display: inline-block;
}
.apt-info h3{
font-size: 14px;
color: #545454;
font-weight: bold;
line-height: 19px;
}
.apt-info p{
font-size: 10px;
font-weight: bold;
color: #545454;
padding-top: 3px;
}
.profile-apt .apt-info h3{
font-size: 12px !important;
}
.profile-apt .apt-info p {
color: #9b9b9b !important;
}
.profile-apt .apt-status{
padding-top: 4px !important;
}
.status-info {
display: inline-block;
vertical-align: middle;
float: right;
margin-top: 7px;
}
p.apt-status {
padding-top: 4px;
vertical-align: middle;
display: inline-block;
text-transform: uppercase;
font-size: 9px;
color: #9b9b9b;
}
.apt-initials {
display: inline-block;
font-size: 8px;
vertical-align: middle;
color: #9b9b9b;
padding: 5px 0px;
text-align: center;
border: 1px solid #9b9b9b;
border-radius: 20px;
height: 18px;
width: 18px;
font-weight: bold;
}
/* Hide procedure icon for now */
.status-info .apt-initials {
display: none !important;
}
div#preAppointment {
overflow: hidden;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 1;
display: block;
position: absolute;
top: 0;
left: 0;
}
.vc-room-pre-loader {
overflow: hidden;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 2;
display: flex;
position: absolute;
top: 0;
left: 0;
align-items: center;
justify-content: center;
}
div#addAppointment {
min-width: 160px;
white-space: nowrap;
font-size: 14px;
background-color: #4a90e2;
color: #fff;
text-align: center;
padding: 8px 16px 8px 10px;
border-radius: 20px;
font-weight: bold;
position: absolute;
top: 0px;
right: 40px;
cursor: pointer;
transition: color .3s, background-color .3s;
}
div#addAppointment:hover{
background-color: #7dbe3e !important;
}
#addAppointment i {
font-size: 16px;
vertical-align: middle;
margin-right: 3px;
}
h1#aptTitle {
position: absolute;
top: 62px;
color: #9b9b9b;
font-size: 28px;
font-family: Spartan !important;
left: 120px;
}
#microCalendar .calendar-display {
font-size: 14px;
text-decoration: none;
font-weight: bold;
color: #1a467c;
padding-top: 3px;
margin-left: 6px;
pointer-events: none;
}
.calendar-arrow i {
font-size: 12px;
color: #4a90e2;
text-align: middle;
}
#microCalendar ol.week {
font-size: 8px;
font-weight: bold;
color: #9b9b9b;
}
#microCalendar ol.days li {
width: 24px !important;
height: 24px !important;
margin: 5px 9.4px;
font-size: 12px;
font-family: Roboto !important;
line-height:25px !important;
}
#microCalendar i.dot {
bottom: -1px;
}
#microCalendar .calendar-arrow{
margin-right: 17px !important;
width: 32px !important;
}
.video-page.main-content {
overflow: hidden !important;
height: 100vh;
/* padding-top: 78px; */
padding-left: 65px;
}
#screenShareContainer video {
filter: brightness(0.3);
}
.paused-video-icon-flex {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.paused-video-icon {
display: none;
font-size: 70px;
z-index: 1;
color: red;
}
.blacked-out-video-screen {
filter: brightness(0);
}
/* Consult style end */
/* Start Pre Video Chat Screen */
@media screen and (min-width:1024px){
.pxv-large-video .chat-other-vid video {
height: 100vh !important;
object-fit: cover !important;
width: 100% !important;
}
div#videoChat.pxv-video-box {
border-radius: unset !important;
height: 100vh;
width: 100%;
margin: unset !important;
padding: unset !important;
overflow: hidden;
}
.pxv-large-video {
width: 100%;
height: 100vh;
}
.chat-right.pxv-small-videos {
position: absolute;
bottom: 0;
right: 200px;
z-index: 1000;
}
div#selfBox {
width: 155px;
height: 155px !important;
overflow: hidden;
height: 87px;
}
#selfBox .you-title {
position: absolute;
width: 100%;
color: #fff;
text-shadow: 0px 0px 4px #232323;
top: -19px;
font-size: 12px;
}
.pxv-video-box .part-name {
font-size: 12px;
color: #fff;
text-shadow: 1px 1px 1px #232323;
top: -21px !important;
position: absolute;
width: 100%;
}
.pxv-video-box .speaker-initials{
margin-top: 18px !important;
}
.pxv-video-box .chat-other-wrapper{
margin-top: 45px !important;
}
.pxv-video-box .chat-other-vids{
bottom: 180px !important;
}
#videoChat div#videoPreviewContainer{
width: 100% !important;
overflow-y:auto !important;
}
.pxv-video-chat#videoPreviewContainer #mediaControls{
bottom: calc((100% - 535px)/2 - 265px) !important;
}
.pxv-waiting {
padding-top: 30px;
}
#videoChat div#videoPreviewContainer .pxv-large-video {
max-width: 1000px;
margin: 0 auto;
}
h1.attend-title {
display: none !important;
}
}
@media screen and (max-width:1023.9px){
button.otherPin {
width: 100%;
height: 100%;
color: transparent !important;
}
body .pxv-small-videos .pinny .speaker-initials{
border: 2px solid #7dbe3e !important;
}
div#liveMediaControls{
bottom: 24px !important;
}
div#mediaSelector{
top: 24px !important;
right: 24px !important;
}
h1.attend-title {
font-size: 16px;
font-weight: bold;
color: #1a467c;
margin-bottom: -20px;
}
div#video-clock {
top: 27px !important;
bottom: unset !important;
}
.live-text {
display: none !important;
}
.pxv-video-chat#videoPreviewContainer #mediaControls{
bottom: unset !important;
top: 355px !important;
}
.pxv-waiting {
margin-top: 55px;
}
.pxv-small-videos .chat-other-vid video {
width: 62px !important;
height: 62px !important;
border-radius: 50px;
}
div#videoChat.pxv-video-box {
width: 100%;
padding: unset !important;
margin: unset;
}
.pxv-small-videos div#remote-media {
bottom: unset;
display: inline-block;
left: 0;
right: 0;
}
.pxv-large-video .chat-other-vid video {
height: 430px !important;
width: 100%;
object-fit: cover;
}
.pxv-small-videos .chat-other-wrapper {
width: 100px !important;
height: 62px !important;
vertical-align: top;
display: inline-block;
}
.pxv-small-videos #remote-media .chat-other-vid{
width: 62px !important;
height: 62px !important;
margin:0 auto;
}
.small-video-left{
display: inline-block;
vertical-align: top;
width: 100px;
margin-top: 38px;
text-align: center;
}
div#selfBox {
width: 62px;
height: 62px;
display: inline-block;
vertical-align: top;
}
#selfBox div#local-media {
height: auto !important;
vertical-align: top;
}
div#selfBox video {
width: 62px;
height: 62px;
object-fit: cover;
border-radius: 50px;
}
.pxv-small-videos .is-big {
width: 100px;
height: 62px;
background-color: transparent !important;
border:unset !important;
}
.pxv-small-videos .is-big .speaker-initials{
height: 62px;
width: 62px;
background-color: #4a90e2;
border-radius: 50px;
color: #fff;
border: unset !important;
}
.part-name {
position: absolute;
bottom: -22px;
width: 100px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: center;
font-size:12px;
color: #9b9b9b;
}
.you-title {
position: absolute;
bottom: -22px;
width: 62px;
text-align: center;
font-size:12px;
color: #9b9b9b;
}
/* Mobile Video Chat Start */
div#videoPreviewContainer.pxv-video-chat {
width: 100% !important;
}
.chat-right.pxv-small-videos {
position: absolute;
left: 0;
width: 100%;
text-emphasis: center;
top: 475px;
}
.pxv-small-videos .speaker-initials{
padding-top: 12px !important;
margin-top:0px !important;
}
.pxv-large-video {
width: 100%;
text-align: center;
position: relative;
height: 430px;
overflow: hidden;
margin: 0 auto;
}
.pxv-large-video #videoPreview {
width: 100%;
object-fit: cover;
height: 430px !important;
}
/* Mobile Video Chat End */
}
@media screen and (max-width:470px){
#pxvLeave .yes{
width: 70% !important;
max-width: 189px;
}
}
div#stopPXVSession {
border: 2px #ff3333 solid;
height: 48px;
width: 48px;
font-size: 24px;
vertical-align: top;
color: #ff3333;
padding-top: 9px;
border-radius: 50px;
background-color: #fff;
text-align: center;
}
#stopPXVSession:hover{
color: #fff !important;
border-color: #fff !important;
}
#pxvLeave .yes{
left: 0;
right: 0;
margin: 0 auto;
}
.pxv-video-box .chat-page{
position: relative;
}
#videoChat div#liveMediaControls .apt-side {
margin: 0px 12px !important;
}
.pxv-video-chat#videoPreviewContainer #mediaControls .apt-side{
margin: 0px 20px;
}
.apt-participant-badge {
position: absolute;
top: -2px;
right: -5px;
height: 18px;
min-width: 18px;
text-align: center;
margin-top: -4px;
background-color: #ff0000;
vertical-align: top;
display: inline-block;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 1px 5.45px 2px;
border-radius: 50px;
line-height: 1.5em;
}
.pxv-waiting h1 {
font-size: 16px !important;
font-weight: bold;
color: #1a467c;
line-height: 1.5;
padding-bottom: 2px;
}
.pxv-waiting p.sub-head, .sub-date {
font-size: 12px;
color: #9b9b9b;
line-height: 1.5;
padding-bottom: 15px;
}
p.pxv-starts-in {
font-size: 11px;
color: #7dbe3e;
padding-bottom: 15px;
line-height: 1.5;
}
p.attend-time {
font-size: 16px;
font-weight: bold;
color: #414141;
line-height: 1.5;
padding-bottom: 2px;
}
div#videoPreviewContainer {
width: 60%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 950px;
z-index: 10;
}
#videoPreview{
width: 100%;
height: 100vh;
}
.video-stopped-overlay{
bottom: calc((100% - 195px)/2 - 30px);
left: 20%;
height: 29%;
width: 60%;
display: block;
position: absolute;
background: black;
color: white;
opacity: 0.8;
padding-top: 50px;
}
.video-stopped-overlay p {
text-align:center;
}
.video-stopped-overlay img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.video-clock-parent div{
font-family: 'Orbitron', sans-serif;
color: black !important;
font-size: 15px !important;
text-align: center !important;
padding-top: 10px !important;
padding-bottom: 25px !important;
width: 80px;
height: 25px;
position: absolute;
bottom: 63px;
left: 80px;
right: 0;
background: grey;
z-index: 8000
}
.video-clock-parent-pxv div{
font-family: 'Orbitron', sans-serif;
float: left !important;
color: black !important;
font-size: 15px !important;
text-align: center !important;
padding-top: 10px !important;
padding-bottom: 20px !important;
width: 80px;
height: 25px;
background: grey;
}
/* MicVisual */
/* TODO: put this in its own css file */
#circle-viz-container {
position: absolute;
top: 20px;
left: 0px;
transform: translate(-50%, -50%);
}
#circle-viz-container-2 {
position: absolute;
top: 20px;
left: 9px;
transform: translate(-50%, -50%);
}
#circle-viz-container-3 {
position: absolute;
top: 20px;
left: 18px;
transform: translate(-50%, -50%);
}
#circle-viz-container-2 .voice-button-circle{
height: 15px !important;
}
#circle-viz-container-2 .circle-btn{
height: 15px !important;
}
.voice-button-circle {
width: 5px;
height: 10px;
background-color: #defafdb9;
opacity: 1;
border-radius: 8px;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
}
.circle-btn {
position: absolute;
width: 5px;
height: 10px;
border-radius: 70px;
border: none;
outline: none;
background-color: #fff;
z-index: 10000;
}
.audio-viz-container {
bottom: calc((100% - 535px)/2 - 30px);
left: 40px;
height: 100px;
width: 40px;
display: block;
position: absolute;
}
div#mediaControls {
text-align: center;
}
.apt-bottom {
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
display: inline-block;
}
.apt-side {
height: 48px;
width: 48px;
text-align: center;
background-color: #4a90e2;
color: #fff;
font-size: 22px;
padding-top: 12px;
border-radius: 50px;
transition: background-color .2s, color .2s;
}
.apt-long {
height: 48px;
background-color: #4a90e2;
vertical-align: top;
text-align: center;
font-size: 18px;
padding: 14px 26px;
color: #fff;
font-weight: bold;
border-radius: 50px;
margin: 0px 14px;
transition: background-color .2s, color .2s;
}
.apt-bottom:hover{
background-color: #7dbe3e !important;
cursor: pointer;
}
.is-disabled-red{
background-color: #ff3333 !important;
}
.is-disabled-red:hover{
background-color: #ff3333 !important;
}
/* End Pre Video Chat Screen */
/* Twilio chat room start */
.chat-left{
height:100vh;
background-color: #f2f3f3;
width:100% !important;
float:left;
}
.chat-local-vid{
margin-top: 30px;
}
.chat-local-vid video {
object-fit: contain !important;
background-color: black;
/* border: 1px solid white; */
}
body .large-video-container{
height: 100vh !important;
width: 100% !important;
}
/* .chat-other-vid{
height: 290px !important;
width: 350px !important;
} */
body .large-video-container video {
/* height: unset !important;
width: unset !important; */
width: 100%;
object-fit: cover;
height: 100vh;
position: absolute;
left: 50%; /* % of surrounding element */
top: 50%;
transform: translate(-50%, -50%);
background-color: black;
}
.make-me-full video {
height: 100% !important;
width: 177.77777778vh !important; /* 100 * 16 / 9 */
min-width: 100% !important;
min-height: 56.25vw !important; /* 100 * 9 / 16 */
position: absolute;
left: 50%; /* % of surrounding element */
top: 50%;
transform: translate(-50%, -50%);
}
#remote-media .chat-other-vid video {
border-radius: 8px;
object-fit: contain !important;
background-color: black;
border: 1px solid white;
}
.chat-other-vid video {
object-fit: cover;
height: 100% !important;
width: 100% !important;
}
div#smallLocal video {
border-radius: 8px;
object-fit: contain !important;
background-color: black;
border: 1px solid white;
}
div#liveMediaControls {
display:none;
z-index:8000;
position: absolute;
bottom: 48px;
left: 0;
right: 0;
text-align: center;
}
.audio-viz-container-live {
z-index:1000;
bottom: 100px;
left: 40px;
height: auto;
width: 40px;
display: block;
position: absolute;
}
body #smallLocal{
min-height: unset !important;
min-width:unset !important;
}
body #smallLocal video{
width: 155px !important;
height: 155px !important;
min-height: unset !important;
min-width:unset !important;
object-fit: cover;
}
.cust-vc-participants-closer {
width: 155px;
background-color: #4a90e2;
height: 20px;
color: white;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.side-streams {
display: flex;
flex-direction: column;
justify-content: flex-start;
position: absolute;
top: 0px;
right: 0px;
height: 100vh;
width: 170px;
margin-right: 30px;
margin-top: 140px;
}
.side-streams video{
object-fit: cover !important;
}
#remote-media .chat-other-vid {
width: 155px !important;
height: 155px !important;
}
.vid-name {
color: #fff;
position: absolute;
top: -25px;
line-height: 1.5;
left: 0;
right: 0;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
max-width: 155px;
overflow: hidden;
text-overflow: ellipsis;
}
.vid-u {
text-align: center;
color: #fff;
line-height: 1.5;
font-size: 12px;
font-weight: bold;
white-space: nowrap;
max-width: 155px;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 6px;
}
/* Twilio chat room end */
.message-template-vid-chat-table{
width:100%;
table-layout: fixed;
}
.message-template-vid-chat-table td:nth-child(1) {
width:200px;
}
.message-template-vid-chat-table input{
padding:2px;
margin-bottom: 2px;
}
.large-video-container{
background-color:#f2f2f2;
background-image:url('/images/page-loader-green.gif');
background-repeat:no-repeat;
background-position: center center;
}
/* Twilio chat room end */
/* Apt info dialog start */
div#appointmentInfoDialog {
padding:50px 0px 0px 0px;
display: none;
position: absolute;
top: 25vh;
left: 940px;
width: 345px;
background-color: #fbfbfb;
border-radius: 19.5px;
box-shadow: 4px 8px 30px #9b9b9b;
overflow:hidden;
}
div#closeAptInfo {
position: absolute;
top: 30px;
font-size: 24px;
color: #4a90e2;
right: 30px;
}
div#aptInfoContainer {
text-align: center;
}
i.top-apt-icon.fad.fa-video {
color: #1a467c;
font-size: 56px;
margin-bottom: 20px;
}
h2.apt-main-header {
padding: unset !important;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
h4.starts-in {
font-size: 11px;
font-weight: bold;
color: #7dbe3e;
margin-bottom: 25px;
}
h3.apt-info-date {
font-size: 14px;
color: #414141;
font-weight: bold;
margin-bottom: 8px;
}
h4.apt-info-time {
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
color: #1a467c;
margin-bottom: 25px;
}
h5.attendees-title {
font-size: 12px;
font-weight: bold;
color: #1a467c;
line-height: 20px;
}
.all-attendees {
font-size: 12px;
width: 80%;
margin-left: 10%;
line-height: 20px;
color: #1a467c;
margin-bottom: 37px;
}
/* Apt info dialog end */
.custom-html ol{ list-style:inside; list-style-type: decimal; }
.custom-html ul{ list-style: inside; list-style-type: circle; }
.custom-html i{ font-style: italic; }
.custom-html .note-toolbar i {font-style: normal;}
.custom-html-confirm {
padding: 40px 40px 80px 40px !important;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
min-width: 280px;
max-width: 400px;
height: auto;
background: #fff;
border-radius: 10px;
padding: 0;
margin: 0;
border-top: 1px solid white;
animation: fade .2s ease 1 forwards;
}
.custom-html-confirm h1 {
text-align: center;
font-size: 1.2rem;
font-weight: bold;
color: #232323;
margin: 0 0 10px 0;
}
.custom-html-confirm p {
text-align: center;
font-size: .875em;
color: #232323;
line-height: 1.33;
margin: 0 0 15px 0;
}
.custom-html-confirm .action button {
font-size:1em;
padding: 8px 25px;
width:38% !important;
border-radius: 25px;
text-decoration: none;
border: 1px solid #4a90e2;
color: #4a90e2;
position: absolute;
bottom: 27px;
cursor: pointer;
}
.custom-html-confirm .action button:nth-of-type(1) {
background-color: transparent;
}
.custom-html-confirm .action button:nth-of-type(2) {
right: 40px;
background-color: #f4f4f4;
border-color:#9b9b9b !important;
color: #9b9b9b;
}
.custom-html-confirm .action button:hover {
outline:0 !important;
border: 1px solid #7dbe3e !important;
color: #7dbe3e;
font-weight: normal;
background: #fff;
}
.custom-html-confirm .action button:active,
.custom-html-confirm .action button:focus {
outline:0 !important;
}
.custom-html-confirm .action button:active{
border-color: #4a90e2 !important;
background-color: #4a90e2 !important;
color:#fff !important;
}
.custom-html .popupText{ display: none; }
.custom-html .popupLabel{ cursor: pointer; }
/* label#tempLabel {
margin-top: unset !important;
} */
a#hidePreview {
font-size: 11px;
text-transform: uppercase;
font-weight: bold;
color: #4a90e2;
position: absolute;
left: calc(47% - 1020px / 2);
top: 215px;
}
a#hidePreview:hover{
opacity: .5;
}
#previewCustName{
text-align: left;
}
#previewCustName a{
font-weight: bold;
font-family: Spartan !important;
color: #4a90e2;
text-align: left;
font-size: 18px;
line-height: 1.1;
text-decoration: none;
}
#previewCustName a:hover{
opacity: .5;
}
div#aptInfoName {
font-family: Spartan !important;
text-align: left;
color: #414141;
font-size: 14px;
margin-bottom: 12px;
margin-top: 1px;
}
.preview-top-block.left-top-box {
overflow: hidden;
}
.preview-top-block.middle-top-box{
padding-right: 75px;
}
.preview-top-block.right-top-box{
overflow: hidden;
}
div#aptDateInfo {
font-size: 14px;
color: #414141;
font-family: Spartan !important;
}
div#aptTimeInfo {
color: #1a467c;
font-size: 18px;
font-weight: bold !important;
margin-top: 11px;
text-transform: uppercase;
}
a.apt-action-button {
display: inline-block;
width: 32px;
float: right;
text-align: center;
height: 32px;
border: 2px solid #4a90e2;
color: #4a90e2;
font-size: 16px;
border-radius: 20px;
padding-top: 6px;
margin: 5px 5px 0px 5px;
transition: color .3s, border-color .3s;
cursor: pointer;
}
a.apt-action-button:hover{
color: #7dbe3e;
border-color: #7dbe3e;
}
.apt-info-buttons {
display: inline-flex;
width: 100%;
align-items: stretch;
margin-top: 40px;
}
.apt-info-button {
flex: 1;
color: #fff;
background-color: #4a90e2;
font-size: 10px;
height: 56px;
padding-top: 8px;
transition: background-color .3s;
cursor: pointer;
font-weight: bold;
}
.apt-info-button:hover{
background-color: #7dbe3e;
}
.apt-info-button i {
font-size: 16px;
line-height: 1.62;
}
.vc-multiple-chat-modal-size {
height: 300px;
width: 500px;
padding: 60px 40px;
}
.vc-multiple-container {
height: 100%;
width: 100%;
overflow: scroll;
padding: 0 8px;
}
.vc-multiple-row {
display: flex;
justify-content: space-between;
height: 40px;
font-size: 20px;
align-items: center;
margin: 8px 0;
padding: 6px 24px;
background-color: #f2f3f3;
border-radius: 10px;
gap: 20px;
}
.vc-multiple-row span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vc-text-outline {
/* text-shadow: 0px 0px 4px #232323; */
letter-spacing: 2px;
/* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black; */
background-color: #9b9b9b;
border-radius: 10px;
padding: 3px 10px 0;
font-family: Spartan !important;
}
.left-info{
border-right: .5px solid #fff;
}
.right-info{
border-left: .5px solid #fff;
}
.right-2-info{
border-left: 2px solid #fff;
}
.middle-info{
border-left: .5px solid #fff;
border-right: .5px solid #fff;
}
@media screen and (max-width:1330px){
div#appointmentInfoDialog {
right: 45px !important;
left: unset !important;
}
}
/* div.fd-v2 i {
font-size: 51px;
color: #1a467c;
margin-bottom: 18px;
} */
.fd-v2 p {
font-size: 14px !important;
font-family: Spartan !important;
color: #1a467c;
font-weight: bold;
line-height: 1.52;
margin-bottom: 18px;
}
.fd-v2 button.yes {
border-width: 2px !important;
font-weight: 500;
}
.fd-v2 button.nope {
border: 2px solid #4a90e2 !important;
background-color: #4a90e2;
color: #fff;
font-weight: 500;
transition: border .3s, background-color .3s;
}
.fd-v2 button.nope:hover{
border: 2px solid #7dbe3e !important;
background-color: #7dbe3e;
}
.fd-v2 .confirm{
padding: 52px 55px !important;
max-width: 484px !important;
}
.fd-v2 button{
bottom: 55px;
}
div.fd-v2 .fd-close-x i {
font-size: 24px;
position: absolute;
top: 25px;
right: 39px;
color: #4a90e2;
transition: color .3s;
}
div.fd-v2 .fd-close-x i:hover{
color: #7dbe3e;
}
div#mediaSelector {
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
z-index: 2000;
cursor: pointer;
position: absolute;
top: 55px;
right: 55px;
color: #4a90e2;
font-size: 21px;
background-color: #fff;
width: 44px;
text-align: center;
height: 44px;
border-radius: 30px;
padding-top: 12px;
transition: color .3s, background-color .3s;
}
div#mediaSelector:hover{
color: #fff !important;
background-color: #7dbe3e;
}
.pxv-video-box div#local-media video {
object-fit: cover;
width: 100%;
}
span.extra-dialog-message {
font-size: 10px;
font-weight: normal !important;
}
.edit-disable i {
display: none;
}
.edit-disable {
pointer-events: none;
}
.edit-hide{
display: none !important;
}
.shrink-for-video {
height: calc(39vh - 120px);
overflow-y: auto;
padding-right: 16px;
}
#aptContainerHome .appointment-item{
width: 100%;
list-style: none !important;
}
div#aptContainerHome {
position: relative;
margin-top: 40px;
}
div#aptContainerHome ul {
height: calc(55vh - 150px);
overflow-y: auto;
padding-right:6px;
max-height: 342px;
}
#aptContainerHome ul::-webkit-scrollbar {
width: 4px;
border-radius: 8px;
}
#aptContainerHome ul::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1);
border-radius: 8px;
}
#aptContainerHome ul::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
/* outline: 1px solid #1a467c; */
}
.shrink-for-video::-webkit-scrollbar {
width: 4px;
border-radius: 8px;
}
.shrink-for-video::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1);
border-radius: 8px;
}
.shrink-for-video::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
/* outline: 1px solid #1a467c; */
}
#aptContainerHome h2{
padding-top: 2px;
}
.apt-initials{
display: none !important;
line-height: .9 !important;
}
.cust-state {
display: inline-block;
margin-left: 4px;
margin-right: 6px;
vertical-align: text-bottom;
color: #1A467C;
}
p.all-attendees .fa-thumbs-up {
display: none !important;
}
.videoButtons {
width: 100%;
text-align: center;
}
.side-by-side {
display: inline-block;
width: 120px;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 5px 0px;
border: 2px solid #4a90e2;
color: #4a90e2;
border-radius: 20px;
margin-right: 10px;
margin-top: 18px;
}
.filled-button, .toast-btn-1{
background-color: #4a90e2 !important;
color: #fff !important;
border: 2px solid #4a90e2 !important;
transition: background-color .3s, border .3s;
cursor: pointer;
}
.toast-btn{
font-weight: bold;
margin: 0px 8px;
}
.toast-btn-1:hover{
background-color: #7dbe3e !important;
}
#startNew{
font-weight: bold;
margin-top: 16px;
}
.filled-button{
font-weight: bold !important;
}
.filled-button:hover{
background-color:#7dbe3e !important;
border:2px solid #7dbe3e !important;
}
.empty-button{
background-color: transparent !important;
color: #4a90e2;
border: 2px solid #4a90e2;
transition: color .3s, border .3s;
cursor: pointer;
}
.empty-button:hover{
color:#7dbe3e !important;
border:2px solid #7dbe3e !important;
}
.today-tab .apt-date-breaker {
background-color: #7dbe3e;
color: #fff;
border-color: #7dbe3e;
}
.today-tab .apt-date-line {
border-color: #7dbe3e;
}
/* Slider style */
#slideDialog {
background-color: transparent;
}
#slideDialog .confirm{
background-color: #dadada;
width: 100%;
top: 113vh;
transform: unset !important;
animation: unset !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
height: 100vh;
overflow-y: auto;
border: unset !important;
border-radius: unset;
max-width: 550px;
}
/* Pin styles */
button.otherPin {
position: absolute;
top: 0px;
right: 0px;
background: transparent;
border: unset;
color: #fff;
font-size: 14px;
cursor: pointer;
}
#chatControl button:hover{
color: #7dbe3e;
}
.active-pin{
color: #7dbe3e !important;
}
div#chatControl {
height: 155px;
width: 155px;
}
button.otherAudioButton {
bottom: 0;
left: 0;
position: absolute;
}
button.otherMaxButton {
position: absolute;
top: 0;
right: 0;
}
div#shareButton {
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
cursor: pointer;
position: absolute;
top: 56px;
right: 110px;
width: 44px;
height: 44px;
z-index: 999;
background-color: #fff !important;
text-align: center;
font-size: 19px;
border-radius: 50px;
padding-top: 13px;
color: #4a90e2;
display: none;
}
div#shareButton.close-share {
right: 55px;
top: 55px;
padding-top: 13px;
font-size: 20px;
z-index: 9999;
}
div#shareButton:hover {
background-color: #7dbe3e !important;
color: #fff;
}
.pin-disable .otherPin {
pointer-events: none;
opacity: .5;
}
.disable-share{
color: #dadada !important;
pointer-events: none;
}
input#scheduler_cancel {
position: absolute;
}
.view.view-date {
border-radius: 8px;
}
#goToToday{
text-decoration: none;
font-weight: bold;
display: block;
font-size: 12px;
color: #fff;
background-color: #7dbe3e;
width: 60px;
text-align: center;
margin: 0 50%;
border-radius: 50px;
}
#goToToday:hover{
opacity: .5;
}
div#daysCount {
font-size: 20px;
color: #1A467C;
font-weight: bold;
line-height: 1.5;
margin-top: 32px;
}
.apt-spec-filter {
cursor: pointer;
width: 90%;
margin: 2px 0px 5px 0px;
font-size: 14px;
line-height: 1.5;
vertical-align: middle;
color: #4a90e2;
}
.apt-spec-filter .dot-container{
padding-left: 7px;
vertical-align: middle;
}
.apt-spec-filter.selected-spec {
color: #4a90e2 !important;
background-color: #dadada;
}
div#aptSpecFilter {
margin-top: 27px;
}
.spec-filter-count {
display: inline-block;
float: right;
color: #9b9b9b;
font-size: 10px;
vertical-align: middle;
margin-right: 17px;
line-height: 2.2;
}
/* Video Consult Select2 Start */
#aptCusts {
background-color: white;
border-right: 1px solid #4a90e2;
border-left: 1px solid #4a90e2;
border-bottom: 1px solid #4a90e2;
border: 2px solid #4a90e2;
/* border-radius: 0 0 36px 36px; */
top: 52px;
}
#newFromApt, #aptCusts .cust-drop {
font-size: 12px;
color: #4a90e2;
}
#customerLookup.opened-lookup {
border-radius: 36px 36px 0 0;
}
#addStaffAppt .select2-container, #addStaffAppt .select2-selection--multiple, #addPatientAppt .select2-container, #addPatientAppt .select2-selection--multiple {
background-color: unset;
height: 100% !important;
}
#addPatientAppt .select2-container {
z-index: 90001;
/* height: unset !important; */
}
#addStaffAppt .select2-selection--multiple, #addPatientAppt .select2-selection--multiple {
border-radius: 36px;
}
#addStaffAppt .select2-container--open .select2-selection--multiple, #addPatientAppt .select2-container--open .select2-selection--multiple {
border-radius: 28px 28px 0 0;
}
#addStaffAppt .select2-selection--multiple, #addPatientAppt .select2-selection--multiple {
padding: 17px 20px 17px 30px !important;
}
#addStaffAppt .select2-search, #addPatientAppt .select2-search {
padding-left: 10px !important;
}
#addStaffAppt input.select2-search__field, #addPatientAppt input.select2-search__field {
width: 100% !important;
font-size: 16px !important;
font-weight: bold;
margin: unset;
border-radius: unset;
color: #4a90e2;
}
#addStaffAppt .select2-dropdown, #addPatientAppt .select2-dropdown {
background-color: white;
}
#addStaffAppt input.select2-search__field::placeholder, #addPatientAppt input.select2-search__field::placeholder {
color: #4a90e2 !important;
font-size: 16px;
font-weight: bold;
}
#addPatientAppt.edit-disable input.select2-search__field::placeholder {
color: #9b9b9b !important;
}
#addStaffAppt .select2-selection__choice, #addStaffAppt .select2-selection__choice__remove, #addPatientAppt .select2-selection__choice, #addPatientAppt .select2-selection__choice__remove {
background-color: white;
color: #4a90e2;
font-size: 16px;
font-weight: bold;
margin-top: unset;
margin-right: unset;
padding-top: unset !important;
padding-bottom: 15px !important;
}
#addStaffAppt .select2-container--open {
width: unset !important;
}
#addStaffAppt .select2-container--below {
width: 100% !important;
}
#addStaffAppt .select2-selection__rendered, #addPatientAppt .select2-selection__rendered {
display: block;
}
.add-new-patient-vc {
color: #4a90e2;
position: absolute;
font-size: 16px !important;
right: 26px;
top: 21px;
cursor: pointer;
z-index: 90002;
}
#addPatientAppt.edit-disable span.select2-selection.select2-selection--multiple {
color: #9b9b9b !important;
border-color: #9b9b9b !important;
}
#addPatientAppt.edit-disable .select2-selection__choice, #addPatientAppt.edit-disable .select2-selection__choice .select2-selection__choice__remove {
color: #9b9b9b !important;
}
/* Video Consult Select2 End */
/* Admit Dialog */
#_admittanceDialog_ button.quick-link {
position: relative;
display: inline-block;
left: 0;
right: 0;
margin: 32px 4px 0px 4px;
bottom: 0;
}
#_admittanceDialog_ .confirm {
padding-bottom: 40px !important;
}
div#admitFromWaiting {
display: inline-block;
color: #fff;
background-color: #4a90e2;
width: 104px;
padding: 4px 0px 3px 0px;
border: 2px solid #4a90e2;
border-radius: 50px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
}
div#admitFromWaiting:hover{
background-color: #fff;
color: #4a90e2;
}
div.admit-from-waiting {
display: inline-block;
color: #fff;
background-color: #4a90e2;
width: 104px;
padding: 4px 0px 3px 0px;
border: 2px solid #4a90e2;
border-radius: 50px;
font-size: 14px;
font-weight: bold;
vertical-align: middle;
cursor: pointer;
}
div.admit-from-waiting:hover{
background-color: #fff;
color: #4a90e2;
}
.waiting-banner h3 {
display: inline-block;
color: #fff;
font-weight: bold;
margin-right: 12px;
}
.waiting-banner {
position: absolute;
z-index: 999999;
top: 0;
width: 100%;
display: block;
background-color: #7dbe3e;
text-align: center;
padding: 8px 0px;
box-shadow: 0px 4px 42px #545454;
}
.displayed-apt {
border: 1px solid #7dbe3e;
}
.swift-input.new-fields {
width: 49%;
display: inline-block;
}
.white-bg .edit-disable label {
top: -6px;
font-size: 12px !important;
background-color: #fff !important;
display: block;
color: #9b9b9b !important;
}
.swift-input.swift-dropdown.cust-field.edit-disable input {
color: #9b9b9b !important;
border-color: #9b9b9b !important;
}
body .swift-input.swift-dropdown.cust-field.edit-disable .swift-selected-box .swift-select {
color: #9b9b9b !important;
}
div#deleteFromEdit {
cursor: pointer;
position: absolute;
right: 120px;
top: 39px;
color: #4a90e2;
font-size: 20px;
}
div#deleteFromEdit:hover{
color: #7dbe3e;
}
img.dialog-plane {
width: 50px;
margin-bottom: 7px;
}
.video-cons-icon {
font-size: 56px;
color: #1a467c;
margin-bottom: 12px;
}
.consult-preview-footer {
z-index: 11;
position: absolute;
display: flex;
justify-content: center;
width: 100vw;
top: calc((100% - 535px)/2 + 555px);
}
div#partContainer {
position: absolute;
left: calc(50% - 476px);
}
div#partContainer * {
font-size: 12px;
line-height: 1.5;
}
p.parts-string {
max-width: 300px;
color: #9b9b9b;
padding-top: 3px;
}
p.parts-string a {
color: #4a90e2;
}
p.parts-string a:hover {
opacity: .5;
}
div#partContainer h3 {
color: #9b9b9b;
font-weight: bold;
}
button.new-plus {
background-color: #4a90e2 !important;
color: #fff;
border: 2px solid #4a90e2;
padding: 3px 0px !important;
font-weight: bold;
}
button.new-plus:hover{
background-color: #7dbe3e !important;
color: #fff !important;
}
div#addAppointment.empty-add {
position: relative;
width: fit-content;
margin: 0 auto;
right: unset !important;
margin-top: 35px;
padding: 12px 20px;
margin-bottom: 52px;
}
.empty-date i {
font-size: 42px;
color: #1a467c;
margin-bottom: 32px;
margin-top: 20px;
}
.empty-date h2 {
font-size: 16px;
font-weight: bold;
padding-right: unset !important;
}
.empty-date p {
font-size: 16px;
color: #1a467c;
line-height: 1.5;
}
.convo-col .empty-date, .dial-col .empty-date {
text-align: center;
position: absolute;
top: calc(50% - 95px);
left: calc(50% - 92px);
}
div#leaveRoom .yes {
color: #ff0000;
border-color: #ff0000;
}
div#leaveRoom .yes:hover {
color: #7dbe3e !important;
}
div#hoverTip {
font-size: 12px;
position: absolute;
right: 138px;
top: 36px;
text-align: right;
}
div#dateCombo {
white-space: nowrap;
}
.always-off .toggle-options {
pointer-events: none;
filter: grayscale(100%);
opacity: .7;
}
/* image toaster */
.image-toaster-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9000;
background-color: rgba(216, 216, 216, .8);
}
div.image-toaster {
position: absolute;
z-index: 9999999999999;
left: 0;
top: 50%;
transform: translateY(-50%);
right: 0;
width: 600px;
margin: 0 auto;
background: #fff;
border-radius: 19.5px;
overflow: hidden;
box-shadow: 0px 8px 24px rgba(16, 22, 26, 0.2);
}
div.image-toaster img {
width: 100%;
}
div.image-toaster h2{
width: 100%;
padding: 47px 58px 12px 58px;
line-height: 1.25;
font-family: Spartan !important;
font-weight: bold;
font-size: 16px;
text-align: center;
color: #1a467c;
}
div.image-toaster p{
font-family: Roboto !important;
width: 100%;
padding: 0px 58px 42px 58px;
font-size: 14px;
text-align: center;
color: #414141;
line-height: 1.43;
}
.toast-btn-container {
text-align: center;
padding-bottom: 65px;
}
.image-toaster-close-wrapper {
color: #4a90e2;
position: absolute;
top: 15px;
right: 19px;
font-size: 20px;
display: flex;
line-height: normal;
align-items: center;
}
.image-toaster-close-wrapper span {
font-size: 8px;
cursor: pointer;
margin-right: 11px;
font-family: Spartan !important;
font-weight: 400;
}
.image-toaster-close-wrapper span:hover, .image-toaster .toast-close:hover {
color: #7dbe3e;
}
/* .image-toaster .toast-close {
color: #fff;
position: absolute;
top: 25px;
right: 24px;
font-size: 24px;
} */
/* Procedure add on appointments */
select#newAptService {
width: 100%;
background-color: #fff;
background-position-x: 95%;
border: 2px solid #4a90e3 !important;
padding: 16px 42px;
font-size: 16px;
height: unset !important;
font-weight: bold;
color: #4a90e2;
border-radius: 50px;
margin-bottom: 24px !important;
}
.label-contain {
position: relative;
}
label.always-up {
position: absolute;
font-size: 12px;
color: #4a90e2;
font-weight: bold;
background: #fff;
padding: 3px;
top: -8px;
left: 41px;
}
button.otherAudioButton .fa-microphone-slash {
color: #ff0000;
background-color: #fff;
padding: 5px 3px;
border-radius: 20px;
}
.active-pin .fa-thumbtack {
background-color: #fff;
padding: 4px 6px;
border-radius: 16px;
}
.pass-exp h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 12px;
color: #003a6e;
font-family: 'Spartan' !important;
}
.pass-exp p {
color: #414141;
font-size: 16px;
line-height: 1.43;
}
.admin-notification-prefs label {
line-height: 1;
flex-flow: nowrap !important;
font-size: 12px;
vertical-align: top;
}
div#adminListContent h3 {
text-transform: capitalize;
}
div#adminListContent h3 {
text-transform: capitalize;
margin-top: 3px;
margin-bottom: 3px;
font-size: 14px;
font-weight: bold;
color: #1A467C;
}
/* Settings component Start */
/* Properties */
h2.settings-header {
margin-left: 3vw;
padding-top: 36px;
}
li.settings-controlls-button {
position: relative;
display: inline-block;
color: #4a90e2;
font-weight: bold;
margin-right: 3vw;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 14px;
cursor: pointer;
}
li.settings-controlls-button:hover {
color: #7dbe3e;
}
.settings-controlls-button::after {
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
background:transparent;
height:4px;
border-radius:10px;
}
.settings-controlls-button:hover::after{
background: #7dbe3e !important;
}
.settings-controlls-button.controll-selected:after{
background: #4a90e2;
}
.controll-page {
display: none;
width: 100%;
height: 100%;
}
.active-controll {
display: block !important;
}
.settings-controllers-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 11.875rem;
margin-left: -7.875rem;
}
div#settings-controlls {
display: flex;
justify-content: center;
width: 100%;
}
.controller-pages {
width: 100%;
}
.controll-page-content {
display: flex;
justify-content: center;
width: 100%;
}
.controll-page-column {
width: 40rem;
display: flex;
flex-direction: column;
}
.controll-page-h1 {
font-size: 20px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 45px;
}
.settings-sub-header {
display: flex;
justify-content: space-between;
}
.controll-page-h3 {
margin-top: 45px;
}
.settings-req {
font-size: 12px;
font-family: Roboto;
color: #9b9b9b;
margin-top: auto;
}
.settings-edit-btn {
font-size: 14px;
font-family: Roboto;
font-weight: bold;
white-space: nowrap;
color: #4a90e2;
cursor: pointer;
}
.naming-edit-btn {
margin-top: 45px;
}
.naming-save-btn {
display: none;
}
.settings-back-btn {
position: fixed;
left: 18%;
font-size: 11px;
font-family: Roboto;
font-weight: bold;
color: #1a467c;
border: none;
cursor: pointer;
}
.settings-input-wrapper {
position: relative;
margin-top: 43px;
}
.settings-input-wrapper label {
position: absolute;
top: 0px;
left: 46px;
background-color: #eef2f5;
padding: 0 9px;
font-size: 12px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
}
.settings-input-wrapper input {
border: solid 2px #777c80;
border-radius: 28px;
padding: 18px 40px;
height: 56px;
width: 100%;
margin-top: 5px;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
}
.naming-flex-container {
display: flex;
margin-top: 20px;
}
.naming-description {
font-size: 14px;
font-family: Roboto;
line-height: 1.43;
color: #1a467c;
}
.naming-values {
font-size: 14px;
font-family: Roboto;
font-weight: bold;
line-height: 1.43;
color: #1a467c;
margin-left: 14px;
}
.naming-edit-wrapper {
display: none;
}
.naming-sub-header {
margin-top: 34px;
}
.edit-naming-description {
font-size: 14px;
font-family: Roboto;
line-height: 1.43;
color: #1a467c;
margin-top: 6px;
}
.in-your-business {
font-size: 16px;
font-family: Roboto;
font-weight: bold;
line-height: 1.25;
color: #1a467c;
margin-top: 36px;
}
#tagCatContainer {
display: flex;
align-items: center;
flex-direction: column;
}
.tag-cat-flex {
display: flex;
height: 1.875rem;
width: 100%;
margin-top: 1.5rem;
}
#tagCatAddNew, #tagCatAddNewCancel, #tagCatAddNewSave {
font-family: Spartan !important;
}
#tagCatAddNewCont {
display: none;
}
#tagCatAddNewFlex {
display: flex;
justify-content: space-between;
width: 7.5rem;
}
#tagCatLoader {
width: 12.5rem;
}
.tag-cat-row-header {
font-size: 1rem;
color: #9b9b9b;
}
.tag-cat-text {
width: 80%;
}
.tag-cat-input {
display: none;
width: 80%;
height: 1.875rem;
border: none;
border-radius: .5rem;
padding: 0 1.125rem;
background-color: #ffffff !important;
}
.settings-edit-btn-container {
display: none;
}
.settings-edit-btn-flex {
display: flex;
gap: .625rem;
}
.tcr1, .tcr2, .tcr3, .tcr4, .tcr5 {
display: flex;
align-items: center;
}
.tcr1 {
width: 30%;
}
.tcr2 {
width: 40%;
}
.tcr3 {
width: 10%;
}
.tcr4 {
width: 10%;
}
.tcr5 {
width: 10%;
}
#serv-replace-time-radio, #biz-replace-time-radio {
display: none;
}
.settings-input-container {
margin-top: 44px;
}
.settings-input-label {
font-size: 14px;
font-family: Roboto;
font-weight: bold;
line-height: 1.43;
color: #1a467c;
}
.settings-input-input {
border: solid 2px #777c80;
border-radius: 28px;
padding: 18px 40px;
height: 56px;
width: 100%;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
margin-top: 13px;
}
.settings-input-input.for-select {
padding: 0 40px;
background-color: #f4f4f4;
display: flex;
align-items: center;
}
.lightgray-break-line {
border-bottom: solid 1px #e9e9e9;
width: 100%;
height: 0px;
}
.grey-break-line {
border-bottom: solid 1px #777c80;
width: 100%;
height: 0px;
margin-top: 45px;
}
.vertical-divider-gray {
height: 50%;
background-color: lightgray;
width: 1px;
border-radius: 20px;
}
.settings-btn-margin {
margin-top: 70px;
}
.sett-b-flex {
display: flex;
justify-content: center;
width: 100%;
}
.settings-radio-title {
font-size: 12px;
font-family: Spartan;
font-weight: bold;
color: #1a467c;
}
.settings-radio-description {
font-size: 14px;
font-family: Roboto;
line-height: 1.57;
color: #777c80;
margin-top: 8px;
}
.settings-resend-container {
display: flex;
flex-direction: column;
margin-top: 17px;
}
.settings-resend-text {
margin-top: 4px;
font-family: Roboto;
font-size: 14px;
line-height: 1.43;
text-align: left;
white-space: nowrap;
color: #1a467c;
}
.settings-reviews-des {
font-size: 16px;
color: #777c80;
line-height: 1.63;
margin-top: 17px;
}
.settings-slider-expli {
font-size: 14px;
line-height: 1.43;
color: #777c80;
width: 381px;
margin-top: 16px;
text-align: center;
}
.slideContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.slider-description-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 43px;
width: 60%;
}
.slider-name {
font-size: 14px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
}
.slider-percent {
font-size: 22px;
font-weight: bold;
color: #1a467c;
text-align: center;
}
.slide {
-webkit-appearance: none;
width: 80%;
height: 0px;
background-color: #4a90e2 !important;
outline: none;
opacity: 1;
border-radius: 5px;
-webkit-transition: .2s;
transition: opacity .2s;
border: solid 2px #4a90e2;
margin-top: 16px;
}
.slide:hover {
opacity: 1;
}
.slide::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
border: solid 3px #4a90e2;
}
.slide::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
border: solid 3px #4a90e2;
}
.logo-header-container {
display: flex;
}
.logo-limit {
font-size: 12px;
line-height: 1.33;
color: #1a467c;
margin-top: 46.5px;
margin-left: 11px;
}
.logos-container {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: 22px;
padding-left: 10%;
padding-right: 10%;
}
.logo-img-container {
width: 208px;
height: 109px;
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
padding: 24px;
margin-top: .875rem;
}
.logo-img-container img {
max-width: 100%;
max-height: 100%;
}
.logo-container-texts {
display: flex;
justify-content: space-between;
margin-top: 1.625rem;
}
.logo-text {
font-size: .875rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
}
.logo-modal {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9000;
background-color: rgba(216, 216, 216, .8);
}
.logo-modal-content {
padding: 25px;
width: auto;
height: auto;
}
.x-logo-forum {
font-size: 22px;
font-weight: 900;
color: #4a90e2;
float: right;
height: 19px;
width: 19px;
cursor: pointer;
position: absolute;
top: 20px;
right: 25px;
}
.img-upload-panel {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
}
/* Location */
.settings-list-wrapper, .member-list-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
border-radius: 8px;
margin-top: 8px;
height: 47px;
padding: 17px 26px;
cursor: pointer;
}
.settings-list-wrapper:hover {
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
}
.settings-no-media, .settings-no-responses, .settings-no-blacklist {
display: none;
margin-top: 41px;
font-family: Roboto;
font-size: 16px;
font-weight: bold;
line-height: 1.25;
text-align: center;
color: #545454;
}
.settings-list-topper {
display: flex;
align-items: center;
margin-top: 22px;
}
.settings-topper-sort {
display: flex;
align-items: center;
}
.settings-topper-sort .sort-icon {
color: #4a90e2;
margin-left: 5px;
cursor: pointer;
}
.settings-topper-sort .fa-sort-up {
margin-top: .1563rem;
}
.settings-topper-sort .fa-sort-down {
margin-bottom: .1563rem;
}
.settings-topper-title {
font-size: 10px;
font-family: Helvetica;
font-weight: bold;
color: #4a90e2;
text-transform: uppercase;
}
.settings-topper-title.sort-title {
margin-left: 26px;
}
.settings-topper-title.topper-status {
margin-left: 224px;
}
.settings-list-text {
font-size: 12px;
font-family: Roboto;
color: #545454;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 16px;
}
.right-list {
display: flex;
width: 120px;
justify-content: space-between;
}
.state-zip-wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.settings-list-edit-btn {
font-size: 10px;
}
/* Specialist */
.spec-location-description {
display: flex;
align-items: baseline;
margin-top: 44px;
}
.spec-location-title {
font-size: 14px;
font-family: Roboto;
font-weight: bold;
line-height: 1.43;
color: #1a467c;
margin-right: 10px;
}
.spec-location-text {
font-size: 12px;
font-family: Roboto;
color: #9b9b9b;
}
.spec-locations-list-wrapper {
width: 100%;
background-color: #ffffff;
padding: 29px 62px 42px 62px;
border-radius: 14px;
margin-top: 13px;
}
.spec-locations-title {
font-size: 16px;
font-family: Roboto;
font-weight: bold;
text-align: center;
color: #545454;
}
.spec-locations-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 15px;
}
.spec-loc-input {
display: none;
}
.spec-loc-label {
display: flex;
justify-content: center;
align-items: center;
width: 144px;
height: 32px;
font-size: 14px;
font-family: Roboto;
font-weight: bold;
line-height: 1.71;
color: #4a90e2;
border: solid 2px #4a90e2;
border-radius: 24px;
background-color: #ffffff;
margin: 10px 0;
}
.spec-loc-input:checked + .spec-loc-label {
color: #ffffff;
background-color: #4a90e2;
}
.settings-select {
background-color: transparent;
border: none;
height: 56px;
width: 350px;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #777c80;
}
/* attempted to style select2 search field but unable to do so without styling globally */
/* .select2-dropdown {
border-radius: 14px !important;
border: solid 2px #777c80 !important;
margin: 5px 0px !important;
}
.select2-search__field {
border-radius: 12px;
}
li.select2-results__option {
font-weight: bold !important;
font-size: 14px !important;
color: #777c80;
padding: 6px 20px;
} */
/* settings media section */
.media-page-column {
width: 62%;
}
.media-settings-topper {
justify-content: space-between;
padding-left: 26px;
padding-right: 26px;
}
.media-settings-topper, #MediaList {
display: none;
}
#MediaList .controll-page-column {
width: unset;
}
.media-list-l {
width: 35%;
}
.media-list-m {
width: 25%;
}
.media-list-s {
width: 5%;
}
.media-list-l div, .media-list-m div, .media-list-s div {
margin-left: 0px !important;
}
.media-list-blue {
color: #4a90e2;
}
.media-settings-header-container, .responses-settings-header-container, .blacklist-settings-header-container {
display: flex;
justify-content: end;
}
.media-settings-upload-container, .responses-settings-upload-container, .blacklist-settings-upload-container {
display: flex;
margin-top: 40px;
}
.media-upload-modal-size {
width: 504px;
height: 378px;
}
.media-upload-modal-size h1 {
margin: 16px 0 0 0;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
color: #1a467c;
}
.media-upload-modal-size h3 {
margin: 12px 0 0 0;
font-size: 12px;
font-weight: normal;
line-height: 1.33;
text-align: center;
color: #1a467c;
}
.media-upload-modal-img {
height: 64px;
width: 64px;
margin-top: 53px;
}
.media-modal-ql-btn {
text-align: center;
margin-top: 17px;
}
.media-upload-modal-size .error-text {
height: 20px;
padding: 0 60px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
text-align: center;
}
.media-upload-modal-p {
height: 14px;
font-size: 12px;
/* line-height: 1.71; */
color: #777c80;
padding: 0 60px;
margin: 6px 0 0 0;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.settings-media-link:hover {
cursor: pointer;
color: #7dbe3e;
}
/* responsive for attachment */
@media screen and (max-width: 630px) {
.media-upload-modal-size {
width: calc(100vw - 26px);
height: calc(100vh - 26px);
}
.media-upload-modal-size .media-upload-modal-img {
margin-top: 20vh;
}
}
/* settings responses section */
.responses-page-col {
width: 62%;
}
.responses-settings-topper {
padding: 0 25px;
display: none;
justify-content: space-between;
}
#ResponsesList {
display: none;
}
.responses-list-xl {
width: 45%;
}
.responses-list-l {
width: 25%;
}
.responses-list-m {
width: 15%;
}
.responses-list-s {
width: 7%;
}
.upload-qr-modal-size {
width: 600px;
height: 500px;
}
#settingsUploadQrModal textarea {
width: 459px;
height: 140px;
margin-top: 10px;
padding: 14px 27px 14px 32px;
border-radius: 28px;
border: solid 2px #4a90e2;
resize: none;
outline: none;
-ms-overflow-style: none;
scrollbar-width: none;
color: #4a90e2;
}
.qr-title-input {
background-color: white !important;
height: 40px;
padding: 0px 32px;
width: 459px;
font-weight: normal;
}
#settingsUploadQrModal textarea::placeholder, .qr-title-input::placeholder {
color: #4a90e2 !important;
opacity: .5;
}
#settingsUploadQrModal textarea::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 630px) {
.upload-qr-modal-size {
width: calc(100vw - 26px);
height: calc(100vh - 26px);
}
.upload-qr-modal-size .modal-head-img {
margin-top: 20vh;
}
#settingsUploadQrModal textarea {
width: 78vw;
}
}
#settingsUploadQrModal h1 {
margin: 25px 0 0 0;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
color: #1a467c;
}
.submitQrCont {
display: flex;
align-items: center;
margin: 35px 0 0 0px;
position: relative;
}
.delete-qr-button {
margin-left: 17px;
font-size: 12px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
color: #4a90e2;
position: absolute;
right: -50px;
}
.delete-qr-button:hover {
cursor: pointer;
color: #7dbe3e;
}
#staffQrError.error-text {
height: 18px;
margin-top: 3px;
}
.modal-head-img {
height: 64px;
width: 64px;
margin-top: 53px;
}
.staff-edit-response {
text-align: center;
font-size: 36px;
color: #4a90e2;
}
.staff-edit-response:hover, .staff-copy-response i:hover {
color: #7dbe3e !important;
cursor: pointer;
}
textarea.hide-staff-responses-text {
position: absolute;
pointer-events: none;
opacity: 0;
}
.include-qr-modal-size {
width: 610px;
height: 450px;
}
@media screen and (max-width: 630px) {
.include-qr-modal-size {
width: calc(100vw - 26px);
height: calc(100vh - 26px);
}
.include-qr-modal-size .modal-head-img {
margin-top: 20vh;
}
.chat-qr-select-container {
width: 78vw !important;
}
}
#chatIncludeQrModal h1 {
margin: 25px 0 0 0;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
color: #1a467c;
}
#chatIncludeQrModal button {
margin-top: 40px;
}
.chat-qr-select-container {
border: solid 2px #4a90e2;
width: 480px;
height: 56px;
border-radius: 28px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 42px;
margin-top: 40px;
}
.chat-qr-select-container select {
background-size: 16px;
padding-right: 20px;
text-overflow: ellipsis;
font-size: 16px;
}
.chat-create-new-qr {
margin-top: 35px;
font-size: 12px;
color: #4a90e2;
line-height: normal;
}
.chat-create-new-qr:hover {
color: #7dbe3e;
cursor: pointer;
}
/* Settings Blacklist Component Start */
.blacklist-page-col {
width: 62%;
}
.blacklist-list-xl {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
line-height: 1.5;
}
.blacklist-prof-link {
text-decoration: none;
color: #4a90e2 !important;
cursor: pointer;
}
.blacklist-settings-topper {
padding: 0 26px;
/* display: none; */
justify-content: space-between;
}
.bl-filt-column {
width: 1px;
height: 150px;
border: solid 1px #dadada;
}
/* Settings Blacklist Component End */
/* Settings component Ends */
/* Gated Review START */
.greview-container {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 8px;
background-color: #f2f3f3;
width: 100%;
min-height: 200px;
padding: 0 20px;
padding-bottom: 40px;
}
.greview-text {
width: 90%;
text-align: center;
font-size: 20px;
font: Spartan !important;
margin-top: 20px;
color: #545454;
font-weight: 700;
line-height: 26px;
}
@media screen and (max-width: 1030px) {
.greview-text {
font-size: 16px;
}
}
.greview-star-parent {
margin-top: 32px;
}
.greview-feedback-parent {
margin-top: 20px;
width: 90%;
}
.greview-star-container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.greview-star-container-small {
gap: 6px;
}
.greview-star-wrap {
width: 5rem;
height: 5.5rem;
padding: .75rem;
background-color: white;
border-radius: .5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: .75rem;
}
.greview-star-wrap-small {
padding: .25rem;
width: 2.25rem;
height: 2.75rem;
justify-content: center;
gap: .375rem;
}
@media screen and (max-width: 385px) {
.greview-star-wrap {
padding: 8px;
}
}
.greview-star {
height: 2.5rem;
width: 2.5rem;
cursor: pointer;
}
.greview-star-small {
width: 1.25rem;
height: 1.25rem;
}
@media screen and (max-width: 385px) {
.greview-star {
font-size: 14px;
}
}
.greview-star-txt {
font-size: .75rem;
font-weight: bold;
font-family: Spartan !important;
color: #777c80;
}
.greview-star-txt-small {
font-size: .3125rem;
}
.greview-isdone {
width: 100%;
height: 200px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
font-size: 26px;
color: #9b9b9b;
font-family: Spartan !important;
}
@media screen and (max-width: 570px) {
.greview-isdone {
font-size: 18px;
}
}
@media screen and (max-width: 400px) {
.greview-isdone {
font-size: 16px;
}
}
#gReviewFeedback,
#gReviewBtns,
#gReviewIsDone {
display: none;
}
#gReviewIsDone {
position: relative;
width: 100%;
}
.greview-btn-container {
display: flex;
flex-direction: column;
gap: 26px;
margin-top: 36px;
}
.greview-feedback-container {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
}
.greview-textarea {
resize: none;
height: 200px;
width: 450px;
border-radius: 8px;
border: none;
outline: none;
padding: 16px 20px;
line-height: 1.6;
}
@media screen and (max-width: 690px) {
.greview-textarea {
width: 70vw;
}
}
.greview-video {
width: 90%;
aspect-ratio: 16/9;
margin-top: 20px;
}
#gReviewRevBtnsVidId,
#gReviewFeedbackVidId {
display: none;
}
#gReviewLoader {
display: none;
}
.greview-loader {
height: 34px;
margin-top: 32px;
}
.greview-btn {
width: 292px;
height: 44px;
color: #fff !important;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
border: solid 2px #fff;
border-radius: 50px;
background-color: #1a467c;
font-weight: bold;
cursor: pointer;
}
@media screen and (max-width: 418px) {
.greview-btn {
width: 70vw;
}
}
/* Gated Review END */
/* New staff component */
div#staffCol {
position: relative;
overflow-y: auto;
width: 100%;
overflow-x: hidden;
}
.staff-box-container {
display: grid;
min-width: 100px;
width: 90vw;
margin-left: 3vw;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-gap: 1em;
margin-bottom: 40px;
}
.staff-box {
height: 156px;
width: 160px;
display: inline-grid;
}
.staff-box {
width: 160px;
display: inline-grid;
text-align: center;
background-color: #fff;
padding: 16px 20px 15px 20px;
border-radius: 8px;
}
.staff-box:hover, .groupCard:hover{
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
}
.staff-init {
overflow: hidden;
height: 34px;
width: 34px;
border: 2px solid #1A467C;
padding-top: 8px;
font-family: Roboto !important;
font-weight: 500;
color: #1A467C;
margin: 0 auto;
border-radius: 25px;
font-size: 14.3px;
text-transform: uppercase;
}
.staff-box h3 {
font-size: 14px;
white-space: nowrap;
width: 105px;
text-overflow: ellipsis;
overflow: hidden;
color: #1b467c;
font-weight: bold;
padding-top: 9px;
padding-bottom: 6px;
margin: 0 auto;
text-transform: capitalize;
}
p.staff-role {
font-size: 12px;
color: #1a697c;
font-weight: 500;
padding-bottom: 6px;
height: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p.staff-title {
font-size: 8px;
white-space: nowrap;
width: 105px;
text-overflow: ellipsis;
overflow: hidden;
color: #1b467c;
padding-bottom: 8px;
line-height: 1.3;
margin: 0 auto;
text-transform: capitalize;
}
div.edit-this-staff {
font-size: 12px;
color: #4a90e2;
cursor: pointer;
font-weight: bold;
}
div.edit-this-staff:hover {
color: #7dbe3e;
}
div#staffFilters {
display: block;
margin-left: 3vw;
}
li.staff-filter-button {
position: relative;
display: inline-block;
color: #4a90e2;
font-weight: bold;
margin-right: 3vw;
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 14px;
cursor: pointer;
}
li.staff-filter-button:hover{
color: #7dbe3e;
}
.staff-filter-button::after {
content:'';
position:absolute;
bottom:0;
left:0;
right:0;
background:transparent;
height:4px;
border-radius:10px;
}
.staff-filter-button:hover::after{
background: #7dbe3e !important;
}
.staff-filter-button.staff-selected-filter:after{
background: #4a90e2;
}
.staff-box.inactives{
opacity: 0.5;
}
.you-staff {
background: transparent;
border: 2px solid #7dbe3e;
}
div#staffSorts {
position: absolute;
right: calc(6vw - 40px);
top: 148px;
width: 320px;
}
select#staffLocFilter, #staffAlphaSort {
display: inline-block;
font-size: 12px;
padding: 4px 10px 4px 16px !important;
width: 149px !important;
border-radius: 20px;
}
#staffAlphaSort{
margin-left: 20px;
}
.loc-filter-hide{
display: none !important;
}
h2.staff-header {
margin-left: 3vw;
padding-top: 20px;
}
div#admin-editor {
display: none;
position: fixed;
top: 0;
padding: 3em;
background-color: #f2f3f3;
width: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.admin-close-x {
/* position: absolute; */
right: 3vw;
width: 100px;
font-size: 24px;
color: #4a90e2;
}
.user-admin-close-x{
/* position: absolute; */
left: 60px;
width: 100px;
font-size: 11px;
font-weight: bold;
cursor: pointer;
margin-top: 24px;
}
input#adminDialog_active,
input#adminDialog_immu {
width: 24px !important;
vertical-align: text-top;
margin-top: -8px;
margin-left: 10px;
}
div#adminDialog {
/* max-width: 900px; */
}
/* Custom html */
.custom-html h2 {
font-size: 20px;
font-weight: bold;
color: #1a467c;
margin-bottom: 12px;
margin-top: 12px;
line-height: 1.5;
}
.custom-html p {
font-size: 16px;
line-height: 1.5;
color: #545454;
padding-top: 8px;
padding-bottom: 8px;
}
.custom-html a {
color: #4a90e2 !important;
}
.custom-html ul {
margin-top: 8px;
margin-bottom: 8px;
overflow: visible;
padding-left: 10% !important;
padding-right: 6%;
width: 100%;
}
.custom-html li {
list-style: outside !important;
list-style-type: disc !important;
line-height: 1.5;
font-size: 14px;
color: #545454;
}
.staff-disable {
pointer-events: none;
opacity: .5;
}
h3.spec-filter-label {
margin-top: 24px;
}
.perm-icons {
display: flex;
width: 300px;
margin: 0 auto;
justify-content: space-evenly;
margin-bottom: 42px;
}
.perm-img {
position: relative;
display: inline-block;
width: 200px;
margin-top: 200px !important;
vertical-align: top;
}
.perm-img i {
font-size: 31px;
color: #fff;
background-color: #ff0000;
height: 60px;
width: 60px;
padding-top: 15px;
border-radius: 50%;
box-shadow: 0 10px 30px 0 rgb(16 22 26 / 20%), 0 3px 5px 0 rgb(16 22 26 / 20%);
}
button.clickable.quick-link.filled-button.long-button {
width: 250px !important;
font-weight: bold;
}
img.small-circle-image {
vertical-align: top;
display: block;
top: 0;
margin-top: -10px;
height: 32px;
width: 31px;
text-align: center;
object-fit: cover;
}
div#locationContainer .opes-side input#adminDialog_active,
div#locationContainer .opes-side input#adminDialog_immu{
top: 10px !important;
}
div#locationContainer .opes-side input:checked{
background-color: #4a90e2 !important;
}
/* customer CSV modal Start */
.csv-modal-content {
padding: 54px 75px 114px 75px;
width: 700px !important;
height: 550px !important;
animation: none;
}
@media screen and (max-width: 1024px) {
.csv-modal-content {
width: calc(100vw - 26px) !important;
height: calc(100vh - 26px) !important;
/* overflow: scroll; */
padding: 64px 30px 114px 30px;
}
}
.csv-modal-img {
height: 64px;
width: 64px;
}
.csv-modal-h1 {
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
color: #1a467c;
margin: 18px 0 0 0;
text-align: center;
}
.csv-modal-p {
font-size: 14px;
line-height: 1.71;
color: #777c80;
/* padding: 0 60px; */
margin: 24px 0 0 0;
text-align: center;
}
.x-csv-modal:hover{
color: #7dbe3e;
}
.csv-map-btn-wrapper {
display: flex;
justify-content: space-evenly;
width: 415px;
position: absolute;
bottom: 62px;
}
@media screen and (max-width: 1024px) {
.csv-map-btn-wrapper {
justify-content: center;
gap: 1.25rem;
}
#removeCustTagBtn,
#addCustTagBtn {
width: 136px;
padding: 8px 16px;
}
}
.csv-download-link {
font-size: 14px;
font-weight: bold;
line-height: 1.71;
color: #4a90e2;
margin-top: 5px;
text-decoration: none;
text-align: center;
}
.csv-modal-ql-btn {
width: 358px;
text-align: left;
padding-left: 41px;
margin-top: 30px;
}
.csv-modal-err {
margin-top: 10px;
}
.vid-upload-err {
margin: 4px 0;
height: 20px;
}
.csv-mapping-p {
font-size: 12px;
color: #777c80;
margin-top: 8px;
text-align: center;
}
.csv-mapping-warning {
line-height: 1.83;
color: red;
margin-top: 35px;
font-family: 'Spartan' !important;
font-size: 15px;
font-weight: bold;
}
.csv-map-file-name {
font-size: 16px;
font-weight: bold;
margin-top: 26px;
}
.csv-map-field-numbers {
font-size: 16px;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
margin-top: 22px;
}
.csv-map-field-example {
font-size: 18px;
font-weight: bold;
color: #777c80;
margin-top: 8px;
}
.csv-map-select {
width: 358px;
margin-top: 17px;
}
.csv-modal-result-thin-blue {
font-size: 16px;
color: #1a467c;
margin-top: 35px;
text-align: center;
}
.csv-modal-data-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 26px;
width: 100%;
}
.csv-modal-data-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.csv-modal-data-title {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
color: #777c80;
}
.csv-modal-data-number {
font-size: 52px;
font-weight: bold;
margin-top: 8px;
}
.csv-map-result-file-name {
font-size: 18px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 35px;
}
.csv-loading-gif {
height: 100px;
width: 100px;
margin-top: 35px;
}
.csv-modal-small-loader {
height: 3rem;
width: 3rem;
margin-top: 15px;
}
/* customer CSV upload modal End */
/* Stories Component Start */
.stories-width {
width: 100%;
overflow: auto;
}
.stories-coulmn {
display: flex;
flex-direction: column;
}
.stories-wrapper {
padding-right: 60px;
}
.stories-h2 {
font-size: 22px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c
}
.stories-p {
font-size: 16px;
color: #777c80;
margin-top: 7px;
}
.top-content-stories {
/* min-height: 400px;
height: 40vh; */
display: flex;
max-width: 1250px;
justify-content: space-between;
}
.create-new-story-btn {
font-size: 14px;
width: 144px;
height: 32px;
padding: 4px 8px;
min-width: 0;
min-height: 0;
}
.left-top-stories {
display: flex;
flex-direction: column;
width: 40vw;
height: 100%;
}
.stories-vw {
max-width: 577.8px;
margin-top: 12px;
}
.stories-iframe {
max-width: 577.8px;
max-height: 325px;
}
.right-top-stories {
display: flex;
flex-direction: column;
margin-top: 25px;
}
.story-loading-img-cont {
display: flex;
justify-content: center;
}
.story-loading-img {
width: 6rem;
height: 6rem;
}
.stories-template-options {
display: flex;
margin-top: 23px;
}
.story-template-container {
display: flex;
flex-direction: column;
align-items: center;
width: 142px;
height: 206px;
background-color: transparent;
cursor: pointer;
margin-left: 14px;
transition: 0.3s;
}
.story-block-container {
width: 100%;
height: 170px;
padding: 20px 15px 30px 15px;
background-color: #f2f3f3;
border: solid 2px #f2f3f3;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
transition: 0.4s;
}
.story-block-container:hover {
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
}
.story-template-icon {
font-size: 40px;
color: #1a467c;
}
.story-template-header {
font-size: 14px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 22px;
text-align: center;
}
.story-template-desc{
font-size: 10px;
line-height: 1.4;
color: #777c80;
margin-top: 10px;
text-align: center;
}
.story-select {
height: 23px;
width: 104px;
font-size: 10px;
font-weight: bold;
color: #ffffff;
background-color: #4a90e2;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
.stories-option-input {
display: none;
}
.story-block-container:active {
border: solid 2px #4a90e2;
transition: none;
}
.stories-bottom-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 34px;
margin-top: 30px;
}
.stories-sort {
height: 24px;
padding: 0 16px;
width: 200px;
/* margin-right: 2vw; */
}
.all-stories-container {
/* display: flex;
flex-wrap: wrap; */
margin-bottom: 30px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-gap: 30px;
}
#noStories {
display: none;
font-size: 1.5rem;
color: #777c80;
margin-top: 1.25rem;
font-weight: 100;
}
.story-card {
width: 238px;
height: 282px;
border: solid 2px #4a90e2;
border-radius: 8px;
transition: 0.3s;
}
.story-create-card {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.story-sample-grey-box {
background-color: #f2f3f3;
width: 141px;
height: 154px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.story-create-icon {
color: #4a90e2;
font-size: 30px;
}
.story-card:hover {
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
opacity: 0.9;
}
.story-card-top {
height: 175px;
position: relative;
padding: 40px 30px 15px 30px;
}
.story-edit-btn {
font-size: 24px;
position: absolute;
top: 13px;
right: 28px;
cursor: pointer;
color: #4a90e2;
}
.story-card-title {
font-size: 18px;
font-family: Spartan !important;
font-weight: bold;
word-wrap: break-word;
line-height: 1.44;
color: #4a90e2;
}
.story-card-action {
font-size: 10px;
color: #777c80;
position: absolute;
top: 140px;
}
.story-card-bottom {
height: 103px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #f2f3f3;
padding: 20px 30px;
}
.story-open-rate {
font-size: 12px;
color: #4a90e2;
}
.story-open-rate-percent {
font-size: 32px;
font-family: Spartan !important;
font-weight: bold;
color: #4a90e2;
margin-top: 10px;
}
.story-copy-clipboard {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #4a90e2;
cursor: copy;
font-weight: bold;
}
/* story builder start*/
.story-builder-wrapper {
display: flex;
padding-bottom: 108px;
left: 0;
right: 0;
margin: auto;
overflow: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
/* height: 100vh; */
/* position: absolute; */
/* padding-left: 125px; */
}
.story-builder-wrapper::-webkit-scrollbar {
display: none;
}
.story-goal-container {
display: flex;
align-items: center;
margin-top: 40px;
}
.story-goal-des {
font-size: 16px;
color: #777c80;
line-height: 1.5;
margin-top: 7px;
}
.story-goal-des span {
color: #4a90e2;
cursor: pointer;
}
.story-h2 {
font-size: 20px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 10px;
}
.story-h3 {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 31px;
}
.story-input {
padding: 18px 40px;
border-radius: 28px;
border: solid 2px #777c80;
color: #777c80;
font-weight: bold;
width: 100%;
margin-top: 25px;
}
.story-input::placeholder {
color: #777c80 !important;
font-weight: bold;
}
.story-builder-radio {
flex-direction: column;
align-items: end;
margin-top: 0px;
width: 100%;
}
.story-builder-radio label{
width: 100%;
}
.story-builder-radio label {
margin-top: 13px;
margin-left: 0px;
}
.story-goal-other-wrapper {
display: flex;
align-items: center;
width: 100%;
}
.story-other-input {
display: none;
width: 360px;
height: 44px;
border-radius: 24px;
border: solid 2px #4a90e2;
color: #4a90e2;
padding: 10px 40px;
margin-left: 15px;
font-weight: bold;
}
.story-other-input::placeholder {
color: #4a90e2 !important;
font-weight: bold;
}
.story-btn-container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 60px;
}
.story-to-main {
width: 500px;
padding: 60px;
}
.story-modal-h1 {
font-size: 20px;
font-weight: bold;
font-family: Spartan !important;
line-height: 1.5;
color: #1a467c;
}
.story-modal-btn {
margin-top: 20px;
}
.story-button-container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 60px;
}
.story-h3-wrapper {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.story-ql-btn {
width: 184px;
height: 40px;
}
.story-p3-textarea {
height: 271px;
outline: none;
resize: none;
background-color: #f2f3f3;
line-height: 1.5;
}
.story-two-column {
display: flex;
}
.story-left-column {
width: 440px;
}
.story-p3-input {
margin-top: 16px;
border: solid 2px #4a90e2;
color: #4a90e2;
background-color: #ffffff !important;
}
.story-p3-input::placeholder {
color: #4a90e2 !important;
}
.story-right-column {
width: 440px;
margin-left: 48px;
}
.story-p4-header-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
.story-widget-preview-container {
display: flex;
flex-direction: column;
align-items: center;
}
.story-preview-wrapper {
display: flex;
margin-top: 8px;
width: 330px;
justify-content: space-between;
}
.story-preview-btn {
margin-right: 0;
margin: 0 4px;
}
.sto-prev-btn {
width: 155px !important;
min-width: 0;
height: 44px;
padding: 0;
}
#customerMapList_viewGroup {
margin-top: 60px;
}
.build-widget-container {
/* max-width: 1365px; */
display: flex;
margin-top: 10px;
width: 85vw;
justify-content: space-between;
}
.build-widget-column-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.build-widget-page-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-left: 60px;
margin-bottom: 20px;
}
.build-widget-page-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.build-widget-page-dot {
height: 1.5rem;
width: 1.5rem;
color: #9b9b9b;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
border: 1px solid #9b9b9b;
transition: border-color .3, color .3;
cursor: pointer;
opacity: 0.5;
}
.active-page-dot {
border-color: #1a467c;
color: #1a467c;
opacity: 1;
}
#addPageToSb {
color: #4a90e2;
border-color: #4a90e2;
opacity: 1;
}
.build-widget-page-dot:hover {
color: #7dbe3e;
border-color: #7dbe3e;
opacity: 1;
}
.build-widget-header {
font-size: .875rem;
font-weight: bold;
font-family: Spartan !important;
color: #ffffff;
}
#togglePageName {
width: 100%;
display: none;
}
.build-widget-page-name-container {
width: 100%;
display: flex;
align-items: center;
margin-top: .875rem;
justify-content: space-between;
}
.build-widget-page-name-title {
font-weight: bold;
font-size: 14px;
display: flex;
align-items: center;
}
.build-widget-page-name-title-sw {
width: 28%;
}
.build-widget-page-name-list {
margin-left: .5rem;
}
.build-widget-page-name-list-item {
display: none;
width: 10.25rem;
}
.bw-active-name {
display: block;
}
.build-widget-page-name-input {
width: 100%;
color: #777c80;
height: 1.5rem;
padding: 0 1.25rem;
border: none;
border-radius: .625rem;
}
.build-widget-err {
margin-top: 10px;
display: none;
}
.story-menu-modal {
height: 624px;
width: 486px;
}
.story-mu-h {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
margin-top: 64px;
color: #1a467c;
}
.story-mu-cont {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.story-mu-grey-bg {
width: 403px;
height: 427px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 16px;
background-color: #f4f4f4;
margin-top: 16px;
}
.story-mu-sub-h {
font-size: 12px;
color: #777c80;
margin-top: 18px;
}
.story-mu-item {
width: 356px;
height: 100px;
margin-top: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.story-mu-input {
width: 100%;
height: 44px;
color: #777c80;
font-size: 16px;
font-weight: bold;
border-radius: 24px;
border: solid 2px #777c80;
display: flex;
align-items: center;
padding-left: 40px;
}
.story-mu-input::placeholder {
color: #777c80 !important;
font-size: 16px;
font-weight: bold;
}
.story-mu-save {
margin-top: 25px;
}
.story-ph-container {
margin-top: 45px;
display: flex;
flex-direction: column;
align-items: center;
}
.story-ph-item {
display: flex;
flex-direction: column;
align-items: center;
}
.story-ph-icon {
font-size: 45px;
margin-top: 33px;
color: #1a467c;
}
.story-ph-text {
font-size: 18px;
line-height: 1.44;
color: #777c80;
text-align: center;
margin-top: 7px;
}
.wuwta-managed-sto-text {
margin-top: 3.75rem;
font-size: 1.25rem;
color: #777c80;
}
.build-widget-left {
max-width: 400px;
width: 100%;
}
.story-mini-text {
font-size: 12px;
font-family: Spartan !important;
color: #1a467c;
margin-top: 80px;
}
.left-column-story-h1 {
font-size: 24px;
font-weight: bold;
font-family: Spartan !important;
line-height: 1.5;
color: #1a467c;
}
.story-left-margin {
margin-top: 70px;
}
.storyName {
margin-top: 8px;
}
.left-story-steps {
display: flex;
align-items: center;
margin-top: 20px;
}
.stories-disclaimer {
/* position: fixed; */
/* bottom: 30px; */
}
@media screen and (max-height: 700px) {
.stories-disclaimer {
position: static;
}
}
.story-check-circle {
width: 21px;
height: 21px;
border-radius: 100%;
border: solid 2px #1a467c;
display: flex;
justify-content: center;
align-items: center;
}
.story-check-icon {
font-size: 13px;
color: #1a467c;
}
.story-check-text {
font-size: 22px;
font-family: Spartan !important;
color: #1a467c;
margin-left: 12px;
margin-top: 4px;
}
.story-left-warn-h {
font-size: 16px;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
}
.story-left-warn-p {
font-size: 16px;
color: #777c80;
line-height: 1.63;
margin-top: 16px;
}
.build-widget-mid {
max-width: 480px;
min-width: 480px;
}
.widget-box-column {
width: 100%;
min-height: 100vh;
border-radius: 25px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
padding: 0 40px 130px 40px;
margin-left: 60px;
position: relative;
}
.build-widget-st-mu {
position: absolute;
left: 1.125rem;
top: .75rem;
font-size: 1.125rem;
color: #4a90e2;
cursor: pointer;
}
.build-widget-st-rm {
position: absolute;
right: 1.125rem;
top: .75rem;
font-size: .75rem;
color: #ff0000;
cursor: pointer;
border: 1px solid #ff0000;
border-radius: 100%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
#rmPageSb {
display: none;
}
.widget-dropabble-header {
width: 250px;
height: 45px;
min-height: 45px;
background-color: #4a90e2;
display: flex;
justify-content: center;
align-items: center;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
.widget-item-container {
width: 400px;
display: flex;
flex-direction: column;
margin-top: 25px;
background-color: #f4f4f4;
border: dashed 1px #777c80;
border-radius: 16px;
padding: 15px 21px 28px 21px;
}
#buildWidgetPgContainer {
width: 100%;
height: 100%;
}
.page-content-container {
display: none;
width: 100%;
height: 100%;
}
.active-pg-builder {
display: block;
}
.widget-item-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.widget-item-h-container {
display: flex;
align-items: baseline;
}
.widget-item-icon {
font-size: 15px;
color: #777c80;
}
.story-image-upload-cont {
display: flex;
align-items: center;
gap: 10px;
color: #4a90e2;
}
.story-image-upload-btn {
font-size: 12px;
color: #4a90e2;
}
.widget-item-description {
font-size: 12px;
color: #777c80;
margin-top: 17px;
margin-bottom: 8px;
}
.widget-item-h {
font-size: 12px;
font-weight: bold;
font-family: Spartan !important;
color: #777c80;
margin-left: 8px;
}
.widget-x {
color: #4a90e2;
font-size: 25px;
}
.widget-x:hover {
color: #7dbe3e;
}
.widget-item-body {
display: flex;
flex-direction: column;
}
.widget-item-input {
background-color: #ffffff !important;
width: 356px;
height: 44px;
border: solid 1px #ffffff;
border-radius: 24px;
text-align: left;
padding: 12px 40px;
color: #777c80;
font-size: 16px;
margin-top: 7px;
}
.widget-item-input::placeholder {
color: #777c80 !important;
font-size: 16px;
}
.build-widget-right {
width: 330px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
height: 685px;
margin-left: 60px;
}
.widget-story-component-container {
width: 100%;
min-width: 330px;
height: 500px;
background-color: #4a90e2;
border-radius: 25px;
margin-top: 34px;
}
.widget-right-ph-container {
width: 100%;
min-width: 330px;
height: 500px;
margin-top: 34px;
}
.widget-story-component-header {
text-align: center;
margin-top: 20px;
}
.widget-components-wrapper {
height: 36.125rem;
/* height: 455px; */
border-radius: 25px;
background-color: #ffffff;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
padding: 25px;
margin-top: 15px;
}
.widget-components-wrapper-short {
height: 28.4375rem;
}
.widget-comp-container {
border: dashed 1px #777c80;
border-radius: 16px;
background-color: #f4f4f4;
color: #777c80;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 116px;
height: 116px;
cursor: pointer;
}
.widget-comp-i {
font-size: 36px;
margin-top: 14px;
}
.widget-comp-h1 {
font-size: 12px;
font-weight: bold;
font-family: Spartan !important;
margin-top: 15px;
}
.widget-comp-h2 {
font-size: 10px;
margin-top: 4px;
}
.story-msg-h-c {
display: flex;
justify-content: space-between;
align-items: baseline;
width: 100%;
padding: 0 40px;
margin-top: 32px;
}
.story-msg-img {
display: flex;
justify-content: center;
align-items: center;
}
.story-msg-img img {
max-width: 100%;
max-height: 18.75rem;
margin-top: .875rem;
}
.story-msg-txt {
font-size: .875rem;
color: #777c80;
margin-top: .375rem;
padding: 0 40px;
width: 400px;
}
#removeMmsMedia,
#deleteEmailTemplate {
display: none;
}
#mmsMediaParent {
width: 100%;
}
.story-msg-btn-container {
display: flex;
width: 100%;
justify-content: space-around;
margin-top: .875rem;
}
.story-msg-btn-container .solid-blue-btn,
.story-msg-btn-container .white-blue-btn
{
width: 11.875rem;
height: 2.5rem;
white-space: nowrap;
}
#emailTemplateUpload {
width: 100%;
}
.story-canvas-h3 {
font-size: 14px;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
}
.story-segment-calculator {
width: 100%;
display: flex;
justify-content: space-between;
margin: 10px 0;
font-weight: bold;
font-family: Spartan !important;
color: #1a467c;
padding: 0 40px;
}
.segment-limit-err {
display: none;
color: red;
/* font-weight: bold; */
font-family: Spartan !important;
width: 100%;
margin: 4px 0;
padding: 0 40px;
}
.story-segments-hidden {
display: none;
}
.story-wildcards {
font-size: 14px;
color: #4a90e2;
text-decoration: none;
cursor: pointer;
}
.story-wc-modal {
width: 486px;
padding: 30px 30px 60px 30px;
}
.story-wc-h1 {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 34px;
}
.story-wc-headers {
display: flex;
justify-content: space-between;
margin-top: 30px;
width: 360px;
}
.story-wc-h {
font-size: 10px;
font-family: Helvetica !important;
font-weight: bold;
color: #4a90e2;
}
.story-wc-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f4f4f4;
padding: 10px 10px 10px 26px;
width: 411px;
height: 47px;
border-radius: 8px;
position: relative;
margin-top: 8px;
}
.story-wc-list {
display: flex;
flex-direction: column;
}
.story-wc-text {
font-size: 12px;
color: #545454;
}
.story-wc-copy {
font-size: 13px;
color: #4a90e2;
font-weight: bold;
cursor: pointer;
margin-right: 8px;
}
.story-wc-copy i:active {
box-shadow: 0px 8px 24px rgb(16 22 26 / 20%);
color: #7dbe3e;
}
.story-copy-text {
border: none;
position: absolute;
left: 200px;
}
.story-copy-text:focus {
outline-width: 0;
outline: none;
color: #7dbe3e;
}
.widget-textarea {
height: 140px;
outline: none;
resize: none;
}
.story-leave-text {
text-align: center;
}
.story-leave-btn-cont {
width: 310px;
display: flex;
align-items: center;
justify-content: space-between;
}
.story-leave-btn {
min-width: 140px;
width: 140px !important;
font-weight: bold;
}
.fa-ellipsis-h:hover {
opacity: 0.5;
color: #7dbe3e;
}
.sto-pre-h {
margin-top: 0;
}
.stories-preview-modal {
width: 43.25rem;
height: 42.6875rem;
display: flex;
justify-content: center;
}
.stories-preview-modal-col {
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 3.75rem;
}
.stories-prev-modal {
height: 692px;
}
.sto-pre-h-cont {
margin-top: 3.125rem;
}
.stories-preview-content {
border-bottom-left-radius: 1.125rem;
border-bottom-right-radius: 1.125rem;
z-index: 1;
padding-top: .625rem;
padding-bottom: 1.25rem;
margin-top: 4.25rem;
width: 12.125rem;
height: 25.3125rem;
overflow: scroll;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.stories-preview-content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.preview-phone-loader-cont {
display: flex;
justify-content: center;
margin-top: .625rem;
}
.preview-phone-loader {
width: 5rem;
height: 5rem;
}
.stories-prev-err {
display: none;
margin-top: 2.875rem;
line-height: 0;
font-size: .75rem;
height: .75rem;
position: absolute;
}
.preview-phone {
position: absolute;
width: 14.5rem;
height: auto;
top: 7.5rem;
}
.lsSidePads {
padding: 0 33px !important;
}
.lsHeader {
color: #777c80;
font-size: 12px;
font-weight: bold;
margin-top: 20px;
}
.storybuilder-preview-iframe {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
overflow: scroll;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.storybuilder-preview-iframe::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
/* tablet style for build stories*/
@media screen and (max-width: 1230px) {
.build-widget-left {
max-width: 160px;
}
.widget-box-column {
margin-left: 15px;
}
.build-widget-right {
margin-left: 28px;
}
.widget-story-component-container, .widget-right-ph-container {
width: 195px;
min-width: 0;
height: 409px;
margin-top: 21px;
}
.sto-pre-h {
font-size: 14px;
}
.widget-components-wrapper {
height: 360px;
overflow: auto;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
padding: 0;
}
.widget-components-wrapper::-webkit-scrollbar {
display: none;
}
.widget-comp-container {
margin-top: 13px;
}
.sto-hide-tablet {
display: none;
}
.story-ph-items {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-top: 20px;
}
.story-ph-item {
width: 190px;
}
.story-preview-wrapper {
flex-direction: column;
align-items: center;
height: 93px;
width: 155px;
}
}
/* story builder end*/
/* Stories Component End */
/* Reports Component Start */
.reports-width {
width: 100%;
overflow: auto;
}
/* hide scroll bar */
.reports-width {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.reports-width::-webkit-scrollbar {
background: transparent; /* Chrome/Safari/Webkit */
width: 0px;
}
.reports-column {
display: flex;
flex-direction: column;
}
.reports-wrapper {
padding-right: 80px;
margin-bottom: 60px;
}
.reports-top-content {
height: 93px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.reports-top-header {
font-family: Spartan !important;
font-size: 18px;
font-weight: 500;
line-height: normal;
text-align: center;
color: #1a467c;
}
.toggle-top-nav {
position: relative;
width: fit-content;
height: 48px;
margin-top: 24px;
/* background-color: #4A5B7E; */
}
.toggle-top-nav-sm {
position: relative;
/* width: fit-content; */
height: 48px;
margin-bottom: 24px;
/* background-color: #4A5B7E; */
}
.blue-toggle-slider-sm {
display: none;
width: 98px;
height: 28px;
background-color: #4a90e2;
border-radius: 22px;
position: relative;
top: 4px;
left: 4px;
}
.toggle-label-text-cont-sm {
display: flex;
padding: 4px 3px;
margin-top: -36px;
height: 100%;
color: #4a90e2;
font-size: 10pt;
text-align: center;
align-items: center;
}
.toggle-label-text-sm {
display: inline-block;
width: 100px;
cursor: pointer;
z-index: 1;
font-size: 14px;
font-weight: bold;
line-height: normal;
padding: 12px;
transition: color .5s;
}
.blue-toggle-slider-sm.viewChatNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(0px);
}
.blue-toggle-slider-sm.viewCallNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(112px);
}
.blue-toggle-slider-sm.viewVoiceNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(224px);
}
.blue-toggle-slider-sm.viewCallNav2 {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(0px);
}
.blue-toggle-slider-sm.viewVoiceNav2 {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(112px);
}
.toggle-nav-button-cont {
background-color: #f4f4f4;
height: 100%;
position: relative;
/* left: 20px; */
/* top: 45px; */
border-radius: 22px;
}
.contacts-top-nav {
margin: 0;
/* height: 44px; */
z-index: 0;
margin-left: -63px;
}
.toggle-nav-spacer {
width: 1px;
height: 32px;
flex-grow: 0;
margin: 0 6px 0 6px;
z-index: 1;
}
/* to get blue slider to show, do a jquery.show() after adding specified class */
.blue-toggle-slider{
display: none;
width: 140px;
height: 40px;
background-color: #4a90e2;
border-radius: 22px;
position: relative;
top: 4px;
left: 4px;
}
/*Toggle css for contacts nav*/
.blue-toggle-slider.viewContactsDuplicatesNav2 {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(761px);
}
.blue-toggle-slider.viewContactsDuplicatesNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(609px);
}
.blue-toggle-slider.viewContactsGroupsNav2 {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(609px);
}
.blue-toggle-slider.viewContactsGroupsNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(457px);
}
.blue-toggle-slider.viewContactsTagsNav2 {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(457px);
}
.blue-toggle-slider.viewContactsTagsNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(305px);
}
.blue-toggle-slider.viewContactsStaffNav2 {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(305px);
}
.blue-toggle-slider.viewContactsStaffNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(152px);
}
.blue-toggle-slider.viewContactsReferrersNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(152px);
}
.blue-toggle-slider.viewContactsActiveNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(1px);
}
/*Toggle css for reports nav*/
.blue-toggle-slider.viewGroupNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(609px);
}
.blue-toggle-slider.viewStaffNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(457px);
}
.blue-toggle-slider.viewLocationsNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(305px);
}
.blue-toggle-slider.viewVideosNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(152px);
}
.blue-toggle-slider.viewMessagesNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(1px);
}
/* Toggle css for settings nav */
.blue-toggle-slider.viewSettingsCreditsNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(644px);
}
.blue-toggle-slider.viewSettingsBlacklistNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(515px);
}
.blue-toggle-slider.viewSettingsResponsesNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(386px);
}
.blue-toggle-slider.viewSettingsMediaNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(257px);
}
.blue-toggle-slider.viewSettingsSpecialistsNav, .blue-toggle-slider.viewSettingsPhoneNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(128px);
}
.blue-toggle-slider.viewSettingsPropertiesNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(0px);
}
/* Toggle nav header for profile */
.blue-toggle-slider.viewprofilePhoneNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(457px);
}
.blue-toggle-slider.viewprofileNotifiNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(305px);
}
.blue-toggle-slider.viewProfilePasswordNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(152px);
}
.blue-toggle-slider.viewProfileContactNav {
-webkit-transition: -webkit-transform 0.2s linear;
-webkit-transform: translateX(1px);
}
.toggle-label-text-cont {
display: flex;
align-items: center;
padding: 4px 3px;
margin-top: -48px;
height: 100%;
color: #4a90e2;
font-size: 10pt;
text-align: center;
}
.toggle-label-text {
display: inline-block;
width: 140px;
cursor: pointer;
z-index: 1;
font-size: 14px;
font-weight: bold;
line-height: normal;
padding: 12px;
transition: color .5s;
}
.toggle-label-text-active {
color: #ffffff !important;
}
.reports-bottom-content {
/* margin-left: 77px; */
}
.reports-bottom-header {
height: 20px;
font-family: Spartan !important;
/* margin: 42px 0 0 77px; */
margin: 42px 0 0 0;
font-size: 18px;
font-weight: bold;
line-height: normal;
color: #1a467c;
display: flex;
justify-content: space-between;
}
.reports-message-history-header {
margin: 25px 0 7px 2%;
}
.reports-message-history-header i {
font-size: 16px;
}
.reports-message-history-header div {
display: inline-block;
font-size: 10px;
font-weight: 500;
line-height: normal;
color: #4a90e2;
padding: 0 2%;
text-transform: uppercase;
}
.reports-messages-large-col {
width: 33%;
}
.reports-messages-message-col {
position: relative;
padding: 0 2% 0 44px !important;
}
.email-viewed-icon {
font-size: 16px;
color: #4a90e2;
}
.reports-messages-med-col {
width: 23%;
}
.reports-messages-date-col {
width: 17%;
}
.reports-messages-sm-col {
width: 15%;
}
.reports-messages-icons-col {
position: absolute;
left: -25px;
display: flex;
width: 62px;
justify-content: flex-end;
gap: 2px;
}
#reportsHistoryMessage i.fa-minus-circle {
color: #ff3b30;
font-size: 16px;
}
#reportsHistoryMessage i.fa-plus-circle, #reportsHistoryMessage i.fa-comment {
color: #7dbe3e;
font-size: 16px;
}
.reports-history-details {
position: relative;
height: 52px;
}
.view-communication-metrics {
width: 5%;
font-size: 24px;
color: #4a90e2;
}
.view-communication-metrics:hover {
color: #7dbe3e;
}
.reports-history-details .form-list-item {
font-size: 16px !important;
color: #545454 !important;
vertical-align: unset;
}
.eng-cust-contact {
text-decoration: none;
color: #545454;
}
.eng-cust-name {
color: black;
}
.eng-cust-contact:hover , .eng-cust-contact:hover > * {
color: #7dbe3e !important;
}
/* Reports Message Engagement START */
.msg-hist-filt-text {
display: flex;
align-items: flex-end;
margin: 24px 0 0 77px;
}
.message-hist-no-res {
display: none;
color: #9b9b9b;
text-align: center;
font-size: 18px;
margin-top: 20px;
}
#messageReportBack, #groupSendReportBack {
margin-top: 20px;
}
.report-message-comm-type {
margin-top: 48px;
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: left;
text-transform: uppercase;
color: #777c80;
}
.report-message-comm-type span {
margin-left: 18px;
font-weight: normal;
color: #9b9b9b;
text-transform: none;
}
.report-message-comm-info-cont {
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap;
}
.reports-message-comm-info {
margin-left: 36px;
font-size: 14px;
/* font-weight: bold; */
line-height: normal;
white-space: nowrap;
color: #777c80;
}
.reports-message-comm-info div {
max-width: 25ch;
overflow: hidden;
text-overflow: ellipsis;
}
.reports-message-comm-info p {
font-size: 16px;
line-height: normal;
text-align: left;
color: #545454;
margin-top: 15px;
display: inline-block;
}
.reports-message-comm-name {
color: #4a90e2 !important;
font-weight: bold;
cursor: pointer;
}
.report-message-comm-status {
margin-top: 21px;
font-family: Spartan !important;
font-size: 58px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
text-transform: uppercase;
display: flex;
transition: font-size .1s;
}
.report-message-comm-status i {
margin-right: 15px;
font-size: 52px;
transition: font-size .1s;
}
.report-email-viewed {
margin-left: 77px;
font-family: Spartan;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #9b9b9b;
transition: margin-left .1s;
height: 24px;
}
.report-message-engagement-cont {
position: relative;
margin-top: 11px;
padding-top: 50px;
height: 930px;
border-radius: 24px;
background-color: #f4f4f4;
}
.report-message-engagement-cont h3 {
font-family: Spartan !important;
font-size: 24px;
font-weight: bold;
line-height: 1.46;
text-align: center;
color: #1a467c;
}
.report-message-engagement-cont h4 {
font-family: Roboto !important;
font-size: 14px;
line-height: 2.5;
text-align: center;
color: #545454;
}
.report-message-engagement-appt-head-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 3.125rem;
}
.report-message-engagement-appt-head-sides {
width: 12.5rem;
}
.report-message-engagement-appt-head-cont {
height: 6.25rem;
border: solid .125rem #e3e3e3;
padding: .625rem;
border-radius: .875rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.report-message-engagement-appt-head-h {
font-family: Spartan !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .75rem;
padding-top: .0625rem;
color: #1a467c;
font-weight: 600;
}
.report-message-engagement-appt-head-date {
font-family: Spartan !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .75rem;
padding-top: .125rem;
margin-top: .25rem;
color: #545454;
font-weight: 600;
}
.report-message-engagement-appt-head-time {
font-family: Spartan !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .75rem;
padding-top: .125rem;
margin-top: .25rem;
color: #545454;
font-weight: 600;
}
.report-message-engagement-appt-head-status {
font-family: Spartan !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .75rem;
padding-top: .0625rem;
margin-top: .25rem;
color: #7dbe3e;
font-weight: 600;
}
.message-engagement-metrics-cont {
display: flex;
justify-content: space-between;
margin-top: 25px;
border-bottom: 2px solid #e3e3e3;
}
.message-engagement-metric {
width: 20%;
height: 107px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.engagement-metric-value {
font-family: Spartan !important;
font-size: 44px;
font-weight: bold;
line-height: normal;
text-align: center;
color: #545454;
}
.engagement-metric-title {
font-size: 16px;
font-weight: 500;
line-height: 0.88;
text-align: center;
color: #9b9b9b;
white-space: nowrap;
}
.message-engagement-metric .engagement-metric-value {
font-size: 36px;
}
.message-engagement-metric .engagement-metric-title {
font-size: 14px;
}
.engagement-metric-title i {
color: #4a90e2;
margin-left: 9px;
position: relative;
}
.engagement-metric-title i:hover, .gs-metric-title i:hover {
color: #7dbe3e;
cursor: pointer;
}
.engagement-metric-title .engagement-tooltip {
right: -170px;
}
#engagementEmailViews .engagement-tooltip, #engagementTimesOpened .engagement-tooltip {
right: -220px;
}
#engagementScore .engagement-tooltip {
right: -60px;
}
.leftTt .engagement-tooltip {
left: -30px;
}
.rightTt .engagement-tooltip {
}
.engagement-tooltip .info-modal-row {
display: flex;
align-items: center;
margin-top: 10px;
}
.message-engagement-spacer {
width: 2px;
height: 107px;
background-color: #e3e3e3;
}
.message-engagement-flow-header {
display: flex;
justify-content: center;
margin: 40px 30px 0 30px;
}
.session-count-container {
display: flex;
justify-content: flex-start;
width: 33%;
}
.engagement-session-select {
background: url(/images/angle-down-blue.png) no-repeat 94% transparent !important;
background-size: 10px !important;
width: 180px;
height: 24px;
border: 2px solid #4a90e2;
border-radius: 24px;
padding: 0 16px 0 16px;
}
.engagement-session {
display: flex;
align-items: center;
margin-left: 20px;
font-size: 12px;
color: #545454;
}
.session-count-bubble {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 9px;
}
.flow-sequence-container {
font-family: Spartan !important;
font-size: 18px;
font-weight: 600;
/* line-height: 1.94; */
text-align: center;
color: #1a467c;
width: 33%;
}
.engagement-tags {
width: 33%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
line-height: normal;
text-align: right;
color: #545454;
}
.page-flow-container {
margin-top: 26px;
display: flex;
height: 552px;
justify-content: space-evenly;
overflow-x: scroll;
overflow-y: hidden;
padding: 0 30px;
gap: 30px;
}
#flowCont1::-webkit-scrollbar {
height: 6px;
border-radius: 8px;
}
#flowCont1::-webkit-scrollbar-track {
/* box-shadow: inset 0 0 6px rgba(74, 144, 226, 0.1); */
border-radius: 8px;
}
#flowCont1::-webkit-scrollbar-thumb {
background-color: #4a90e2;
border-radius: 8px;
}
.flow-cont-hidden {
display: none;
}
.page-flow-tab-container {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 35px;
display: flex;
justify-content: space-between;
margin: 0 auto;
}
.page-flow-tab {
width: 11.5px;
height: 11px;
flex-grow: 0;
border: solid 0.6px #4a90e2;
border-radius: 50%;
cursor: pointer;
}
.page-flow-tab-clicked {
background-color: #4a90e2;
}
.engagement-phone-container {
position: relative;
min-width: 240px;
max-width: 240px;
z-index: 1;
}
.small-flow-cont {
justify-content: center;
}
.small-flow-cont .engagement-phone-container:last-child {
margin-right: 0px;
}
.small-flow-cont .engagement-phone-container {
margin-right: 40px;
}
.engagement-phone-title {
height: 38px;
font-family: Spartan !important;
font-size: 14px;
font-weight: bold;
line-height: 1.71;
text-align: center;
color: #777c80;
max-width: 15ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 10px;
margin: 0 auto;
}
.engagement-phone {
width: 100%;
position: absolute;
z-index: -1;
}
.engagement-phone-email-container {
width: 13.9375rem;
height: 25.625rem;
margin-top: 2.75rem;
padding: 0 .875rem;
padding-left: .9375rem;
padding-right: .875rem;
border-bottom-left-radius: 2.0625rem;
border-bottom-right-radius: 2.0625rem;
z-index: 1;
}
.engagement-phone-email-container iframe {
width: 180%;
height: 173%;
-webkit-transform: scale(0.6);
transform: scale(.6);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
border-bottom-left-radius: 2.0625rem;
border-bottom-right-radius: 2.0625rem;
}
.engagement-phone-text-container {
width: 100%;
height: 410px;
margin-top: 44px;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
}
.engagement-phone-text {
position: relative;
width: 11.875rem;
flex-grow: 0;
margin: 0 auto;
padding: .8125rem .75rem .5rem .75rem;
border-radius: 1rem;
background-color: #86d2f7;
word-wrap: break-word;
font-size: .75rem;
line-height: 1.35;
color: #2d2d2d;
pointer-events: none;
white-space: pre-line;
}
.storybuilder-pt {
width: 11.25rem;
}
#engEscHtml img {
width: 100% !important;
}
#engEscHtml div {
width: unset !important;
line-height: 1 !important;
}
.engagement-phone-text p a {
width: 120px !important;
height: 20px !important;
font-size: 8px !important;
line-height: 14px !important;
padding: 3px 0;
margin-top: 8px;
pointer-events: none;
}
.engagement-phone-text-date {
margin: 5px 35px 0 20px;
font-size: 8px;
line-height: normal;
text-align: right;
color: #545454;
}
.engagement-text-tail {
position: absolute;
right: -5px;
bottom: 0px;
z-index: -1;
}
.engagement-phone-page-view {
margin-top: 44px;
height: 410px;
padding: 0 12px;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
}
.engagement-phone-page-view::-webkit-scrollbar, .engagement-phone-text-container::-webkit-scrollbar {
display: none;
}
.engagement-phone-page-nav {
display: flex;
justify-content: space-around;
}
.engagement-phone-page-nav img {
max-height: 15px;
max-width: 90px;
}
.engagement-phone-page-nav img {
color: #4a90e2;
}
.engagement-phone-page-nav .hamburger {
margin-left: 8px;
}
.engagement-progress-container {
margin-top: 10px;
display: flex;
justify-content: center;
}
.engagement-progress-dot {
width: 5px;
height: 5px;
margin: 0 3px;
border-radius: 100%;
border: solid 1px #4a90e2;
}
.engagement-dot-active {
background-color: #4a90e2;
}
.engagement-disabled {
pointer-events: none !important;
}
.cust-video-eng-cont {
padding: 0 2px;
}
.engagement-video-text {
width: 83%;
margin: 0 auto;
font-size: 12px;
margin-top: 12px;
}
.engagement-tooltip {
position: absolute;
width: 330px;
height: 216px;
padding: 34px 28px 11px 30px;
border-radius: 20px;
box-shadow: 0 4px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
border: solid 2px #7dbe3e;
background-color: #fff;
z-index: 1;
top: -206px;
right: -100px;
text-align: left;
}
.engagement-tooltip-head {
font-family: Spartan !important;
font-size: 18px;
font-weight: bold;
line-height: 2;
color: #1a467c;
margin-left: 2px;
}
.eng-vid-report-link {
text-decoration: none;
color: #4a90e2;
}
.engagement-tooltip-head i {
font-size: 24px;
line-height: 0.58;
letter-spacing: normal;
margin-left: 0px;
color: #1a467c;
}
.engagement-tooltip h3 {
margin-top: 31px;
font-family: Spartan !important;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
color: #545454;
text-align: left;
}
.engagement-tooltip p {
margin-top: 5px;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
color: #545454;
white-space: normal;
}
#pNameInfo .engagement-tooltip {
top: 10px;
right: -330px;
}
.eng-review-wrapper {
background-color: #fff !important;
margin-top: 20px !important;
}
.eng-review-wrapper h2 {
font-size: 16px !important;
text-align: center !important;
color: #1b689b !important;
font-weight: bold !important;
font-family: 'Roboto', sans-serif !important;
padding: 0;
}
.eng-review-wrapper p {
font-size: 12px !important;
}
.eng-review-wrapper .social-links div {
display: block;
margin: 0 auto;
margin-top: 10px;
font-size: 8px;
font-weight: bold;
padding: 3px 0px;
width: 120px;
border-radius: 30px;
text-decoration: none;
border: 2px solid #1a467c;
line-height: 14px;
background-color: #1a467c;
cursor: pointer;
}
.engagement-footer-btns {
position: relative;
margin-top: 20px;
}
.engagement-next-btn {
position: absolute;
right: 2px;
width: 85px;
color: #4a90e2;
background-color: transparent;
border-radius: 42.5px 0 0 42.5px;
border: 2px solid #4a90e2;
border-right: solid 0.1px transparent;
padding: 6px;
}
.engagement-next-btn .btn-text {
font-size: 10px;
}
.engagement-next-btn .btn-page-info {
display: flex;
align-items: center;
font-size: 10px;
white-space: nowrap;
}
.engagement-back-btn {
position: absolute;
left: 2px;
width: 85px;
color: #4a90e2;
background-color: transparent;
border-radius: 0 42.5px 42.5px 0;
border: 2px solid #4a90e2;
border-left: solid 0.1px transparent;
padding: 6px;
}
.engagement-back-btn .btn-text {
font-size: 10px;
}
.engagement-back-btn .btn-page-info {
display: flex;
align-items: center;
font-size: 10px;
white-space: nowrap;
}
.engagement-session-title {
font-size: 16px;
color: #1a467c;
font-family: Spartan !important;
font-weight: bold;
line-height: normal;
margin-left: 20px;
margin-top: 40px;
}
.engagement-session-title span {
position: relative;
color: #4a90e2;
line-height: normal;
font-weight: normal;
margin-left: 20px;
}
.engagement-session-title .session-details-text:hover {
color: #7dbe3e;
cursor: pointer;
z-index: 10;
}
.session-details-text .engagement-tooltip {
right: -170px;
}
.engagement-session-timeline {
height: 136px;
background-color: #f4f4f4;
border-radius: 24px;
margin-top: 10px;
display: flex;
position: relative;
/* width: 1020px;
margin-bottom: 20px; */
}
.session-timeline-divider {
width: 5%;
height: 100%;
margin-left: 50px;
border-left: 1px dashed rgba(155, 155, 155, 0.3);
position: relative;
}
.session-step-time {
position: relative;
border-left: 1px dashed rgba(155, 155, 155, 0.3);
height: 100%;
}
.session-step-container {
position: relative;
display: flex;
flex-direction: row-reverse;
}
.session-timeline-time {
position: absolute;
bottom: -18px;
left: -18px;
font-size: 12px;
line-height: normal;
color: #545454;
}
.session-step-circle-solid {
position: absolute;
width: 26px;
height: 26px;
margin: 54px 0px 0px 15px;
border: solid 1px #fff;
border-radius: 50%;
font-family: 'Spartan' !important;
text-align: center;
color: #fff;
font-weight: 800;
line-height: 1.14;
padding-top: 5px;
display: inline-block;
}
.session-step-circle {
position: absolute;
width: 26px;
height: 26px;
margin-top: 54px;
border: solid 1px #fff;
border-radius: 50%;
font-family: 'Spartan' !important;
text-align: center;
color: #fff;
font-weight: 800;
font-size: 14px;
line-height: 1.14;
padding-top: 7px;
display: inline-block;
z-index: 2;
cursor: pointer;
}
.session-vid-cards-cont {
margin-left: 13px;
height: 56px;
display: flex;
position: absolute;
overflow: hidden;
top: 38px;
border-radius: 15px;
z-index: 1;
background-color: #fff !important;
background-size: contain !important;
}
.session-timeline-vid-cards {
width: 51px !important;
position: unset !important;
}
.session-step-circle:hover {
background-color: #7dbe3e !important;
z-index: 10;
}
.step-tooltip-size {
height: 165px !important;
padding: 26px 28px 18px 30px !important;
top: -150px !important;
/* width: auto; */
display: flex;
flex-direction: column;
justify-content: space-between;
right: -280px;
}
.step-tooltip-shifted {
right: -30px;
}
.step-tooltip-size p {
font-size: 16px;
font-weight: normal;
color: #545454;
}
.step-tooltip-circle {
top: 20px;
right: 28px;
margin-top: 0;
pointer-events: none;
}
.step-details-date {
margin-top: 0px !important;
}
.step-details-date span {
font-weight: normal;
}
.session-flow-num-circle {
width: 30px;
height: 30px;
border: solid 1px #fff;
border-radius: 50%;
position: absolute;
color: white;
padding-top: 7px;
/* box-shadow: 0 4px 24px 0 rgb(16 22 26 / 20%), 0 2px 4px 0 rgb(16 22 26 / 20%); */
font-family: 'Spartan' !important;
font-size: 16px;
font-weight: 800;
text-align: center;
line-height: 1;
z-index: 1;
}
.video-flow-num {
top: 26px;
}
.button-flow-num {
top: -13px;
left: 40%;
}
.next-flow-num {
top: -13px;
left: 45%;
}
.back-flow-num {
top: -13px;
right: 45%;
}
.session-details-container {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
margin: 0 50px;
}
.session-details-date {
font-family: Spartan !important;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
color: #545454;
white-space: nowrap;
margin-top: 18px;
}
.session-details-left {
font-size: 16px;
font-weight: bold;
line-height: normal;
color: #545454;
margin-top: 5px;
}
.session-details-date span, .session-details-left span {
color: inherit;
margin-left: unset;
font-family: inherit !important;
}
.session-details-device {
text-align: right;
margin-top: 15px;
color: #1a467c;
font-size: 14px;
}
.session-details-device i {
font-size: 16px;
font-weight: 300;
margin-right: 7px;
}
.aconf-staff-edit {
display: flex;
justify-content: space-between;
}
.relative {
position: relative
}
@media screen and (max-width: 1300px) {
/* .engagement-phone-container:first-child {
margin-left: 20px;
} */
/* .engagement-phone-container {
margin-right: 20px;
} */
.report-message-comm-status {
font-size: 50px;
}
.report-message-comm-status i {
font-size: 44px;
}
.reports-message-comm-info {
margin-left: 25px;
}
.report-email-viewed {
margin-left: 69px;
}
}
@media screen and (max-width: 1200px) {
.report-message-comm-status {
font-size: 42px;
}
.report-message-comm-status i {
font-size: 36px;
}
.reports-message-comm-info {
margin-left: 15px;
}
.report-email-viewed {
margin-left: 61px;
}
}
/* Reports Message Engagement END */
/* Reports Video Engagement START */
.reports-vid-err-container {
display: none;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
gap: 20px;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
}
.reports-vid-err-text {
font-size: 26px;
font-family: Spartan !important;
font-weight: 500;
line-height: 1.46;
color: #545454;
}
.vid-reports-fail {
text-align: center;
font-size: 34px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 80px;
}
.ssBar-container, .staff-mesg-eng-cont, .msghist-search-container, .group-eng-search-cont {
display: flex;
align-items: center;
width: fit-content;
}
.sortBar-container {
border: solid 2px #4a90e2;
width: 180px;
height: 24px;
border-radius: 24px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 16px;
}
.sSort-label {
font-size: 12px;
font-weight: bold;
color: #4a90e2;
margin-right: 5px;
}
#vidSort {
font-size: 12px;
}
.ssBar-container .search {
margin-left: 9px;
}
.ssSearch-input {
background-color: #fff !important;
border: solid 2px #4a90e2 !important;
font-size: 15px !important;
color: #4a90e2 !important;
border-radius: 30px !important;
height: 44px;
width: 235px !important;
}
.ssSearch-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #4a90e2 !important;
opacity: 1; /* Firefox */
}
.ssSearch-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #4a90e2 !important;
}
.ssSearch-input::-ms-input-placeholder { /* Microsoft Edge */
color: #4a90e2 !important;
}
.reports-video-flex-container {
margin-top: 30px;
margin-bottom: 30px;
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
column-gap: 30px;
}
.reports-video-flex-container::after {
content: "";
flex: auto;
}
@media screen and (max-width: 1154px) {
.reports-video-wrapper {
display: flex;
justify-content: center;
}
.reports-video-flex-container {
justify-content: space-around;
width: 80%;
}
}
.reports-video-err-cont {
display: none;
color: red;
}
.reports-video-loading, .message-reports-load {
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
width: 100%;
}
.reports-video-unit {
margin-bottom: 30px;
cursor: pointer;
}
.reports-video-filler {
width: 296.3px;
height: 0;
}
.reports-vid-top {
width: 296.3px;
height: 166px;
}
.vid-eng-thumb {
height: 95%;
width: 100%;
border-radius: 15px;
object-fit: cover;
}
.reports-vid-top .video-wrapper {
width: 100%;
}
.reports-vid-top .video-wrapper iframe {
border-radius: 15px;
}
.reports-vid-bottom {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
.reports-vid-name {
font-size: 10px;
font-weight: bold;
color: #4a90e2;
}
.reports-vid-unit-info {
display: flex;
}
.reports-vid-info-text {
font-size: 8px;
font-weight: bold;
color: #1a467c;
margin-left: 5px;
text-align: center;
}
.videoEng-sort-flex {
display: flex;
justify-content: flex-end;
}
.videoEng-grey-box {
width: 100%;
background-color: #f4f4f4;
border-radius: 24px;
height: 760px;
margin-top: 22px;
display: flex;
flex-direction: column;
align-items: center;
}
.videoEng-grey-box-top {
padding: 45px 70px 0 70px;
height: 113px;
}
.videoEng-title {
font-family: Spartan !important;
font-size: 24px;
font-weight: bold;
line-height: 1.42;
color: #1a467c;
}
.videoEng-grey-box-mid {
height: 107px;
width: 100%;
border-bottom: solid 2px #e3e3e3;
display: flex;
margin-top: 20px;
}
.videoEng-mid-boxes {
height: 100%;
width: 100%;
border-right: solid 2px #e3e3e3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.videoEng-mid-box-num {
font-size: 40px;
font-family: Spartan !important;
font-weight: bold;
color: #545454;
}
.videoEng-mid-box-text {
width: 100%;
font-size: 16px;
font-weight: 500;
line-height: 0.88;
text-align: center;
color: #9b9b9b;
margin-top: 8px;
position: relative;
}
.videoEng-mid-box-info {
position: absolute;
top: -2px;
right: 10%;
cursor: pointer;
}
.videoEng-mid-box-info i {
font-size: 17px;
color: #4a90e2;
}
.vidEng-tooltip-container {
width: 310px;
min-height: 216px;
padding: 30px;
border-radius: 20px;
border: solid 2px #7dbe3e;
box-shadow: 0 4px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
position: absolute;
top: -216px;
z-index: 1;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.vidEng-tooltip-container-hoverleft {
left: -310px;
}
.vidEng-tooltip-header {
display: flex;
align-items: center;
color: #1a467c;
font-size: 18px;
font-family: Spartan !important;
font-weight: bold;
}
.vidEng-tooltip-header i {
font-size: 22.5px;
color: #1a467c;
margin-right: 8px;
}
.vidEng-tooltip-h2 {
font-size: 12px;
font-family: Spartan !important;
font-weight: bold;
color: #545454;
margin-top: 25px;
text-align: left;
}
.vidEng-tooltip-p {
font-size: 16px;
font-weight: normal;
line-height: 1.5;
color: #545454;
margin-top: 8px;
text-align: left;
}
.vidEng-tooltip-sess-h2-date {
font-size: 12px;
font-family: 'Spartan' !important;
color: #545454;
font-weight: bold;
margin-top: 20px;
}
.vidEng-tooltip-sess-h2-time {
font-size: 12px;
font-family: 'Spartan' !important;
color: #545454;
font-weight: normal;
margin-top: 12px;
}
.vidEng-tooltip-sess-name {
font-size: 16px;
font-weight: bold;
margin-top: 8px;
}
.vidEng-tooltip-sess-name a {
text-decoration: none;
color: #4a90e2;
}
.vidEng-tooltip-sess-msg {
font-size: 16px;
color: #545454;
margin-top: 8px;
}
.vidEng-tooltip-sess-total-time {
font-size: 16px;
color: #545454;
margin-top: 8px;
}
.vidEng-tooltip-sess-total-time span{
font-weight: bold;
}
.vidEng-tooltip-sess-msg a {
text-decoration: none;
color: #4a90e2;
font-weight: bold;
}
.vidEng-tooltip-sess-device {
display: flex;
width: 100%;
justify-content: flex-end;
margin-top: 12px;
}
.vidEng-tooltip-sess-device div{
margin-left: 6px;
}
.videoEng-mid-boxes-last {
border-right: none;
}
.videoEng-grey-box-bottom {
width: 100%;
height: 520px;
display: flex;
justify-content: center;
align-items: center;
}
.vidEng-container {
width: 70%;
max-width: 950px;
}
.videoEng-timelines {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
padding-bottom: 100px;
}
.videoEng-timelines-list {
width: 100%;
}
.load-more-sessh img{
width: 3rem;
height: 3rem;
margin-top: 50px;
}
.videoEng-timelines-title {
color: #1a467c;
font-family: Spartan !important;
font-size: 18px;
font-weight: 600;
margin-top: 30px;
}
.videoEng-timelines-plays {
color: #545454;
font-size: 14px;
margin-top: 11px;
}
.vidEng-list-item {
margin-top: 50px;
}
.vidEng-list-header {
display: flex;
}
.vidEng-list-header-date {
font-size: 16px;
font-weight: bold;
color: #545454;
}
.vidEng-list-header-time {
font-size: 16px;
color: #545454;
margin-left: 6px;
}
.vidEng-list-header-details {
font-size: 16px;
color: #4a90e2;
cursor: pointer;
margin-left: 15px;
position: relative;
}
.vidEng-session-timeline {
height: 136px;
background-color: #f4f4f4;
border-radius: 24px;
margin-top: 10px;
display: flex;
position: relative;
padding: 0 50px 0 50px;
}
.vidEng-session-timeblock {
border-left: 1px dashed rgba(155, 155, 155, 0.3);
width: 100%;
position: relative;
}
.vidEng-session-timemark {
font-size: 12px;
color: #545454;
width: 50px;
display: flex;
justify-content: center;
align-items: center;
bottom: -20px;
left: -27px;
position: absolute;
}
.vidEng-session-end-timemark {
left: auto;
right: -25px;
}
.vidEng-session-last-block {
border-right: 1px dashed rgba(155, 155, 155, 0.3);
}
.vidEng-session-playblock-container {
width: calc(100% - 100px);
position: absolute;
}
.vidEng-session-playblock {
height: 57px;
border-radius: 5px;
position: absolute;
top: 40px;
background-repeat: repeat-x;
background-size: auto 100%;
}
/* Reports Video Engagement END */
/* Reports Locations Engagement START */
.loc-eng-filters-cont {
display: flex;
}
.loc-eng-filters-cont .sortBar-container:first-child {
margin-right: 8px;
}
#locEngFilter {
text-overflow: ellipsis;
}
.loc-grid-cont {
display: grid;
grid-template-columns: repeat(auto-fill, 289px);
justify-content: space-between;
margin-top: 50px;
row-gap: 50px;
column-gap: 25px;
}
.loc-grid-card {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 284px;
height: 288px;
/* margin: 50px 25px 48px 52px; */
padding: 26px 0 28px;
border-radius: 8px;
/* background-color: red; */
box-shadow: 0 8px 24px 0 rgba(16, 22, 26, 0.2), 0 2px 4px 0 rgba(16, 22, 26, 0.2);
margin-left: 8px;
text-align: center;
}
.loc-grid-card:hover {
border: 2px solid #4a90e2;
}
.loc-grid-head {
flex-grow: 0;
font-family: Spartan !important;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #1a467c;
}
.loc-grid-subhead-count, .vid-plays-stats-center {
/* margin-top: 21px; */
/* width: 83px; */
/* height: 31px; */
/* flex-grow: 0; */
/* margin: 22px 29.4px 14px 16.6px; */
font-family: Spartan !important;
font-size: 28px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #1a467c;
}
.loc-grid-subhead-count {
position: relative;
}
.msg-sent-change {
position: absolute;
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
line-height: 1.6;
top: 8px;
left: 30px;
}
.optin-pie-cont, .open-rate-chart-cont, .msg-sent-per-chart-cont {
position: relative;
height: 150px;
width: 150px;
margin: 0 auto;
}
.optin-pie-left, .openrate-dough-left, .delivery-type-polar-left{
left: -50px;
color: #1a467c;
}
.optin-pie-right, .openrate-dough-right, .delivery-type-polar-right {
right: -50px;
color: #54b5ff;
}
.optin-pie-text, .openrate-dough-text, .delivery-type-polar-text {
position: absolute;
top: 50%;
flex-grow: 0;
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
}
.msg-sent-per-percent-change, .vid-min-watched-percent-change, .vid-watched-per-percent-change {
width: 200px;
margin: 0 auto;
text-align: left;
font-family: 'Spartan' !important;
font-size: 10px;
font-weight: bold;
line-height: 1.6;
}
.positive-change {
color: #7dbe3e;
}
.negative-change {
color: #ff3333;
}
.no-change {
color: #777c80;
}
.msg-sent-per-chart-cont, .vid-min-chart-cont, .vid-watched-chart-cont {
position: relative;
height: 100px;
width: 200px;
margin: 0 auto;
}
.msg-sent-per-top-text, .vid-watched-top-text {
position: absolute;
top: 0;
right: 0;
left: 0;
font-family: 'Spartan' !important;
font-size: 28px;
font-weight: bold;
line-height: normal;
color: #1a467c;
}
.msg-sent-per-bottom-text, .vid-watched-bottom-text {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
font-family: 'Spartan' !important;
font-size: 16px;
font-weight: bold;
line-height: normal;
color: #54b5ff;
}
.vid-min-watched-last {
font-family: Spartan !important;
font-size: 48px;
font-weight: bold;
line-height: normal;
text-align: center;
color: #1a467c;
}
.vid-min-watched-previous {
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
line-height: normal;
text-align: center;
color: #54b5ff;
}
.vid-plays-chart-stats {
display: flex;
justify-content: space-between;
align-items: center;
width: 200px;
margin: 0 auto;
}
.vid-plays-stats-left {
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
line-height: 1.6;
width: 10px;
}
.vid-plays-stats-right {
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
line-height: normal;
color: #54b5ff;
width: 10px;
}
.loc-grid-bottom-dates {
display: flex;
justify-content: space-evenly;
position: relative;
}
.loc-grid-bottom-dates-left {
color: #1a467c;
}
.loc-grid-bottom-dates-right {
color: #54b5ff;
}
.location-grid-tooltip {
position: absolute;
right: 20px;
bottom: -10px;
color: #4a90e2;
cursor: pointer;
}
.location-grid-tooltip:hover {
color: #7dbe3e;
}
.location-grid-tooltip .engagement-tooltip {
right: -90px !important;
}
.loc-grid-bottom-bar {
width: 16px;
height: 1px;
flex-grow: 0;
margin: 0 auto;
border: solid 6px #1a467c;
border-radius: 10px;
}
.loc-grid-bottom-bar-light {
width: 16px;
height: 1px;
flex-grow: 0;
margin: 0 auto;
border: solid 6px #54b5ff;
border-radius: 10px;
}
.loc-grid-bottom-text {
flex-grow: 0;
margin-top: 10px;
font-family: Spartan !important;
font-size: 6px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
}
.loc-grid-bottom-range {
flex-grow: 0;
margin-top: 1px;
font-size: 8px;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
}
/* Reports Locations Engagement END */
/* Reports Staff Engagement START */
.shifted-eng-header {
margin-left: 0;
}
.staff-messages-container {
display: flex;
margin-top: 11px;
}
.staff-eng-cont-left {
width: 34%;
}
.staff-eng-message-cards {
display: flex;
}
.eng-sent-card {
width: 152px;
height: 109px;
flex-grow: 0;
margin: 39px 8px 0px 0px;
padding: 20px 4px 19px;
border-radius: 16px;
background-color: #f4f4f4;
text-align: center;
}
.eng-sent-bar{
width: 28px;
height: 1px;
margin: 0 auto;
border: solid 4px #1a467c;
border-radius: 25px;
}
.eng-sent-you-bar {
border-color: #54b5ff;
}
.eng-sent-count {
flex-grow: 0;
margin-top: 12px;
font-family: Spartan !important;
font-size: 28px;
font-weight: bold;
line-height: normal;
}
.eng-sent-type {
flex-grow: 0;
margin-top: 3px;
font-family: Spartan !important;
font-size: 14px;
font-weight: 600;
}
.staff-eng-cont-right {
width: 66%;
}
.staff-messages-head2 {
height: 26px;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.63;
letter-spacing: normal;
text-align: left;
color: #1a467c;
}
.staff-eng-lead-title {
margin-top: 21px;
font-family: Spartan !important;
font-size: 18px;
font-weight: 600;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #1a467c;
}
.staff-eng-lead-error, .staff-eng-chart-error {
display: none;
color: #9b9b9b;
text-align: center;
font-size: 18px;
}
.reports-staff-leaderboard-header, .reports-group-header {
display: flex;
margin-bottom: 7px;
}
.reports-staff-leaderboard-row {
display: flex;
align-items: center;
height: 56px;
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 4px;
cursor: pointer;
transition: background-color .3s;
}
.reports-staff-leaderboard-row:hover, .report-group-row:hover, .reports-gs-metrics-row:hover {
background-color: #c5dbf5;
}
.view-staff-metrics {
height: 100%;
font-size: 24px;
color: #4a90e2;
text-align: center;
}
.view-staff-metrics:hover, .view-group-send-metrics:hover {
color: #7dbe3e;
cursor: pointer;
}
.view-staff-metrics i {
padding: 6px;
}
.staff-leaderboard-name-col {
width: 16%;
padding-left: 38px;
text-align: left !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #545454;
display: flex;
align-items: center;
position: relative;
height: 100%;
}
.staff-leaderboard-pic {
border: 1px solid #1a467c;
border-radius: 100%;
height: 34px;
width: 34px;
text-align: center;
font-size: 14px;
padding-top: 8px;
font-weight: 400;
position: absolute;
}
.staff-leaderboard-name {
overflow: hidden;
text-overflow: ellipsis;
margin-left: 44px;
}
.highlightCurrStaffReport div {
color: #54b5ff;
font-weight: bold;
}
.highlightCurrStaffReport .staff-leaderboard-pic {
border: 1px solid #54b5ff;
}
.leaderboard-field-count {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-family: Roboto;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #545454;
}
.staff-leaderboard-sort-first {
width: 16%;
padding-left: 38px !important;
text-align: left !important;
}
.staff-leaderboard-types-cont {
display: flex;
justify-content: space-between;
align-items: center;
width: 84%;
}
#reportsStaffLeaderboard {
margin-top: 21px;
}
.leaderboard-sort-field, .report-group-sort-field, .reports-gs-metrics-sort-field {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-family: Roboto;
font-size: 10px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
text-transform: uppercase;
padding: 0 5px;
}
#staffActivityContainer {
padding-right: 0;
}
#staffActivityContainer a {
text-decoration: none;
}
.staff-activitylist-header {
display: flex;
margin: 28px 0 0 28px;
color: #4a90e2;
font-size: 10px;
font-weight: 500;
line-height: normal;
text-align: left;
}
.staff-actlist-lg-col {
width: 24%;
}
.staff-actlist-med-col {
width: 19%;
}
.staff-actlist-sm-col {
width: 14%;
}
.staff-activitylist-cont {
display: flex;
margin-top: 5px;
height: 56px;
align-items: center;
background-color: #f2f3f3;
padding: 18px 0px 19px 28px;
border-radius: 8px;
font-size: 16px;
color: #545454;
}
.staff-activitylist-msg-link .staff-activitylist-cont {
background-color: #f2f3f3;
transition: background-color .3s;
}
.staff-activitylist-msg-link .staff-activitylist-cont:hover {
background-color: #c5dbf5;
}
.staff-activitylist-cont div, .staff-activitylist-header div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px 0 10px;
}
.staff-act-back {
position: absolute;
bottom: 16px;
font-family: Roboto;
font-size: 11px;
font-weight: bold;
line-height: normal;
color: #1a467c;
cursor: pointer;
}
.staff-actlist-err {
color: #9b9b9b;
text-align: center;
font-size: 18px;
margin-top: 14px;
}
/* Reports Staff Engagement END */
/* Reports Group Engagement START */
#reportsGroupHistory {
display: none;
}
.group-hist-no-res {
display: none;
color: #9b9b9b;
text-align: center;
font-size: 18px;
margin-top: 20px;
}
.report-group-lg {
width: 25%;
}
.report-group-sm {
width: 10%;
}
.report-group-last {
width: 5%;
}
.view-group-send-metrics {
color: #4a90e2 !important;
}
.view-group-send-metrics i {
width: 5%;
height: 100%;
font-size: 24px;
text-align: center;
}
.reports-group-header div, .reports-group-metrics-row-header div {
text-align: left;
}
.reports-group-header {
margin: 35px 0 7px 38px;
}
.report-group-row {
display: flex;
align-items: center;
height: 56px;
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 4px;
cursor: pointer;
transition: background-color .3s;
padding-left: 38px;
line-height: 1.5;
}
.report-group-row div {
padding: 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #545454;
}
.gs-report-top-headers {
margin-top: 48px;
}
.gs-report-top-headers span {
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #777c80;
}
.gs-report-top-headers-info {
margin-top: 14px;
}
.gs-report-top-headers-info .gs-report-top-headers-left div {
font-family: Spartan !important;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
text-align: left;
color: #4a90e2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-report-top-headers-info .gs-report-top-headers-right span {
color: #545454;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gs-report-top-headers, .gs-report-top-headers-info {
display: flex;
justify-content: space-between;
}
.gs-report-top-headers-left {
display: flex;
justify-content: space-between;
width: 50%;
}
.gs-report-top-headers-left a {
text-decoration: none;
}
.gs-report-top-headers-left span, .gs-report-top-headers-info .gs-report-top-headers-left div {
width: 50%;
}
.gs-report-top-headers-right {
display: flex;
justify-content: flex-end;
width: 40%;
}
.gs-report-top-sm {
width: 30%;
}
.gs-report-top-med {
width: 50%;
}
.gs-report-metrics {
margin-top: 26px;
background-color: #f4f4f4;
border-radius: 24px;
padding-top: 10px;
}
.gs-report-export-cont {
flex: 1 1 0px;
text-align: right;
}
.gs-report-metrics-title {
display: flex;
align-items: center;
padding-top: 25px;
font-family: Spartan !important;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: normal;
text-align: center;
color: #1a467c;
position: relative;
margin: 0 24px;
}
.gs-report-survey-title {
font-family: Spartan !important;
font-size: 20px;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: normal;
color: #1a467c;
margin: 4px 24px 0px;
}
.gs-survey-metrics-cont {
padding-bottom: 30px;
}
.gs-survey-metric-nd {
text-align: center;
font-family: 'Spartan' !important;
font-weight: bold;
}
.gs-metrics-export {
font-size: 12px;
color: #4a90e2;
cursor: pointer;
/* position: absolute;
bottom: 5px; */
/* flex: 1 1 0px;
text-align: right; */
margin-left: 16px;
}
.gs-metrics-export:hover {
color: #7dbe3e;
}
.gs-progress-metric-i {
position: absolute;
left: -26px;
color: #4a90e2;
font-size: 16px;
top: -1px;
}
.gs-progress-bar-cont {
margin: 0 auto;
width: fit-content;
position: relative;
}
.gs-progress-bar-background {
background-color: #e3e3e3;
width: 250px;
border-radius: 16px;
height: 14px;
}
#groupProgressAppend {
flex: 1 1 0px;
text-align: left;
}
.gs-progress-bar-color {
background-color: #4a90e2;
border-radius: 16px;
height: 14px;
}
.gs-progress-percent-num {
position: absolute;
top: 0;
left: 116px;
font-weight: bold;
font-size: 12px;
}
.gs-terminate-send {
font-family: Spartan !important;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: normal;
text-align: center;
width: fit-content;
margin: 0 auto;
font-size: 12px;
color: #4a90e2;
cursor: pointer;
position: absolute;
right: -80px;
top: 0;
}
.gs-report-metrics-cont {
display: flex;
justify-content: space-between;
margin-top: 25px;
border-bottom: 2px solid #e3e3e3;
}
.gs-report-metrics-cont-bottom {
display: flex;
justify-content: space-between;
padding-bottom: 56px;
}
.gs-engagement-metric {
width: 25%;
height: 107px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.gs-metric-title {
font-size: 16px;
font-weight: 500;
line-height: 0.88;
text-align: center;
color: #9b9b9b;
position: relative;
}
.gs-metric-title-i {
color: #4a90e2;
position: absolute;
right: 30px;
}
.gs-metric-title #groupSize .engagement-tooltip, .gs-metric-title #groupEmails .engagement-tooltip {
right: -175px;
}
.gs-recipients-title {
flex-grow: 0;
margin: 48px 0 0 42px;
font-family: Spartan !important;
font-size: 18px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #1a467c;
}
.reports-group-metrics-row-header {
margin: 35px 0 7px;
display: flex;
}
.reports-gs-metrics-xs {
width: 8%;
text-align: center;
}
.reports-gs-metrics-xs .fa-minus-circle {
color: #ff3b30;
}
.reports-gs-metrics-xs .fa-plus-circle {
color: #7dbe3e;
}
.reports-gs-metrics-sm {
width: 12%;
}
.reports-gs-metrics-med {
width: 30%;
}
.reports-gs-metrics-lg {
width: 42%;
}
.reports-gs-metrics-row {
display: flex;
line-height: 1.2;
align-items: center;
height: 56px;
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 4px;
cursor: pointer;
transition: background-color .3s;
}
.reports-gs-metrics-row div {
padding: 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #545454;
}
.view-gs-recipient-activity {
color: #4a90e2 !important;
}
.view-gs-recipient-activity i {
width: 5%;
height: 100%;
font-size: 24px;
text-align: center;
}
.view-gs-recipient-activity:hover {
color: #7dbe3e !important;
}
/* Reports Group Engagement END */
/* Reports Component End */
/* New DashBoard Component START */
.dash-search-result-container {
display: none;
position: absolute;
top: 54px;
width: 235px;
max-height: 700px;
overflow: auto;
border-radius: 12px;
box-shadow: 0px 8px 24px rgb(16 22 26 / 20%);
z-index: 1;
background-color: #ffffff;
padding: 20px;
}
.dash-search-no-res {
font-size: 15px;
font-family: Spartan !important;
color: #777c80;
}
.dash-search-cust-loader {
display: none;
width: 3rem;
height: 3rem;
}
.dash-search-cust-list {
width: 100%;
height: 100%;
}
.dash-cust-container {
width: 100%;
border-radius: 10px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 8px;
padding: 10px 20px;
}
.dash-cust-name {
font-size: 15px;
font-weight: bold;
color: #4a90e2;
text-decoration: none;
cursor: pointer;
}
.dash-cust-commaddress {
font-size: 12px;
color: #5a5a5a;
margin-top: 5px;
}
.cust-inactive {
opacity: .5;
}
.dash-cust-err {
font-size: 12px;
color: red;
margin-top: 5px;
}
.dashboard-col {
width: 100%;
overflow: auto;
}
/* hide scroll bar */
.dashboard-col {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.dashboard-col::-webkit-scrollbar {
background: transparent; /* Chrome/Safari/Webkit */
width: 0px;
}
.dashboard-column {
padding-right: 55px;
}
.dashboard-subheader {
display: flex;
flex-direction: column;
gap: 20px;
}
.dash-business-message {
font-size: 20px;
font-family: Spartan !important;
font-weight: 500;
color: #1a467c;
}
.dash-reports-row {
min-height: 391px;
display: flex;
width: 100%;
}
.dash-alert-container {
width: 100%;
height: 100%;
margin-top: 60px;
padding: 0 50px;
}
.dash-alert-loading {
margin-left: 100px;
margin-top: 60px;
height: 3rem;
width: 3rem;
}
.dash-stats-n-ql-container {
width: 100%;
height: 100%;
display: flex;
padding: 45px 0 100px 0;
}
.dash-stats-loader-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.dash-stats-loader-container img{
height: 3rem;
}
.dash-reports-h {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
}
.dash-quick-stats {
width: 100%;
border-right: solid 2px #e1e1e1;
}
.dash-qs-column {
width: 100%;
height: 100%;
padding-left: 50%;
padding-top: 10px;
}
.dash-quick-links {
width: 100%;
}
.dash-ql-column {
width: 100%;
height: 100%;
padding-left: 50px;
padding-top: 10px;
}
.dash-ql-sub-h {
font-size: 14px;
color: #777c80;
margin-top: 10px;
}
.dash-right-now {
margin-top: 40px;
}
.dash-qs-link {
text-decoration: none;
}
.dash-text-b {
font-weight: bold;
}
.dash-qs-num {
font-size: 40px;
font-family: Spartan !important;
font-weight: bold;
color: #4a90e2;
margin-top: 23px;
}
.dash-quick-stats-p {
font-size: 12px;
font-family: Spartan !important;
color: #4a90e2;
margin-top: 6px;
}
.dash-ql-a {
font-size: 16px;
font-weight: bold;
color: #4a90e2;
text-decoration: none;
cursor: pointer;
display: block;
margin-top: 20px;
}
.dash-engage-container {
width: 100%;
background-color: #f4f4f4;
border-radius: 24px;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 58px;
margin-top: 50px;
}
#fbConfirmText {
max-width: 500px !important;
display: flex;
flex-direction: column;
align-items: center;
}
#fbErrText {
display: none;
margin-bottom: 10px;
}
/* DASH ENGAGEMENT SNAPSHOT START */
#dashAppsCont .loader {
z-index: 900;
}
.dash-app-date {
font-family: Spartan !important;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
}
.dash-header-container {
display: flex;
justify-content: space-between;
}
.dash-app-header {
font-family: Spartan !important;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #1a467c;
margin-top: 15px;
}
.dash-app-header span {
font-size: 10px;
color: #777c80;
margin-left: 10px;
}
.dash-app-subheader {
font-family: Spartan !important;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #1a467c;
margin-top: 10px;
position: relative;
width: fit-content;
}
.dash-app-date-text {
font-size: 18px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
}
.dash-appointments-container {
width: 100%;
background-color: #f4f4f4;
border-radius: 24px;
display: flex;
flex-direction: column;
/* align-items: center; */
padding: 50px 58px;
margin-top: 50px;
position: relative;
}
.dash-appointments-container .loader {
border-radius: 24px;
}
#dashCalendarButton {
background-color: #fff;
margin: 0 11px;
}
.dash-apps-calpicker-container {
display: flex;
align-items: center;
position: relative;
}
.dash-apps-cards-container {
display: flex;
width: 100%;
gap: 13px;
justify-content: center;
margin-top: 50px;
}
.dash-app-num-apps img {
height: 16px;
width: 16px;
}
.dash-apps-cards-loader-container {
height: 164px;
display: flex;
align-items: center;
}
.dash-app-card {
width: 340px;
background-color: #fff;
height: 184px;
border-radius: 16px;
padding: 32px 34px 14px;
position: relative;
}
.dash-app-card-num {
font-family: Spartan !important;
font-size: 42px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #1a467c;
}
.dash-app-card-greeting {
font-family: Spartan !important;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: normal;
/* white-space: nowrap; */
}
.dash-app-card-desc {
font-family: Spartan !important;
font-size: 12px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.67;
letter-spacing: normal;
text-align: left;
color: #1a467c;
}
.dash-app-card-viewlist {
font-family: Spartan !important;
font-size: 12px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.67;
letter-spacing: normal;
float: right;
color: #4a90e2;
/* margin-top: 4px; */
}
.feedback-rply-textarea {
width: 100%;
height: 15.625rem;
border: solid 1px #9b9b9b !important;
font-size: 1rem;
padding: 16px 40px;
border-radius: 25px;
border: unset;
resize: none;
margin-bottom: 16px;
}
.feedback-attach-wrap {
text-align: right;
position: absolute;
left: 16px;
top: 16px;
}
.dash-app-info-tt-size {
font-size: 18px;
color: #4a90e2;
position: relative;
margin-left: 4px;
}
#dashIntegrationDSN .engagement-tooltip {
top: 10px;
left: 10px;
}
.dash-apps-chart-container {
display: flex;
max-width: 1046px;
width: 100%;
margin: 57px auto 0;
flex-direction: column;
}
.dash-app-chart-header-container {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 24px;
}
.dash-app-chart-header-subcontainer {
position: relative;
}
.dash-app-chart-header-text {
font-family: Spartan !important;
font-size: 18px;
font-weight: bold;
line-height: 1.56;
}
.dash-app-chart-sorts-container {
display: flex;
align-items: stretch;
column-gap: 10px;
}
.dash-app-chart-legend {
display: flex;
column-gap: 24px;
margin-top: 15px;
}
.dash-app-legend-item {
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
line-height: normal;
display: flex;
align-items: center;
white-space: nowrap;
}
.dash-app-legend-circle {
width: 16px;
height: 16px;
margin: 0 8px 0 0;
background-color: #7dbe3e;
border-radius: 50%;
}
.dash-app-cal-cont {
display: none;
position: absolute;
top: 42px;
right: 16px;
box-shadow: 0px 8px 24px rgb(16 22 26 / 20%);
border-radius: 16px;
z-index: 2;
}
#dashCalendarButton .calendar-display {
text-decoration: none;
color: #1a467c;
padding-top: 3px;
margin-left: 6px;
pointer-events: none;
font-family: Spartan !important;
font-size: 12px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
}
#dashCalendarButton ol.week {
font-size: 8px;
font-weight: bold;
color: #9b9b9b;
}
#dashCalendarButton ol.days li {
width: 24px !important;
height: 24px !important;
margin: 5px 9.4px;
font-size: 10px;
font-weight: bold;
font-family: Spartan !important;
line-height: 25px !important;
color: #545454;
}
#dashCalendarButton i.dot {
bottom: -1px;
}
#dashCalendarButton .calendar-arrow{
margin-right: 17px !important;
width: 32px !important;
}
.exc-can-appts {
margin-bottom: 16px;
color: #4a90e2;
font-size: 12px;
display: flex;
align-items: center;
gap: 2px;
}
.show-conf-label, .show-optins-label {
font-size: 10px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
white-space: nowrap;
color: #4a90e2;
/* min-width: 100px; */
}
.dash-apps-chart {
position: relative;
height: 253px;
display: flex;
align-items: flex-end;
/* justify-content: space-between; */
justify-content: space-around;
margin-top: 56px;
column-gap: 7px;
}
.dash-app-date-nodata {
font-size: 12px;
margin-left: 16px;
}
.dash-apps-chart-no-data {
align-items: center;
}
.dash-apps-chart-no-data-cont-head {
font-family: Spartan !important;
font-size: 20px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
}
.dash-apps-chart-no-data-cont-subhead {
font-family: Spartan !important;
font-size: 12px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.67;
letter-spacing: normal;
text-align: center;
}
.dash-appt-pagination-container {
display: flex;
justify-content: center;
align-items: center;
column-gap: 8px;
margin-top: 20px;
}
.dash-appt-pag-num {
font-family: Spartan !important;
font-size: 8px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
border-radius: 4px;
display: flex;
padding-top: 2px;
color: #4a90e2;
width: 18px;
height: 18px;
justify-content: center;
align-items: center;
}
.dash-appt-prevnext {
font-family: Spartan !important;
font-size: 8px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #4a90e2;
margin-top: 2px;
white-space: nowrap;
}
.dash-appt-selected-pag {
background-color: #4a90e2;
color: #fff;
}
.dash-apps-axes-x-cont {
margin-top: 10px;
}
.dash-app-axes-x-line-cont {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 10px;
}
.dash-app-axes-line {
width: 100%;
height: 1px;
background-color: #9b9b9b;
}
.dash-app-axes-time {
font-family: Spartan !important;
font-size: 8px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #545454;
padding-top: 2px;
white-space: nowrap;
}
.dash-app-axes-x-label {
margin-top: 12px;
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #777c80;
}
.dash-app-eng-axes {
position: absolute;
transform: rotate(-90deg);
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
color: #777c80;
left: -76px;
bottom: 50%;
}
.dash-app-appt-column-container {
height: 100%;
position: relative;
display: flex;
align-items: flex-end;
}
.dash-app-appt-column {
width: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
position: relative;
display: flex;
justify-content: center;
}
.dash-app-appt-column:hover {
opacity: .5;
}
.eng-snap-unmapped:hover {
opacity: 1;
}
/* TODO JASON: maybe need */
/* .dash-app-appt-column:hover, .isPastAppt {
opacity: .5;
}
.isPastAppt:hover {
opacity: 1;
} */
.dash-appt-eng-modal {
width: 600px;
height: 700px;
padding: 54px 33px;
}
.dash-appt-eng-modal h1, .dash-chart-filters-modal h1 {
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
color: #1a467c;
}
.dash-appt-eng-modal h3 {
margin-top: 5px;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: center;
color: #777c80;
}
.dash-eng-patients-container {
width: 100%;
overflow: scroll;
}
.dash-eng-patients-cont-header {
display: flex;
width: 100%;
margin-top: 32px;
}
.dash-eng-patient-head-item {
width: 50%;
text-transform: uppercase;
font-size: 10px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #4a90e2;
padding: 0 8px;
}
#dashEngConfirmSort {
width: 40%;
}
.dash-eng-patient-row {
height: 56px;
background-color: #f2f3f3;
margin-top: 4px;
border-radius: 8px;
display: flex;
align-items: center;
}
.dash-eng-patient-row div {
padding: 0 8px;
}
.dash-eng-patient-row-score {
width: 15%;
}
.dash-eng-patient-row-name {
width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: left;
color: #545454;
}
.dash-eng-patient-row-score span {
/* border-radius: 22px; */
border: solid 1px #7dbe3e;
background-color: #fff;
display: flex;
justify-content: center;
align-items: flex-end;
width: 36px;
height: 36px;
margin: 0 auto;
padding: 8px 4px 8px 4px !important;
border-radius: 25px;
font-size: 14px;
font-weight: bold;
font-family: Spartan !important;
}
.dash-eng-patient-row-conf {
width: 20%;
font-size: 30px;
color: #7dbe3e;
}
.dash-eng-patient-row-chat {
width: 10%;
font-size: 18px;
color: #4a90e2;
}
.dash-eng-patient-row-prof {
width: 10%;
font-size: 18px;
color: #4a90e2;
}
.dash-eng-patient-row a {
text-decoration: none;
color: #4a90e2;
}
.dash-appt-column-score {
position: absolute;
top: -16px;
font-family: Spartan !important;
font-size: 8px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #545454;
}
.dash-appt-column-conf-symbol {
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
margin-top: 6px;
color: #f4f4f4;
}
.dash-app-conf-check-container {
display: flex;
align-items: center;
column-gap: 8px;
}
.dash-app-select-cont {
display: flex;
align-items: baseline;
font-size: 10px;
color: #4a90e2;
border: 1px solid;
font-weight: bold;
border-radius: 16px;
padding: 7px 20.8px 7px 16.5px;
column-gap: 4px;
width: 164px;
position: relative;
}
.dash-app-customSelectItems {
display: none;
position: absolute;
top: 100%;
width: 164px;
left: -1px;
background-color: white;
font-size: 16px;
max-height: 164px;
padding: 7px 10.8px 7px 6.5px;
overflow: auto;
border-right: 1px solid #4a90e2;
border-bottom: 1px solid #4a90e2;
border-left: 1px solid #4a90e2;
border-radius: 0 0 16px 16px;
z-index: 1;
}
.dash-main-loc-select-cont {
border: 2px solid;
margin-right: 1.25rem;
width: 180px;
}
.dash-main-location-cust-select-items {
left: -2px;
border-right: 2px solid #4a90e2;
border-bottom: 2px solid #4a90e2;
border-left: 2px solid #4a90e2;
width: 180px;
}
.dash-appt-dropdown {
position: absolute;
right: 6%;
top: 25%;
font-size: 12px;
color: #4a90e2;
}
.dash-app-customSelectItems div {
font-size: 10px;
margin-bottom: 8px;
padding: 4px 10px;
border-radius: 16px;
}
.dash-app-customSelectItems div:hover {
background-color: rgba(218, 218, 218, 0.23);
}
.dash-app-customSelectOpen {
border-radius: 16px 16px 0 0;
background-color: white;
border-bottom: none;
}
.selectedCustomItemDisabled {
display: none;
}
.dash-app-select {
padding-right: 20px;
width: fit-content;
font-size: 10px;
}
.dash-appt-cust-tooltip {
width: 400px;
/* height: 257px; */
height: fit-content;
padding: 22px 22px 15px;
}
.dash-appt-cust-tooltip:hover {
opacity: 1 !important;
}
.dash-appt-cust-tooltip-score {
height: 67px;
min-width: 67px;
font-family: Spartan !important;
font-size: 32px;
font-weight: 800;
font-stretch: normal;
font-style: normal;
line-height: 0.94;
border-radius: 16px;
letter-spacing: normal;
text-align: center;
padding-top: 22px;
color: #fff;
}
.dash-appt-cust-tooltip-header-cont {
display: flex;
column-gap: 16px;
align-items: center;
}
.dash-appt-cust-tooltip-confcheck {
position: absolute;
right: 22px;
font-size: 30px;
color: #7dbe3e !important;
}
.dash-appt-cust-tooltip-apptype {
font-weight: bold;
font-size: 12px;
margin-top: 2px;
}
.dash-appt-cust-tooltip-score-text {
font-family: Spartan !important;
font-size: 16px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.88;
letter-spacing: normal;
}
.dash-appt-cust-tooltip-name {
font-family: Spartan !important;
font-size: 22px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.36;
letter-spacing: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-appt-cust-tooltip-title {
margin-top: 21px;
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #777c80;
}
.dash-appt-cust-tooltip-score-desc {
font-family: Spartan !important;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: normal;
text-align: left;
color: #1a467c;
margin-top: 8px;
}
.dash-appt-cust-tooltip-score-desc img {
height: 36px;
}
.dash-appt-cust-tooltip-score-action {
margin-top: 5px;
font-family: Spartan !important;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: normal;
color: #777c80;
}
.dash-appt-cust-tooltip-foot {
margin-top: 16px;
font-family: Spartan !important;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.57;
letter-spacing: normal;
text-align: right;
color: #7dbe3e;
}
.leftTt .dash-appt-cust-tooltip {
left: 0px;
}
.rightTt .dash-appt-cust-tooltip {
right: 0px;
}
.dash-chart-filters-modal {
width: 350px;
height: 360px;
border-radius: 22px;
padding: 46px 0;
}
.dash-chart-filters-modal-container .dash-app-chart-sorts-container {
display: flex !important;
align-items: center;
flex-direction: column;
row-gap: 20px;
margin-top: 43px;
}
#dashAppLocSelect, #dashAppSpecSelect {
margin-right: 20px;
}
.dash-chart-filters-modal-container #dashAppLocSelect, .dash-chart-filters-modal-container #dashAppSpecSelect {
display: flex !important;
margin: 20px auto 0;
}
.dash-app-custom-select-text-cont {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
#exportDateFrom, #exportDateTo {
margin-left: 10px;
}
.dash-export-quick-dates {
margin-bottom: 16px;
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
.dash-export-dates-modal-container {
display: flex;
flex-direction: column;
align-items: flex-end;
margin: 16px 0;
gap: 8px;
}
.appt-export-range-picker {
width: 100%;
text-align: center;
}
/* DASH ENGAGEMENT SNAPSHOT END */
.vc-tz-select-styles {
width: 200px;
height: 32px;
align-items: center;
border: 2px solid;
font-size: 14px;
position: absolute;
top: 0;
}
.vc-tz-select-styles .dash-app-custom-select-text-cont {
max-width: 100%;
}
.vc-tz-select-styles .dash-appt-dropdown {
right: 5%;
top: 28%;
}
.vc-tz-customSelectItems {
width: 200px;
left: -2px;
border-right: 2px solid #4a90e2;
border-bottom: 2px solid #4a90e2;
border-left: 2px solid #4a90e2;
}
.vc-tz-customSelectItems div {
font-size: 14px;
}
/* FEATURE TOOLTIP START */
.feature-tooltip-container {
width: 306px;
height: 364px;
border-radius: 22px;
border: solid 3px #1a467c;
background-color: #1a467c;
position: absolute;
/* left: calc(100% + 40px);
top: calc(0px - 46px); */
padding: 36px 30px 25px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 1;
}
.appt-feature-tt1 {
left: calc(100% + 40px);
top: -64px;
}
.appt-feature-tt2 {
left: calc(100% + 40px);
top: 20px;
}
.appt-feature-tt3 {
right: calc(100% + 40px);
top: 20px;
}
.appt-feature-tt4 {
bottom: 120px;
}
.appt-feature-tt5 {
right: calc(100% + 40px);
bottom: -64px;
}
.appt-feature-tt6 {
right: calc(100% + 40px);
top: -48px;
}
#closeFeatureTooltip {
top: 20px;
right: 30px;
}
.feature-tooltip-container h1 {
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
color: #fff;
}
.feature-tooltip-container p {
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
color: #fff;
margin-top: 16px;
}
.feature-tooltip-arrow {
position: absolute;
font-size: 50px;
color: #1a467c;
}
.feature-tt-top-left {
rotate: -90deg;
left: -40px;
top: 50px;
}
.feature-tt-bottom-left {
rotate: -90deg;
left: -40px;
bottom: 50px;
}
.feature-tt-top-right {
rotate: 90deg;
right: -40px;
top: 50px;
}
.feature-tt-bottom-right {
rotate: 90deg;
right: -40px;
bottom: 50px;
}
.feature-tooltip-page-container {
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.feature-tooltip-current-page {
font-size: 10px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 2;
letter-spacing: normal;
}
.feature-tooltip-next-button {
width: 90px;
height: 24px;
border-radius: 24px;
background-color: #4a90e2;
font-size: 12px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
transition: background-color .3s;
}
.feature-tooltip-next-button:hover {
background-color: #7dbe3e;
}
/* FEATURE TOOLTIP END */
.dash-feedback-header {
margin-top: 37px;
font-family: Spartan !important;
font-size: 10px;
font-weight: bold;
/* font-stretch: normal; */
/* font-style: normal; */
line-height: normal;
text-align: center;
/* letter-spacing: normal; */
color: #1a467c;
}
.dash-feedback-subhead {
margin-top: 6px;
font-family: Spartan !important;
font-size: 10px;
font-weight: 500;
/* font-stretch: normal; */
/* font-style: normal; */
/* line-height: normal; */
/* letter-spacing: normal; */
color: #777c80;
text-align: center;
}
.dash-feedback-faces {
color: #4a90e2;
font-size: 32px;
display: flex;
justify-content: center;
column-gap: 26px;
margin-top: 20px;
}
.enggoal-header-container {
width: 100%;
display: flex;
align-items: center;
position: relative;
}
.enggoal-title {
font-size: 24px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
display: flex;
justify-content: center;
width: 100%;
}
.enggoal-sub-title {
font-size: 16px;
color: #545454;
line-height: 1.5;
margin-top: 12px;
}
.enggoal-refresh {
position: absolute;
right: 0;
color: #4a90e2;
font-size: 12px;
display: flex;
width: 60px;
justify-content: space-between;
cursor: pointer;
}
.enggoal-cards-container {
width: 100%;
height: 283px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.enggoal-cards-container img {
width: 3rem;
height: 3rem;
}
.enggoal-cards-flex {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
}
.enggoal-card-border {
height: 100%;
width: 238px;
border: solid 1px #1a467c;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
}
.enggoal-card-header {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 30px;
}
.enggoal-card-percent {
font-size: 84px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 30px;
}
.enggoal-card-percent span {
font-size: 26px;
vertical-align: text-top;
}
.enggoal-card-grade {
font-size: 18px;
font-family: Spartan !important;
font-weight: bold;
margin-top: 10px;
}
.enggoal-card-goal {
font-size: 12px;
font-weight: bold;
color: #777c80;
margin-top: 24px;
}
.enggoal-card-help {
display: none;
font-size: 10px;
color: #4a90e2;
margin-top: 12px;
cursor: pointer;
}
.enggoal-card-i {
position: relative;
width: 100%;
display: flex;
justify-content: flex-end;
margin-right: 22px;
margin-top: 22px;
}
.enggoal-card-i i {
font-size: 18px;
color: #4a90e2;
cursor: pointer;
}
.enggoal-btn {
margin-top: 53px;
}
.dash-ads-container {
width: 100%;
}
.dashAd-container {
width: 100%;
min-height: 520px;
padding: 30px 85px 90px 85px;
border-radius: 24px;
display: flex;
justify-content: center;
margin-top: 50px;
}
.dashAd-max-width {
width: 100%;
max-width: 1300px;
}
.dashAd-header {
width: 100%;
height: 60px;
display: flex;
align-items: center;
}
.dashAd-header-h {
font-size: 24px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
}
.dashAd-content {
width: 100%;
display: flex;
justify-content: space-between;
}
.dashAd-odds {
flex-direction: row;
}
.dashAd-even {
flex-direction: row-reverse;
}
.dashAd-body {
max-width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.dashAd-body-content {
max-width: 300px;
font-size: 24px;
font-family: Spartan !important;
font-weight: 500;
line-height: 1.42;
text-align: left;
color: #1a467c;
}
.dashAd-body-subContent {
font-size: 12px;
font-family: Spartan !important;
font-weight: 500;
text-align: left;
color: #545454;
margin-top: 20px;
}
.dashAd-btn-container {
width: 100%;
display: flex;
justify-content: center;
gap: 16px;
margin-top: 40px;
}
.dashAd-media {
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.dashAd-media-vid-wrapper {
padding-bottom: 60%;
width: 100%;
}
.dashAd-media iframe {
border-radius: 24px;
}
.dashAd-img {
max-height: 450px;
width: 90%;
object-fit: cover;
border-radius: 24px;
}
.dashAd-btn {
min-width: 132px;
max-height: 32px;
font-size: 12px;
padding: 4px 15px;
}
.dash-events-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 70px;
}
.dash-event-container {
width: 90%;
max-width: 1132px;
background-color: #f4f4f4;
border-radius: 24px;
display: flex;
justify-content: space-between;
padding: 50px 56px 48px 56px;
margin-top: 70px;
}
.dash-event-left-container {
width: 100%;
padding-right: 50px;
}
.dash-event-title {
font-size: 20px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
}
.dash-event-h {
font-size: 26px;
font-family: Spartan !important;
font-weight: bold;
line-height: 1.38;
color: #545454;
margin-top: 12px;
}
.dash-event-presenter-container {
display: flex;
margin-top: 30px;
}
.dash-event-presenter-img {
width: 66px;
height: 66px;
border-radius: 100%;
object-fit: cover;
}
.dash-event-presenter-ini {
width: 66px;
height: 66px;
display: flex;
font-size: 24px;
font-weight: bold;
justify-content: center;
align-items: center;
text-transform: capitalize;
border-radius: 100%;
border: 3px solid #1a467c;
color: #1a467c;
}
.dash-event-presenter-info {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 18px;
}
.dash-event-presenter-role{
font-size: 10px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
}
.dash-event-presenter-name{
font-size: 14px;
font-family: Spartan !important;
font-weight: bold;
color: #545454;
margin-top: 4px;
}
.dash-event-presenter-title{
font-size: 12px;
font-family: Spartan !important;
color: #545454;
margin-top: 4px;
}
.dash-event-right-container {
width: 100%;
padding-left: 50px;
padding-top: 35px;
}
.dash-event-right-date {
font-size: 16px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
}
.dash-event-right-p {
font-size: 16px;
line-height: 1.63;
color: #545454;
margin-top: 8px;
}
.dash-event-btn-container {
display: flex;
gap: 16px;
margin-top: 30px;
}
.dash-support-container {
display: flex;
flex-direction: column;
align-items: center;
}
.dash-support-h {
font-size: 24px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 140px;
}
.dash-support-question-container {
display: flex;
width: 100%;
justify-content: space-between;
gap: 10px;
width: 90%;
max-width: 1132px;
margin-top: 44px;
}
.dash-support-question-card {
width: 100%;
max-width: 200px;
}
.dash-support-question-h {
font-size: 10px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-bottom: 8px;
}
.dash-support-question-p {
font-size: 18px;
line-height: 1.33;
color: #4a90e2;
text-decoration: none;
cursor: pointer;
margin-top: 4px;
transition: color .3s;
}
.dash-support-question-p:hover {
color: #7dbe3e;
}
.dash-support-btn {
margin-top: 38px;
}
.bottom-to-top-btn {
width: 30px;
height: 54px;
background-color: #4a90e2;
border-top-left-radius: 17px;
border-top-right-radius: 17px;
cursor: pointer;
margin-top: 155px;
display: flex;
justify-content: center;
transition: background-color .3s
}
.bottom-to-top-btn:hover {
background-color: #7dbe3e;
}
.bottom-to-top-btn i {
color: #ffffff;
font-size: 20px;
margin-top: 9px;
}
#dashToTop {
margin-left: auto;
margin-right: auto;
}
.dash-active-user {
position: relative;
}
.dash-active-user-num {
width: 20px;
height: 20px;
font-size: 10px;
font-weight: bold;
color: #ffffff;
border-radius: 100%;
background-color: #7dbe3e;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: -5px;
top: -5px;
}
.staff-modal-width {
width: 610px;
height: 590px;
padding: 60px 50px;
}
.online-staff-wrapper {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.online-staff-icon {
width: 64px;
height: 64px;
margin-top: 6px;
}
.online-staff-h {
font-size: 20px;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 23px;
}
.online-staff-list-h {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 27px;
}
.online-staff-list-h-s {
font-size: 10px;
font-weight: 500;
color: #4a90e2;
padding: 0 20% 0 10%;
}
.online-staff-list-container {
width: 100%;
height: 350px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 7px;
}
.online-staff-card-container {
width: 100%;
height: 62px;
min-height: 62px;
background-color: #f2f3f3;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 13% 0 10%;
}
.online-staff-card-container-left {
display: flex;
align-items: center;
}
.online-staff-card-img-cont {
width: 34px;
height: 34px;
border: solid 1.7px #1a467c;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
font-weight: bold;
color: #1a467c;
text-transform: capitalize;
}
.online-staff-card-img {
width: 30px;
height: 30px;
border-radius: 100%;
object-fit: cover;
}
.online-staff-card-name {
font-size: 16px;
font-weight: bold;
color: #545454;
margin-left: 10px;
}
.online-staff-card-time {
width: 130px;
text-align: center;
font-size: 14px;
font-weight: bold;
color: #545454;
}
.online-customers-wrapper {
margin-top: 32px;
width: 100%;
overflow: auto;
}
.online-customers-wrapper a {
text-decoration: none;
}
.online-customer-row {
padding: 20px;
background-color: #f2f3f3;
border-radius: 8px;
margin-bottom: 4px;
text-align: center;
color: #545454;
font-weight: bold;
}
.dash-alert-h {
font-size: 26px;
font-family: Spartan !important;
font-weight: 500;
line-height: 1.46;
color: #1a467c;
}
.dash-alert-h-num {
font-weight: bold;
}
.dash-alert-h-em {
font-family: Spartan !important;
font-weight: bold;
}
.dash-alert-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 28px;
}
.dash-alert-item-input {
display: none;
}
.dash-alert-item-label {
font-size: 14px;
font-family: Spartan !important;
font-weight: 500;
color: #4a90e2;
cursor: pointer;
}
.dash-alert-item-span {
font-size: 14px;
font-family: Spartan !important;
font-weight: bold;
}
.dash-alert-item-input:checked + .dash-alert-item-label {
color: #777c80;
}
.dash-alert-loader {
display: none;
width: 3rem;
height: 3rem;
margin-top: 14px;
}
.dash-alert-item {
margin-top: 32px;
}
.dash-alert-item-fromnow {
font-size: 12px;
color: #9b9b9b;
margin-top: 32px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.dash-alert-next-prev-wrapper {
display: flex;
gap: 10px;
font-size: 16px;
}
.alert-next-prev-disabled {
pointer-events: none;
color: #777c80;
}
.dash-alert-bttn-action-wrapper {
display: flex;
align-items: center;
gap: .625rem;
}
.dash-alert-bttn-action {
font-size: .625rem;
padding: .75rem 1.125rem;
border: 0;
display: flex;
align-items: center;
color: #4a90e2;
background-color: #f4f4f4;
cursor: pointer;
border-radius: 20px;
transition: .3s;
height: 1.25rem;
}
.dash-alert-bttn-action:hover {
color: #ffffff;
background-color: #7dbe3e;
}
.dash-alert-modal {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3rem !important;
}
.dash-alert-item-p {
font-size: 20px;
line-height: 1.6;
color: #545454;
margin-top: 9px;
}
.dash-alert-item-p a {
text-decoration: none;
cursor: pointer;
color: #4a90e2;
}
.dash-alert-em {
font-weight: bold;
}
.dash-alert-btn-container {
display: flex;
gap: 22px;
margin-top: 36px;
}
/* New DashBoard Component END */
/* Logout Modal START */
.logout-modal {
width: 21.875rem;
height: 18.75rem;
padding: 1.25rem 1.625rem 1.875rem 1.625rem;
}
.logout-modal-img {
width: 4rem;
height: 4rem;
margin-top: 1.625rem;
}
.logout-modal-h1 {
font-size: 1.25rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 1.5rem;
}
.logout-modal-p {
font-size: 1.125rem;
color: #777c80;
margin-top: 1rem;
}
.logout-modal-btn-wrapper {
display: flex;
gap: .5rem;
margin-top: 1.625rem;
}
.logout-btn {
min-width: 9rem;
min-height: 2rem;
font-size: 14px;
padding: 0;
}
/* Logout Modal END */
div#locationContainer .opes-side input:checked{
background-color: #4a90e2 !important;
}
/* SLIDE UP MODAL START */
.slide-up-background {
display: none;
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 3000;
background-color: rgba(216, 216, 216, .8);
overflow-y: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.slide-up-background::-webkit-scrollbar {
display: none;
}
.slide-up-wrapper {
display: none;
/* position: relative; */
top: 100vh;
width: 100vw;
min-height: 90vh;
}
.slide-up-modal-conent {
width: 96vw;
height: fit-content;
min-height: calc(100vh - 2vw);
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0px 8px 24px rgb(16 22 26 / 20%);
position: absolute;
left: 50%;
transform: translate(-50%, 0);
background: #f4f4f4;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
padding-top: 128px;
padding-bottom: 180px;
margin-top: 2vw;
}
.settings-sub-heading {
margin-top: .875rem;
}
.settings-sub-body {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-top: .25rem;
}
.settings-slideup-flex, #editSpecialistContainer {
display: flex;
flex-direction: column;
align-items: center;
width: 31.25rem;
}
.settings-slideup-header-container {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
}
.settings-slideup-header-container-left {
display: flex;
align-items: baseline;
margin-left: 40px;
width: 100%;
}
.settings-slideup-header-container-right .slideup-save {
min-width: 144px;
min-height: 32px;
font-size: 14px;
padding: 0;
}
.settings-slideup-req {
font-size: 14px;
white-space: nowrap;
color: #777c80;
width: 83.33%;
margin-top: .25rem;
}
.settings-slideup-header {
font-size: 1.25rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 84%;
line-height: 1.3;
}
.settings-slideup-subheader {
margin-top: 1.875rem;
width: 84%;
white-space: nowrap;
}
.settings-slideup-subbody {
margin-top: .25rem;
width: 84%;
}
.settings-input-header {
font-size: .75rem;
font-family: Spartan !important;
font-weight: bold;
color: #1a467c;
margin-top: 1.5rem;
width: 83.33%;
}
.settings-slideup-save {
position: fixed;
bottom: 10vh;
z-index: 10000;
}
.settings-slideup-radio {
width: 84%;
}
.settings-body {
margin-top: 12px;
}
.settings-slideup-missing {
border-color: red;
color: red;
}
.settings-slideup-input {
border: solid 2px #4a90e2;
border-radius: 28px;
padding: 18px 40px;
height: 56px;
width: 100%;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #4a90e2;
margin-top: 13px;
}
.settings-slideup-input.for-select {
padding: 0 40px;
background-color: #f4f4f4;
display: flex;
align-items: center;
}
.settings-slideup-select {
background-color: transparent;
border: none;
height: 56px;
font-size: 16px;
font-family: Roboto;
font-weight: bold;
color: #4a90e2;
}
.settings-time-select {
margin-top: 13px;
margin-bottom: 13px;
}
.settings-show-more {
display: none;
text-align: center;
font-size: .875rem;
color: #4a90e2;
cursor: pointer;
margin-top: 1.875rem;
}
.specialist-topper {
justify-content: space-between;
margin-top: 2.8125rem;
}
.settings-slideup-select-container {
width: 100%;
display: flex;
padding: 0 8.33%;
row-gap: 30px;
flex-wrap: wrap;
margin-top: 30px;
}
.dot-select-slideUp {
width: 50%;
}
.request-creds-bttn {
background-color: #4a90e2;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.request-creds-bttn:hover {
background-color: #7dbe3e;
color: white;
}
.cred-req-modal-size {
width: 450px;
height: 300px;
}
.cred-req-input {
background-color: white !important;
height: 36px;
margin: 16px 0;
}
#settingsCredReqModal h1 {
margin: 70px 0 0 0;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
line-height: 1;
text-align: center;
color: #1a467c;
}
#settingsCredReqModal .error-text {
height: 18px;
margin-bottom: 16px;
}
/* for the search drop down */
/* this is bad practice... we need to not use global class
but in order to fix this we need to wrap the page... */
.select2-container {
z-index: 90000;
width: 100% !important;
}
#stoBuilderLocS2 .select2-container {
z-index: 0;
}
.spec-acc-parent, .servGrp-parent {
display: flex;
flex-direction: column;
margin-top: .625rem;
}
.slideup-bar-width {
width: 31.25rem;
}
.slideup-color-selected {
font-size: .75rem;
font-weight: 500;
color: #1a467c;
margin-top: 1.5rem;
}
.slideup-color-flex {
display: flex;
margin-top: 1.875rem;
}
/* SLIDE UP MODAL END */
.pxv-dyq-loader {
display: none;
}
.custTagWrapper {
width: 100%;
min-height: 96px;
padding: 15px 41px;
border-radius: 28px;
background-color: #f4f4f4;
border: 2px solid #4a90e2;
}
#toggleAddTag {
height: 1.625rem;
font-size: 1.375rem;
color: #4a90e2;
cursor: pointer;
display: flex;
align-items: center;
}
#addNewTagContLs,
#addNewTagSearchLsContLs,
.add-tag-search-no-res-ls {
display: none;
}
.cust-tag-new-content-ls {
position: relative;
}
div.cust-add-tag-input-wrapper-ls #addNewTaginputLs {
width: 12.5rem !important;
border: .125rem solid #777c80;
background-color: rgba(255, 255, 255, 1) !important;
/* width: fit-content !important; */
height: 1.625rem !important;
font-size: .875rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
/* background-color: #D0D0D0 !important; */
padding: .375rem 1.875rem !important;
border-radius: .5625rem;
margin: 0;
}
.cust-tag-item-warpper-ls {
width: fit-content;
height: 1.625rem;
font-size: .875rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-color: #D0D0D0;
padding: .375rem 1.875rem;
border-radius: .5625rem;
}
.add-tag-search-result-wrapper-ls {
position: absolute;
height: fit-content;
max-height: 25rem;
overflow-y: auto;
width: 12.5rem;
background-color: rgba(255, 255, 255, 1);
border: .125rem solid #777c80;
padding: .25rem;
border-radius: 0.5625rem;
bottom: 26px;
z-index: 1;
}
.add-tag-search-no-res-ls {
font-size: .875rem;
padding: .625rem;
color: #777c80;
cursor: pointer;
border-radius: .375rem;
}
#addNewTagLoaderLs {
width: 100%;
display: flex;
justify-content: center;
}
.add-tag-search-cust-loader-ls {
width: 3.125rem;
}
.add-tag-search-cust-list-ls {
}
.add-tag-search-cust-item-ls {
font-size: .875rem;
padding: .625rem;
color: #777c80;
cursor: pointer;
border-radius: .375rem;
}
.cust-tag-item-text-ls {
color: #545454;
}
.cust-tag-item-x-ls {
color: #545454;
position: absolute;
right: .5rem;
cursor: pointer;
}
.cust-tag-content-ls {
width: 100%;
/* min-height: 5.5rem; */
display: flex;
flex-wrap: wrap;
gap: .875rem;
}
div.cust-add-tag-input-wrapper-ls .cust-tag-input-openTop-ls {
border-top-right-radius: 0 !important;
border-top-left-radius: 0 !important;
border-top: 0 !important;
}
.cust-tag-search-openBottom-ls {
border-bottom: none;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.pxv-dyq-ans-sch .select2-container {
width: 100% !important;
margin-bottom: 16px;
}
.pxv-dyq-ans-sch .select2-selection,
.pxv-dyq-ans-sch .select2-selection__rendered {
height: 44px !important;
display: flex !important;
align-items: center;
}
.pxv-dyq-ans-sch .select2-selection__arrow {
height: 44px !important;
display: flex;
align-items: center;
}
.pxv-dyq-back-ph {
width: 100%;
height: 22px;
display: flex;
align-items: center;
margin: 8px 0 4px 0;
}
.pxv-dyq-done {
display: none;
color: #777c80;
font-family: Spartan !important;
font-size: 20px;
font-weight: bold;
}
.pxv-dyq-content {
display: none;
width: 100%;
}
.pxv-dyq-ans-btn-cont {
display: flex;
justify-content: center;
}
.pxv-dyq-back {
font-size: 12px;
font-weight: bold;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.pxv-micro-button-submit {
margin-top: 10px;
/* width: 312px; */
height: 44px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: bold;
text-align: center;
border-radius: 60px;
text-decoration: none;
border: 2px solid #4a90e2;
color: #fff;
line-height: normal;
background-color: #4a90e2;
cursor: pointer;
transition: border .3s, background-color .3s;
}
.pxv-micro-button-submit:hover {
background-color: #7dbe3e;
border: 2px solid #7dbe3e;
}
.pxv-autosend-choice-container {
display: flex;
flex-direction: column;
align-items: center;
}
.autosend-choice:hover,
.survey-choice:hover,
.question-choice:hover {
color: #7dbe3e;
border: 2px solid #7dbe3e;
cursor: pointer;
}
.survey-choice,
.question-choice {
width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.pxv-micro-choice {
/* margin: 0 auto; */
text-align: center;
display: flex;
height: 44px;
border: 2px solid #4a90e2;
padding: 0 20px;
border-radius: 24px;
align-items: center;
justify-content: center;
color: #4a90e2;
}
.dyq-rs-cont {
width: 600px;
height: 500px;
}
#dyqNoRs {
display: none;
margin-top: 80px;
}
#dyqSumLoader {
display: none;
}
#dyqSumLoader img {
height: 36px;
margin-top: 10px;
}
.dyq-content-rs-modal {
width: 100%;
display: flex;
flex-direction: column;
padding: 50px 30px;
}
.dyq-rs-ul {
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
padding-top: 2px;
}
.dyq-rs-li {
display: flex;
flex-direction: column;
gap: 10px;
}
.dyq-rs-qa {
display: flex;
align-items: baseline;
gap: 6px;
padding-right: 6px;
}
.dyq-rs-qst {
font-size: 16px;
font-weight: bold;
color: #1a467c;
}
.dyq-rs-ans {
font-size: 14px;
color: #9b9b9b;
}
.dyq-rs-h {
font-size: 20px;
font-weight: bold;
font-family: 'Spartan' !important;
}
.cust-merg-option-attr {
color: #fff;
font-weight: bold;
font-size: .625rem;
padding: .125rem .375rem;
border-radius: .375rem;
}
#aiSum {
margin-top: 20px;
display: flex;
justify-content: left;
align-items: center;
width: 100%;
}
.dyq-summary {
line-height: 1.4;
height: 70px;
overflow-y: auto;
margin-top: 10px;
color: #9b9b9b;
}
#dyqCopySum {
margin-left: .25rem;
}
#cnmBody {
min-width: 37.5rem;
min-height: 25rem;
width: calc(70vw - .0625rem);
height: calc(70vh - .0625rem);
padding-bottom: 1.25rem;
overflow-y: auto;
}
.cnm-content {
width: 83.33%;
margin-top: 1.25rem;
}
.cnm-add-container {
display: flex;
justify-content: start;
margin-top: 1.25rem;
gap: .25rem;
font-size: .875rem;
font-weight: bold;
}
.cnm-btn-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-top: .625rem;
}
#newNote {
resize: none;
height: 6.25rem;
width: 100%;
border: .125rem solid #4a90e2;
border-radius: .625rem;
margin-top: .625rem;
padding: .5rem;
overflow-y: auto;
}
#noteListContainer {
display: flex;
flex-direction: column;
gap: 1.125rem;
margin-top: 1.125rem;
margin-bottom: 2.5rem;
}
.note-item-container {
display: flex;
width: 100%;
flex-direction: column;
padding: 10px;
border: .125rem solid #777c80;
border-radius: .625rem;
}
.note-item-h-container {
display: flex;
justify-content: space-between;
}
.note-item-h {
font-size: 1rem;
font-weight: bold;
color: #1a467c;
}
.note-item-h-right {
display: flex;
gap: .5rem;
font-size: .875rem;
}
.note-item-edit {
}
.note-item-save-cancel-dist {
display: none;
}
.note_item_save_cancel {
display: flex;
gap: .5rem;
}
.note-item-edit-save {
font-weight: bold;
font-size: .75rem;
}
.note-item-created-by {
margin-top: .125rem;
font-size: .75rem;
color: #777c80;
}
.note-item-body {
resize: none;
border: .125rem solid #4a90e2;
border-radius: .625rem;
margin-top: .625rem;
overflow-y: auto;
padding: .5rem;
width: 100%;
}
.hidden-confirmation-message {
font-size: 1.125rem;
color: #777c80;
}
.note-item-body-disabled {
border: .125rem solid #777c80;
}
.example-count-modal-content {
width: 43.75rem;
height: 43.75rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.25rem;
}