.uiPage {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 375px;
    background: white;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    height: 100%;
    min-height: 0;
    overflow-y: hidden;
    overflow-x: hidden;
}

.uiPageNoHeader {
    box-shadow: none;
    border-radius: 0;
}

.uiPageHeader {
    flex: 0 0 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    height: 100px;
    position: relative;
    background: white;
}

.uiPageHeaderClose {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 45px;
    height: 45px;
}

.uiPageHeaderClose svg {
    right: 0px;
    position: absolute;
    fill: #666666;
    height: 45px;
    width: 45px;
    cursor: pointer;
}

.uiPageHeaderClose:hover {
    background:  #B6EEFF;
}

.uiPageHeaderInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
            
.uiPageHeaderIcon {
}

.uiPageHeaderIcon div {
    height: 45px;
    width: 45px;
}

.uiPageHeaderIcon svg {
    height: 45px;
    width: 45px;
    fill: #666666;
}

.uiPageHeaderTitle {
}

.uiPageHeaderSubtitle {
}

.uiPageBody {
    background: #17043d;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.uiPageSubpage {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    background: #17043d;

}


.uiPageFooter {
    flex: 0 0 auto;
    background: #17043d;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}




/* hack!!! */
.uiPage .uiScheduleAppointmentBodyField .uiInputFieldLabel {
    margin-bottom: auto;
}

.fdPopup {
    top: 0px;
    position: fixed;
    height: 100%;
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
}


:is(.uiLetsBuildAppDesktop, uiLetsBuildAppIPad) .fdPopup {
    filter: none;
}

.fdPopupContainer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.fdFastDetectClientIPad .fdPopupContainer {

}

.fdPopupPopupBump {
    position: absolute;
    top: -10px;
    left: 16px;
    height: 10px;
    width: calc(100% - 32px);
    border-radius: 10px 10px 0px 0px;
    background: #bababa;
    display: none;
}

.fdPopupHeader {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    background: rgb(245, 245, 245);
    border-radius: 10px 10px 0px 0px;
}

.fdPopup .mbsc-ios.mbsc-btn {
    background: rgb(245, 245, 245);
}


.fdPopupHeaderTitle {
    cursor: default;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fdPopupScroller {
    width: 100%;
    height: 100%;
}

.uiLetsBuildAppMobile .fdPopupScroller {
    height: 100%;
}

.fdPopupBody {
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    height: calc(100% - env(safe-area-inset-bottom, 15px));
    background: rgb(239, 239, 244);
    overflow-y: auto;
    overflow-x: hidden;
}

.fdPopupHeaderDone .mbsc-btn {
    font-weight: 600;
}


.fdPopupHeaderTitleContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdPopupHeaderSpinner {
    margin-left: 10px;
}

.fdPopupHeaderSpinner div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdPopupContainerBusy {
    pointer-events: none;
}

.fdPopupBodyNoHeader {
}


.uiLetsBuildAppAndroid .fdPopupHeader {
    border-radius: 0 !important;
}

.uiIcon {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiIconSvg svg {
    height: 45px;
    width: 45px;
    fill: rgb(250, 250, 250);
}


.uiButton {
    height: 40px;
    cursor: pointer;
    color: rgb(250, 250, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 13px;
    height: 35px;
    cursor: pointer;
}

.uiButtonIcon {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.uiButtonIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiButtonLabel {
    color: rgb(250, 250, 250);
    font-size: 13px;
    white-space: nowrap;
}

.uiToggleButton {
    height: 40px;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uiToggleButtonSelected {
    background: rgb(184, 38, 26);
    color: white;
}

.uiToggleButtonSelected .uiToggleButtonLabel {
    visibility: visible;
}

.uiToggleButtonLabel {
    width: 100%;
    font-size: 14px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    padding-left: 14px;
    visibility: hidden;
}

@media not all and (pointer: coarse) {
.uiToggleButton:hover {
    background:  #B6EEFF;
    color: #666666;
}

.uiToggleButtonSelected:hover {
    background: #c40a0a;
    color: white;
}

.uiToggleButtonSelected:hover .uiToggleButtonLabel {
    color: white !important;
}

.uiToggleButtonSelected:hover svg {
    fill: white !important;
}

.uiToggleButton:hover .uiToggleButtonLabel {
    visibility: visible;
    color: #666666;
}

.uiToggleButton:hover svg {
    fill: #666666;
}
}

.uiToggleButton svg {
    height: 40px;
    width: 40px;
}

.uiToggleButton .uiIcon {
    width: 40px;
    padding-right: 10px;
}

.uiOKCancel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 45px;
    max-width: calc(min(100%, 408px));
}

.uiOKCancelOof {
    background: rgb(184, 38, 26);
    height: 45px;
    width: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.uiOKCancelOof:hover {
    background: #CA0000;
}

.uiOKCancel img {
    height: 45px;
    width: 45px;
}

.uiOKCancelOofIcon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiOKCancelOofIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiOKCancelOofIcon svg {
    height: 45px;
    width: 45px;
    fill: white;
}

.uiOKCancelOofLabel {
    font-size: 14px;
    padding-right: 22.5px;
}

.uiOKCancelCancel {
    background: rgb(184, 38, 26);
    cursor: pointer;
    height: 45px;
    min-width: 45px;
    max-width: 45px;
    margin-right: 22.5px;
    position: relative;
}

.uiOKCancelCancelIcon {
    font-size: 0;
    height: 45px;
    width: 45px;
    top: 0;
    left: 0;
    position: absolute;
    overflow: hidden;
}

.uiOKCancelCancelIcon div {
    height: 45px;
    width: 45px;
    top: 0;
    left: 0;
    position: absolute;
}

.uiOKCancelCancelIcon svg {
    width: 100%;
    height: 100%;
    fill: white;
}

.uiOKCancelCancel:hover {
    background: #CA0000;
}

.uiOKCancelOK {
    height: 45px;
    width: 100%;
    background: rgb(37, 183, 68);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.uiOKCancelOK:hover {
    background: #11D316;
}

.uiOKCancelOKIcon {
    font-size: 0;
    height: 45px;
    width: 45px;
    position: relative;
}

.uiOKCancelOKIcon div {
    font-size: 0;
    top: 0;
    left: 0;
    height: 45px;
    width: 45px;
    position: absolute;
}


.uiOKCancelOKIcon svg {
    fill: white;
}

.uiOKCancelOKLabel {
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-right: 22.5px;
    white-space: nowrap;
}

@keyframes spinx {
    100% {
        transform: rotate(360deg);
    }
}

.uiOKCancelBusy {
}

.uiOKCancelBusy svg {
    transform-box: view-box;
    transform-origin: center center;
    animation: spinx 1s linear infinite;
}

.uiOKCancelBack {
    background: rgb(213, 102, 88);
    cursor: pointer;
    height: 45px;
    min-width: 45px;
    max-width: 45px;
    margin-right: 22.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiOKCancelBack div {
    font-size: 0;
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiOKCancelBack svg {
    width: 100%;
    height: 100%;
    fill: white;
}

.uiOKCancelBack:hover {
    background: rgb(238, 102, 78);

}

.uiDeviceSetup {
    display: inline-block;
    margin-left: 22.5px;
    margin-top: 15px;
    /* width: min(408px, calc((100vw - 270px - 72.5px)/2)); */
    width: calc(100% - 45px);
    height: calc(100% - 15px);
}

.uiLetsBuildAppMobile .uiDeviceSetup {
    margin: 0;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background: black;
    width: 100%;
}

.uiLetsBuildAppMobile .uiDeviceSetupVideo {
    position: static;
}

.uiDeviceSetupVideo {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 0;
    display: inline-block;
}

/* hack for chrome desktop */
.uiLetsBuildAppDesktop .uiDeviceSetupVideo video {
    max-height: calc(100vh - 105px);
}

.uiDeviceSetupVideo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(-1, 1);
}

.uiLetsBuildAppMobile .uiDeviceSetupVideo video {
    min-width: 100%;
}

.uiDeviceSetupVideo.uiDeviceSetupVideoReady {
    position: relative;
    display: block;
    width: min(100%, calc((100dvh - 150px) * var(--device-preview-ratio)));
    height: auto;
    aspect-ratio: var(--device-preview-ratio);
    background: black;
}

.uiDeviceSetupVideoReady video {
    display: block;
    object-fit: contain;
}

.uiDeviceSetupControls {
    bottom: 0;
    right: 0;
    position: absolute;
    pointer-events: auto;
}

.uiDeviceSetupControlsContainer {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    pointer-events: none;
}

.uiDeviceSetupControlsContainer .uiToggleButtonSelected {
    background: rgb(33, 161, 196)
}

.uiDeviceSetupControlsContainer .uiToggleButtonSelected:hover {
    background:  #20A1C4;
}

.uiDeviceSetupControlsContainer .uiDeviceSetupControls {

}

.uiCallLobbyYourVideoContainer .uiDeviceSetupControlsContainer {
    display: none;
}

.uiDeviceSetupControls .uiToggleButton {
    height: 45px;
}

.uiDeviceSetupSelection {
    position: absolute;
    right: 145px;
    display: flex;
    bottom: 0px;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    max-height: calc(4 * 45px);
}

.uiLetsBuildAppMobile .uiDeviceSetupSelection {
    right: 45px;
}

.uiDeviceSetupSelectionOneMic {
    bottom: 45px;
}

.uiDeviceSetupSelectionSpeaker {
    bottom: 90px;
}

.uiDeviceSetupSelectionVideoRes {
    bottom: 135px;
}

.uiSelectionList {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    justify-content: flex-start;
}

.uiDeviceSetup .uiToggleButtonSelected {
    background: #20A1C4;
}

@media (hover: hover) {

.uiDeviceSetup .uiToggleButtonSelected:hover {
    background: #11CEED;
}
}

.uiSelectionListOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 45px;
    height: 45px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    background: #efefef;
    border: 0;
    min-width: 135px;
}

:is(.uiLetsBuildAppIPad, .uiLetsBuildAppMobile) .uiSelectionListOptionName {
    /* font-size: 16px; */
}

@media (hover: hover) {
.uiSelectionListOption:hover {
    background:  #B6EEFF;
    color: #666666;
}
}

.uiSelectionListOptionName {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    max-width: 100%;
    text-overflow: wrap;
    overflow: hidden;
}

.uiSelectionListOptionCheck {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiSelectionListOptionCheck div  {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiSelectionListOption svg {
    height: 45px;
    fill: rgb(37, 183, 68) !important;
}

@media (hover: hover) {
.uiSelectionListOption:hover svg {
    height: 45px;
    fill:  #11D316;

}
}
    
.uiDeviceSetupCantOpenMedia {
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
}

.uiLetsBuildAppMobile .uiDeviceSetupCantOpenMedia {
    height: 100%;
    width: 100%;
}

.uiLetsBuildAppIPad .uiDeviceSetupCantOpenMedia {
    width: 100%;
    min-height: calc(100vh - 200px);
}

.uiLetsBuildAppIPad .uiCantOpenMedia {
    height: 100%;
    width: 100%;
    min-height: 100%;
}

.uiCantOpenMediaContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF6e24;
    color: white;
    font-size: 14px;
}

.uiCantOpenMedia {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.uiCantOpenMediaIcon svg {
    width: 62px;
}

.uiCantOpenMediaText {
    margin-top: 22.5px;
    max-width: 440px;
    padding: 0 20px;
    text-align: center;
}

.uiDeviceSetupRetry {
    margin-top: 20px;
    width: 340px;
    max-width: calc(100% - 40px);
    cursor: pointer;
}

.uiDeviceSetupRetry:focus-visible { outline: 3px solid white; outline-offset: 3px; }

.uiDeviceSetupStatus, .uiDeviceSetupError {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    color: white;
    font-size: 14px;
    background: #161b22;
    padding: 10px;
}

.uiSettings .uiDeviceSetup.uiDeviceSetupUnavailable {
    height: auto;
    max-width: 600px;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupVideo {
    display: block;
    height: auto;
    box-sizing: border-box;
    border: 1px solid #bac6c1;
    background: white;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupCantOpenMedia {
    position: static;
    height: auto;
    min-height: 0;
}

.uiSettings .uiDeviceSetupUnavailable .uiCantOpenMediaContainer {
    height: auto;
    background: white;
    color: #4d4d4d;
}

.uiSettings .uiDeviceSetupUnavailable .uiCantOpenMedia {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 20px;
}

.uiSettings .uiDeviceSetupUnavailable .uiCantOpenMediaIcon path {
    fill: #666666;
}

.uiSettings .uiDeviceSetupUnavailable .uiCantOpenMediaIcon line {
    stroke: #666666;
}

.uiSettings .uiDeviceSetupUnavailable .uiCantOpenMediaText {
    margin-top: 16px;
    padding: 0;
    line-height: 20px;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupRetry {
    margin-top: 16px;
    max-width: 100%;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupRetry:focus-visible {
    outline-color: #20a1c4;
}

.uiSettings .uiDeviceSetupUnavailable .uiOKCancelOKLabel {
    white-space: normal;
    text-align: right;
    line-height: 20px;
}

.uiSettings .uiDeviceSetupUnavailable .uiOKCancelOKIcon {
    flex: 0 0 45px;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupControlsContainer {
    position: relative;
    height: 45px;
    background: #17043d;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupControls {
    display: flex;
}

.uiSettings .uiDeviceSetupUnavailable .uiToggleButton {
    width: 45px;
}

.uiSettings .uiDeviceSetupUnavailable .uiToggleButtonLabel {
    display: none;
}

.uiSettings .uiDeviceSetupUnavailable .uiToggleButton .uiIcon {
    width: 45px;
    padding: 0;
}

.uiSettings .uiDeviceSetupUnavailable .uiDeviceSetupSelection {
    right: 0;
    bottom: 45px;
    max-width: 100%;
}


.uiVideoDimensions {
    font-size: 14px;
    background: transparent;
    color: white;
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    display: none;
}


.uiProfileIcon {
  position: relative;
  border-radius: 50%;
  background: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uiChatSystemProfileIcon .uiProfileIcon {
    background: transparent;
}

.uiProfileIconImage {
    height: 100%;
    width: 100%;
}

.uiProfileIconImage img {
  object-fit: cover;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  border: 1px solid white;
  z-index: 1;
}

.uiProfileIconImage svg {
    height: 40px;
    width: 40px;
}

.uiProfileIconImage div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiChatWhoopProfileIcon .uiProfileIconImage  {
    background: white;
}

.uiChatWhoopProfileIcon .uiProfileIconImage svg {
    height: 40px;
    width: 40px;
    transform: translate(0px, -3px);
}

.uiChatOuraProfileIcon .uiProfileIconImage {
    background: white;
}

.uiChatOuraProfileIcon .uiProfileIconImage svg {
    height: 40px;
    width: 40px;
    transform: translate(0px, -3px);
}

.uiChatWhoopProfileIcon .uiProfileIconRing {
}

.uiChatSystemProfileIcon .uiProfileIconImage {
    height: 40px;
    width: 40px;
}

.uiChatSystemProfileIcon .uiProfileIconImage {
    height: 33px;
    width: 33px;
    overflow: hidden;
    border-radius: 50%;
}

.uiChatSystemProfileIcon .uiProfileIconImage svg {
    transform: translate(0px, -3px);
}

.uiChatSystemProfileIcon .uiProfileIconRing {
    display: none;
}

.uiProfileIconRing {
  position: absolute;
  border: 2px solid;
  background: transparent;
  z-index: 1;
  border-radius: 50%;
  color: #0dcc0d;
  width: 100%;
  height: 100%;
}

.uiProfileIconOffline .uiProfileIconRing {
    color: white;
}

.uiProfileDefaultIcon  {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.uiProfileDefaultIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiProfileDefaultIcon svg {
    width: 100%;
    min-width: 45px;
    fill: #666666;
}

.lbProfileIconBusy .uiProfileIconImage > div {
    transform: scale(0.8, 0.8);
}

.lbProfileIconBusy .SVG-Nano-001 {
}

.lbProfileIconBusy .SVG-Nano-001 path {
    fill: #333333 !important
}

input[type="time" i] {
    font-family: inherit;
}

input[type=time]::-webkit-clear-button,
input[type=time]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button {
    display:none;
}

input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button {
    display:none;
}

.uiHomeDesktop {
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
}

.uiHomeLogo {
    position: absolute;
    left: 17px;
    top: 15px;
    cursor: pointer;
}
    
.uiHomeLogo svg {
    height: 39.572px;
    fill: rgb(33, 161, 196);
    fill: #17043d;
}



.uiHomeLogo img {
    height: 60px;
    display: none;
}

.uiHomeSidebar {
    width: 265px;
    height: 100%;
    box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.11);
    position: absolute;
    top: 0;
    left: 0;
}

.uiHomeSideBarViewSelection {
    padding-top: 85px;
    top: 120px;
    left: 0px;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-end;
}

.uiHomeViewSelector {
    color: rgb(109, 109, 109);
    width: 250px;
    cursor: pointer;
    position: relative;
}

.uiHomeViewSelectorLabel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 46px;
    font-size: 14px;
    padding-right: 30px;
}

.uiHomeViewSelectorMajor .uiHomeViewSelectorLabel {
    font-size: 14px;
}

.uiHomeViewSelectionSpacer1 {
    height: 90px;
}

.uiHomeViewSelectorArrow {
    position: absolute;
    top: 0px;
    right: -22.5px;
    visibility: hidden;
}

.uiHomeViewSelectorSelected {
    color: white;
    background: rgb(37, 183, 68);
}

.uiHomeViewSelectorSelected:hover {
    background: #11D316;
}

.uiHomeViewSelectorSelected .uiHomeViewSelectorArrow {
    visibility: visible;
    
}
.uiHomeViewSelectorSelected:hover .uiHomeViewSelectorArrow:hover {
}

.uiHomeViewSelectorArrow svg {
    fill: rgb(37, 183, 68);
    height: 45px;
}
 
.uiHomeViewSelectorSelected:hover svg {
    fill: #11D316;
}

.uiHomeViewSelectorSelected:hover .uiHomeViewSelectorArrow svg {
    fill:  #11D316
}

.uiHomeMain {
    width: calc(100%  - 265px);
    position: relative;
    left: 265px;
    top: 0px;
    height: 100%;
}

.uiHomeSelectedViewContainer {
}

.uiHomeViewFields {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: calc(100% - 10px);
}

.uiHomeViewVerificationEmailSpamFolderHint {
    color: rgb(204, 214, 215);
    font-size: 12px;
    cursor: default;
    padding-left: 32px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.uiHomeViewVerificationCodeSent {
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 32px;
    color: rgb(243, 254, 255);
    font-size: 14px;
    cursor: default;
}

.uiHomeDesktop .uiSignIn {
    padding-top: calc(283px - 45px);
}

.uiHomeDesktop .uiSignUp {
    padding-top: 56px;
}

.uiHomeForgotPassword {
    padding-top: 283px;
}

.uiHomeForgotPassword2 .uiHomePhoneNumberSignIn {
    padding-top: 283px;
}

.uiHomePhoneNumberSignIn {
    padding-top: 101px;
}


.uiCheckBoxCheck {
    height: 45px;
    width: 45px;
    padding: 15px;
}

.uiCheckBoxLabel {
    color: rgb(243, 254, 255);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}

.uiCheckBoxField {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    cursor: pointer;
    padding-top: 20px;
    padding-bottom: 20px;
}

.uiCheckBoxCheck {
    height: 30px;
    width: 30px;
}

.uiCheckBoxField svg {
    fill: rgb(243, 254, 255);
    height: 30px;
    width: 30px;
}

.uiHomeViewButtonContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 450px;
    z-index: 1;
    margin-bottom: 22.5px;
}

.uiHomeViewButtonContainer .uiOKCancel {
    max-width: none;
}

.uiHomeViewButtonContainerBackContinue {
    margin-left: 22.5px;
}



.uiNiceButton {
    height: 45px;
    background: rgb(37, 183, 68);
    max-width: calc(100% - 22.5px - 30px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
    cursor: pointer;
    flex-grow: 1;
}

.uiSignUp .uiNiceButton {

}

.uiNiceButton:hover {
    background: #11D316;
}

.uiNiceButtonLabel {
    font-size: 14px;
    color:  rgb(243, 254, 255);
}

.uiNiceButtonIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
}

.uiNiceButtonIcon div {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiNiceButtonIcon svg {
    fill: rgb(243, 254, 255);
    height: 45px;
    width: 45px;
}


.uiInputField {
    position: relative;
}

.uiInputFieldClear {
    background: transparent;
    position: absolute;
    right: 40px;
    width: 35px;
    overflow: hidden;
    cursor: pointer;
}

.uiInputFieldContactContainer {
    width: 100%;
}

.uiInputFieldContactField {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: -5px;
}

.uiInputFieldContactField input {
    margin-left: -5px;
}

.uiInputFieldContactSearchResultsContainer {
    left: 0px;
    top: 46px;
    position: absolute;
    z-index: 100;
    width: calc(100% - 0px);
    max-height: calc(5.0 * 45px);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}

.uiInputFieldContactSearchResults {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}

.uiInputFieldContactSearchResult {
    color: #6d6d6d;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 10px);
    min-height: 45px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 0px;
}

.uiInputFieldContactSearchResultIcon {
    margin-right: 4px;
}

.uiInputFieldContactSearchResultName {
    font-size: 14px;
    padding-left: 10px;
}

.uiInputFieldContactSearchResultCheckMark {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.uiInputFieldContactSearchResultCheckMark div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiInputField .uiInputFieldContactSearchResultCheckMark svg {
    fill: rgb(37, 183, 68);
}

.uiInputField .uiInputFieldContactSearchResult:hover svg {
    fill:  #11D316;
}

.uiInputFieldContactSearchResult:hover {
    color: #666666;
    background: #B6EEFF
}

.uiInputFieldDurationField {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.uiInputFieldDurationField input {
    font-family: Verdana;
    max-width: 120px;
    display: none;
}

.uiInputFieldDateInput {
    font-family: Verdana;
    display: none;
}


.uiInputFieldDurationFieldLabels {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}

.uiInputFieldDurationFieldLabel {
    text-align: left;
    min-width: calc(50% - 30px);
}

.uiInputFieldDurationFieldLabelEnd {
    transform: translate(15px, 0);
}

.uiInputFieldErr .uiInputFieldInput {
    background: rgb(255, 183, 173);
}

.uiInputFieldErr {
    background: rgb(255, 183, 173) !important;
    color: rgb(243, 254, 255);
}

.uiFormError {
    height: 45px;
    color: rgb(255, 183, 173);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 30px;
}

.uiInputFieldIcon {
    min-width: 45px;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiInputFieldIconClear {
    cursor: pointer;
}

.uiInputFieldIconClear:hover {
    cursor: pointer;
    background: #B6EEFF;
}

.uiInputFieldIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiInputField svg {
    fill: rgb(33, 161, 196);
    fill: #17043d;
    height: 45px;
    width: 45px;
}


.uiHomeMain .uiInputFieldInput {
    padding-left: 30px;
}

.uiInputFieldAndLabel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 69px;
}

.uiInputFieldAndIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.uiInputFieldLabel {
  color: rgb(243, 254, 255);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30px;
  padding-top: 14px;
  cursor: default;
  width: calc(100% - 30px);
  white-space: nowrap;
}

.uiInputFieldField {
    height: 45px;
    width: 450px;
    background: rgb(243, 254, 255);
    display: flex;
    align-items: none;
    justify-content: flex-start;
    position: relative;
}

.uiInputFieldInput {
  border: 0;
  outline: none;
  height: 45px;
  width: 375px;
  background: #00000000;
  color: #666666;
  padding: 0 0 0 15px;
  font-size: 14px;
  font-family: inherit;
}

.uiInputField input::placeholder {
    color: #aaaaaa;
    font-style: italic;
}


.uiInputFieldButton {
    font-size: 14px;
    color: #aaaaaa;
    font-style: italic;
}

.uiInputFieldButtonField .uiInputFieldField {
    cursor: pointer;
}

.uiInputFieldButtonField:hover .uiInputFieldField {
    background: #B6EEFF;
}

.uiInputFieldButton:hover {
    height: 45px;
    display: flex;
    align-items: center;
    color: #666666;
    cursor: pointer !important;
    font-style: normal;
}

.uiInputFieldTimeInputContainer {
    width: 100%;
    height: 100%;
    position: relative;
}


input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  color:  rgb(109, 109, 109);
  -webkit-text-fill-color: rgb(109, 109, 109);
  -webkit-box-shadow: 0 0 0px 1000px #00000000 inset;
  transition: background-color 5000s ease-in-out 0s;
  font-size: 14px !important;
}

 
.uiInputFieldInput:-webkit-autofill-selected {
    background: rgb(243, 254, 255);
}

.uiInputFieldReadOnly .uiInputFieldField {

}

.uiInputFieldInput:read-only
{
    cursor: default;
}

.uiInputFieldReadOnly input:-webkit-autofill {

}

.uiHomeViewSignUpBackButton {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(213, 102, 88);
    margin-right: 22.5px;
    cursor: pointer;
}

.uiHomeViewSignUpBackButton:hover {
    background: rgb(238, 102, 78);
}

.uiHomeViewSignUpBackButton div {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiHomeViewSignUpBackButton svg {
    height: 45px;
    width: 45px;
    fill: white;
}

.uiHomeSelectedViewContainer {
    position: relative;
}
    

.uiHomeBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #17043d;
    background-image: url(/static/media/Hero_15x.593b7af28bd18127485c.png);
    background-position: 85% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}


.uiHomeBackground svg {
    display: none;
}

.uiHomeBackground2 {
    position: absolute;
    width: 265px;
    height: 100%;
    background: white;
}

.uiHomeBackground svg {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 60%;
    max-height: 70%;
}


.uiHomeMobile {
    background: white;
}

.uiHomeMobile .uiHomeSidebar {
    display: flex;
    width: 100%;
    height: 90px;
    box-shadow: none;
}

.uiHomeMobile .uiHomeMain {
    width: 100%;
    top: 68px;
    left: 0;
}

.uiHomeMobile .uiHomeViewFields {
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.uiHomeMobile .uiHomeSideBarViewSelection {
    padding-top: 0px;
    left: 0px;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

.uiHomeMobile .uiHomeViewSelector {
    width: 145px;
}

.uiHomeMobile .uiHomeViewSelectorLabel {
    width: 120px;
}

.uiHomeMobile .uiHomeViewSelectorSelected .uiHomeViewSelectorArrow {
    transform: rotate(90deg) translate(34px, 32px);
}

.uiHomeMobile .uiInputFieldAndLabel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.uiHomeMobile .uiSignIn,.uiSignUp {
    padding-top: 17.5px;
}

.uiHomeMobile .uiInputField {
    padding-top: 5px;
    width: calc(100% - 20px);
}

.uiHomeMobile .uiInputFieldField {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.uiHomeMobile .uiInputFieldInput {
    padding-left: 30px;
    width: calc(100% - 30px - 45px);
    background: transparent;
}

.uiHomeMobile .uiHomeViewButtonContainer {
    width: 100%;
    padding-top: 0px;
}

.uiHomeMobile .uiNiceButton {
    width: 285px;
    padding-right: 20px;
}

.uiHomeMobile .uiInputFieldIcon {
    right: 30px;
}

.uiHomeMobile .uiSignUpSpacer1 {
    height: 25px;
}

.uiHomeMobile .uiHomeBackground  {
    height: 100%;
    width: 100%;
}

.uiHomeMobile .uiHomeBackground svg {
    position: absolute;
    width: 90%;
    bottom: 0;
}

.uiHomeMobileBoxShadow {
    position: absolute;
    width: 100%;
    height: 68px;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.19);
}

.uiHomeE3 {

    bottom: 8px;
    left: 125px;
    font-size: 24px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
}

.uiHomeHipaaCompliant {

    bottom: 8px;
    left: 14px;
    font-size: 24px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
}

.uiHomeCaduceus {
    height: 80px;
    width: 80px;
    overflow: hidden;
    dsplay: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

.uiHomeCaduceus svg .caduceous {
    fill: rgb(33, 161, 196);
    fill: #17043d;
    opacity: 1.0;
}

.uiHomeMobile .uiHomeCaduceus svg .caduceous-2 {
    fill: #efefef;
}

.uiHomeCaduceus svg {
    width: 80px;
}

.uiHomeSecurity {
    transform: scale(0.5, 0.5) translate(-80px, 0px);
    position: absolute;
    bottom: -10px;;
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(109, 109, 109);
    fill: rgb(109, 109, 109);
}

.uiHomeMobile .uiHomeSecurity {
    color: #efefef;
    fill: #efefef;
}

.uiHomeBlurb {
    position: absolute;
    font-size: 30px;
    color: white;
    bottom: 8px;
    left: 300px;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    
}

.uiHomeMobile .uiHomeBlurbBrand {
    position: absolute;
    top: -45px;
    left: 6px;
}

.uiHomeMobile .uiHomeBlurb {
    white-space: normal;
    left: 30px;
    top: calc(max(50%, 300px));
    bottom: auto;
    width: 100%;
    font-size: 20px;
}

.uiHomeBlurbBrand {
    font-size: 40px;
}

date-input-polyfill {
    border-radius: 0;
    padding: 10px !important;
    transform: translate(45px, -2px);
    width: 310px;
}

date-input-polyfill button {
    border-radius: 0;
}

date-input-polyfill button:focus {
    outline: none;
}

date-input-polyfill input:focus {
    outline: none;
}

date-input-polyfill select {
    font-size: 14px !important;
    color: #6d6d6d !important;
    padding-left: 15px;
    border: 0;
    cursor: pointer;
}

date-input-polyfill select:first-of-type {
    border: 0;
    font-size: 14px;
}

date-input-polyfill select:focus {
    outline: none;
}

date-input-polyfill td, date-input-polyfill th {
    font-size: 14px !important;
    color: #6d6d6d !important;
}

date-input-polyfill [data-selected] {
    background: rgb(37, 183, 68);
    color: white !important;
}

date-input-polyfill td[data-selected]:hover {
    background: #11D316;
    color: white !important;
}

date-input-polyfill button {
    background: #f15a24;
    color: white !important;
    border: 0;
}

date-input-polyfill button:hover {
    background: #f77b24;
    color: white !important;
}

input[date]::-ms-clear {
    width: 0;
    height: 0;
}

.uiInputFieldField {
    height: 45px;

}

.uiInputFieldDatePicker {
    width: 100%;
    position: relative;
    max-height: 45px;
    min-height: 45px;
    position: relative;
}


.uiInputFieldDatePicker:hover {
    z-index: 3;
}

.uiInputFieldDatePicker input {
    display: none;
}

.uiInputFieldDateInput .mbsc-dt-month,.mbsc-sc-itm {
    font-size: 14px !important;
    font-family: Verdana;
    color: #6d6d6d;
}

.mbsc-sc-itm {
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    padding: 0;
}


.mbsc-sc-itm-sel:focus {
    background: #B6EEFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
}

.mbsc-sc-itm:hover {
    background: #B6EEFF !important;
}

.mbsc-mobiscroll .mbsc-sc-whl-l {
    border: 0 !important;
}

.mbsc-mobiscroll .mbsc-sc-whl-c {
    /*margin-top: -20px !important; */
}

.mbsc-mobiscroll .mbsc-sc-whl-w {
    min-width: 0px !important;
    margin: 0;
}

.mbsc-mobiscroll .mbsc-sc-whl-gr {
}

.uiInputFieldField > div.mbsc-fr.mbsc-mobiscroll.mbsc-fr-inline.mbsc-dt.mbsc-sc.mbsc-no-touch.mbsc-fr-nobtn > div > div {
    background: transparent !important;

}

.uiInputFieldDurationField .mbsc-mobiscroll .mbsc-sc-whl-w {

}

.mbsc-dt {
}

.mbsc-dt input {
   
}

.uiInputFieldDatePicker .mbsc-fr-w {
   width: 150px !important;
   min-width: 0px !important;
   transform: translate(0, 0px);   
   background: transparent;
   pointer-events: none;
}

.uiInputFieldDatePicker:hover .mbsc-fr-w {
    pointer-events: auto;
}


.uiInputFieldDatePicker .uiInputFieldTimePickerClip  {
    bottom: calc(-53px);
    clip: rect(53px, 135px, 98px, 0px);     
}

.uiInputFieldTimePickerInvalid {
/*    text-decoration: line-through; */
    background: rgb(255, 183, 173);
}

.uiInputFieldDurationField  {
    position: relative;
    width: 100%;
    height: 45px;
    z-index: 1;
}

.uiInputFieldTimePicker  {
    width: 100%;
    position: relative;
    max-height: 45px;
    min-height: 45px;
    height: 45px;
}

.uiInputFieldTimePickerClip  {
    bottom: calc(-56px);
    clip: rect(50px, 135px, 95px, 0px);  
    width: 120px;
    position: absolute;
    z-index: 2;
}

.uiInputFieldTimePickerClip:hover  .mbsc-sc-itm {
    color: rgb(180, 180, 180);
}

.uiInputFieldTimeInputOutline {
    top: 0;
    left: 0;
    position: absolute;
    height: 44px;
    width: 119px;
    transform: translate(-1px, 95px);
    pointer-events: none;
    display: none;
    /*border: 1px solid  rgb(33, 161, 196); */
    border-radius: 1px 1px 1px 1px;
}

.uiInputFieldTimeInputGradient {
    top: 0;
    left: -1;
    position: absolute;
    height: 100%;
    width: 119px;
    pointer-events: none;
    display: none;
    border-radius: 1px 1px 1px 1px;
/*    background: linear-gradient(to bottom, rgb(243, 254, 255) 0%, rgb(243, 254, 255, 0) 33.3%, rgb(243, 254, 255, 0) 66.6%, rgb(243, 254, 255) 100%); */
}

.uiInputFieldTimePicker:hover .mbsc-sc-itm:hover {
    color: #444444 !important;
}

.uiInputFieldTimePicker:hover .mbsc-sc-itm-sel {
    color: #444444;
}

.uiInputFieldDatePicker:hover .mbsc-sc-itm-sel {
    color: #444444 !important;
}

.uiInputFieldDatePicker:hover  .mbsc-sc-itm {
    color: rgb(180, 180, 180);
}

.uiInputFieldTimePicker:hover .uiInputFieldTimeInputOutline {
    display: block;
}

.uiInputFieldTimePicker:hover .uiInputFieldTimeInputGradient {
    display: block;
}

.uiInputFieldDateTimePickerContainer {
    position: absolute;
    height: calc(45px * 5);
    width: 100%;
    background: red;
    top: -37.5px
}

.uiInputFieldTimePickerDrag .uiInputFieldTimePickerClip {
    clip: auto;
    box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.11);
    background: rgb(243, 254, 255, 0.95);
}

.uiInputFieldTimePicker:hover .uiInputFieldTimePickerClip {
    clip: auto;
    box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.11);
    background: rgb(243, 254, 255, 0.95);
}

.uiInputFieldDatePicker:hover .uiInputFieldTimePickerClip {
    clip: auto;
    box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.11);
    background: rgb(243, 254, 255, 0.95);
}


.uiInputFieldTimePickerClip:hover {
    clip: auto;
    box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.11);
    background: rgb(243, 254, 255, 0.95);
}

.uiInputFieldTimePickerInvalid:hover .uiInputFieldTimePickerOutline {
    background: rgb(255, 183, 173);
}

.uiInputFieldTimePicker .mbsc-fr-w {
   width: 100px !important;
   min-width: 0px !important;
   transform: translate(0, -3px);
   background: transparent;
   padding-right: 35px;
   pointer-events: none;

}

.uiInputFieldTimePicker:hover .mbsc-fr-w {
   pointer-events: auto;
}

.uiInputFieldTimePicker input {
    display: none;
    height: 0;
    width: 0;
    border: 0;
}

.uiInputFieldTimePicker .mbsc-sc-whl-w {
    min-width: 0px !important;
    margin: 0;
}

.mbsc-fr-inline .mbsc-fr-popup {
    position: relative;
    z-index: 10;
}

@keyframes spin { 100% { transform:rotate(360deg); } }

.uiNiceButtonIconBusy {
    animation: spin 1s linear infinite;
}

.uiInputFieldPhoneInputField {
    display: flex;
    position: relative;
    max-width: 405px;
}

.uiInputFieldPhoneInputCountryCode {
    min-height: 45px;
    min-width: 45px;
    font-size: 14px;
    color: #666666;
    margin-left: 22.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

.uiInputFieldFieldPhone {
    overflow: visible;
}

.uiInputFieldFieldPhone .uiSelectionList {
    position: absolute;
    height: calc(45px * 7);
    overflow-y: auto;
    z-index: 10;
    color: #666666;
}

.uiHomeMain .uiInputFieldPhoneInputField input {
    padding-left: 3px;
}

.uiInputFieldPhoneInputCountryCode:hover {
    background: #B6EEFF;
}

.uiNiceButtonOof {
    background: rgb(184, 38, 26);
}

.uiNiceButtonOof:hover {
    background: #CA0000;
}

.uiNiceButton .uiOKCancelOof {
}

.uiHomeViewButtonContainer .uiOKCancel {
    width: calc(100% - 22.5px);
    margin-top: 60px;
}

.uiHomeViewButtonContainer .uiOKCancelOKIcon {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiHomeViewButtonContainer .uiOKCancelOKIcon div {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiHomeViewButtonContainer .uiOKCancelOKIcon svg {
    height: 25px;
    width: 25px;
    display: flex;
    fill: white !important;
}

.uiHomeViewButtonContainer .uiOKCancelOKIcon .g_green {
    fill: #34a853;
}


.uiHomeViewButtonContainer .uiOKCancelOK:hover .g_green {
    fill: #34a853;
}

.uiHomeViewButtonContainer .uiOKCancelBusy svg {
    height: 45px;
    width: 45px;
}

.uiHomeViewButtonContainerBackContinue {
    width: 427.5px;
}

.uiHomeViewButtonContainerBackContinue .uiNiceButton {
    width: calc(100% - 45px - 30px);
    max-width: calc(100% - 45px - 30px);
    padding-right: 30px;
    flex-grow: 0;
}

.uiInputField .fileLabel {
    position: absolute;
    margin-left: 22.5px;
    cursor: pointer;
    font-size: 14px;
    color: #6d6d6d;
    z-index: 10;
}

.uiInputField .fileLabel:focus {
    outline: none;
    caret-color: transparent;
}

.uiInputFieldFileInput {
    visibility: hidden;
}

.uiHomeViewGoogleSignIn {
    display: none;
}

.fdPagePopup .uiScheduleAppointment.uiSignIn  {
    height: 100% !important;
}
.fdPagePopup .uiScheduleAppointment.uiSignIn .uiScheduleAppointmentBody {
    height: 100% !important;
}

.fdSignIn {
    top: 45px;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fdSignInPopupBump {
    position: absolute;
    top: -10px;
    left: 16px;
    height: 10px;
    width: calc(100% - 32px);
    background: #bababa;
}

.fdSignInHeader {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    background: rgb(245, 245, 245);
    border-radius: 0;
}

.fdSignIn .mbsc-ios.mbsc-btn {
    background: rgb(245, 245, 245);
}


.fdSignInHeaderTitle {
    cursor: default;
    font-weight: 600;
}

.fdSignInBody {
    height: 100%;
    width: 100%;
    background: rgb(239, 239, 244);
}

.fdSignInHeaderDone .mbsc-btn {
    font-weight: 600;
}

.fdOtherErr svg {
    height: 35px;
    fill:  rgb(224, 88, 80) !important;
}

.fdOtherErr div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fdOtherErr {
    margin-top: -20px;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: rgb(224, 88, 80);
    margin-left: 5px;

}

.uiLetsBuildAppMobile .uiInputFieldPhoneInputField {
    width: 100%;
    max-width: none;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFields .uiInputFieldField {
    width: 100%;
}

.uiLetsBuildAppMobile .uiInputFieldPhoneInputCountryCode {
    font-size: 16px;
}

.uiSignInLink {
    color: white;
    font-sie: 18px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}

.uiSignInLink:hover {
}

.fdUserProfileIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.fdUserProfileIconIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fdUserProfileIconIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fdUserProfileIconIcon svg {
}

.fdUserProfileIconIcon img {
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 50%;
}

.fdUserProfileIcon .profilelistitem-5 {
    display: none;
}

.fdUserProfileIcon .profilelistitem-2 {
    fill: white;
}

.fdUserProfileIconAdminTag {
    position: absolute;
    bottom: -6px;
}


.fdUserProfileIconAdminTag rect {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: #4d4d4d;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

.fdInputField {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdInputField input {
    font-size: 16px;
    background: transparent;
    background-color:transparent;
    color: #4d4d4d;
    border: 0;
    width: 100%;
}

.fdInputField input::placeholder {
    color: rgb(126, 126, 131);
}

.fdInputField input:focus {
    outline: none;
}

.fdInputFieldInput:-internal-autofill-selected {
    background-color:  transparent !important;
    -webkit-appearance: none;
    color: white !important;
}


.fdSearchFieldContainer {
}

.fdSearchField {
    position: relative;
    background: rgb(224, 224, 229);
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.fdSearchField input {
    font-size: 16px;
}

.fdSearchFieldIcon .cls-3 {
    display: none;
}

.fdSearchFieldIcon .cls-2 {
    fill: rgb(126, 126, 131);
}

.fdSearchFieldIcon {
    height: 30px;
    width: 30px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdSearchFieldIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdSearchFieldIcon svg {
    height: 45px;
    width: 45px;
}

.fdSearchFieldBusy svg {
    height: 24px;
    width: 24px;
}

.fdSearchField .fdInputField {
    width: calc(100% - 45px);
}

.fdSearchFieldClear div {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.fdSearchFieldClear svg {
    height: 45px;
    width: 45px;
}

.fdSearchFieldPopup {
    position: relative;
}

.fdScopeButtonsList {
    margin-top: 4px;
    width: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
    transform: translate(-8px, 0);
}

.fdScopeButtons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    flex-shrink: 1;
    flex-grow: 1;
    min-height: 20px;
    background: rgb(221, 221, 224);
    padding: 2px;
}

.fdScopeButton {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:  #17043d;
    cursor: pointer;
    text-align: center;
    padding-right: 5px;
    padding-left: 5px;
    white-space: nowrap;
}

.fdScopeButtonLeft {
    border-left: none;
}

.fdScopeButtonSelected {
    background: rgb(37, 183, 68);
    color: white;
}

.fdSearchFieldIconButton {
    position: absolute;
    right: 0px;
    top: 0px;
}

.fdPage {
    /*background: rgb(239, 239, 244);*/
    width: 100%;
    height: 100%;
}

.fdFastDetectClientIPad .fdPage {
    overflow-x: hidden;
}

.fdPageCamera {
    width: 100%;
    height: 100%;
    background: black;
    overflow: visible;
}

.fdPageScroller {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgb(239, 239, 244);
}

.fdPageScrollerTitle {
    minHeight: 25px;
    width: 100%;
    text-align: center;
}

.fdPageContent {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100% - 0px);
    background: rgb(239, 239, 244);

}

.fdPageBackground {
/*    background: black; */
    width: 100%;
    height: 100%;
}

.fdPageBack {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.fdPageBackLabel {
    color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 520;
}

.fdPageNextLabel {
    color: #007bff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 520;
    cursor: pointer;
}


.fdPageCancelLabel {
    color: #c90000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



.fdPageHeaderSpacer {
    width: 55px;
    height: 40px;
}


.fdPageTitle {
    font-weight: bold;
    font-size: 35px;
    text-align: left;
}

.fdPageSubtitle {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    color: rgb(112, 112, 112);
    line-height: 0.5;
}


.fdPageHeaderButtons {
    padding-top: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 15px;
}

.fdPageEmbed .fdPageHeaderButtons {
    padding-top: 0;
}

.fdPageEmbed .fdPageTitleRow {
    display: none;
}

.fdPageBackIcon {
    height: 35px;
    width: 33px;
    overflow: hidden;    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.fdPageBackIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.fdPageBackIcon svg {
    fill: #007bff;
    height: 45px;
    width: 45px;
}

.fdPageBackIcon .cls-2 {
    fill: #007bff;
    height: 40px;
    width: 40px;
}

.fdPageBackIcon .cls-3 {
    display: none;
}

.fdPageSearch {
    padding-top: 14px;
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 15px;
}

.fdPageCustomSearch {
    padding-top: 14px;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    padding-bottom: 15px;
}

.fdPageHeader {
}

.fdPageBody {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}

.fdPageTitleRow {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
}

.fdPageUserIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}

.fdSubpageContainer {
    height: 100%;
    width: 100%;
}

.fdPageSubpage {
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
}

.fdPagePopupBg {
    width: 100%;
    height: 100%;
}

.fdPagePopup {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.fdPagePopup:has(> .uiScheduleAppointmentPopup, > .uiGroup) {
    height: auto;
}


.fdPagePopupTop {
    height: 45px;
    width: 100%;
    left: 0;
    top: -45px;
    position: absolute;
    background: black;
}

.fdPagePopupBump {
    position: absolute;
    bottom: 0;
    left: 16px;
    height: 10px;
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    background: #bababa;
    display: none;
}

.uiLetsBuildAppAndroid.uiLetsBuildAppNative .fdPagePopupBump {
}
            
.fdPageTitleImage {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.fdPageTitleImage img {
    height: 85px;
    object-fit: cover;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 0;
  -webkit-text-fill-color: #4d4d4d;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

.fdInputField {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fdInputField input {
    font-size: 16px;
    background: transparent;
    background-color:transparent;
    color: #4d4d4d;
    border: 0;
    width: 100%;
}

.fdInputField input::placeholder {
    color: rgb(126, 126, 131);
}

.fdInputField input:focus {
    outline: none;
}

.fdInputFieldInput:-internal-autofill-selected {
    background-color:  transparent !important;
    -webkit-appearance: none;
    color: white !important;
}

.mbsc-ios .mbsc-err-msg {
    text-align: left !important;
}


.fdArrowField {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding-left: 15px;
    cursor: pointer;
    margin-bottom: 2px;
}

.fdArrowFieldArrow .cls-3 {
    display: none;
}

.fdPageFooter {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.lbSwipePages { display:flex; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.lbSwipePages::-webkit-scrollbar { display:none; }
.lbSwipePagesLocked { overflow-x:hidden; }
.lbSwipePage { flex:0 0 100%; min-width:0; scroll-snap-align:start; }
.lbSwipePagesLocked .lbSwipePage[aria-hidden="true"] { visibility:hidden; }

.uiMe {
    width: 100%;
    background: white;
    height: 100%;
    overflow: hidden;
}

.uiMeTitle {
    position: relative;
    top: 0;
    left: 0;
    height: 45px;
    min-height: 45px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding-left: 22.5px;
    color: #4d4d4d;
    cursor: default;
    font-size: 18px;
    font-weight: bold;
    z-index: 1;
}

.uiMeBodyContainer {
    position: absolute;
    top: 30px;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: calc(100% - 30px);
    max-height: calc(100%  - 30px);
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.uiMeActivity {
    margin-left: 22.5px;

    display: flex;
    flex-wrap: wrap;
}

.uiLetsBuildAppMobile .uiMeActivity {
    margin-left: 0px;
    max-width: 100vw;
}

#todo > .uiMeCardContent {
    box-shadow: none;
}

#todo .uiSideListHeader {
    background: none;
}

#todo .uiSideListHeaderSearchField {
    padding: 0;
    margin: 0;
}


.uiMeBodyContainerNoScroll {
    width: 100%;
    max-height: 100%;
}

.uiMeBodyContainerNoScrollTodo {
    overflow: hidden;
}

.uiMeBodyContainerNoScroll .uiMeFeed {
    overflow-y: hidden;
}

.uiLetsBuildAppMobile .uiMeBodyContainerNoScroll .uiMeFeed {
    max-height: calc(100% - 40px);
}


.uiMeBody {
    display: flex;
}

.uiMeBody1Column {
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    min-height: 100%;
}

.uiMeBody1Column .uiDeviceSetup {
    max-width: 100%;
    max-height: 100%;
}


.uiMeBody1Column .uiMeCardContent {
    max-width: 100%;
    width: 100%;
}

.uiMeBody1Column .uiMeCardInsets {
    max-width: calc(100% - 45px);
    width: calc(100% - 45px);
}

.uiMeBodyColumn1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    height: 100%;
}

.uiMeBodyColumn2 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.uiLetsBuildAppIPad .uiMeBody1Column {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}



#todo {
    grid-column: 1;
    grid-row:  1;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

#contactLink {
    grid-column: 2;
}

#businessSetup {
    grid-column: 2;
    max-width: 500px;
}

#me-column2 {
    grid-row: 1;
    grid-column: 2;
}

.uiDeviceSetup {
    grid-column: 2;
}

.uiMeFeed {
    height: 100%;
    overflow: hidden;
    margin-bottom: -15px;
}

.uiMeFeedEmpty {
    font-size: 14px;
    cursor: default;
    color: #4d4d4d;
    padding-left: 15px;
}

.uiMeFeed .uiChatMessages {
    height: 100%;
    max-height: none;
    padding-top: 0;
    margin-top: 0;
}


.uiMeFeed .uiChatMarginBottom {
    height: 100%;
    justify-content: flex-start;
    margin-bottom: 0;
}


.uiMeContactBottomLayer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uiMeContactAsset {
    padding-top: 15px;
    height: 100%;
}

.uiMeDeviceSetupContainer {
    display: inline-block;
}

.uiMeDeviceSetup {
    display: inline-block;
}


.uiMeContactAssetImage {
    display: flex;
    width: 100%;
    display: none;
}

.uiMeContactAssetImage img {
    width: 100%;
    height: 100%;
}

#businessSetup .uiMeContact {
    padding: 0;
    width: 100%;
}

.uiMeContact {
    display: inline-block;
    position: relative;
    padding: 22.5px;
    padding-bottom: 0px;
    padding-top: 0px;
    width: calc(100% - 45px);
    max-width: 408px;
}

.uiChat .uiMeContact {
    padding: 0;
    width: 100%;
}

.uiMeContactBusiness .uiMeContactText {
    padding-top: 15px;
}

.uiMeContactText2 {
    margin-top: 15px;
    font-size: 14px;
    color: #4d4d4d;
    cursor: default;
    text-align: left;
    width: 100%;
}

.uiMeContactText {
    font-size: 14px;
    color: #4d4d4d;
    cursor: default;
    text-align: left;
    width: 100%;
}

.uiMeContactLink {
    padding-top: 15px;
    text-align: left;
    font-size: 14px;
    color: #28A0E5;
    flex-shrink: 1;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 22.5px;
}

.uiMeContactNoLink {
    height: 15px;
    width: 100%;
}

.uiMeContactContainer {
    width: 300px;
    background: white;
}

.uiMeContactButtons {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.uiMeContactSkipStripe {
    width: 100%;
    margin-top: 5px;
}

.uiMeContactText2 {
    font-size: 14px;
    color: #4d4d4d;
    cursor: default;
    text-align: left;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 10px;
}

.uiMeConnectToStripe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.uiMeWhoopConnect {
    max-width: 500px;
}

.uiMeWhoopButtonContainer {
    padding-top: 5px;
    padding-bottom: 0px;
    /*
    padding-left: 22.5px;
    padding-right: 22.5px;
*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 45px);
    transform: translate(22.5px, 0);

}

.uiMeWhoopButtonContainer .uiOKCancelOK {
    width: 100%;
}

.whoopLinked .uiOKCancelOK {
    background: rgb(184, 38, 26);
}


.uiMeWhoopButtonContainer svg {
    height: 45px;
    width: 45px;
    transform: scale(.8, .8);
}

.uiMeStripeButtonContainer .uiOKCancelOK {
    background: rgb(53, 154, 213);
    width: 100%;
}

.uiMeStripeConnectStatus {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 45px);
    box-sizing: border-box;
    margin: 12px 22.5px 0;
    padding: 8px 12px;
    border: 1px solid #bac6c1;
    background: white;
    color: #4d4d4d;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}

.uiMeStripeConnectStatus .uiIcon { flex: 0 0 45px; }
.uiMeStripeConnectStatus svg { fill: rgb(53, 154, 213); }



.uiMeStripeConnectMessage {
    font-size: 14px;
    color: #4d4d4d;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 10px;
}

.uiMeStripeConnectMessage {
    text-align: left;
    padding-bottom: 10px;
}

.uiMeStripeButtonContainer {
    padding-top: 5px;
    padding-bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.uiChat uiMeStripeButtonContainer {
    width: calc(100% - 45px);
}

.uiMeStripeConnectErrorsText {
    padding-top: 5px;
    font-size: 14px;
    color: #4d4d4d;
    padding-bottom: 5px;
}

.uiMeStripeConnectErrorsText2 {
    font-size: 14px;
    color: #4d4d4d;
    padding-bottom: 10px;
}

.uiMeStripeConnectError {
    font-size: 14px;
    color: rgb(184, 38, 26);
    padding-bottom: 10px;
}

.uiMeStripeConnectErrors {
    box-sizing: border-box;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid #bac6c1;
    background: white;
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.uiMeStripeConnectErrors > .uiIcon {
    float: left;
    margin-right: 8px;
}

.uiMeStripeConnectErrors svg {
    fill: rgb(184, 38, 26);
}

.uiMeCardTitle {
    color: #4d4d4d;
    font-size: 14px;
    height: 40px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: bold;
    margin-left: 22.5px;
}

.uiMeFeedContainer {
}

.uiMeFeedMessagesContainer {
    width: 100%;
    margin-top: 10px;
    height: 100%;
}



.uiMeFeedMessages {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#todo {
    height: calc(100% - 45px);
}


#todo .uiMeCardContent {
    height: 100%;
}

.uiMeFeedMessagesContainer .uiChatMessagesContainer {
    padding-bottom: 15px;
    width: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

#todo .uiChatMessagesContainer {
}

.uiMeFeedMessagesContainer .uiChatMessageLeft {
}

.uiMeFeedMessagesContainer .uiAppointmentWith {
    min-width: 100px;
    max-width: 100px;

}
.uiMeFeedMessagesContainer .uiAppointmentWithName {
    white-space: normal;
    font-size: 14px;
    text-align: center;
}

.uiMeFeedMessagesContainer .uiAppointmentChat {
}

.uiMeFeedMessagesContainer .uiChat {
    background: transparent;
}

.uiMeFeedMessagesContainer .uiChatAppointmentContainer {
    max-width: calc(min((100vw - 270px - 60px)/2, 408px) - 45px);
}

.uiMeFeedMessagesContainer .uiChatAppointmentContainer {
    max-width: calc(min((100vw - 270px - 60px)/2, 408px) - 45px);
}

.uiMeFeedMessagesContainer .uiSubscriptionChat {
    max-width: 100%;
}

.uiMeFeedMessagesContainer .uiChatMessages {
    background: transparent;
}

.uiMeFeedMessagesContainer .uiChatMessageCenter {
    width: calc(100% - 0px);
    min-width: auto;
    max-width: none;
}

.uiMeFeedMessagesContainer .uiChatMessage {
    max-width: calc(min((100vw - 270px - 60px)/2, 408px) - 45px);

}

.uiMeFeedMessagesContainer .uiChatNewContact {
    min-width: calc(min((100vw - 270px - 60px)/2, 408px) - 45px);
}

.uiMeFeedMessagesContainerIPad .uiChatAppointmentContainer {
    max-width: calc(min(100vw - 65px, 420px));
}

.uiMeFeedMessagesContainerIPad .uiChatMessage {
    max-width: 100%;
}

.uiMeFeedMessagesContainerIpad .uiChatNewContact {
    min-width: 100%;
}

.uiMeFeed {
    width: 100%;
}

.uiMeCard {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-left: 22.5px;
    margin-right: 22.5px;
    width: calc(100% - 45px);
    margin-top: 15px;
    margin-bottom: 10px;
}

.uiMeCardHeader {
    width: 100%;
    display: flex;
    align-items: center;
    justifiy-content: center;
}

.uiMeCardIcon svg {
    width: 35px;
    height: 35px;
    margin-top: 10px;
    margin-left: 22.5px;
    margin-right: -10px;
}

.uiMeCardContent {
    background: white;
    box-shadow: none;
    padding: 0px;
    padding-top: 0px;
    width: min((100vw - 270px - 65px)/2, 408px);
    max-width: min((100vw - 270px - 65px)/2, 408px);
    height: 100%;
}

.uiMeCardContent .uiSideListHeader {
    padding-left: 22.5px;
    padding-right: 22.5px;
}

.uiMeCardContent .uiSideListHeaderTitle {
    padding-left: 0;
}

.uiMeCardContent .uiSideListHeaderSearchField input {
    padding-left: 0;
}

.uiMeCardBody {
    height: 100%;
    padding-bottom: 22.5px;
}

#todo .uiMeCardBody {
    height: calc(100% - 69px);
}

.uiLetsBuildAppMobile #todo .uiMeCardBody {
    height: 100%;
    overflow: hidden;
}


.uiMeStripeConnected {
    width: 100%;
}

.uiMeStripeConnected .uiMeStripeButtonContainer {
    padding-bottom: 15px;
    padding-top: 0px;
}

.uiMeStripeOptOut {
    margin-top: 15px;
}


.uiMeStripeConnectedBlurb {
    font-size: 14px;
    color: #4d4d4d;
    padding-top: 0px;
    width: 100%;
    cursor: default;
    height: auto;
    line-height: 20px;
    margin-bottom: 8px;
}

.uiSettingsPayments .uiMeStripeConnectedBlurb {
    color: rgb(243, 254, 255);
    box-sizing: border-box;
    padding-left: 30px;
    padding-top: 14px;
    line-height: normal;
    margin-bottom: 0;
}

.uiSettingsPayments .uiMeStripeConnectStatus {
    width: 100%;
    margin: 12px 0 0;
}

.uiMeLinkTabContent {
    margin-left: 22.5px;
}

:is(.uiLetsBuildAppIPad, .uiLetsBuildAppMobile) .uiMeTab {
    padding: 0;
}

.uiMe .uiSideListHeaderSearchField input {
    max-width: none;
    min-width: 100%;
}

.uiLetsBuildAppMobile .uiMeLinkTabContent {
    margin-left: 0;
}

.uiMeContactLinkTabs {
    display: flex;
    width: 100%;
    display: none;
}

.uiMeContactLinkTab {
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    height: 45px;
    position: relative;
    color: #4d4d4d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    cursor: pointer;
}

.uiMeContactLinkTabText {
    width: 100%;
    max-width: calc(100% - 10px);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.uiMeContactLinkTabSelected {
    color: white;
    background: rgb(37, 183, 68);
}


.uiMeContactLinkTabLeft .uiMeContactLinkArrow {
    right: 0px;
}

.uiMeContactLinkTabRight .uiMeContactLinkArrow {
    left: 0px;
}

.uiMeContactLinkTabSelected .uiMeContactLinkArrow {
    visibility: visible;
}

.uiMeContactLinkArrow {
    position: absolute;
    top: 44px;
    visibility: hidden;
    display: none;
}
.uiMeContactLinkArrow svg {
    fill: rgb(37, 183, 68); 
    width: 45px;
}


.uiMeContactText {
    width: 100%;
    padding-top: 5px;
}


.uiMeCardInsets {
    padding-left: 22.5px;
    padding-right: 22.5px;
    max-width: calc(min((100vw - 270px - 60px)/2, 408px) - 45px);
}

.uiMeTabs {
    margin-top: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 45px);
    height: 45px;
    box-shadow: none;
    margin-left: 22.5px;
    margin-right: 22.5px;
    background: white;
}


.uiMeTab {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 100%;
    cursor: pointer;
}



.uiMeTabIcon {
    height: 45px;
    width: 45px;
}

.uiLetsBuildAppMobile .uiMeTabIcon {
    height: 35px;
    width: 35px;
}

.uiMeTabIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.uiMeTabIcon svg {
    height: 100%;
    width: 100%;
}

.uiMeTabLabel {
    color: #999999;
    font-size: 14px;
    cursor: pointer;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 550;
    text-align: center;
    padding-left: 0px;
    padding-right: 5px;
}

.uiMeTabSelected {
    background: rgb(37, 183, 68);
    cursor: default;
}

.uiMeTabSelected svg {
    fill: white;
}


.uiMeTabSelected .uiMeTabLabel {
    color: white;
}


.uiMeTab .uiSideListContactUnread {
    position: absolute;
    right: 0px;
}

.uiLetsBuildAppMobile .uiMeTab .uiSideListContactUnread {
    min-width: 12px;
}

.uiMeReviewBAA {
    margin-bottom: 15px;
}

.uiMeBAA {
    position: fixed;
    top: 70px;
    left: calc((100vw - 640px)/2);
    z-index: 300;
    width: 640px;
    height: calc(100vh - 320px); 
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    flex-direction: column;
    filter: none;
}

.uiMeBAAHeaderContainer {
    width: 100%;
    min-height: 112px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    background: white;
}

.uiMeBAAHeader {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    color: #4d4d4d;
    font-size: 14px;
    margin-bottom: 10px;
}

.uiMeBAAHeaderTitle {
    margin-bottom: 5px;
}

.uiMeBAAHeaderIcon svg {
    height: 45px;
    width: 45px;
    fill: #4d4d4d;
}

.uiMeBAAClose {
    position: absolute;
    top: 0px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 45px;
    cursor: pointer;
}

.uiMeBAAClose div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    width: 45px;
}

.uiMeBAAClose svg {
    height: 45px;
    fill: #4d4d4d;
}

.uiMeBAABody {
    height: 100%;
    width: 100%;
    background: rgb(33, 161, 196);
}

.uiMeBAAFooter {
    width: calc(100% - 45px);
    background: rgb(33, 161, 196);
    padding: 22.5px;
}

.baa h1{
    font-size: 16px;
    display: none;
}

.baa {
    font-size: 14px;
    margin-top: 20px;
    height: calc(100% - 40px);
    background: white;
    padding: 20px;
    padding-top: 0px;
    width: calc(100% - 40px);
    overflow-y: auto;
}

.whoopLogo {
    width: 100%;
    display: none;
}

.whoopLogo svg {
    width: 100%;
    height: 100%;
}

.uiMeContainer .fdPageContent {
    background: white;
}

.uiMeContainer .fdPageScroller {
    background: white;
}

.uiMeTabsContainer {
    height: 100%;
    width: 100%;
}

.uiMeTabsContent {
    height: 100%;
    width: 100%;
}

.uiMeTabsContentAll {
    height: 100%;
    width: 100%;
}

.uiMeTabsContentAllTodo {
    overflow: hidden;
}

.uiMeTabsContainer .uiActiveContactCalendar {
    max-height: 100%;
}

.uiMeTabPlans {
    width: calc(100% - 22.5px);
    margin-left: 22.5px;
}

.uiMeTabSettings {
    width: 45px;
    max-width: 45px;
    min-width: 45px;
}

.uiWorkoutPlan .mbsc-label {
    min-width: 50vw;
}

.uiMeConnectWithings img {
    filter: brightness(1.4);
    opacity: 1;
}

.uiLetsBuildAppMobile #todo {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.uiWorkoutCardList {
    margin-left: 22.5px;
    width: calc(100% - 22.5px);
}

.uiLetsBuildAppMobile .uiWorkoutCardList {
    overflow-y: auto;
    overflow-x: hidden;
}

.uiMeWorkoutCardScroller {
    /* padding-top: 22.5px;
    padding-bottom: 22.5px; */
}

.uiLetsBuildAppMobile .uiWorkoutCardList {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    padding-bottom: 0;
    margin-bottom: 0;
}

.lbMobileMainTop .uiWorkoutCardList .uiCalendarSearch {
    width: calc(100% - 45px);
    transform: translate(12.5px, 0);
}


.uiWorkoutCardList .uiChatWorkoutMediaUpload .uiOKCancel {
    max-width: calc(408px);
}

.uiWorkoutCardList .uiInputFieldLabel {
    color: #6d6d6d;
    margin-bottom: 2px;
    margin-top: 5px;
    margin-left: 15px;
}

.uiScheduleAppointmentRecentWorkoutCardMessage {
    margin-left: 40px;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 10px;
}

.uiScheduleAppointmentRecentWorkoutCardMessage .uiWorkoutCardMessageName {
    margin-left: 8px;
}

@media (hover:hover) {

.uiMeStripeButtonContainer .uiOKCancelOK:hover {
    background: #28A0E5;
}

.uiMeContactLinkTab:hover {
    background-color: #B6EEFF;
}

.uiMeContactLinkTabSelected:hover {
    background: #11D316; 
}

.uiMeContactLinkTabSelected:hover .uiMeContactLinkArrow svg {
    fill: #11D316; 
}

.uiMeTabSelected:hover {
    background: rgb(37, 183, 68) !important;
}

.uiMeTab:hover {
    background: #B6EEFF;
    color: #666666;
}

.whoopLinked .uiOKCancelOK:hover {
    background: #CA0000
}

}

.uiMeTabIcon svg {
    fill: #999999;
}

.uiMeTabSelected .uiMeTabIcon svg {
    fill: white;
}

.uiMeTabWorkouts svg {

}

.uiLetsBuildAppMobile .uiMeTabWorkouts svg {

}

.uiMeTabs .uiMeTabMe svg {

}

.uiMeTabs .uiMeTabTo-do svg :is(.a177ac50-16e9-4488-a3a6-fb27c96c4285,.b8c138a2-df8f-4345-8a7d-dcf931794d97,.af5fbea1-6fa9-4288-b973-b835cd9af8a9) {
    fill: transparent;
}

.uiMeTabs .uiMeTabTo-do svg {
    height: 42px;
}

.uiMeTabs .uiMeTabTo-do svg .a57dc8b7-397a-4872-86e3-44ca0050b48a {
    fill: #999999;
}

.uiMeTabSelected.uiMeTabTo-do svg .a57dc8b7-397a-4872-86e3-44ca0050b48a {
    fill: white;
}

.uiMeTabSelected.uiMeTabTo-do svg :is(.a177ac50-16e9-4488-a3a6-fb27c96c4285,.b8c138a2-df8f-4345-8a7d-dcf931794d97,.af5fbea1-6fa9-4288-b973-b835cd9af8a9) {
    fill: transparent;
}

.react-pdf__Document {
    width: 100% !important;
}

.react-pdf__Page {
    display: flex;
    justify-content: center;
    width: 100%;
}

.react-pdf__Page__svg {
    width: 100% !important;
    height: auto !important;
    max-width: calc(min(900px, 100vw))
}

.react-pdf__Page__annotations {
    display: none;
}

.react-pdf__Page__textContent {
    display: none;
}

.react-pdf__Page svg {
    width: 100% !important;
    height: auto !important;
}

.react-pdf__Document {
    width: 100%;
    min-height: 100%;
    height: auto;
}


.uiPDFLoading {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiLetsBuildAppMobile .uiPDFLoading svg g {
    stroke: white;
}

.react-pdf__Page__svg > svg > g > g:nth-child(1) > path {
    fill: #17043d;
}

.react-pdf__Page__svg > svg > g > g:nth-child(3) > path {
    stroke: #17043d !important;
}

.uiMeContactButtonsCreateGroup {
    margin-top: 15px;
}

.uiMeContactButtonsCreateGroup .uiOKCancelOK {
    background: rgb(0, 113, 187);
}

.uiMeContact.uiMeContactCompact {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 4px 16px 16px;
}

.uiMeContactCompact .uiMeContactButtonsCreateGroup {
    margin: 0;
}

.uiMeCardBody:has(> .uiMeContactCompact) {
    width: 100%;
    height: auto;
    padding: 0;
}

.uiMe .uiChatInputContainer {
}

.uiWorkoutCardList.uiScheduleAppointmentWorkoutRecentList {
    max-width: none;
    height: 100%;
}

.uiLetsBuildAppMobile .uiWorkoutCardList.uiScheduleAppointmentWorkoutRecentList {
    height: 100%;
}

.uiWorkoutCardListContent {
    max-width: 408px;
}

.slider {
    position: relative;
    font-size: 0px;
    height: 10px;
    transform: translate3d(0, 0, 0);
    display: flex;
    justify-content: center;
}

.dot-holders {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10px;
}

.uiLetsBuildAppWindows .dot-holders {
}

.dot-holder {
    width: 10px;
    height: 10px;
    background-color: lightGray;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.dot-holder-clickable {
    cursor: pointer;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #007bff;
    position: absolute;
    left: 1px;
    top: 1px;
    border-radius: 50%;
    transition: left 200ms ease-in; 
}


.uiSubscription {
    outline: 1px solid #bac6c1;
    outline-offset: -1px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    margin-right: 0px;
    margin-bottom: 20px;
    box-shadow: none;
    overflow: hidden;
    width: calc(min(100%, 400px));
    min-width: 0;
    cursor: pointer;
    position: relative;
    height: 100%;
    height: 210px;
}

.uiChatSubscription .uiOKCancel {
    max-width: 400px;
    
}

.uiSubscriptionNoButtons {
    height: calc(210px - 45px - 15px);
}

.uiSubscriptionChat {
    max-width: 362.5px;
    min-width: 0px;
}

.uiSubscriptionWithPayment {

}

.uiSubscriptionPast {
}

.uiSubscriptionClient {
}

.uiSubscriptionIndicator {
    min-width: 22.5px;
    width: 22.5px;
    background: gray;
    height: 100%;
    margin-right: 22.5px;
}

.uiSubscriptionIndicatorAccepted {
    background: rgb(37, 183, 68); 
}

.uiSubscriptionIndicatorDeclined {
    background: rgb(184, 38, 26);
}

.uiSubscriptionIndicatorInWaiting {
    background: #fbb03b;
}

.uiSubscriptionInfo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    font-size: 14px;
    height: 100%;
    width: 100%;
    min-width: 140px;    
    padding-bottom: 15px;
    position: relative;
}

.uiSubscriptionInfoId {
    font-size: 6px;
    color: #aaaaaa;
    position: absolute;
    bottom: 5px;
    left: 85%;
    font-family: Verdana;
    display: none;
}

.uiSubscriptionInfoOrganizer {
    font-size: 14px;
    color: rgb(0, 113, 188);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSubscriptionOrganizerCreds {
    font-size: 14px;
    color: #0071bc;
}

.uiSubscriptionWithCreds {
    font-size: 11px;
    color: #42a8a3;
}

.uiSubscriptionPaymentInfo {
}


.uiSubscriptionPaymentInfoStatus {
    font-size: 14px;
    color: rgb(0, 113, 188);
    background: white !important;
}

.uiSubscriptionPaymentInfoStatus.uiSubscriptionIndicatorDeclined {
    color: rgb(184, 38, 26)
}

.uiSubscriptionPaymentInfoAmount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(37, 183, 68); 
}

.uiSubscriptionPaymentInfoAmountNegative {
    /*color: rgb(184, 38, 26);*/
}

.uiSubscriptionResponseTime {
    font-size: 14px;
    color: rgb(0, 113, 188);
    white-space: nowrap;
}

.uiSubscriptionInfoTitle {
    font-weight: bold;
    color: black;
    font-size: 14px;
    margin-bottom: 15px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSubscriptionInfoDate {
    color: gray;
    font-size: 13px;
    padding-bottom: 10px;
}

.uiSubscriptionMonthly {
    color: gray;
    font-weight: normal;
    font-size: 13px;
}

.uiSubscriptionInfoDatePast {
    text-decoration: line-through;
}

.uiSubscriptionWith {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 20px;
    min-width: 100px;
    max-width: 100px;
    height: 100%;
}

@media not all and (pointer: coarse) {
.uiSubscriptionWith:hover {
    background: #B6EEFF;
}
}

.uiSubscriptionWithIcon {
    color: #d6d6d6;
    margin-bottom: 10px;
}

.uiSubscriptionWithName {
    color: #666666;
    font-size: 14px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSubscriptionStatusCanceled {
    font-size: 14px;
    white-space: nowrap;
    color: rgb(184, 38, 26);
}

.uiSubscriptionButtons {
    width: calc(100% - 22.5px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

.uiSubscriptionButtons .uiOKCancelOKIcon svg {
    height: 35px;
    width: 35px;
    transform: translate(5px, 5px);
}
.uiSubscriptionButtons.uiSubscriptionButtonsCancel .uiOKCancelOK {
    background: rgb(184, 38, 26);
}

.uiSubscriptionButtons.uiSubscriptionButtonsCancel .uiOKCancelOK:hover {
    background: #CA0000;
}

.uiSubscriptionButtons.uiSubscriptionButtonsCancel .uiOKCancelOKIcon svg {
    height: 45px;
    width: 45px;
    transform: none;
}

.uiSubscriptionPaymentMethod {
    font-style: italic;
    color: #666666;
    font-size: 13px;
}

.uiScheduleAppointmentPopup {
    top: 60px;
    bottom: 0;
    height: calc(100dvh - 60px);
    min-height: 0;
    overflow-y: auto;
    left: 0;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 24px 16px;
    animation: lbDialogRise 600ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
}

.uiScheduleAppointmentPopup > p:is([role='status'], [role='alert']) {
    box-sizing: border-box;
    width: 100%;
    max-width: 600px;
    margin: 0;
    padding: 16px 22.5px;
    color: #f3feff;
    font-size: 14px;
    line-height: 20px;
}

@keyframes lbDialogRise {
    from { transform: translateY(100dvh); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes lbDialogDismiss {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(32px); opacity: 0; }
}

.uiScheduleAppointmentPopup.uiDialogClosing {
    animation: lbDialogDismiss 600ms ease forwards;
}

.uiDialogClosing, .uiDialogClosing * {
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .uiScheduleAppointmentPopup, .uiScheduleAppointmentPopup.uiDialogClosing { animation: none; }
    .uiDialogClosing { opacity: 0; }
}

.uiScheduleAppointment {
    font-size: 14px;
    color: #4d4d4d;
    border: 1px solid #bac6c1;
    box-sizing: border-box;
    margin-top: 0;
    transform: translate(calc(255px / 2), 0);
    pointer-events: auto;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 375px;
    max-width: 100%;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    height: auto;
    max-height: calc(100dvh - 108px);
    flex-shrink: 0;
    overflow: hidden;
    background: #17043d;
}

.uiScheduleAppointment > .uiPage {
    width: 100%;
    height: auto;
    max-height: inherit;
}

.uiScheduleAppointmentMobile,
.uiScheduleAppointmentIPad {
    transform: none;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentPopup {
    z-index: 80;
}

.uiScheduleAppointmentBodyInvoiceFields {
    display: none;
}

.uiScheduleAppointmentHeader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    height: 100px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    line-height: 1.5em;
    background: white;
}

.uiScheduleAppointmentHeaderClose {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 45px;
    height: 45px;
}

.uiScheduleAppointmentHeaderClose svg {
    right: 0px;
    position: absolute;
    fill: #666666;
    height: 45px;
    width: 45px;
    cursor: pointer;
}

.uiScheduleAppointmentHeaderClose:hover {
    background:  #B6EEFF;
}

.uiScheduleAppointmentHeaderInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
            
.uiScheduleAppointmentHeaderIcon {
}

.uiScheduleAppointmentHeaderIcon svg {
    height: 45px;
    width: 45px;
    fill: #666666;
}

.uiScheduleAppointmentHeaderTitle {
}

.uiScheduleAppointmentHeaderDate {
}

.uiScheduleAppointmentBody {
    background: #17043d;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    overflow-y: auto;
}


.uiLetsBuildAppMobile .uiScheduleAppointmentBody {
    background-image: 
        linear-gradient(0deg, rgba(20,36,97,.99) 30%, rgba(20,36,97,0) 73%),
        url(/static/media/Hero_15x.593b7af28bd18127485c.png);
    background-position: 85% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.uiScheduleAppointment .uiScheduleAppointmentBody {
    line-height: 1.5em;
    text-align: center;
}

.uiScheduleAppointmentBodyWith {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;

}

.uiScheduleAppointmentClient .uiScheduleAppointmentBodyWith {
    margin-bottom: 0px;
}

.uiScheduleAppointmentBodyWithIcon {
    color: transparent;
    height: 45px;
    padding-bottom: 5px;
}

.uiScheduleAppointmentBodyWithName {
    font-size: 14px;
    font-weight: normal;
    color: white;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiScheduleAppointmentClientFields {
    height: 100%;
    width: 100%;
    color: white;
}

.uiScheduleAppointmentClientTitle {
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiScheduleAppointmentClientTime {
    font-size: 14px;
    padding-bottom: 15px;
}

.uiScheduleAppointmentBodyFields {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    width: calc(100% - 45px);
    height: auto;
}
.uiScheduleAppointmentBodyFieldWeight .uiInputField {
    width: 100%;
    position: relative;
    z-index: 0;
}

.uiScheduleAppointmentBodyFieldWeight .uiInputFieldIcon .scales {
    transform: scale(0.55, 0.55);
    transform-origin: center center;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFields {
}


.uiScheduleAppointmentBodyField .uiInputFieldLabel {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
}

.uiScheduleAppointmentBodyFields > .uiScheduleAppointmentBodyField:first-child .uiInputFieldLabel {
    padding-top: 0;
}

.uiScheduleAppointmentBodyFields .uiInputFieldField {
    width: calc(100% - 15px);
    padding-left: 15px;
}

.uiScheduleAppointmentBodyField .uiInputFieldInput {
    width: 100%;
}

.uiScheduleAppointmentBodyFields {
}

.uiScheduleAppointmentMembersBody {
    max-height: 220px;
    overflow-y: auto;
}

.uiScheduleAppointmentMember {
}

.uiScheduleAppointmentBodyFieldsTitle {

}

.uiScheduleAppointmentBodyFieldsError {
    color: rgb(255, 183, 173);
    font-size: 14px;
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding-top: 12px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiScheduleAppointmentBodyFieldsError:empty {
    display: none;
}

.uiScheduleAppointmentBodyButtons {
    width: calc(100% - 45px);
    margin-top: 16px;
    margin-bottom: 20px;
}

.uiScheduleAppointmentBodyButtons .uiOKCancel {
    max-width: none;
}

.uiScheduleAppointmentTodo {
    width: 100%;
}

.uiScheduleAppointmentTodoTask {
    position: relative;
    padding-right: 35px;
    max-width: calc(100% - 35px);
    background: rgb(244, 254, 255);
}

.uiScheduleAppointmentTodoTask textarea {
    margin-top: 0;
    font-size: 16px;
    padding-left: 30px;
}


.uiScheduleAppointmentTodoIcon {
    position: absolute;
    top: 0px;
    display: flex;
    height: 35px;
    width: 35px;
    right: 52.5px;
}

.uiScheduleAppointmentTodoIcon svg {
    height: 35px;
    width: 35x;
    fill: #17043d;
}


.uiScheduleAppointmentBodyFieldsTodo {
    width: calc(100% - 45px);
    transform: translate(22.5px, 0);
}

.uiScheduleAppointmentBodyFieldsTodo .uiScheduleAppointmentBodyField {
    width: 100%;
}

.uiScheduleAppointmentBodyFieldsTodo .uiScheduleAppointmentBodyField .fdRadioButton {
    font-size: 16px;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFieldsTodo .uiScheduleAppointmentBodyField .fdRadioButton {
    font-size: 16px;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiScheduleAppointmentBodyButtons {
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .fdPagePopup .uiScheduleAppointment {
    height: auto;
    max-height: calc(100dvh - 80px);
    overflow: hidden;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .fdPagePopup .uiPage {
    height: auto;
    max-height: inherit;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiPageFooter {
    position: static;
    bottom: auto;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiPageBody {
    height: auto;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .lbMobileWebPopup .uiScheduleAppointmentMealFoods {
    height: auto;
    max-height: none;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiScheduleAppointmentMealFoods {
    height: auto;
    max-height: none;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .lbMobileWebPopup .uiScheduleAppointmentMealFoodsList {
    height: auto;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiScheduleAppointmentMealFoodsList {
    height: auto;
}


:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiScheduleAppointmentBodyFieldSetsReps {
    display: flex;
    justify-content: center;
}



:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiScheduleAppointmentWorkoutOption {

}

.uiScheduleAppointmentWorkout .uiPageBody {
    height: 100%;
}

.uiLetsBuildAppDesktop .fdRadioButtonsTrack {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.uiLetsBuildAppDesktop .uiScheduleAppointmentWorkoutOrRecentTabs {
}


.uiScheduleAppointmentBodyFieldWorkoutDescription {
    height: calc(100% - 65px);
    margin-bottom: 0px;
    margin-top: 10px;
    background: rgb(244, 254, 255);
    display: flex;
    flex-direction: column;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFieldWorkoutDescription {
    height: calc(100% - 65px);
}


.uiScheduleAppointmentPaymentInfo {
    width: 100%;
    background: white;
    padding-bottom: 22.5px;
}


.uiScheduleAppointmentPaymentInvoiceClient {
    width: 100%;
    height: 100%;
}

.uiScheduleAppointmentPaymentInfoLoading {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    color: #666666;
    font-size: 14px;
    line-height: 1.5em;
    width: 100%;
}

.uiScheduleAppointmentPaymentInvoice {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    line-height: normal;
    background: white;
    min-width: 0;
    max-width: 100%;
    padding: 15px;
}

.uiScheduleAppointmentBodyFieldWorkoutDescription textarea {
    width: calc(100% - 40px);
    border: none;
    height: 100%;
    resize: none;
    padding: 10px;
    background: rgb(244, 254, 255);
    color: #6d6d6d;
    font-family: Arial;
    border-radius: 0;
    font-size: 14px;
    padding-left: 30px;
    height: calc(100% - 20px);
}


.uiLetsBuildAppMobile.uiLetsBuildAppWeb  .uiScheduleAppointmentBodyFieldWorkoutDescription textarea {

}


:is(.uiLetsBuildAppMobile,.uiLetsBuildAppIPad) .uiScheduleAppointmentBodyFieldWorkoutDescription textarea {
    font-size: 16px;
}

.uiScheduleAppointmentBodyFieldSelectDemoContainer {
    height: calc(100% - 370px);
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFieldSelectDemoContainer {
    height: calc(100% - 250px);
    width: 100%;
}

.uiScheduleAppointmentBodyFieldSelectDemo {
    margin-top: 10px;
    margin-bottom: -5px;
}

.uiScheduleAppointmentBodyFieldSelectDemo .fdRadioButtons {
    background: transparent;
}

.uiScheduleAppointmentBodyFieldWorkoutDescription textarea:focus {
    outline: none;
}

.uiScheduleGroupAppointment .uiScheduleAppointmentBodyInvoiceFields {
    display: none;
}

.uiScheduleAppointmentBodyFields .uiScheduleAppointmentPaymentInvoice {
    justify-content: flex-start;
    margin-top: 22.5px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: calc(100% + 45px);
    transform: translate(-22.5px, 0);
    padding-bottom: 22.5px;
}


.uiScheduleAppointmentPaymentInvoiceAmount {
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    color: rgb(37, 183, 68);
}

.uiScheduleAppointmentPaymentInvoiceDescription {
    font-size: 14px;
    color: #666666;
}

.uiScheduleAppointmentPaymentStatusInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uiScheduleAppointmentPaymentStatus {
    font-size: 14px;
    line-height: 20px;
    color: rgb(0, 113, 188);
}

.uiScheduleAppointmentPaymentMethod {
    background: #17043d;

    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 45px);
}


.uiScheduleAppointmentPaymentMethodIcon div {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiScheduleAppointmentPaymentMethodIcon svg {
    width: 45px;
    fill: white;
}

.uiScheduleAppointmentPaymentControl {
    padding-top: 15px;
    width: calc(100% - 45px);
}

.uiScheduleAppointmentPaymentControl .uiOKCancel {
    width: 100%;
}

.uiScheduleAppointmentBodyWithCreds {
    font-size: 14px;
    color: #c9e2e1;
}


.uiStripeClientConnectForm {
    box-sizing: border-box;
    min-width: 0;
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #17043d;

    padding: 0 12px;
    cursor: default;
}

.uiStripeConnectCardName {
    color: white;
    font-size: 14px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: default;
    white-space: nowrap;
    padding-left: 0;
}

.uiScheduleAppointmentRemoveCard {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    cursor: pointer;
    overflow: hidden;
}

.uiScheduleAppointmentRemoveCard:hover {
    background: #11CEED;
}

.uiScheduleAppointmentRemoveCard div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
}

.uiScheduleAppointmentRemoveCard svg {
    width: 45px;
    height: 45px;
    fill: white;
}

.uiStripeConnectFormCard {
    width: 100%;
}

.uiStripeConnectFormCard .StripeElement--webkit-autofill {
    background-color: #17043d !important;
    color: white;
}

.uiStripeConnectFormCard .InputElement-webkit-autofill {
    caret-color: white !important;
}

.uiStripeConnectFormCard input:-webkit-autofill {
    color: white !important;
    caret-color: white !important;
}

.is-autofilled .InputElement {
    color: white !important;
}


.uiScheduleAppointmentAttendeesExpanded {
    display: flex;
    align-item: center;
    flex-direction: column;
    justify-content: flex-start;
    width: calc(100% - 45px);
    margin-top: 10px;
    height: 100%;
}


.uiScheduleAppointmentAttendee {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background: white;
    margin-bottom: 5px;
    min-height: 45px;
    cursor: pointer;
}

.uiScheduleAppointmentAttendeeName {
    flex-grow: 1;
    color: #666666
}

.uiScheduleAppointmentAttendee:hover  {
    background:  #B6EEFF;
    color: #4d4d4d;
}

.uiScheduleAppointmentAttendeeIcon {
    margin-left: 10px;
    margin-right: 15px;
}

.uiScheduleAppointmentAttendeeExpand svg {
    width: 45px;
    height: 45px;
    fill: rgb(33, 161, 196);
    fill: #17043d;
}

.uiScheduleAppointmentAttendeeName {
    font-size: 14px;
}

.uiScheduleAppointmentAttendeeExpand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.uiScheduleAppointmentAttendeeExpand:hover {

}

.uiScheduleAppointmentAttendeeExpand div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.uiScheduleAppointmentAttendeesListExpanded {
    font-size: 14px;
    color: white;
    width: calc(100% - 45px);
    text-align: left;
    margin-left: 45px;
    margin-top: 10px;
    margin-bottom: -5px;
}

.uiScheduleAppointmentAttendeeDetails {
    width: calc(100% - 45px);
    height: 100%;
    margin-left: 21.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.uiScheduleAppointmentAttendeeDetails .uiScheduleAppointmentBodyWith {
    margin-bottom: auto;
    justify-content: flex-start;
}

.uiScheduleAppointmentAttendeeDetails .uiInputFieldField {
    width: 100%;
}

.uiScheduleAppointmentAttendeeDetails .uiInputFieldInput {
    width: 100%;
}

.uiScheduleAppointmentAttendeeDetails .uiScheduleAppointmentBodyInvoiceFields {
    margin-top: 22.5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.uiScheduleAppointmentAttendeeDetails .uiInputField {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.uiScheduleAppointmentAttendeeDetails .uiInputFieldAndLabel {
    width: 100%;
}

.uiScheduleAppointmentAttendeeDetails .uiScheduleAppointmentBodyField {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.uiScheduleAppointmentPage2 {
    display: flex;
    height: 100%;
    width: 100%;
}

.uiBodyFieldAutocomplete {
    position: relative;
}

.uiScheduleAppointmentMealFoods {
    position: relative;
    background: rgb(234, 254, 255);
    margin-top: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.uiScheduleAppointmentMealFoodsList {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: calc(40px * 4);
    overflow-y: auto;
}

.uiBodyFood {
    font-size: 13px;
    padding-left: 5px;
    padding-right: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #6d6d6d;
    display: flex;
    justify-content: space-between;
    position: relative;
    background: white;
    margin-bottom: 1px;
    width: calc(100% - 35px);
}

.uiBodyFoodClickable {
    cursor: pointer;
}

.uiScheduleAppointmentMeals .uiPage {
    background: #17043d;
}


.uiLetsBuildAppMobile .uiScheduleAppointmentMeals .uiPageBody {
    height: auto;
}


.uiScheduleAppointmentWorkout .uiPageBody {
    height: 100%;
}


.uiScheduleAppointmentBodyFieldsMeals {
    padding-top: 5px;
}

.uiScheduleAppointmentBodyFieldsWeight {
    min-height: 0;
}

.uiScheduleAppointmentBodyFieldMealSelection {
    margin-top: 15px;
}

.uiScheduleAppointmentBodyField .fdRadioButton {
    font-size: 14px;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyField .fdRadioButton {
    font-size: 13px;
}

.uiScheduleAppointmentBodyField .fdRadioButtons {
    background: rgb(234, 254, 255);
}

.uiScheduleAppointmentBodyField .fdRadioButtonsTrack {
}

.uiBodyFoodDelete {
    position: absolute;
    right: 0;
    height: 25px;
    width: 25px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.uiBodyFoodDelete div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 30px;
}

.uiBodyFoodDelete svg {
    height: 45px;
    width: 45px;
}

.uiBodyFoodDelete:hover {
    background:  #B6EEFF;
}

.uiBodyFoodName {
    overflow: hidden;
    whitespace: wrap;
    width: calc(100% - 4px);
    margin-right: 2px;
    margin-left: 2px;
}

.uiFoodBrandName {
    font-weight: bold;
}

.uiBodyFoodCal {
    white-space: nowrap;
    text-align: right;
}

.uiBodyFoodNameAndImage {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 5px;
    width: calc(100% - 5px);
}

.uiBodyFoodNameAndImage img {
    min-width: 25px;
    height: 25px;
    width: 25px;
    margin-right: 6px;
    object-fit: contain;
}

.uiBodyFieldAutocompleteResults {
    position: absolute;
    z-index: 10;
    width: calc(100% - 2px);
    top: 0px;
    display: flex;
    flex-direction: column;
    height: calc(45px * 3.5);
    overflow-y: auto;
    border: 1px solid #d6d6d6;
    background: white;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}

.uiLetsBuildAppDesktop .uiBodyFieldAutocompleteResults {
    height: calc(45px * 5);
}

.uiScheduleAppointmentBodyFieldsMeals .uiBodyFieldAutocompleteResults {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 220px;
    box-sizing: border-box;
}

.uiFoodSearchStatus {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 45px;
    padding: 4px 12px;
    color: #4d4d4d;
    font-size: 14px;
    text-align: left;
}

.uiFoodSearchStatus svg {
    display: block;
    flex: none;
    width: 45px;
    height: 45px;
    fill: #25b744;
}

.uiScheduleAppointmentMeals .uiBodyFood {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 60px 32px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    padding: 8px;
    border: 1px solid #bac6c1;
    margin-bottom: 6px;
    text-align: left;
}

.uiScheduleAppointmentMeals .uiBodyFoodNameAndImage {
    width: auto;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.uiScheduleAppointmentMeals .uiBodyFoodName {
    width: auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.uiScheduleAppointmentMeals .uiBodyFoodDelete {
    position: static;
    width: 32px;
    height: 32px;
}

.uiScheduleAppointmentMeals .uiBodyFoodCount {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    margin: 0;
}

.uiScheduleAppointmentMeals :is(.uiBodyFoodCountWhole, .uiBodyFoodCountFraction) {
    min-width: 0;
    margin: 0;
    transform: none;
}

.uiScheduleAppointmentMeals .uiBodyFoodCount select {
    position: static;
    width: 100%;
    height: 32px;
    opacity: 1;
    appearance: auto;
    border: 1px solid #bac6c1;
    background: #f2fdfe;
    color: #4d4d4d;
    font-size: 12px;
    box-sizing: border-box;
}

.uiScheduleAppointmentMeals .uiScheduleAppointmentMealFoods {
    background: transparent;
}

@media (max-width: 600px) {
    .uiScheduleAppointmentMeals .uiBodyFood {
        grid-template-columns: 72px minmax(0, 1fr) 32px;
    }
    .uiScheduleAppointmentMeals .uiBodyFoodCount {
        grid-column: 1;
        grid-row: 1 / span 2;
    }
    .uiScheduleAppointmentMeals .uiBodyFoodNameAndImage { grid-column: 2; }
    .uiScheduleAppointmentMeals .uiBodyFoodCal { grid-column: 2; text-align: left; }
    .uiScheduleAppointmentMeals .uiBodyFoodDelete { grid-column: 3; grid-row: 1 / span 2; }
}

.uiBodyFieldAutocompleteResult {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    cursor: pointer;
    min-height: 45px;
    max-height: 45px;
    padding-left: 22.5px;
    padding-right: 22.5px;
    width: calc(100% - 45px);
    margin-bottom: 1px;
    flex-wrap: nowrap
}

.uiBodyFieldAutocompleteResult:hover {
    background:  #B6EEFF;
}

.uiBodyFieldAutocompleteResultHomeMade {
    padding-left: 22.5px;
    min-height: 45px;
}

.uiBodyAutocompleteResultImage {
    height: 45px;
    width: 45px;
    margin-right: 15px;
}

.uiBodyAutocompleteResultImage img {
    height: 45px;
    width: 45px;
    mix-blend-mode: multiply;
    object-fit: contain;
}

.uiBodyAutocompleteResultName {
    font-size: 12px;
    color: #6d6d6d;
    width: 100%;
    display: flex;
    flex-grow: 2;
    width: calc(100% - 8px);
    margin-right: 8px;
}


.uiBodyAutocompleteResultCal {
    font-size: 12px;
    color: #6d6d6d;
    display: flex;
    flex-grow: 0;
    justify-content: flex-end;
    white-space: nowrap;
}

.uiBodyFieldAutocompleteResults .uiScheduleAppointmentBodyField {

}

.uiScheduleAppointmentBodyField .mbsc-control-w {
    color: white;
    color: rgb(234, 254, 255);
    font-size: 14px;
    -webkit-font-smoothing: auto;
    padding: 15px;
}

.uiScheduleAppointmentFoodSearch {
    position: relative;
}

.uiScheduleAppointmentFoodSearch svg {
    /* transform: scale(0.67, 0.67); */
}

.uiScheduleAppointmentUPC {
    position: absolute;
    height: 45px;
    width: 45px;
    right: 45px;
    top: 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiLetsBuildAppMobile.uiLetsBuildAppWeb .uiScheduleAppointmentUPC {
    display: none;
}

.uiScheduleAppointmentUPC:hover {
    background:  #B6EEFF;
}

.uiScheduleAppointmentUPC > div {
    height: 25px;
    width: 35px;
    overflow: hidden;
}

.uiScheduleAppointmentUPC div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiScheduleAppointmentUPC svg {
    transform: scale(0.21, 0.22);
}


.uiScheduleAppointmentMealTotalCalories {
    background: rgb(234, 254, 255);
    width: calc(100% - 30px);
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding-left: 15px;
    padding-right: 15px;
    color: #6d6d6d;
    padding-top: 5px;
    padding-bottom: 5px;
}

.uiLetsBuildAppSafari .uiScheduleAppointmentMealTotalCalories {
    height: 30px;
}

.uiBodyFoodCount {
    display: flex;
    margin-right: 2px;
    min-width: 45px;
}

.uiBodyFoodCountWhole {
    min-width: 14px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}


.uiBodyFoodCountDoubleDigits .uiBodyFoodCountWhole {
    min-width: 18px;
}    

.uiBodyFoodCountDoubleDigits {
    min-width: 48px;
}

.uiBodyFoodCount label {
    position: relative;
    font-size: 14px;
    padding-left: 2px;
    padding-right: 2px;
    pointer-events: none;
    touch-events: none;
    white-space: nowrap;
    height: 100%;
    width: 100%;
}

.uiBodyFoodCount label:hover {
    background:  #B6EEFF;
    cursor: pointer;
}

.uiBodyFoodCount select {
    pointer-events: auto;
    touch-events: auto;
    font-size: 16px;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border: none;
    appearance: none;
    cursor: pointer;
    opacity: 0.00001;
}

.uiBodyFoodCountFraction {
    transform: translate(0, -1px);
    margin-right: 3px;
    min-width: 32px;
}

.uiBodyFoodCountFraction label {
    font-size: 11px;
    text-align: left;
}

.uiLetsBuildAppAndroid .uiBodyFoodCountFraction label {

}

.uiLetsBuildAppAndroid select {
    transform: none;
    font-size: 11px;
}

.uiScheduleAppointmentOrganizerPageFooter {
    width: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    margin-left: 22.5px;
    margin-right: 22.5px;
}

.uiScheduleAppointmentOrganizerPageFooter .uiScheduleAppointmentBodyButtons {
    width: 100%;
}

.uiScheduleAppointmentBodyFieldRow {
    display: flex;
}

.uiScheduleAppointmentBodyRowSeparator {
    height: 100%;
    width: 8px;
}

.uiScheduleAppointmentBodyFieldVideo {
    width: 100%;
    display: flex;
    max-height: calc(100% - 65px);
    background: rgb(235, 254, 255, 1);
    overflow-y: auto;
    justify-content: center;
}

.uiScheduleAppointmentBodyFieldVideo video {
    max-width: 408px;
    width: 100%;
    object-fit: contain;
    background-color: rgb(235, 254, 255, 0) !important;
}

.uiScheduleAppointmentWorkoutOption .uiScheduleAppointmentBodyFieldVideo {
    height: calc(100% - 65px) !important;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFieldVideo {
}

.uiLetsBuildAppMobile .uiScheduleAppointmentBodyFieldVideo video {
    max-width: none;
}

.uiScheduleAppointmentBodyFieldVideo img {
    max-width: 408px;
    object-fit: contain;
    width: 100%;
    background: transparent;
    background-color: rgb(235, 254, 255, 0) !important;
}

.uiLetsBuildAppMobile.uiLetsBuildAppWeb .uiScheduleAppointmentBodyFieldVideo img {
    max-height: none;
    max-width: none;
}

.uiScheduleAppointmentDemoPlaceholder {
    background: black;
    width: 100%;
    height: calc(100%);
}



*::-webkit-media-controls-panel {

}


.uiScheduleAppointmentActivity img {
    clip-path: none;
    border-radius: 0;
    mix-blend-mode: multiply;
}
.uiScheduleAppointmentActivity .uiProfileIcon {
    border-radius: 0;
    background: transparent;
}

.uiScheduleAppointmentActivity .uiProfileIconRing {
    display: none;
}

.uiPageHeaderSubtitle {
    display: none;    
}

.uiPageHeader {
    height: 80px;
}

.uiScheduleAppointmentScanner {
    position: fixed;
    top: -25px;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.uiScheduleAppointment .fdQRCodeInput {
    position: absolute;
    height: 100%;
    width: 100%;
}

.uiScheduleAppointment .fdQRCodeInputQR {
    position: absolute;
    top: 10px;
    height: 100%;
    width: 100%;
}

.uiScheduleAppointmentDemonstration {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: calc(100% - 45px);
}

.uiLetsBuildAppMobile .uiScheduleAppointmentDemonstration {
}

.uiScheduleAppointmentDemonstration .uiInputFieldAndLabel {
    min-height: 0;
    margin-top: 10px;
}

.uiScheduleAppointmentDemonstration .uiInputFieldLabel {
    margin: 0;
    padding: 0;
    height: 0;
}

.uiLetsBuildAppWeb .uiScheduleAppointmentUPC {
    display: none;
}

.uiLetsBuildAppMobile .uiScheduleAppointmentDemonstration .uiInputField .fileLabel {
    font-size: 16px;
}

.uiScheduleAppointmentVideoRecent {
    font-size: 14px;
    color: #6d6d6d;
    position: absolute;
    top: 24px;
    right: 50px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    cursor: pointer;
    display: none;
}

.uiScheduleAppointmentDemonstration label:hover {
    background:  #B6EEFF;
}

.uiScheduleAppointmentVideoRecent:hover {
    background:  #B6EEFF;
}

.uiScheduleAppointmentWorkoutOrRecent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}

.uiScheduleAppointmentWorkoutOrRecentTabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.uiScheduleAppointmentWorkoutOrRecentTabs .fdRadioButtons {

}

.uiScheduleAppointmentWorkoutOption {
    width: 100%;
    height: 100%;
    transform: translate(22.5px, 0);
}

.uiScheduleAppointmentWorkoutRecentList .uiScheduleAppointmentBodyField {

}


.uiScheduleAppointmentWorkoutRecentList .uiInputFieldField {
    width: calc(100% - 45px);
    transform: translate(22.5px, 0);
}


.uiScheduleAppointmentWorkoutRecentList .uiInputFieldContactField {
    margin-left: 5px;
}

.uiScheduleAppointmentWorkoutRecentList .uiInputField {
    position: relative;
    z-index: 2;
}

.uiScheduleAppointmentWorkoutRecentList .uiInputFieldContactContainer {
    margin-left: 5px;
}

.uiScheduleAppointmentWorkoutRecentList .uiInputFieldContactSearchResultsContainer {
    z-index: 50002;
    top: 51px;
}

.uiScheduleAppointmentActivityFilterField .uiInputField {
    z-index: 20;
}

.uiScheduleAppointmentWorkout {
}

.uiScheduleAppointmentWorkoutRecentList {
  transform: translate(-22.5px, 0);
  width: 100%;
  max-height: 100%;
  height: calc(100% - 65px);
  padding-top: 10px;
  padding-bottom: 1px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.uiScheduleAppointmentWorkoutRecentListWorkouts {
    background: rgb(234, 254, 255);
    transform: translate(22.5px, 0);
    padding-top: 15px;
    width: calc(100% - 45px);
    height: calc(100% - 45px);
    overflow-y: auto;
    margin-bottom: 15px;
}

.uiScheduleAppointmentWorkoutRecentListTitle {
    margin-top: 10px;
    color: white;
    font-size: 14px;
    margin-left: calc(22.5px + 10px);
}

.uiScheduleAppointmentRecentWorkoutCard {
    background: white;
    width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    cursor: pointer;
}

.uiScheduleAppointmentRecentWorkoutCard .lbWorkoutCard {
    min-width: 100%;
    box-shadow: none;
}


.uiScheduleAppointmentWorkoutRecentList .uiCalendarSearch {
    width: calc(100% - 45px);
    margin-bottom: 8px;
}

.uiScheduleAppointmentWorkoutRecentListWorkouts .uiAppointment {
    width: calc(100% - 20px);
    margin-left: 10px;
    min-width: auto;
}

.uiPasteMenu {
    position: absolute;
    z-index: 20;
    color: white;
    border-radius: 10px;
    box-shadow: 1px 1px 5px 1px rgba(255,255,255,0.49);
    background: #4d4d4d;
    padding: 8px;
    font-size: 14px;
}

.fdZXingScanner {
    height: 100%;
    width: 100%;
}

.fdZXingScanner video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.uiMealDefaultLogo {

}

.uiLetsBuildAppDesktop .uiScheduleAppointmentBodyButtons .uiOKCancel {
/*    max-width: 100%; */
}


.uiSubscribeToChatPopup {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
    z-index: 20;
    bottom: 0;
}

.uiSubscribeToChat {
    box-sizing: border-box;
    border: 1px solid #bac6c1;
    font-size: 14px;
    color: #4d4d4d;
    line-height: 20px;
    pointer-events: auto;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-top: 0;
    height: auto;
    max-height: calc(100dvh - 80px);
    overflow: hidden;
}

.uiSubscribeToChatIPad {
    left: 300px;
}

.uiSubscribeToChatHeader {
    display: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #666666;
    height: 100px;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 5px;
    line-height: 1.5em;

}

.uiSubscribeToChatHeaderClose {
    position: absolute;
    right: 0;
    top: 0;
    height: 45px;
    width: 45px;
}

.uiSubscribeToChatHeaderClose svg {
    right: 0px;
    position: absolute;
    fill: #666666;
    height: 45px;
    width: 45px;
    cursor: pointer;
}
.uiSubscribeToChatHeaderClose:hover {
    background:  #B6EEFF;
}

.uiSubscribeToChatHeaderInfo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
            
.uiSubscribeToChatHeaderIcon {
    height: 45px;
}

.uiSubscribeToChatHeaderIcon svg {
    height: 45px;
    width: 45px;
    fill: #666666;
}

.uiSubscribeToChatHeaderTitle {
    text-align: center;
}

.uiSubscribeToChatHeaderDate {
}

.uiSubscribeToChatBody {
    background: rgb(33, 161, 196);
    width: 100%;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #17043d;
}

.uiSubscribeToChat .uiSubscribeToChatBody {
    line-height: 1.5em;
    text-align: center;
}

.uiSubscribeToChatBodyWith {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}


.uiSubscribeToChatClient .uiSubscribeToChatBodyWith {
    margin-bottom: 0px;
}

.uiSubscribeToChatBodyWithIcon {
    color: transparent;
    height: 45px;
    padding-bottom: 5px;
}

.uiSubscribeToChatBodyWithName {
    font-size: 14px;
    font-weight: normal;
    color: white;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSubscribeToChatClientFields {
    width: 100%;
    color: white;
    padding-bottom: 10px;
    box-sizing: border-box;
    padding-inline: 22.5px;
}

.uiSubscribeToChatClientTitle {
    font-size: 14px;
    font-weight: bold;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSubscribeToChatClientTime {
    font-size: 14px;
    display: none;
}

.uiSubscribeToChatBodyFields {
    width: calc(100% - 45px);
    padding-top: 15px;
}

.uiSubscribeToChatBodyField .uiInputFieldLabel {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 4px;
    font-size: 14px;
    line-height: 20px;
}

.uiSubscribeToChatBodyFields .uiInputFieldField {
    width: calc(100% - 15px);
    padding-left: 15px;
}

.uiSubscribeToChatBodyFields .uiInputFieldInput {
    width: 100%;
}

.uiSubscribeToChatBodyFields {
}

.uiSubscribeToChatBodyFieldsTitle {

}

.uiSubscribeToChatBodyFieldsError {
    color: rgb(255, 183, 173);
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 22.5px 0;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.uiSubscribeToChatBodyFieldsError:empty { display: none; }

.uiSubscribeToChatBodyButtons {
    width: 100%;
    max-width: calc(100% - 45px);
    display: flex;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 20px;
}

.uiLetsBuildAppMobile .uiSubscribeToChatBodyButtons {
    align-items: flex-start;
}

.uiSubscribeToChatPaymentInfo {
    width: 100%;
    background: white;
    margin-bottom: 5px;
}


.uiSubscribeToChatPaymentInvoiceClient {
    width: 100%;
    height: 100%;
}

.uiSubscribeToChatPaymentInfoLoading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666666;
    font-size: 14px;
    line-height: 1.5em;
    width: 100%;
    padding-bottom: 16px;
}

.uiSubscribeToChatPaymentInvoice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: normal;
    background: white;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 15px;
}

.uiSubscribeToChatPaymentInvoiceAmount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: rgb(37, 183, 68);
}

.uiSubscribeToChatPaymentInvoiceDescription {
    font-size: 14px;
    color: #666666;
}

.uiSubscribeToChatPaymentStatusInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.uiSubscribeToChatPaymentStatus {
    font-size: 14px;
    line-height: 20px;
    color: rgb(0, 113, 188);
}

.uiSubcribeToChatPaymentContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: calc(100% - 45px);
}

.uiSubscribeToChatPaymentMethod {
    background: #17043d;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(min(100%, 408px));

}

.uiSubscribeToChatPaymentMethod:has(> .uiSubscribeToChatPaymentMethodIcon) .uiStripeClientConnectForm {
    padding-left: 0;
}

.uiSubscribeToChatPaymentMethod .uiStripeConnectCardName {
    padding-left: 0;
}

.uiSubscribeToChatMonthly {
    color: gray;
    font-weight: normal;
    font-size: 13px;
}

.uiSubscribeToChatPaymentMethodIcon div {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiSubscribeToChatPaymentMethodIcon svg {
    width: 45px;
    fill: white;
}

.uiSubscribeToChatPaymentControl {
    padding-top: 15px;
    width: calc(min(100%, 408px));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uiSubscribeToChatPaymentControl .uiOKCancel {

}

.uiSubscribeToChatBodyWithCreds {
    font-size: 11px;
    color: #c9e2e1;
    transform: translate(0, -8px);
}


.uiStripeClientConnectForm {
    box-sizing: border-box;
    min-width: 0;
    height: 45px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #17043d;
    padding: 0 12px;
    cursor: default;
}

.uiStripeConnectCardName {
    color: white;
    font-size: 14px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: default;
    white-space: nowrap;
    padding-left: 0;
}

.uiStripeConnectCardName p { margin: 0; overflow: hidden; text-overflow: ellipsis; }

.uiSubscribeToChatRemoveCard {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    cursor: pointer;
    overflow: hidden;
}

.uiSubscribeToChatRemoveCard:hover {
    background: #11CEED;
}

.uiSubscribeToChatRemoveCard div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
}

.uiSubscribeToChatRemoveCard svg {
    width: 45px;
    height: 45px;
    fill: white;
}

.uiStripeConnectFormCard {
    width: 100%;
}

.fdPagePopup:has(> .uiSubscriptionPopup .uiSubscribeToChat) {
    height: auto;
}

.uiSubscriptionPopup.fdPopupContainer:has(.uiSubscribeToChat) {
    position: relative;
    height: auto;
    align-items: center;
}

.uiSubscriptionPopup:has(.uiSubscribeToChat) .fdPopup {
    position: relative;
    width: 375px;
    max-width: 100%;
    height: auto;
    max-height: calc(100dvh - 80px);
}

.uiSubscriptionPopup:has(.uiSubscribeToChat) :is(.fdPopupScroller, .fdPopupBody) {
    height: auto;
    max-height: inherit;
    background: transparent;
}

.uiSubscribeToChatDeclineButton .uiOKCancelOK {
    background: rgb(184, 38, 26);
}

.uiSubscribeToChatDeclineButton .uiOKCancelOK:hover {
    background: #CA0000;
}

.uploadProgress {
    top: 0px;
    left: 0px;
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: none;
    transition: width 1s ease;
    animation: progress-bar 0.5s linear infinite;
}

.uploadProgressContainer {
    filter: none;
    width: 30%;
}

.uploadProgressTitle {
    background: #efefef;
    width: 100%;
    padding: 5px;
    color: #2d2d2d;
    display: flex;
    justify-content: center;
    font-size: 15px;
}

.uploads {
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 5px;
    flex-direction: column
}

.upload {
    height: 30px;
    background: gray;
}

@keyframes progress-bar {
    0% {
	background-position: 40px 0;
    }
    100% {
	background-position: 0 0;
    }
}

.b8wMUs9d4qcP2to1wAAH {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 15px;
  position: relative;
  width: calc(330px - 10px);
  height: 330px;
  overflow-x: hidden;
}

.cjF2_bnAtJUXpIjX9yyw {
}

.cjF2_bnAtJUXpIjX9yyw::before {
  content: 'No results.';
  position: absolute;
  left: 50%;
  top: 50%;
  color: #aaa;
  transform: translate(-50%, -50%);
}

.le9apH7hBfk_C1yRY1AO {
  position: absolute;
  right: 0;
  top: 2px;
  bottom: 7px;
  width: 4px;
  background-color: #e0e0e0;
  border-radius: 2px;
  opacity: .1;
  transition: opacity .4s;
}

.b8wMUs9d4qcP2to1wAAH:hover .le9apH7hBfk_C1yRY1AO {
  opacity: .3;
}

.b8wMUs9d4qcP2to1wAAH .le9apH7hBfk_C1yRY1AO:hover,
.b8wMUs9d4qcP2to1wAAH .le9apH7hBfk_C1yRY1AO:active {
  opacity: .6;
}

.NjVLI9IFPd0Ct5r_WSHx {
  background-color: #000;
  border-radius: 2px;
  cursor: pointer;
}

.g2ldx4Nz2SwVOnBP7Uct {
  margin-left: 10px;
  width: 315px;
}

.XPjJF9oBjT6XVbi8l7Ll {
  margin-right: 5px;
  margin-bottom: 5px;
  width: 100px;
  background-color: #ccc;
  background-position: center;
  background-repeat: no-repeat;
}

.RzBEJ2Q2FUgpg0H7QXXg {
  padding: 0;
  display: block;
  background: none;
  border: none;
  cursor: pointer;
}

.FEBaXTQ28BSg0EtIIzrR {
  display: block;
}



.sqhIEOMViEFWQRFiAurL {
  padding: 15px 0;
  width: 340px;
  color: inherit;
  border: 1px solid #ccc;
}

.wY8uIWLl4E0ZKqkoOAOB {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding: .5em .75em;
  width: calc(100% - 30px);
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1em;
}

.FN1XXlqEwE0e9ECbQqXX {
  margin-left: 15px;
  margin-right: 15px;
}

.PFKKUEujRkRZaW8oG9Tw {
  margin: 0 15px 15px;
  padding: 10px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  color: #4d4d4d;
}

.uiRemoteVideo {
    height: 100%;
    width: 100%;
}

.uiRemoteCallAnimationContainer {
    height: 100%;
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiRemoteVideoStreamContainer {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.uiRemoteStreamsBlackboard {
    display: inline-block;
}

.uiRemoteVideoStreamsDesktop {
    transform: auto !important;
    display: grid;
    height: 100%;
    width: 100%;
}

.uiRemoteVideoStreamsMobile {
    height: 100%;
    width: 100%;
}

.uiRemoteVideoGroupLayout {
    display: grid;
    height: 100%;
    width: 100%;
    min-height: 0;
    min-width: 0;
}

.uiRemoteVideoStreamsDesktop video {
    max-height: calc(100vh - 90px);
}

.uiRemoteVideoStreamsMobile {
    display: grid;
    max-height: 100%;
    max-width: 100%;
}

.uiRemoteVideoTrack {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.uiRemoteVideoCompositorTrack {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.uiRemoteVideoTrackComposite {
    object-fit: contain;
}

.uiRemoteVideoGroupLayout video {
    height: 100%;
    width: 100%;
    max-height: none;
}

.uiRemoteVideoControls {
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 2;
}

.uiRemoteVideoControls uiToggleButton {
    padding-top: 5px;
}

.uiRemoteVideoCallButtonContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0px;
    white-space: nowrap;
    margin-left: 22.5px;
}

.uiRemoteVideoResolution {
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.uiRemoteVideoResolution .uiDeviceSetupSelection {
    z-index: 2;
    right: 0px;
    bottom: 4px;
    min-width: 135px;
    display: flex;
 }

.uiRemoteVideoCallButtonContainer .uiCallButton {
    position: relative;
}

.uiRemoteVideoLocalVideoOptions {
    background: #20A1C4;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 4px;
    left: 0;
    cursor: pointer;
    height: 45px;
    width: 45px;
    overflow: hidden;
}

@media (hover: hover) {
.uiRemoteVideoLocalVideoOptions:hover {
    background: #11CEED;
}
}

.uiRemoteVideoLocalVideoOptions div{
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiRemoteVideoLocalVideoOptions svg {
    fill: white;
    height: 45px;
}

.svgClipPaths {
    height: 0px;
}

.svgClipPaths svg {
    height: 45px;
    width: 45px;
}

.uiRemoteVideoCallQuality {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    max-width: 45px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: transparent;
    z-index: 2;
}

.uiRemoteVideoCallQualityHideBars {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0px;
    bottom: 0px;
    background: #efefef;
    transform: scale(.62, .62);
}

.uiRemoteVideoCallQualityOff {
    position: absolute;
}

.uiRemoteVideoCallQualityOn {
    position: absolute;
    height: 45px;
    width: 45px;
}

.uiRemoteVideoCallQualityOn img {
    height: 45px;
    width: 45px;
}

.uiRemoteVideoCallQuality div {
    display: flex;
    justify-content: center;
    align-items: center;
}


.uiRemoteVideoCallQuality svg {
    height: 45px;
    width: 45px;
}

.uiRemoteVideoCallResolution {
    color: #4d4d4d;
    font-size: 14px;
    background: #efefef;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    cursor: default;
}

.uiCallLobbyAccept .uiCallButton {
    left: 22.5px;
    bottom: -15px;
}

.uiCallButton {
    color: rgb(250, 250, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    height: 45px;
    cursor: pointer;
    padding-right: 20px;
    position: absolute;
    bottom: 0px;
}

.uiCallButtonHangup {
    background: rgb(184, 38, 26);
}

.uiCallButtonCall {
    background: rgb(37, 183, 68);
}

@media (hover: hover) {
.uiCallButtonCall:hover {
    background: #11D316;
}
}

@media (hover: hover) {
.uiCallButtonHangup:hover {
    background: #CA0000; 
}
}


.uiEndCallButtonLabel {
    padding-right: 10px;
}

.uiEndCallButtonLabel {
}

.uiRemoteVideoCall {
    bottom: 0px;
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 45px;
}

.uiRemoteVideoLocalVideoContainer {
    font-size: 0;
    position: relative;
    bottom: calc(40px * 5 + 1px);
    position: absolute;
    right: 0px;
}

.uiRemoteVideoControlsNoScreenshare {
    bottom: calc(40px * 4);
}

.uiRemoteVideoYourVideo video {
    height: 180px;
    transform: scale(-1, 1);
    object-fit: contain !important;
}


.uiRemoteVideoYourVideoScreenShare video {
    transform: none;
}

.uiChatHangup {
    height: 40px;
    width: 40px;
    position: absolute;
    bottom: 0;
    right: 0;
    background:  #ca0000;
    fill: white;
    cursor: pointer;
}

.uiCallLobbyYourVideo {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.uiCallLobbyYourVideoContainer {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0;
}

.uiCallLobbyYourVideo video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: scale(-1, 1);
    position: absolute;
    top: 0;
    left: 0;
}

.uiYourVideoScreenShare video {
    transform: none;
}

.uiCallLobbyAccept .uiOKCancel {
    width: 300px;
    background: white;
    padding: 22px;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    z-index: 3;
}

.uiLetsBuildAppIPad .uiCallLobbyAccept .uiOKCancel {
    transform: translate(0, -120px);
}

.uiCallLobbyControls {
    position: absolute;
    bottom: -15px;
    right: 0;
}

.uiCallLobbyAccept {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    bottom: 14px;
    left: 0;
}

.uiRemoteVideoCantOpenMedia {
    height: 100%;
    width: 100%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiRemoteVideoBlackboard {
    height: 100%;
    width: 100%;
    background: #4d4d4d;
}

.uiWhiteboard2 {
    height: 100%;
    width: 100%;
}

.uiWhiteboard2 canvas {
}


.uiRemoteVideoWhiteboard {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiRemoteVideoBlackboardOverlay {
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.uiRemoteVideoBlackboardOverlay .uiRemoteVideoStreamContainer {
    justify-content: flex-start;
    align-items: flex-start;
}

.uiRemoteVideoBlackboard .uiRemoteVideoStreamsDesktop {
   display: flex !important;
   height: auto !important;
   width: auto !important;
   justify-content: flex-start;
}

.uiRemoteVideoBlackboardControlsDesktop {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    left: 265px;
    top: 0px;
    pointer-events: none;
}

.uiRemoteVideoBlackboardControlsMobile {
    display: flex;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    align-items: flex-start;
    top: 0px;
    pointer-events: none;
    overflow: visible;
}

.uiRemoteVideoBlackboardControlsIPad {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 45px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 0px;
}

.uiRemoteStreamsBlackboard .uiRemoteVideoStreamsDesktop video {
    max-width: 240px;
    max-height: 160px;
    object-fit: cover;
    z-index: 1;
}

.uiRemoteStreamsBlackboard .uiRemoteVideoTrack {
    max-width: 240px;
    max-height: 160px;
    object-fit: cover;
    z-index: 1;
}

.uiBlackboardButton {
    position: relative;
    height: 45px;
    width: 45px;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiBlackboardButtonSelected .bb-cls-1 {
    fill: #25b743 !important;
}

@media (hover: hover) {
.uiBlackboardButtonSelected:hover .bb-cls-1 {
    fill: #11D316 !important;
}
}


.uiBlackboardButton div {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiBlackboardButton svg {
    height: 45px;
    width: 45px;
    fill: white;
}

@media (hover: hover) {
.uiBlackboardButton:hover .bb-cls-1 {
    fill: #11D316 !important;
}
}


.uiBlackboardColorPickerContainer {
    pointer-events: none;
}

.uiRemoteVideoBlackboardControlsIPad .uiBlackboardColorPickerContainer {
    position: relative;
    pointer-events: none;
}

.uiRemoteVideoBlackboardControlsMobile .uiBlackboardColorPickerContainer {
    position: relative;
    pointer-events: none;
}

.uiRemoveVideoBlackboardControlsSeparator {
    margin-right: 30px;
}

.uiRemoteVideoBlackboardControlsIPad .uiRemoveVideoBlackboardControlsSeparator {
    margin-bottom: 20px;
}


.uiBlackboardColorPicker {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
}

.uiRemoteVideoBlackboardControlsIPad .uiBlackboardColorPicker {
    flex-direction: row;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    right: 45px;
    width: auto;
    height: 45px;
}

.uiBlackboardColorPickerColorButton {
    height: 45px !important;
    width: 45px !important;
    pointer-events: auto;
}

.uiBlackboardColorPickerColor .color-2 {
    fill: white;
}

@media (hover: hover) {
.uiBlackboardColorPickerColor:hover .color-2 {
    fill: #11D316dd;
}
}

.uiBlackboardColorPickerColor {
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}


.uiBlackboardColorPickerColor div {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiBlackboardColorPickerColor svg {
    height: 45px;
    width: 45px;
}

.uiWhiteboardColorWhite .color-1 {
    fill: #f2f2f2;
}

.uiWhiteboardColorRed .color-1 {
    fill: #d80000;
}

.uiWhiteboardColorGreen .color-1 {
    fill: #21d821;
}

.uiWhiteboardColorPurple .color-1 {
    fill: #e223d3;
}

.uiWhiteboardColorYellow .color-1{
    fill: #f2eb00;
}

.uiWhiteboardColorBlue .color-1 {
    fill: #1d74ff;
}

.uiGroup {
    height: auto;
    max-height: calc(100dvh - 80px);
    width: 100%;
    background: #17043d;
}

.uiGroup .uiPage {
    border: 1px solid #bac6c1;
    background: #17043d;
    height: auto;
    max-height: inherit;
}

.uiGroup .uiOKCancel {
    width: 100%;
    max-width: none;
}

.uiLetsBuildAppMobile .uiGroup .uiPageBody {
    height: calc(100% - 300px);
}
  
.uiGroupMembers {
    margin-top: 0;
    height: calc(100% - 375px);
}

.uiLetsBuildAppMobile .uiGroupMembers {
    height: calc(100% - 300px);
    max-height: calc(100% - 300px) !important;
}

.uiGroupMembersList {
    background: white;
    width: 100%;
    height: calc(100% - 25px);
    max-height: calc(100% - 25px);
    overflow-y: auto;
}

.uiLetsBuildAppMobile .uiGroupMembersList {
    max-height: calc(100% - 25px);
}

.uiGroupDeleteMember {
    position: absolute;
    right: 0px;
}

.uiGroupDeleteMember:hover {
    background:  #B6EEFF;
    fill: #666666;
    cursor: pointer;
}

.uiGroupDeleteMember svg {
    height: 45px;
    width: 45px;
}

.uiGroupDeleteMember div {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiGroupMembersListMember {
    display: flex;
    align-items: center;
    height: 45px;
    position: relative;
}

.uiGroupMembersListMember .uiProfileIcon {
    margin-left: 15px;
    margin-right: 15px;
}

.uiCreateGroupPageFooter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 45px);
    margin-top: 16px;
    margin-bottom: 20px;
    position: relative;
}

.uiCreateGroupError {
    color: rgb(255, 183, 173);
    font-size: 14px;
    width: 100%;
    min-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.uiCreateGroupError:empty {
    display: none;
}

.uiCreateGroupFields {
    height: auto;
}

.uiCreateGroupPageFooter .uiRemoveContactConfirm {
    right: auto;
    left: calc(50% - 204px);
    width: 100%;
}

.uiLetsBuildAppMobile .uiCreateGroupPageFooter .uiRemoveContactConfirm {
    left: 0;
}

.uiSidebar {
    position: fixed;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
    box-shadow: none;
    z-index: 3;
    padding-left: 15px;
}



.uiSidebarLogo {
    position: absolute;
    left: -221px;
    cursor: pointer;
    z-index: 5;
    display: none;
}
    
.uiSidebarLogo svg {
    height: 50px;
}


.uiSidebarMobile {
    max-width: 100%;
    width: calc(100% - 30px);
    box-shadow: none;
    padding-right: 15px;
    position: absolute;
    z-index: 0;
}

.uiSidebarMobile .uiSidebarFooter {
    display: none;
}

.uiSidebarMobile .uiSideListHeaderButtons {
    transform: translate(-20px, 0);
}

.uiSidebarMobile .uiSidebarNav {
    display: none
}

.uiSidebarNav .uiSideListContactUnread {
    position: absolute;
    left: 45px;
}
    

.uiSideListContactUnread {
    background:  #f15a24;
    color: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22.5px;
    max-width: 45px;
    padding-left: 2px;
    padding-right: 2px;
    display: flex;
    height: 45px;
    font-size: 14px;
    cursor: default;
}


.uiSideListItemSelectedArrow {
    transform: translate(0, 2px);
    visibility: visible;
    cursor: default;
    filter: none;
}

.uiSideListElementContainerSelected > div.uiSideListElementControls > div.uiSideListItemSelectedArrowWithUnread {
    transform: translate(-28.5px, 2px);
}

.uiSideListItemSelectedArrow svg {
    fill: rgb(37, 183, 68);
    height: 45px;
}

.uiSideListElementContainerSelected .uiSideListItemSelectedArrow {
}


.uiSidebarBody {
    display: flex;
    flex-direction: column;
    z-index: 1;
    min-height:calc(100% - 235px - 45px);
    max-height: calc(100% - 235px);
}

.uiSidebarBodyScroller {
    max-height: calc(100% - 100px);
    width: 255px;
}

.uiSideList {
    height: 100%;
}

.uiSideListHeader {
    font-size: 14px;
    font-weight: bold;
    color: rgb(102, 102, 102);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    max-height: 40px;
    z-index: 2;
    background: white;
}

.uiSideListHeaderTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    cursor: default;
    max-width: 195px;
}

.uiSideListHeaderButton {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.uiSideListHeaderButtonSvg {
    overflow: hidden;    
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.uiSideListHeaderButtonSvg div {
    display: flex;
    align-items: center;
    justify-content: center;
}


.uiSideListHeaderSearchFieldContainer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

.uiSideListHeaderSearchField {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 10px);
    overflow: hidden;
    margin-left: 10px;
}

.uiSideListHeaderSearchField input {
    outline: none;
    border: 0;
    font-size: 14px;
    color :#4d4d4d;
    font-family: inherit;
    margin-left: 0;
    padding-left: 0;
    margin-right: 0;
    padding-right:0;
    max-width: 165px;
}

.uiSideListHeaderSearchField input::placeholder {
    color: #a2a2a2;
}

.uiSideListHeaderSearchField input:focus {
}

.uiSideListHeaderButton svg {
    height: 40px;
    fill: #6d6d6d;
}

.uiSideListHeaderPlus .add-contact-1 {
    height: 40px;
    stroke: #6d6d6d;
}


.uiSideListHeaderButtons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiUpNext {
    max-height: calc(3 * 45px);
}

.uiContactsList {
    height: calc(100%);
}

.uiContactsList::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.uiContactsList {
    scrollbar-width: none;
}

.uiSideListList {
    margin-top: -250px;
    padding-top: 250px;
    padding-right: 35px;
    margin-right: -30px;
    width: 100%;
    overflow-y: auto;
    padding-bottom: 90px;
    pointer-events: none;
    height: calc(100%);
}

.uiLetsBuildAppMobile .uiSideListList {
    background: white;
}

.uiSideListListCallWaiting {
    padding-right: 250px;
    margin-right: -250px;
    pointer-events: auto;
}

.uiSideListTablet {
    margin-top: -250px;
    padding-top: 250px;
    padding-right: 0;
    padding-right: 30px;
    margin-right: -30px;
    pointer-events: auto;
    overflow-x: hidden;
    padding-bottom: 90px;
    height: calc(100%);
}

.uiSideListListContent {
    pointer-events: auto;
}

.uiSideListElementContainer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.uiSideListElement {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(102, 102, 102);    
    background: white;
    cursor: pointer;
    position: relative;
    overflow-x: visible;
    z-index: 1;
}

.uiSideListElementSelected {
    background: rgb(37, 183, 68); 
    color: white;
}

.uiSideListElementContainerSelected .uiSideListElement {
    cursor: default;
    color: white !important;
}

.WaitingRoomSelected {
    cursor: pointer !important;
}


.WaitingRoomSelected .uiSideListMessage svg {
    fill: white;
}


.uiSideListImpromptuCall {
    display: flex;
    justify-content: space-between;
    background: #c40a0a;
    color: white;

}

.uiSideListElementControls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 100%;
    filter: none;
}

.uiSideListItemButtons {
    z-index: 1;
    right: -80px;
    padding-right: 10px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    visibility: hidden;
    background:  #B6EEFF;
    /*
    background: #20A1C4;
   */
}

.uiSidebarMobile .uiSideListItemButtons {
    visibility: visible;
    background: white;
}

.uiSideListElementContainerSelected .uiSideListItemButtons {
    background: rgb(37, 183, 68); 
    visibility: visible;
}

.uiSidebarMobile .uiSideListElementContainerSelected .uiSideListItemButtons {
}


.uiSideListItemButton1, .uiSideListItemButton2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.uiSideListMessage  {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*
    background: #20A1C4;
   */
    background:  #B6EEFF;
    cursor: pointer;
}

.uiSideListElementContainerSelected .uiSideListMessage {
    background:rgb(37, 183, 68);
}

.uiSideListElementContainerSelected .uiSideListItemSubtitle {
    color: #e6e6e6;
}

.uiSideListMessage div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiSideListMessage svg {
    height: 45px;
    width: 45px;
    fill: #666666;
}

.WaitingRoom .uiSideListItemButtons {
    visibility: visible;
}

.WaitingRoom .uiSideListItemSubtitle {
    color: #efefef;
}

.WaitingRoom .uiSideListItemTitle {
    color: white;
}


@keyframes waitingRoomPulse {
    from {background-color: #20A1C4; }
    to  {background-color: #187daa; }
}

.WaitingRoom .uiSideListElement, .WaitingRoom .uiSideListMessage {
    animation-duration: .8s;
    animation-name: waitingRoomPulse;
    animation-iteration-count: infinite;
    color: white;
}

.uiSidebarMobile .uiSideListMessageHangup {
    background: #CA0000;
}



.uiSidebarMobile .WaitingRoom .uiSideListMessageHangup svg {
    fill: #e6e6e6
}

.WaitingRoomSelected .uiSideListElement {
    cursor: pointer !important;
}


.WaitingRoom .uiSideListMessageHold {
}


.WaitingRoom .uiSideListMessage svg {
    fill: white;
}



.uiSideListMessageCall svg {
    transform: rotate(-90deg);
}

.uiSideListLeft {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 45px;
    color: rgb(102, 102, 102);
    flex-shrink: 0;
}

.uiSideListMiddle {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    font-size: 14px;
    height: 100%;
}

.uiSideListElementStatus {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 62.5px;
    top: 10px;
    border-radius: 0;
}

.uiSideListElementStatusAccepted {
    background: rgb(37, 183, 68); 
}

.uiSideListElementContainerSelected .uiSideListElementStatusAccepted {
    background: #11D316 !important;   
}


.uiSideListElementStatusDeclined {
    background: rgb(184, 38, 26);
}

.uiSideListElementStatusScheduled {
    background: rgb(251, 176, 60);
}

.uiSideListItemMiddle {
    overflow: hidden;
    max-width: 190px;
}

.uiSideListItemMiddleTruncated {
    max-width: 120px;
}

.uiSideListItemTitle {
    width: 100%;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.uiSideListItemSubtitle {
    height: 100%;
    width: 100%;
    font-size: 12px;
    padding-left: 5px;
    color: #b3b3b3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSideListRight .uiSideListItemSubtitle {
    text-align: right;
    max-width: 60px;
    min-height: 13px;
}

.uiLetsBuildAppMobile .uiSideListRight .uiSideListItemSubtitle {
}

.uiSideListRight .uiSideListItemTitle {
    justify-content: flex-end;
}

.uiSideListRight {
    font-size: 12px;
    color: rgb(179, 179, 179);
    padding-right: 15px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
}

.uiSidebarFooter {
    position: absolute;
    width: 100%;
    background: rgb(235, 235, 235);
    margin-left: -15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 1;
    bottom: 0px;
    height: 90px;
}

.uiSidebarFooterRow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 15px;
    width: calc(100% - 15px);
}

.uiSidebarFooterButton {
    color: rgb(102, 102, 102);
    font-size: 13px;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 45px;
}

.uiSidebarFooterButtonIcon svg {
    fill: rgb(132, 177, 211);
}



.uiSidebarHeader{
    background: white;
    transform: translate(-15px, 0);
    z-index: 2;
}

.uiSidebarHeaderProfile {
    height: 135px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-right: 15px;
    background: white;
    position: relative;
}

.uiLetsBuildAppMobile .uiSidebarEditProfilePictureButton {
    top: 40px;
    left: calc(50% + 7px);
}

.uiLetsBuildAppMobile .uiSidebarHeaderProfile {
    background: transparent;
    height: 64px;
    margin-top: 20px;
}

.uiSidebarMobile .uiSidebarHeaderProfile {
    cursor: pointer;
}

.uiSidebarHeaderProfileName {
    padding-top: 12px;
    color: #666666;
    font-size: 14px;
    font-weight: bold;
    cursor: default;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSidebarHeaderProfileCreds {
    font-size: 11px;
    color: #42a8a3;
    whitespace: no-wrap;
    width: 100%;
    text-align: center;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiSideListElementCreds {
    color: #9fc4c4;
}
.uiSidebarProfileClockTime {
    cursor: default;
    font-size: 24px;
}

.uiSidebarProfileClockWeekday,.uiSidebarProfileClockDate {
    font-size: 11px;
    color: #666666;
    cursor: default;
}

.uiSidebarHeaderClock {
    height: 65px;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 10px;
    pointer-events: none;
    cursor: default;
    transform: translate(15px, 0);
    border-radius: 0;
    z-index: 2;
}


.uiChatHome  {
    height: 45px;
    width: 45px;
    position: absolute;
    right: -60px;
    top: 45px;
    background: #f15a24;
    fill: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.uiChatHomeMobile {
    left: 22.5px;
    position: fixed;
}

.uiChatHomeArrow  {
    position: fixed;
    transform: rotate(-180deg);
    right: -15px;
    top: 41px;
    z-index: 3;
}

.uiChatHomeArrow svg {
    height: 45px;
    fill: #f15a24;
}

.uiChatHomeHome svg {
    width: 45px;
}


.uiSidebarNav {
    position: absolute;
    //display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    right: -15px;
    bottom: 65px;
    background: white;
}

.uiSidebarNavHome  {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiSidebarNavButtonLabel {
    font-size: 14px;
    color: #666666;
}


.uiSidebarNavButton {
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.uiSidebarNavButton .uiSideListContactUnread {
    filter: none;
}

.uiSidebarFooterRow .uiSidebarNavButton {
    padding-left: 5px;
}

.uiSidebarFooterRow .uiSidebarNavButtonIcon svg {
    fill: #17043d;
}


.uiSidebarFooterRow .uiSidebarNavButtonSelected .uiSidebarNavButtonIcon svg {
    fill: white;
}

.uiSidebarNavButtonSelected .uiSidebarNavButtonLabel {
    color: white;
}



.uiSidebarNavButtonSelected {
    background:  rgb(37, 183, 68);
    cursor: default;
}

.uiSidebarNavButtonArrow {
    right: -22.5px;
    top: 0px;
    position: absolute;
    display: none;
}

.uiSidebarNavButtonSelected .uiSidebarNavButtonArrow {
    display: inherit;
    filter: none;
}
.uiSidebarNavButtonSelected .uiSidebarNavButtonArrow svg {
    fill: rgb(37, 183, 68);
}

.uiSidebarNavButtonIcon {
    height: 45px;
    width: 45px;
    display: flex;
}

.uiSidebarNavButtonIcon {
    height: 45px;
    width: 45px;
    justify-content: center;
    align-items: center;
}

.uiSidebarNavButtonIcon div {
    height: 45px;
    width: 45px;
    justify-content: center;
    align-items: center;
}



.uiSidebarNavButtonSelected .uiSidebarNavButtonIcon {
    fill: white !important;
}


.uiSidebarNavButtonIcon svg {
    fill: rgb(37, 183, 68);
    height: 45px;
    width: 45px;
}


.uiSidebarNavButtonIcon {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.uiSidebarNavButtonSelected svg {
    fill: white;
}

.uiSidebarNavButtonArrow svg {
    height: 45px;
}

.uiSidebarFooterButton {
    padding-left: 20px;
}


.uiSidebarFooterButtonLabel {
    padding-left: 5px;
}

.uiSidebarFooterRow .uiSidebarFooterButton {
    width: 100%;
}

.uiSidebarFooterButtonArrow svg {
    fill: rgb(37, 183, 68);
    height: 45px;
    width: 22.5px;
    position: absolute;
    transform: translate(0, -22.5px);
}


.uiSidebarFooterButtonSelected {
    background: rgb(37, 183, 68); 
    color: white;
}

.uiSidebarFooterButtonSelected svg {
    fill: white;
}

.uiSidebarFooterButtonSelectedLabel {
    color: white;
}


.uiSidebarEditProfilePictureButton {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 65px;
    left: 140px;
    background: white;
    z-index: 3
}

.uiSidebarEditProfilePictureButton div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiSidebarEditProfilePictureButtonIcon svg {
    height: 35px;
    fill: rgb(37, 183, 68); 
}



.uiSidebarContactLink {
    position: absolute;
    z-index: 50;
    top: 190px;
    left: 285.5px;
    width: 300px;
    box-sizing: border-box;
    border: 1px solid #bac6c1;
    background: white;
    filter: none;
    border-radius: 0;
    padding-right: 0px;
}

.uiSidebarContactLink .uiMeCard {
    margin: 0;
    width: 100%;
}

.uiSidebarContactLink .uiMeCardContent {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.uiSidebarContactLink .uiMeCardTitle {
    margin-left: 16px;
}

.uiSidebarContactLink .uiMeTabSelected {
    font-size: 13px;
    font-weight: bold;
    color: #4d4d4d;
}


.uiSidebarContactLinkArrow {
    position: absolute;
    top: 20px;
    left: -10px;
    height: 18px;
    width: 18px;
    box-sizing: border-box;
    border-left: 1px solid #bac6c1;
    border-bottom: 1px solid #bac6c1;
    background: white;
    transform: rotate(45deg);
}


.uiSidebarPrivacyPolicy {
    text-decoration: underline;
    color: #17043d;
    font-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    white-space: nowrap;
}


.uiSidebarFooterRowLinks {
    color: rgb(211, 211, 211);
    margin-left: 5px;
}

.uiSideListIncomingCallItem {
    position: relative;
}

.uiIncomingCallPrompt {
    background: white;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 125px);
    left: 285px;
    z-index: 100;
    padding: 20px;
    width: 190px;
    filter: none;
}

.uiLetsBuildAppMobile .uiIncomingCallPrompt {
    position: fixed;
    z-index: 500;
    top: 0px !important;
    left: calc((100vw - 230px) / 2);
}

.uiLetsBuildAppMobile .uiIncomingCallPromptArrow {
    display: none;
}

.uiIncomingCallPrompt .uiSidebarHeaderProfile {
    padding: 0;
    height: 105px;
}

.uiIncomingCallPromptBody {
}

.uiIncomingCallPromptHeader {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: center;
    width: 100%;
    padding-bottom: 10px;
}

.uiIncomingCallPromptIcon{
}

.uiIncomingCallPromptButton {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 45px;
    margin-top: 20px;
    cursor: pointer;
}

.uiIncomingCallPromptButtonLabel {
    font-size: 14px;
    color: white;
    padding-right: 30px;
}

.uiIncomingCallPromptButtonAnswer {
    background: rgb(37, 183, 68);
}


.uiIncomingCallPromptButtonHold {
    background: rgb(33, 161, 196);
}


.uiIncomingCallPromptButtonDecline {
    background: rgb(184, 38, 26);
}


.uiIncomingCallPromptButtonIcon {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiIncomingCallPromptButtonIcon div {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiIncomingCallPromptButtonIcon svg {
    width: 45px;
    height: 45px;
    fill: white;
}

.uiIncomingCallPromptName {
}

.uiIncomingCallPromptTitle {
    font-size: 14px;
    font-weight: bold;
    color: #6d6d6d;
    text-align: center;
    width: 100%;
}

.uiIncomingCallPromptArrow {
    top: calc(50% - 35px);
    left: -22.5px;
    position: absolute;
}

.uiIncomingCallPromptArrow svg {
    height: 45px;
    transform: scale(-1, 1);
    fill: white;
}



.uiSidebar .uiMeBAANotSafariDesktop {
    left: 0px;
    top: 0px;
}

.uiSideBarWhoopSleep {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: monospaced;
    font-size: 13px;
    padding-left: 4px;
    padding-right: 4px;
    height: 21.5px;
    width: 45px;
}

.uiSidebarWhoopSleepPercent {
    display: none;
}

.uiSideBarOuraSleep {
}

.uiSideBarOuraActivity {
}

.uiSideBarOuraActivity img {
    filter: none !important;
}

.uiSideBarOuraSleep img {
    transform: scale(-1, 1)
}

.uiOuraActivityImage  {
    height: 13px;
    width: 13px;
    overflow: hidden;
    background: red;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.uiSideBarWhoopSleep img {
    height: 13px;
    width: 13px;
    filter: invert(1)
}

.uiScoreOptimal {
    background: rgb(14, 211, 22);
    color: white;
    padding-left: 4px;
}

.uiScoreAverage {
    background:  rgb(251, 176, 60);
    color: white;
    padding-left: 4px;
}

.uiSideBarRecovery {
    width: 100px;
    margin-top: 2px;
    height: 22.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 8px;
    position: relative;
    font-size: 13px;
    font-family: monospaced;
}

.uiSidebarWeight {
    padding-right: 5px;
    font-family: monospaced;
    display: flex;
    align-items: center;
}

.uiSidebarWeight svg {
    height: 22.5px;
    width: 22.5px;
    opacity: 0.7;
}


.uiSidebarSubtitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}


.uiSidebarReadiness {
    font-size: 13px;
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.uiSideBarRecovery img {
    height: 22.5px;
    width: 22.5px;
}

.uiSideListItemRight .uiSideBarWhoopSleep div {
    align-items: center;
    justify-content: center;
    display: flex;
}

.uiSideListItemRight .uiSideBarWhoopSleep svg {
    height: 16px;
    width: 16px;
}

.uiSideListItemRight .uiSideBarOuraSleep svg {
    transform: rotate(90deg);
}

.uiSideListElementSelected .uiSideBarRecovery img {
    filter: invert(1);
}

.uiSideListElementSelected .uiSideBarRecovery svg {
    filter: invert(1);
}

.uiScorePoor {
    background:  rgb(206, 0, 23);
    color: white;
    padding-left: 4px;
    font-family: monospaced;
}

.uiScoreOptimal img {
    filter: invert(1)
}

.uiScorePoor img {
    filter: invert(1)
}

.uiScoreAverage img {
    filter: invert(1)
}

.uiSideListElementSelected .uiWhoopStrainScore {
    background: transparent;
}

.uiSideListElementSelected .uiScorePoor {
    background: transparent
}

.uiSideListElementSelected .uiScoreOptimal {
    background: transparent
}

.uiSideListElementSelected .uiScoreAverage {
    background: transparent;
}

.uiSideListElementSelected .uiScorePoorRecovery {
    background: transparent;
    color: white;
}

.uiSideListElementSelected .uiScoreOptimalRecovery {
    background: transparent;
    color: white;
}

.uiSideListElementSelected .uiScoreAverageRecovery {
    background: transparent;
    color: white;
}



.uiWhoopStrainScore {
    background: rgb(66, 145, 244);
    color: white;
}

.uiSideBarCycleData .uiSideListMiddle {
    height: 45px;
}

.uiSideBarCycleData .uiSideListMiddle .uiSideListItemSubtitle {
    height: auto;
}

.uiSideBarCycleData .uiSideListItemMiddle {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.uiSideBarCycleData .uiSideListRight {
    height: 100%;
    padding-right: 4px;
}

.uiSideBarCycleData .uiSideListItemMiddle svg {
    height: 22.5px;
    width: 22.5px;
}

.uiSideBarRecovery div {
    height: 22.5px;
    width: 22.5px;
}

.uiSideBarRecovery > div {
}

/*
.uiScoreAverageRecovery {
    background:  rgb(251, 176, 60);
    color: white;
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiScoreOptimalRecovery {
    background: rgb(14, 211, 22);
    color: white;
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiScorePoorRecovery {
    background:  rgb(206, 0, 23);
    color: white;
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

*/

.uiScoreAverageRecovery {
    color:  rgb(251, 176, 60);
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospaced;
}

.uiScoreOptimalRecovery {
    color: rgb(14, 211, 22);
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospaced;
}

.uiScorePoorRecovery {
    color:  rgb(206, 0, 23);
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospaced;
}

.uiScoreRecoveryNotAvailable {
    font-family: monospaced;
    padding-left: 2px;
    padding-right: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospaced;
}


@media (hover: hover) {
.uiSideListElementContainerSelected:hover .uiSideListItemSelectedArrow svg {
    fill: #11D316;
}

.uiSideListElementContainer:hover .uiSideListItemSelectedArrow {
    visibility: visible;
}

.uiSideListHeaderButtonSvg:hover {
    background:  #B6EEFF;
    color: #666666;
}

.uiSideListElementContainer:hover .uiSideListElement {
    background:  #B6EEFF;
    color: #666666;
    /*
    background: #20A1C4;
    color: white;
   */
}

.uiSideListElementContainer:hover .uiSideListElementSelected {
    background: #11D316;
}

.uiSideListProductChannel:hover {
    background: rgb(37, 183, 68) !important;
}

.uiSideListElement:hover .uiSideListRight {
    color: white; 
}

.uiSideListElementContainer:hover .uiSideListElementContainerSelected .uiSideListItemButtons {
    background: #11D316;
}

.uiSideListElementContainer:hover .uiSideListItemButtons {
    visibility: visible;
}

.uiSideListElementContainer:hover .uiSideListElementSelected .uiSideListMessage {
    background: #11D316;
}

.uiSideListMessage:hover  {
    color: white;
    background:rgb(37, 183, 68);
}

.uiSideListMessage:hover svg {
    fill: white;
}

.WaitingRoom:hover  .uiSideListItemTitle {
    color: inherit;
}

.WaitingRoom:hover  .uiSideListItemSubtitle {
    color: white;
}

.WaitingRoom:hover .uiSideListElement, .WaitingRoom:hover .uiSideListMessage {
    /*
    background:  #B6EEFF;
    color: #666666;
    fill: #666666;
   */
    background: #11CEED;
    fill: white;
    color: white;
}

.uiSideListElementContainerSelected:hover .uiSideListElementt {
    color: white;
}

.uiSideListElementContainerSelected:hover .uiSideListMessage {
    background: #11D316;
}

.uiSideListElementContainerSelected .uiSideListMessageHangup:hover {
    background: #CA0000;
}


.WaitingRoom .uiSideListMessageHangup:hover {
    background: #CA0000;
}

.WaitingRoom .uiSideListMessageHold:hover {
    background: rgb(37, 183, 68); 
}


.WaitingRoom:hover {
    color: white;
    background:  #20A1C4
}

.WaitingRoom:hover .uiSideListMessage svg {
    fill: white;
}

.WaitingRoom .uiSideListMessage:hover svg {
    fill:  white
}

.uiSideListMessageHangup:hover {
    background: #CA0000;
}
.uiSideListMessageRemove:hover {
    background: #CA0000;
}

.uiSideListElementContainerSelected:hover .uiSideListElementStatusAccepted {
    background: rgb(37, 183, 68) !important;
}

.uiSidebarNavButton:hover {
    background:  #B6EEFF;
}

.uiSidebarNavButtonSelected:hover {
    background: rgb(37, 183, 68) 
}

.uiSidebarNavButtonIcon:hover svg {
}

.uiSidebarNavButtonSelected .uiSidebarNavButtonIcon:hover svg  {

}

.uiSidebarFooterButton:hover {
    background:  #B6EEFF;
}


.uiSidebarPrivacyPolicy:hover {
    color:  rgb(33, 153, 255);
}

.uiIncomingCallPromptButtonAnswer:hover {
    background:  #11D316;
}

.uiIncomingCallPromptButtonHold:hover {
    background: #11CEED;
}

.uiIncomingCallPromptButtonDecline:hover {
    background: #CA0000;
}


}

.uiSidebarPage {
    pointer-events: none;
}

.lbContact {
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
    cursor: pointer;
    margin-top: 4px;
    margin-bottom: 4px;
}

.lbContactSelected {
    background: rgb(37, 183, 68);
    cursor: default;
}

.lbContactSelected:hover {
    background: rgb(37, 183, 68) !important;
}

.lbFitbitDeviceIcon {
    display: inline-block;
    height: 20px;
    width: 22px;
}

.lbFitbitDeviceIcon img {
    object-fit: contain;
    height: 15px;
    width: 15px;
    transform: translate(-0px, 0);
}

.lbContactFitbit .lbContactActivity svg {
    display: none;
}

.lbContactFitbit .lbContactActivity .lbContactScoreScore {
    visibility: hidden;
}

.lbContactFitbit .lbContactRecovery svg {
    visibility: hidden;
}

.lbContactFitbit .lbContactRecovery .lbContactScoreScore {
    visibility: hidden;
}

.lbContactFitbit .lbContactRecovery .lbContactScoreContent {
    background: rgb(251, 176, 60) !important;
}


.uiLetsBuildAppMobile .lbContact {
    padding-left: 10px;
    padding-right: 10px;
}


.lbContact:hover .lbContactSelectedArrow svg {
    fill: rgb(37, 183, 68);
}

.lbContact:hover {
    background:  #B6EEFF;
}


.lbContactUnread {
    position: absolute;
    z-index: 10;
    left: 100%;
    display: flex;
    height: 100%;
    min-width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:  #f15a24;
    color: #e6e6e6;
    box-shadow: 2px 1px 2px 0px rgba(0,0,0,0.20);    
}

.lbContactUnread99Plus {
    padding-left: 2px;
    padding-right: 2px
}

.uiLetsBuildAppMobile .lbContactUnread {
    box-shadow: none;
    min-width: 30px;
}

.uiLetsBuildAppMobile .lbContactUnread {
    right: 0px;
    left: auto;
}

.lbContactRow1 {
    display: grid;
    grid-template-columns: 33px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
    min-height: 57px;
    position: relative;
    max-width: 100%;
}

.lbContactRow1Left {
    height: 33px;
    width: 33px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiLetsBuildAppMobile .lbContactRow1Left {
    height: 33px;
}

.lbContactRow1Right {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.lbContactInfo {
    display: flex;
    align-items: center;
    font-size: 14px;
    height: auto;
    white-space: nowrap;
    transform: none;
}


.lbContactStatusAccepted {
    color: rgb(37, 183, 68);
}

.lbContactStatusDeclined {
    color: rgb(184, 38, 26);
}

.lbContactStatusScheduled {
    color: rgb(251, 176, 60);
}

.lbContactSelected .lbContactStatusAccepted {
    color: #11D316
}


.uiLetsBuildAppMobile .lbContactInfo {
    transform: none;
}

.lbContactRow1Middle {
    display: flex;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
}

.lbContactRow1MiddleContent {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 100%;
}


.lbContactDeviceIcon {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 2px;
}

.lbContactDeviceIconItem {
    display: inline-flex;
    align-items: center;
}

.lbContactDeviceIcon svg {
    height: 20px;
    width: 20px;
    fill: #A5A5A5;
}

.lbContactSelected .lbContactDeviceIcon svg {
    fill: #e4e4e4;
}

.uiLetsBuildAppMobile .lbContactDeviceIcon svg {
    height: 25px;
    width: 25px;
}

.lbContactDeviceIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lbContactRow2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.lbContactScore {
    display: flex;
    align-items: center;
    color: white;
    height: 100%;
    width: 100%;
}

.lbContactScoreContent {
    display: flex;
    align-items: center;
    width: 100%;
}

.lbContact .uiScorePoor {
    padding-left: 0;
}

.lbContact .uiScoreAverage {
    padding-left: 0;
}

.lbContact .uiScoreOptimal {
    padding-left: 0;
}

.lbContactScoreScore {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 25px;
    padding-right: 5px;
    width: calc(100% - 5px);
    font-size: 16px;
    font-family: arial;
}

.uiLetsBuildAppMobile .lbContactScoreScore {
    font-size: 20px;
    height: 28px;
    padding-right: 10px;
    width: calc(100% - 10px);
}

.lbContactScoreIcon {
    padding-left: 5px;
}

.lbContactScoreIcon svg {
    height: 18px;
    width: 18px;
    fill: white;
}

.uiLetsBuildAppMobile .lbContactScoreIcon svg {
    height: 25px;
    width: 25px;
}

.uiLetsBuildAppMobile .lbContactScoreIcon  {
    padding-left: 10px;
}

.lbContactScoreIcon div  {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lbContactActivity {
    height: 100%;
    width: 100%;
    background: rgb(0, 113, 187);
}

.lbContactSleep {
    height: 100%;
    width: 100%;
}

.lbContactRecovery {
    height: 100%;
    width: 100%;
}

.lbContactWeight {
    height: 100%;
    background: rgb(36, 216, 190);
    width: 100%;
}

.uiScoreNoWeight svg {
    display: none
}

.uiScoreNoWeight {
    color: rgb(36, 216, 190);
}

.uiScoreNoAppt {
    color: transparent;
}

.lbContactName {
    font-size: 18px;
    color: #4a4a4a;
    max-width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.lbContactSelected .lbContactName {
    color: #f0f0f0;
}

.uiLetsBuildAppMobile .lbContactName {
    max-width: calc(100vw - 87px);
    font-size: 24px;
}

.lbContactSelected .lbContactCreds {
    color: #e4e4e4;
}

.lbContactCreds {
    font-size: 13px;
    color: #A5A5A5;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    max-width: 100%;
}

.lbContactCredsCreds {
    overflow: hidden;
    text-overflow: ellipsis;

}
    

.uiLetsBuildAppMobile .lbContactCreds {
    font-size: 16px;
}

.uiSleepScoreOura svg {
    transform: scale(-1, 1);
}

.uiLetsBuildAppMobile .uiSideListListContent {
    padding-top: 0px;
}

.lbContactSelectedArrow {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    z-index: 11;
    display: flex;
}

.lbContactSelectedArrow div {
    display: flex;
    height: 100%;
}

.lbContactSelectedArrow svg {
    display: block;
    height: 100%;
    width: auto;
    fill: rgb(37, 183, 68);
    filter: none;
}

.lbContactNoDevice .lbContactScoreContent {
    visibility: hidden;
}

.lbContactNoDevice .lbContactWeight .lbContactScoreContent {
    visibility: visible;
}

.buttonContainer {
    height: 35px;
    display: flex;
}

.button {
    height: 35px;
    width: 90px;
    background: #efefef;
    display: flex;
    align-items:center;
    justify-content: center;
    cursor: pointer;
    color: gray;
    margin-left: 2px;
}

.buttonSmall {
    width: 65px !important;
}

.buttonExtraSmall {
    width: 50px !important;
}


.buttonLabel {
    user-select: none;
    font-size: 14px;
}

.buttonDisabled buttonDesktop:hover {
    background: #efefef !important;
    color: gray !important;
    cursor: default;
}

.buttonDesktop:hover {
    background: gray;
    color: white;
}

.emoji-mart,
.emoji-mart * {
  box-sizing: border-box;
  line-height: 1.15;
}

.emoji-mart {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 16px;
  display: inline-block;
  color: #222427;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}

.emoji-mart .emoji-mart-emoji {
  padding: 6px;
}

.emoji-mart-bar {
  border: 0 solid #d9d9d9;
}
.emoji-mart-bar:first-child {
  border-bottom-width: 1px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.emoji-mart-bar:last-child {
  border-top-width: 1px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.emoji-mart-anchors {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 6px;
  line-height: 0;
}

.emoji-mart-anchor {
  position: relative;
  display: block;
  flex: 1 1 auto;
  color: #858585;
  text-align: center;
  padding: 12px 4px;
  overflow: hidden;
  transition: color .1s ease-out;
  margin: 0;
  box-shadow: none;
  background: none;
  border: none;
}
.emoji-mart-anchor:focus { outline: 0 }
.emoji-mart-anchor:hover,
.emoji-mart-anchor:focus,
.emoji-mart-anchor-selected {
  color: #464646;
}

.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
  bottom: 0;
}

.emoji-mart-anchor-bar {
  position: absolute;
  bottom: -3px; left: 0;
  width: 100%; height: 3px;
  background-color: #464646;
}

.emoji-mart-anchors i {
  display: inline-block;
  width: 100%;
  max-width: 22px;
}

.emoji-mart-anchors svg,
.emoji-mart-anchors img {
  fill: currentColor;
  height: 18px;
  width: 18px;
}

.emoji-mart-scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 270px;
  padding: 0 6px 6px 6px;
  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
}

.emoji-mart-search {
  margin-top: 6px;
  padding: 0 6px;
  position: relative;
}

.emoji-mart-search input {
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 5px 25px 6px 10px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  outline: 0;
}

.emoji-mart-search input,
.emoji-mart-search input::-webkit-search-decoration,
.emoji-mart-search input::-webkit-search-cancel-button,
.emoji-mart-search input::-webkit-search-results-button,
.emoji-mart-search input::-webkit-search-results-decoration {
  /* remove webkit/blink styles for <input type="search">
   * via https://stackoverflow.com/a/9422689 */
  -webkit-appearance: none;
}

.emoji-mart-search-icon {
  position: absolute;
  top: 7px;
  right: 11px;
  z-index: 2;
  padding: 2px 5px 1px;
  border: none;
  background: none;
}

.emoji-mart-category .emoji-mart-emoji span {
  z-index: 1;
  position: relative;
  text-align: center;
  cursor: default;
}

.emoji-mart-category .emoji-mart-emoji:hover:before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #f4f4f4;
  border-radius: 100%;
}

.emoji-mart-category-label {
  z-index: 2;
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.emoji-mart-category-label span {
  display: block;
  width: 100%;
  font-weight: 500;
  padding: 5px 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, .95);
}

.emoji-mart-category-list {
  margin: 0;
  padding: 0;
}

.emoji-mart-category-list li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.emoji-mart-emoji {
  position: relative;
  display: inline-block;
  font-size: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.emoji-mart-emoji-native {
  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Segoe UI", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji";
}

.emoji-mart-no-results {
  font-size: 14px;
  text-align: center;
  padding-top: 70px;
  color: #858585;
}
.emoji-mart-no-results-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.emoji-mart-no-results .emoji-mart-category-label {
  display: none;
}
.emoji-mart-no-results .emoji-mart-no-results-label {
  margin-top: .2em;
}
.emoji-mart-no-results .emoji-mart-emoji:hover:before {
  content: none;
}

.emoji-mart-preview {
  position: relative;
  height: 70px;
}

.emoji-mart-preview-emoji,
.emoji-mart-preview-data,
.emoji-mart-preview-skins {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.emoji-mart-preview-emoji {
  left: 12px;
}

.emoji-mart-preview-data {
  left: 68px; right: 12px;
  word-break: break-all;
}

.emoji-mart-preview-skins {
  right: 30px;
  text-align: right;
}

.emoji-mart-preview-skins.custom {
  right: 10px;
  text-align: right;
}

.emoji-mart-preview-name {
  font-size: 14px;
}

.emoji-mart-preview-shortname {
  font-size: 12px;
  color: #888;
}
.emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
.emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
.emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
  margin-left: .5em;
}

.emoji-mart-preview-emoticon {
  font-size: 11px;
  color: #bbb;
}

.emoji-mart-title span {
  display: inline-block;
  vertical-align: middle;
}

.emoji-mart-title .emoji-mart-emoji {
  padding: 0;
}

.emoji-mart-title-label {
  color: #999A9C;
  font-size: 26px;
  font-weight: 300;
}

.emoji-mart-skin-swatches {
  font-size: 0;
  padding: 2px 0;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background-color: #fff;
}

.emoji-mart-skin-swatches.custom {
  font-size: 0;
  border: none;
  background-color: #fff;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
  width: 16px;
  padding: 0 2px;
}

.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected:after {
  opacity: .75;
}

.emoji-mart-skin-swatch {
  display: inline-block;
  width: 0;
  vertical-align: middle;
  transition-property: width, padding;
  transition-duration: .125s;
  transition-timing-function: ease-out;
}

.emoji-mart-skin-swatch:nth-child(1) { transition-delay: 0s }
.emoji-mart-skin-swatch:nth-child(2) { transition-delay: .03s }
.emoji-mart-skin-swatch:nth-child(3) { transition-delay: .06s }
.emoji-mart-skin-swatch:nth-child(4) { transition-delay: .09s }
.emoji-mart-skin-swatch:nth-child(5) { transition-delay: .12s }
.emoji-mart-skin-swatch:nth-child(6) { transition-delay: .15s }

.emoji-mart-skin-swatch.selected {
  position: relative;
  width: 16px;
  padding: 0 2px;
}

.emoji-mart-skin-swatch.selected:after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background-color: #fff;
  border-radius: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease-out;
}

.emoji-mart-skin-swatch.custom {
  display: inline-block;
  width: 0;
  height: 38px;
  overflow: hidden;
  vertical-align: middle;
  transition-property: width, height;
  transition-duration: .125s;
  transition-timing-function: ease-out;
  cursor: default;
}

.emoji-mart-skin-swatch.custom.selected {
  position: relative;
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}

.emoji-mart-skin-swatch.custom.selected:after {
  content: "";
  width: 0;
  height: 0;
}

.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover {
  background-color: #f4f4f4;
  border-radius: 10%;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
  width: 36px;
  height: 38px;
  padding: 0 2px 0 0;
}

.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected:after {
  opacity: .75;
}

.emoji-mart-skin-text.opened {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  color: #888;
  font-size: 11px;
  padding: 5px 2px;
  width: 95px;
  height: 40px;
  border-radius: 10%;
  background-color: #fff;
}

.emoji-mart-skin {
  display: inline-block;
  width: 100%;
  padding-top: 100%;
  max-width: 12px;
  border-radius: 100%;
}

.emoji-mart-skin-tone-1 { background-color: #ffc93a }
.emoji-mart-skin-tone-2 { background-color: #fadcbc }
.emoji-mart-skin-tone-3 { background-color: #e0bb95 }
.emoji-mart-skin-tone-4 { background-color: #bf8f68 }
.emoji-mart-skin-tone-5 { background-color: #9b643d }
.emoji-mart-skin-tone-6 { background-color: #594539 }

/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
.emoji-mart-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/*
 * Dark mode styles
 */

.emoji-mart-dark {
  color: #fff;
  border-color: #555453;
  background-color: #222;
}

.emoji-mart-dark .emoji-mart-bar {
  border-color: #555453;
}

.emoji-mart-dark .emoji-mart-search input {
  color: #fff;
  border-color: #555453;
  background-color: #2f2f2f;
}

.emoji-mart-dark .emoji-mart-search-icon svg {
  fill: #fff;
}

.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
  background-color: #444;
}

.emoji-mart-dark .emoji-mart-category-label span {
  background-color: #222;
  color: #fff;
}

.emoji-mart-dark .emoji-mart-skin-swatches {
  border-color: #555453;
  background-color: #222;
}

.emoji-mart-dark .emoji-mart-anchor:hover,
.emoji-mart-dark .emoji-mart-anchor:focus,
.emoji-mart-dark .emoji-mart-anchor-selected {
  color: #bfbfbf;
}

.uiChat {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    background: white;
    z-index: 2;
}

.uiChatMarginBottom {
    display: flex;
    width: 100%;
    height: calc(100% - 45px); 
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 45px;
}

.uiChatInlineMediaPlayPause {
    display: inline-block;
    width: 100%;
}

.uiChatInlineImage {
    cursor: pointer;
}

.uiChatInlineMedia {
    display: inline-block;
    width: 100%;
    max-width: 100%;
}

.uiChatInlineMedia video {
   max-width: 100%;
}

.uiChatInlineMedia img {
    max-width: 100%;
    max-height: 1080px;
    object-fit: contain;
}

.uiChatMessages {
    padding-top: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    background: white;
    width: 100%;
    /*max-height: calc(100% - 95px);*/
}

.uiChatMessagesContainer {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px 12px;
}

.uiChatMessagesContainerCallActive {
    padding-bottom: 0;
}


.uiChatButtonContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    margin-left: 30px;
    width: calc(100% - 30px);
}

.uiChatButtonContainerLeft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 35px;
}

.uiChatInputMessageEditorRow {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    min-height: 45px;
    background: rgb(235, 235, 235);
    position: relative;
}

.uiChatSendButton {
    background: rgb(37, 183, 68);
    height: 45px;
    cursor: pointer;
    color: rgb(250, 250, 250);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    cursor: pointer;
    padding-left: 2px;
    padding-right: 20px;
}

.uiChatSendButton:hover {
    background: #11D316;
}

.uiChatSendButtonContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    height: 45px;
    position: relative;
    width: 100%;
}

.uiChatCancelEditButton {
    background: rgb(184, 38, 26);
    height: 40px;
    cursor: pointer;
    color: rgb(250, 250, 250);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    cursor: pointer;
    margin-right: 0px;
    padding-right: 15px;;
}


.uiChatSendButtonLabel {
    white-space: nowrap;
}

.uiChatSendButtonIcon {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.uiChatSendButton div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiChatButton {
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.uiChatWorkoutButton {
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.uiChatWorkoutButton svg {
    height: 30px;
    fill:  rgb(37, 183, 68);
}

.uiChatWorkoutButton:hover svg {
    fill: #11D316;
}

.uiChatButtonIcon {
}

.uiChatButtonContainerLeft form {
    width: 40px;
}

.uiChatButtonIconSvg:hover svg {
    fill: #11D316;
}

.uiChatButtonIconSvg svg {
    fill:  rgb(37, 183, 68);
    height: 45px;
    width: 45px;
}


.uiFileUpload {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.uiChatInputContainer {
    display: flex;
    flex-direction: column;
    background: rgb(235, 235, 235);
    height: 45px;
    left: 0px;
    max-width: calc(100%);
    position: absolute;
    width: 100%;
    bottom: 0px;
    right: 0;
    z-index: 3;
}


.uiChatInputPopupContainer {
    position: absolute;
    width: 100%;
    height: 45px;
    top: 45px;
    z-index: 50;
}

.uiChatEditorContainer {
    height: 40px;
    position: relative;
}



.uiChatEditor {
    font-size: 13px;
    color: #a2a2a2;
    margin-left: 45px;
    height: 45px;
    width: 100%;
}

.uiChatInput {
    width: calc(100% - 45px);
    font-size: 14px;
    position: absolute;
    bottom: 10px;
    left: 0px;
    pointer-events: auto;
    color: #4d4d4d;
}
.uiChatInputCaretHidden {
    caret-color: transparent;
}

.uiChatInput:focus {
    outline: none;
}

.uiChatInputPlaceholder {
    pointer-events: none;
    font-size: 14px;
    white-space: nowrap;
    max-width: calc(100% - 15px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiChatEditorBg {
    position: absolute;
    left: 0px;
    bottom: 30px;
    pointer-events: none;
    background: rgb(235, 235, 235);
    width: 100%;
}

.uiChatInputPlaceholder {
    position: absolute;
    bottom: 10px;
}

.uiChatMessage {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    justify-content: flex-start;
    padding: 12px 12px 8px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #e2e5e3;
    background: #f3f3f3;
    width: 100%;

}

.uiChatMessageSameFrom {
    padding-top: 12px;
}

.uiChatMessageLeft {
    width: 40px;
    display: flex;
    align-items: flex-start;
    min-width: 40px;
}

.uiChatMessageBody {
    max-width: 100%;
}

.uiChatMessageCenter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.uiChatMessageRight {
    display: none;
    width: 20px;
    height: 100%;
    min-height: 17px;
}

.uiChatMessageHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 5px;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.uiChatMessageTime {
    font-size: 12px;
    color: #808080;
    cursor: default;
    justify-self: flex-end;
}

.uiChatMessageContent {
    width: 100%;
}

.uiChatMessageText {
    font-size: 14px;
    color: #4d4d4d;
    width: 100%;
    cursor: default;
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: pre-line;
    display: inline-block;
    overflow-wrap: anywhere;
}

.uiChatMessageText img {
    max-width: 100%;
}

.uiChatFromName {
    font-size: 14px;
    color: #333333;
    font-weight: bold;
    cursor: default;
}

.uiChatMessageButtons {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transform: none;
}

.uiChatEmojiButton {
    fill: #3171b7;
    cursor: pointer;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.uiChatEmojiButton:hover {

}

.uiChatEmojiButton:hover svg {
    fill: #36A9D3;
}

.uiChatEmojiButtonIconSvg {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiChatEmojiButtonIconSvg div {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiChatEmojiButtonIconSvg svg {
    fill: #3171b7;
    height: 45px;
    width: 45px;
}

.uiChatMessageBottomRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 15px;
}

.uiChatMessageBottomRowNoReactions {
    height: 15px;
    min-height: 0px;
    overflow: hidden;
}

.uiChatMessageReactions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 2px;
    flex-wrap: wrap;
}

.uiChatReaction {
    border: 1px solid #9dc4dd;
    font: inherit;
    background: #B7DBF3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 4px;
    padding: 2px;
    margin-right: 2px;
    min-width: 50px;
    cursor: pointer;
    margin-bottom: 5px;
    margin-top: 5px;
}



.uiChatReaction img {
    height: 22.5px;
    width: 25px;
    object-fit: contain;
}

.uiChatReactionCount {
    color: #808080;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.uiChatProfileIconContainer {
    transform: none;
}

.uiChatGarminProfileIcon .uiProfileIcon {
    background: white;
}

.uiChatGarminProfileIcon svg {
    height: 35px;
    width: 35px;
    transform: translate(0, -3px);
}


.uiChatCallControls {
    position: absolute;
    width: 100%;
    bottom: 90px;
    display: flex;
    justify-content: flex-start;
    left: 22.5px;
}

.uiChatCallControls .uiCallButton {
    height: 45px;
    display: none;
}

.uiChatTyping {
    font-size: 12px;
    color: #20A1C4;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    padding-left: 16px;
    min-width: 0;
    flex-shrink: 1;
}

.uiChatAppointmentMessage {
    font-size: 14px;
    color: #666666;
    width: 100%;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 10px;
    cursor: default;
    overflow-wrap: anywhere;
    word-break: break-word; /* safari needs this */
    white-space: pre-wrap;
}

.uiChatEmojiPicker {
    position: absolute;
    bottom: 105px;
    left: 59px;
    z-index: 32;
}

.uiMe .uiChatEmojiPicker {
    left: calc(4px + 35px / 2);
}

.uiMe .uiChatButtonContainerLeft {
    padding-left: 4px;
}

.uiLetsBuildAppMobile .uiMe .uiChatEmojiPicker {
    left: calc(8px + 35px / 2);
}

.uiLetsBuildAppMobile .uiMe .uiChatButtonContainerLeft {
    padding-left: 8px;
}


.uiLetsBuildAppMobile .uiMe .uiChatEmojiPicker {
    left: 6px;
    z-index: 80;
}

.uiLetsBuildAppMobile .uiMe .uiEmojiPickerArrow  {
    left: 0;
}

.uiChatEmojiPickerContainer  {
}

.uiChatKeyboardShowing .emoji-mart {
}

.uiChatEmojiPickerKeyboardShowing .emoji-mart-scroll {
    height: 100px;
}

.uiEmojiPickerArrow  {
    position: absolute;
    bottom: -23px;
    left: 10px;
    filter: none;
    overflow: hidden;
    height: 24px;
    width: 45px;
}

.uiEmojiPickerArrowShape  {
    background: white;
    height: 24px;
    width: 45px;
    clip-path: polygon(50% 100%, -0% 0%, 100% 0%);
}
    
.uiCallButtonCall .uiIconSvg {
    transform: rotate(-90deg);
}

.uiChatFileUpload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    background: #20A1C4;
    height: 45px;
    width: 100%;
    max-width: 100%;
}

.uiChatUploadFailed {
    background:  rgb(206, 0, 23);
}

.uiChatUploadFailed .uiChatFileUploadSpinner svg {
    animation: none;
}

.uiChatFileUploadSpinnerAndText {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 1;
    flex-grow: 1;
    width: 100%;
    max-width: calc(100% - 45px);
}

.uiChatFileUploadSpinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiChatFileUploadSpinner div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiChatFileUploadSpinner svg {
    height: 45px;
    width: 45px;
    fill: white;
    animation: spin 1s linear infinite;
}

.uiChatFileUploadIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiChatFileUploadIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiChatFileDownload {
    cursor: pointer;
    background: rgb(37, 183, 68);
    max-width: 408px;
}

.uiChatFileDownload:hover {
    background: #11D316;
}

.uiChatFileUploadIcon svg {
    height: 45px;
    fill: white;
}

.uiChatFileUploadText {
    font-size: 14px;
    color: white;
    flex-shrink: 1;
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}

.uiChatFileUploadTypeFile {
    background: rgb(20, 182, 186);
}

.uiChatFileUploadTextFilename {
    display: block;
    font-weight: bold;
    min-width: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiChatFileUploadWithPreview video {
    width: 100%;
}


.uiChatFileUploadWithPreview img {
    width: 100%;
}

.emoji-mart-preview {
    display: none;
}

button {
    cursor: pointer;
}

.emoji-mart-emoji {
    cursor: pointer;
}

.emoji-mart-emoji span {
    cursor: pointer !important;
}

.emoji-mart-emoji:focus {
    outline: none !important;
}

.emoji-mart-anchor-icon svg {
    fill: rgb(37, 183, 68);
}

.emoji-mart-anchor-bar {
    background: rgb(37, 183, 68) !important;
}

.emoji-mart {
    border-radius: 0px;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    padding: 10px;
}

.emoji-mart-bar {
    border: 0;
}

#emoji-mart-search-3 {
    font-size: 14px;
    color: #666666;
}


.emoji-mart-category-label {
    font-size: 14px;
    font-weight: bold;
    color: #666666;
}


img.emoji {
   height: 24px;
   width: 24px;
   vertical-align: -5px;
}

.uiChatButtonGiphy .uiChatButton {
    overflow: visible;
}

.uiChatButtonGiphy .uiIconSvg {
    overflow: visible;
}

.uiChatButtonGiphy .uiIconSvg svg {
    fill: rgb(37, 183, 68);
    width: 45px;
}

.uiChatButtonGiphy:hover .uiIconSvg svg {
    fill: #11D316;
}

.uiChatButton .info-cls-1 {
    transform: scale(.87, .87);
    transform-origin: center center;
}

.uiChatGIFPicker .uiChatEmojiPickerContainer  {
    heigt: 400px;
    width: 400px;
}

.GIFPicker  {
    left: 98px;
}

.uiChatGIFSelect {
    background: white;
    border: 0;
    border-radius: 0px;
    padding-bottom: 10px;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}

.uiChatGIFSelect > div {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
    height: 330px;
    width: 300px;
}

.uiChatGIFSelectInput {
    font-size: 14px;
    color: #6d6d6d;
    margin-left: 15px;
    margin-top: 10px;
    width: calc(100% - 35px);
    border: 0;
    margin-bottom: 5px;
}
.uiChatGIFSelectInput:focus {
    outline: none;
}

.uiChatGIFAttribution {
    display: none;
}

.uiChatGiphyContainer > div > div:nth-child(2) > div > div:nth-child(1) {
    overflow: auto !important;
}

.uiChatGiphyAttributionImage {
    transform: scale(0.5, 0.5);
    position: absolute;
    right: -40px;
}

.uiLetsBuildAppIPad .uiChatGiphyAttributionImage {
    right: 60px;
}

.uiChatMakePayment {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 408px;
}

.uiChatMakePayment .uiStripeClientConnectForm {
    max-width: calc(100% - 15px);
    margin-bottom: 10px;
}

.uiChatMakePayment .uiOKCancel {
}

.uiChatMakePayment .uiScheduleAppointmentRemoveCard {
    margin-right: 5px;
}

.uiChatMakePayment .uiStripeConnectFormCard {
    width: calc(100% - 15px);
    padding-right: 15px;
}

.uiChatMakePayment .uiStripeConnectCardName {
    padding-left: 12.5px;
}

.uiChatNewContact {
    width: 100%;
    padding-bottom: 15px;
}

.uiChatNewContactAcceptText {
    padding-bottom: 15px;
    padding-left: 0px;
    color: #6d6d6d;
    font-size: 14px;
    width: 100%;
    text-align: left;
}


.uiChatSubscriptionText {
    padding: 15px;
    color: #6d6d6d;
    font-size: 14px;
    padding-left: 0;
}

.uiChatInlineEmoji {
    font-size: 24px;
    display: inline-block;
}

.uiChatReaction .uiChatInlineEmoji {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -2px;
}

.uiChatEmojiReaction {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(0, 1px);
}


.uiChatEmojiSprite {
    height: 25px;
    width: 25px;
    display: inline-block;
}

.uiChatEmojiSprite span {
    background-size: 5700% 5700% !important;
}

.uiChatAppointmentContainer {
    max-width: calc(min(100vw - 65px, 420px));
    margin-bottom: 10px;
    width: 100%;
}

.uiChatAppointmentContainer .uiAppointment {
    max-width: 100%;
}

.lbMobileMainTop .uiChatAppointmentContainer .uiAppointmentWith {
    transform: translate(15px, 0);
}

.uiChatSubscription .uiSubscription {
    max-width: 100%;
}

.uiChatAppointmentContainer .uiOKCancel {
    max-width: 408px;
}

.uileftChatStartSession {
    width: 100%;
}

.uiChatAppointmentContainer {
    margin-bottom: -15px;
}

.uiChatStartSessionWhen {
    font-size: 14px;
    color: #6d6d6d;
    white-space: nowrap;
    padding-bottom: 10px;
    cursor: default;
}

.uiChatStartSessionWhenFromNow {
    color: rgb(0, 113, 188);
    font-weight: bold;
}

.uiChatExtraButton {
    margin-bottom: 15px;
}


.uiChatCalendarPickerTitle {
    font-size: 14px;
    color: #6d6d6d;
    position: absolute;
    top: 15px;
}

.uiChatCalendarContainer {
    width: calc(min(500px, 100vw - 330px));
    height: 405px;
    padding-left: 20px;
    padding-right: 15px;
    padding-top: 25px;
    background: white;
    border-radius: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    flex-direction: column;
    display: flex;
}

.uiCalendarPlusText {
}

.uiChatCalendarContainer .uiCalendar {
    position: static;
    padding-right: 0px;
    margin-left: -5px;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
}

.uiChatCalendarContainer .uiCalendarScroll {
    margin-left: 0;
    width: 100%;
}

.uiChatCalendarContainer  .uiCalendarEventControls {
    transform: translate(10px, -5px);
    padding-bottom: 0px;
}

.uiChatCalendarContainer .uiCalendarEventControls {
    padding-left: 0;
}

.uiChatCalendarContainer .uiCalendarEventsList {
    margin-top: 10px;
    transform: scale(0.8, 0.8) translate(-10px, 0);
    transform-origin: 0 0;
    min-height: 142%;
    max-height: 142%;
}

.uiChatCalendarContainer .uiCalendarDropTarget {
    position: static;
    width: calc(100%);
    height: calc(100% - 45px);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    display: flex;
    padding: 0;
    margin: 0;
}

.uiChatCalendarContainer .uiOKCancel {
    width: auto;
}

.uiChatCalendarPicker {
    left: 178px !important;
}

.uiChatCalendarPickerIPad {
    left: 28px !important;
}

.uiChatCalendarPickerIPad .uiEmojiPickerArrow {
    left: 160px;
}

.uiChat .uiScheduleAppointmentPopup {
    z-index: 1001 !important;
}

.uiSubscribeToChatIPad .uiEmojiPickerArrow {
    left: calc(405px / 2 - 11px) !important;
}

.uiSubscribeToChat .uiEmojiPickerArrow {
    left: 22.5px;
}

.uiChatMessageBodyEdited {
    background: #D6EEFF;
    min-height: 20px;
    padding: 10px;
    margin-left: -10px;
}

.uiChatInputFieldButtons {
    position: absolute !important;
    top: 0px;
    right: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.uiChatUndoButton {
    height: 45px;
    width: 45px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.uiChatUndoButton:hover {
    background: #B6EEFF !important;
}

.uiChatUndoButtonIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiChatUndoButtonIconSvg svg {
    fill: #36A9D3;
    height: 45px;
    width: 45px;
}

.uiChatUndoButtonIconSvg:hover svg {

}


.uiChatFromName {
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: calc(max(190px, 100% - (385px - 190px)));
}

.uiChatMessageHeaderNoTime .uiChatFromName {
    max-width: 100%;
}

.uiChatFromCreds {
    margin-left: 4px;
    font-size: 14px;
    color: #9fc4c4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.website-preview {
    padding: 2px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    aligns-item: center;
}

.website-preview-site {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  height: 16px;
}

.website-preview-site p {
  font-size: 11px;
  vertical-align: middle;
  font-weight: bold;
}

.website-preview-site img {
  height: 16px;                      
  margin-right: 4px;
}

.website-preview-title {
  padding-top: 5px;
  padding-bottom: 5px;
}

.website-preview-title a {
  color: rgb(49, 113, 183);
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}


.website-preview-description p {
   font-size: 14px;
   max-width: 100%;
   padding: 0;
}

.website-preview-image {
    padding: 0;
    margin: 0;
}

.website-preview-image img {
  object-fit: cover;
}

.uiChatA {
    color: rgb(49, 113, 183);
    padding-left: 15px;
    padding-right: 15px;
    height: 45px;
    transform: translate(-15px, 0);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-decoration: none;
    font-size: 14px;
    overflow-wrap: break-word;
    word-break: break-all;
}
/*
.uiChatA:hover {
    background:  #B6EEFF;
    color: #666666;
}
*/

.uiChatMenu {
    position: relative;
    display: none;
}

.uiChatMenuMenu {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 0px;
    right: 45px;
    position: absolute;
    filter: none;
}

.uiChatMenuButton {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.uiChatMenuButtonActive {
    background: white;
}

.uiChatMenuButton:hover {
    background: #B6EEFF;
}

.uiChatMenuButton div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiChatMenuButton svg {
    height: 45px;
    width: 45px;
    fill: rgb(37, 183, 68);
}

.uiChatRecordMessage {
    font-size: 14px;
    color: #666666;
    background: white;
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    min-width: 144px;
}

.uiChatRecordMessage:hover { 
    background: #B6EEFF;
}

.uiChatRemoveContact {
    font-size: 14px;
    color: #666666;
}

.uiRemoveContact {
    position: relative;
    width: 100%;
}

.uiRemoveContactConfirm {
    display: flex;
    height: 45px;
    position: absolute;
    top: 0;
    right: 0;
}

.uiRemoveContactConfirm .uiOKCancel {
}

.uiRemoveContactConfirm:hover .uiOKCancelOKIcon {
    background: #CA0000 !important;
}
.uiRemoveContactConfirm .uiOKCancelOK {
    background: rgb(184, 38, 26);
}

.uiRemoveContactConfirm .uiOKCancelOKLabel {
    padding-left: 22.5px;
}

.uiRemoveContactRemove {
    width: calc(100% - 20px);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    padding-left: 10px;
    padding-right: 10px;
    background: white;
    cursor: pointer;
}

.uiRemoveContact:hover .uiRemoveContactRemove {
    background: #B6EEFF;
}

.uiRemoveContactRemove:hover {
    background: #B6EEFF;
}

.vid {
    display: inline-block;
    max-height: 180px;
}


.uiChatWhiteboard {
    z-index: 10;
    position: absolute;
    left: 17px;
    bottom: 60px;
    padding: 22.5px;
    border-radius: 0;
    background: white;
    filter: none;
}

.uiChatWhiteboardButtons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.uiChatWhiteboardButtonRedo {
    transform: scale(-1, 1);
}

.uiChatManageGroupContainer {
    position: absolute;
    width: 408px;
    z-index: 10;
    padding: 0px;
    filter: none;
    background: white;
    left: calc(max(50% - 204px - 22.5px, 22.5px));
    bottom: 85px;
}

.uiChatWorkoutMediaUpload {
    display: flex;
}

.uiChatWorkoutMediaUpload .uiOKCancel {
    max-width: calc(408px - 45px - 22.5px);
}

.uiChatWorkoutMediaUploadTrash {
    width: auto;
}
.uiChatWorkoutMediaUploadTrash .uiOKCancelCancel {
    margin-right: 22.5px;
}

.uiChatWorkoutMediaUpload label {
    width: 100%;
    height: 100%;
}

.uiChatWorkoutMediaUpload input {
    display: none;
}

.uiChatWorkoutMedia {
    display: flex;
    align-items: flex-end;
    height: calc(100% - 5px);
    margin-bottom: 5px;
    position: relative;
}


.uiChatWorkOutMediaDelete {
    position: absolute;
    bottom: 0;
    right: -22.5px;
    background: yellow;
}

.uiChatWorkoutMedia img {
    width: 100%;
    max-width: calc(min(408px, 100%));
}

.uiChatWorkoutMedia video {
    width: calc(min(408px, 100%));
}

.uiChatClientMediaDots {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

.uiChatOuraRelink svg {
    height: 45px;
    width: 45px;
}

.slack_emoji {
   height: 22px;
   width: 22px;
}

.slack_italics {
   font-style: italic;               
}

.slack_bold {
   font-weight: bold;
}

.slack_strikethrough {
   text-decoration: line-through;                     
}

.slack_blockquote {
   padding-left: 0;
   position: relative;
}

.slack_blockquote::before {
    position: absolute;
    top: -4px;
    bottom: 0;
    left: -16px;
    display: block;
    width: 4px;
    height: 190%;
    background: rgb(221,221,221,1);
    content: "";
    line-height: 0;
}

.slack_code {
   display: inline-block;
   font-family: monospace;
   background-color: rgba(28, 28, 29, .04);
   color: #e01e5a;
   border: 1px solid rgba(28, 28, 29, .13);
}

.slackFile p {
   font-size: 11px;
}

.slackReactions {
  display: flex;
  margin-left: -7px;
  margin-right: -7px;
  /*margin: 0 0 -7px -7px;*/
  flex-wrap: wrap;
}


.slack_reaction_container {
  cursor: pointer;                          
  /*display: inline-block;*/
  background: #d8e4ea;
  width: 50px;
  height: 22px;
  display: flex;
  align-items: center;
  margin-right: 1px
}

.slack_reaction_container_readonly {
  cursor: default;                                   
}

.slack_reaction_text {
  font-size: 10px;
  width: calc( 100% - 20px);
  display: flex;
  justify-content: center;
}
.slack_reaction_container:hover{
  background: #EEFFFF !important;
}

.slack_reaction_container_readonly:hover {
  cursor: default;                                   
  background: #d8e4ea !important;
}

.slack_reaction_unicode_emoji {
  font-size: 14px;
}
.slack_text{
  margin-bottom: 14px !important;
}

.slack_highlight_text {
  margin-bottom: 14px !important;
  background-color: rgba(242, 199, 68, 0.5)  
}

.slack_reaction_emoji {
   height: 20px;
   width: 20px;
   font-size: 16px;
   vertical-align: middle;
}

.chatTextConference{
  background: rgba(204, 204, 204, 0.9);
  border: none;
}

.slack_pre {
  white-space: pre-wrap;
}

.slack_user {
  color: rgba(18, 100, 163, 1);
  cursor: pointer;
}

.chatTextBottomSpacer{
  height: 8px;
  width: 100%;
}

.chatTextBottomReadonly{
  height: 8px;
  width: 100%;
  color: white;
}

.chatTextMessageSpacer{
  height: 14px;
  width: 100%;
}

.emptySpan {
  width: 0px;
  display: inline-block;
}

.slackPreviewImg {
  width: 100%;                 
  object-fit: cover;

}

.chatTextSearch{
  height: 41px;
  width: calc(100% - 17px);
  left: 14px;
  border-bottom: 1px solid #b3b3b3;
  position: absolute;
  top: -56px;
  background: rgba(255, 255, 255, 0.8);
}
.chatTextSearch svg{
  height: 40px;
  width: 40px;
  fill: #333333
}
.chatTextSearch input{
  background: transparent;
  border: none;
  outline: none;
  height: 40px;
  font-size: 14px;
}

.slack_timestamp {
   cursor: pointer;                 
   text-decoration: none;
   color: #0071bc;
}

.slack_timestamp:hover {
    color: #78Cfff;
    border: 1px
}

.inlineMedia {
   width: 100%;
   position: relative;
}

.inlineMedia video {
   width: 100%;
   object-fit: cover;
}

.inlineMediaMaximize {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 3;
  background: #0071BC;
  cursor: pointer;
}

.inlineMediaMaximize:hover {
  background: #008AD6
}

.inlineMediaMaximize svg {
  height: 45px;
  width: 45px;
}

.inlineMediaPlayPause {
  position: absolute;
  background: #0071BC;
  cursor: pointer;
  bottom: 0px;
}

.inlineMediaPlayPause:hover {
  background: #008AD6
}

.inlineMediaPlayPause svg {
  height: 45px;
  width: 45px;
  fill: white;
}

.userProfileImageLink {
   cursor: pointer;                      
}

.slack_a {
  color: rgb(18, 100, 163);
}

.uiChatInput span {
    background-color: transparent !important;
}

.uiChatFromName { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.uiChatMessageLeft .uiProfileIcon { max-width: 40px; max-height: 40px; }
.uiChatMessageBody { width: 100%; min-width: 0; }
.uiChatMessageText > div { max-width: 100%; }
.uiChatInlineMedia { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.uiChatInlineMedia :is(video,audio,img) { display: block; width: 100%; max-width: 640px; max-height: 480px; object-fit: contain; }
.uiChatInlineAudio { min-width: 0; }
.uiChatAttachmentLink { display: flex; align-items: center; gap: 8px; min-width: 0; color: #3171b7; font-size: 13px; text-decoration: none; }
.uiChatAttachmentLink span { overflow-wrap: anywhere; }
.uiChatAttachmentLink small { flex-shrink: 0; margin-left: auto; color: #666; }
.uiChatAttachmentFile { padding: 8px; background: white; border: 1px solid #cdd5d1; }
.uiChatAttachmentFile svg { width: 35px; height: 35px; fill: #666; }
.website-preview { box-sizing: border-box; width: 100%; max-width: 640px; margin: 8px 0; padding: 10px; gap: 8px; border: 1px solid #cdd5d1; background: white; white-space: normal; overflow: hidden; }
.website-preview-site { font-size: 12px; font-weight: bold; color: #666; height: auto; }
.website-preview-title { display: block; padding: 0; color: #3171b7; font-size: 14px; font-weight: bold; text-decoration: none; overflow-wrap: anywhere; }
.website-preview-description { margin: 0; font-size: 13px; color: #555; line-height: 1.4; overflow-wrap: anywhere; }
.website-preview-image { width: 100%; max-height: 320px; object-fit: contain; }
.website-preview-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #666; }
.uiChatVideoEmbed { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; background: #fafafa; }
.uiChatPortraitEmbed { max-width: 350px; aspect-ratio: 9 / 16; min-height: 350px; }
.uiChatSocialEmbed { display: block; width: 100%; min-height: 200px; height: 560px; border: 0; background: white; aspect-ratio: auto; }
.uiChatSendError { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #bac6c1; background: white; font-size: 14px; color: #4d4d4d; }
.uiChatSendError .uiIcon { width: 45px; height: 45px; flex-shrink: 0; }
.uiChatSendError svg { width: 45px; height: 45px; fill: #3171b7; }
@media (max-width: 600px) {
  .lbMobileMainTop .uiChat .uiChatEmojiPicker:not(.GIFPicker):not(.uiChatCalendarPicker) { left: 8px; right: 8px; }
  .uiChatMessagesContainer { padding: 0 8px 8px; }
  .uiChatMessage { grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 10px 8px 6px; }
  .uiChatMessageLeft { width: 32px; min-width: 32px; }
  .uiChatMessageLeft .uiProfileIcon { max-width: 32px; max-height: 32px; }
  .uiChatMessageCenter { display: contents; }
  .uiChatMessageHeader { grid-column: 2; }
  .uiChatMessageContent, .uiChatMessageBottomRow { grid-column: 1 / -1; }
  .uiChatMessageBottomRow { flex-wrap: wrap; }
  .uiChatMessageButtons { margin-left: auto; }
  .website-preview { padding: 6px; }
}

.lbTodoCard {
    display: flex;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
    max-width: calc(min(400px, 100vw));
    margin-bottom: 0px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 22.5px;
    pointer-events: none;
    overflow: hidden;
}

.lbTodoCardSummary {
    color: rgb(0, 113, 188);
    display: inline-block;
    font-size: 14px;
}

.lbTodoCardTitleReason {
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    color: #888888;
}

.uiLetsBuildAppMobile .lbTodoCard {
    max-width: calc(min(100% - 10px, 100vw - 75px));
    margin-right: 0px;
    width: 100%;
}

.uiCalendarAppointmentEvent .lbTodoCardStatus {
    width: 25px;
    margin-right: 10px;
}

.lbTodoCardStatus {
    min-height: 100%;
    width: 25px;
    margin-right: 5px;
    background: gray;
    width: 10px;
}

.lbTodoCardBody {
    width: calc(100% - 15px);
    display: flex;
    flex-direction: column;
    margin-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    pointer-events: auto;
    cursor: default;
}

.lbTodoCardClickable .lbTodoCardBody {
    cursor: pointer;
}

.lbTodoCardHeader {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 15px;
}

.lbTodoCardProgress {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 0px;
    color: #6d6d6d;
    white-space: pre-wrap;
}

.lbTodoCardDescription {
    font-size: 14px;
    padding-bottom: 15px;
    color: #6d6d6d;
    white-space: pre-wrap;
}

.lbTodoCardWhen {
    font-size: 16px;
    color: rgb(0, 113, 188);
    white-space: nowrap;
}

.lbTodoCardDate {
    color: gray;
    font-size: 13px;
}

.lbTodoCardIcon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform: translate(7px, -5px);
}

.lbTodoCardIcon .uiProfileIcon {
    border-radius: 0;
    background: white;
}

.lbTodoCardIcon .uiProfileIconRing {
    display: none;
}

.lbTodoCardIcon .uiProfileIcon img {
    object-fit: contain;
}

.lbTodoCardIcon img {
    clip-path: none;
    border-radius: 0;
}

.lbTodoCardAction {
    padding-top: 15px;
}

.lbTodoCardMedia {
    width: 100%;
}

.lbTodoCardMedia video {
    width: 100%;
}

.lbTodoCardMedia img {
    width: 100%;
}

.lbTodoCardDemo {
    padding-top: 15px;
    width: 100%;
}

.lbTodoCardClientMedia {
    padding-top: 15px;
}

.lbTodoCardTitle {
    display: flex;
    flex-direction: column;
}

.lbTodoCardTitleActivity {
    color: black;
    font-weight: bold;
    font-size: 14px;
}

.lbTodoCardMarkDoneContainer {
    width: 100%;
}

.lbTodoCardMarkDone {
    margin-top: 15px;
}

.lbTodoCardMarkDone .uiOKCancelOK {
    background: rgb(0, 113, 187);
}

.lbTodoCardMarkDone:hover .uiOKCancelOK {
    background: rgb(66, 145, 244);
}

.lbTodoCardUpload {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lbTodoCardUpload .uiChatTodoMediaUpload  {
    width: 100%;
}

.lbTodoCardUpload .uiChatTodoMediaUpload .uiOKCancelOK {
    background: rgb(0, 113, 187);
}

.lbTodoStatusStarted {
    background: rgb(239, 90, 36);
}

.lbTodoStatusNew {
    background: white;
}

.lbTodoStatusCompleted {
    background: rgb(0, 43, 222)
}

.lbTodoStatusDone {
    background: rgb(37, 183, 68); 
}

.lbTodoCardMediaDots {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lbTodoStatusCanceled {
    background: #4d4d4d;
}

.lbTodoCardCanceled {
   color: rgb(184, 38, 26);
}

.lbTodoCategory {
    color: #666666;
    font-size: 13px;
    transform: translate(0, 4px);
    padding-right: 3px;
    text-align: right;
    overflow-wrap: break-word;
    max-width: 100%;
}

.uiLetsBuildAppMobile .lbTodoCategory {

}

.lbTodoCardOutcomeSlider {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    color: #666666;
}

.lbTodoCardOutcomeTitle {
    width: 100%;
    text-align: center;
    padding: 10px;
    padding-top: 20px;
    font-size: 14px;
    color: #666666;
}

.lbTodoCardOutcomeAsExpected {
}

.lbTodoCardOutcomeSliderRow1 {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.lbTodoCardOutcomeSliderRow2 {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    background: rgb(221, 221, 224);
    padding: 5px;
}

.lbTodoCardOutcome {
    color: rgb(184, 184, 186);
    min-width: 10px;
    height: 100%;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.lbTodoCardOutcomeSelected {
    color: white;
    background: rgb(37, 183, 68);
}

.task-emojis {
    display: inline-block;
}

.task-emotion {
    display: inline-block;
    transform-origin: center left;
    margin-right: 4px;
}

.uiLetsBuildAppDesktop .task-emotion {
    transform: scale(1.5, 1.5)
}

.lbTodoCardButtonsRow1 {
    margin-top: 8px;
    width: 100%;
}

.lbTodoCardButtonsRow1 .uiOKCancel {
    width: 100%;
}

.lbTodoCardProgressRecordedNotes {
    font-size: 14px;
    padding-bottom: 10px;
    color: #6d6d6d;
    white-space: pre-wrap;
}

.lbTodoCardProgressItems {
}

.lbTodoCardProgressItem {
    margin-bottom: 20px;
}

.lbTodoCardProgressNotes textarea {
    margin-top: 15px;
    width: calc(100% - 20px);
    border: none;
    height: 150px;
    resize: none;
    padding: 10px;
    background: rgb(244, 254, 255);
    color: #6d6d6d;
    font-family: Arial;
    border-radius: 0;
    font-size: 14px;
}

.uiLetsBuildAppMobile .lbTodoCardProgressNotes textarea {
    font-size: 16px;
}

.lbTodoCardProgressNotes textarea:focus {
    outline: none;
}

.lbTodoCardOutcomeContainer {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.lbTodoCardProgressControls {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    transform: translate(0, -25px);
    margin-bottom: -25px;
}

.lbTodoCardProgressControls svg {
    fill: #B7DBF3;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

.lbTodoCardProgressControls svg:hover {
    fill: #36A9D3;
}

.lbTodoCardProgressEditorButtons {
    margin-top: 10px;
    margin-bottom: 15px;
}

.lbTodoCardDoneContainer {
    margin-bottom: 25px;
}

.uiAppointment {
    outline: 1px solid #bac6c1;
    outline-offset: -1px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    margin-right: 0px;
    height: 115px;
    margin-bottom: 20px;
    box-shadow: none;
    overflow: hidden;
    width: calc(min(100vw - 10px, 400px));
    min-width: 320px;
    cursor: pointer;
    position: relative;
}

.uiAppointmentChat {
    max-width: 362.5px;
    min-width: 0px;
}

.uiAppointmentWithPayment {
    height: 160px;
}

.uiAppointmentPast {
}

.uiAppointmentClient {
}

.uiAppointmentNoClick {
    cursor: default
}

.uiAppointmentIndicator {
    min-width: 22.5px;
    width: 22.5px;
    background: gray;
    height: 100%;
    margin-right: 22.5px;
}

.uiExertionMax {
    background: rgb(48, 143, 246);
}

.uiExertionHard {
    background: rgb(99, 160, 214);
}

.uiExertionModerate {
    background: rgb(137, 229, 232);
}

.uiExertionLight {
    background: rgb(172, 199, 232);
}

.uiExertionVeryLight {
    background: rgb(212, 224, 243);
}

.uiExertionRest {
    background: rgb(232, 238, 248);
}

.uiAppointmentIndicatorWorkout {
    background: rgb(66, 145, 244);
}

.uiAppointmentIndicatorAccepted {
    background: rgb(37, 183, 68); 
}

.uiAppointmentIndicatorDeclined {
    background: rgb(184, 38, 26);
}

.uiAppointmentIndicatorInWaiting {
    background: #fbb03b;
}

.uiAppointmentInfo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    font-size: 14px;
    width: 100%;
    min-width: 140px;
    /*
    max-height: calc(100% - 30px);
    padding-bottom: 15px;
    padding-top: 15px;
   */
    height: 100%;
    position: relative;
}

.uiAppointmentInfoId {
    font-size: 6px;
    color: #aaaaaa;
    position: absolute;
    bottom: 5px;
    left: 85%;
    font-family: Verdana;
    display: none;
}

.uiAppointmentInfoOrganizer {
    font-size: 14px;
    color: rgb(0, 113, 188);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiAppointmentOrganizerCreds {
    font-size: 14px;
    color: #0071bc;
}

.uiAppointmentWithCreds {
    font-size: 11px;
    color: #42a8a3;
}

.uiAppointmentPaymentInfo {
}


.uiAppointmentPaymentInfoStatus {
    font-size: 14px;
    color: rgb(0, 113, 188);
}

.uiAppointmentPaymentInfoAmount {
    font-size: 14px;
    font-weight: bold;
    color: rgb(37, 183, 68); 
}

.uiAppointmentPaymentInfoAmountNegative {
    /*color: rgb(184, 38, 26);*/
}

.uiAppointmentInfoStartEndTime {
    font-size: 14px;
    color: rgb(0, 113, 188);
    white-space: nowrap;
}

.uiAppointmentInfoTitle {
    font-weight: bold;
    color: black;
    font-size: 14px;
    margin-bottom: 15px;
    max-width: 100%;
    /*
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
*/
}

.uiAppointmentInfoDate {
    color: gray;
    font-size: 13px;
    /* padding-bottom: 10px; */
    display: flex;
    align-items: center;
    gap: 6px;
}

.uiAppointmentInfoDatePast {

}

.uiAppointmentWith {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-right: 20px;
    min-width: 100px;
    max-width: 100px;
    height: 100%;
}

.uiAppointmentWithIcon {
    color: #d6d6d6;
    margin-bottom: 10px;
    max-height: 40px;
}

.uiAppointmentWithName {
    color: #666666;
    font-size: 13px;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 45px;
}

.uiAppointmentStatusCanceled {
    font-size: 14px;
    white-space: nowrap;
    color: rgb(184, 38, 26);
}

.uiAppointmentTimeCanceled {
    font-size: 16px;
    white-space: nowrap;
    color: rgb(184, 38, 26);
}

.uiAppointmentWithChat {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 30px;
    display: none;
}

.uiAppointmentWithChat svg {
    width: 45px;
    height: 45px;
    fill: rgb(37, 183, 68); 
}

@media not all and (pointer: coarse) {
.uiAppointmentWithChat:hover svg {
    fill: #11D316;
}
}

.uiAppointmentMeal .uiProfileIcon {
    border-radius: 0;
    background: white;
}

.uiAppointmentMeal .uiProfileIcon img {
    object-fit: contain;
}

.uiAppointmentMeal .uiAppointmentWithName {
}

.uiAppointmentWhoopActivity .uiProfileIcon {
    border-radius: 0;
    background: white;
}

.uiAppointmentWhoopActivity .uiProfileIconRing {
    display: none;
}

.uiAppointmentWhoopActivity img {
    clip-path: none;
    border-radius: 0;
}

.uiAppointmentWhoopActivity .uiAppointmentWith {
    pointer-events: none;
}

.uiAppointmentDeviceBadge {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.uiAppointmentDeviceBadge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.uiAppointmentInfoTitle .workoutEvent {
    white-space: nowrap;
}

.uiLetsBuildAppMobile .uiAppointmentInfoTitle .workoutEvent {
    font-size: 13px;
}

.uiFitnessSummary {
    background: white;
    width: calc(100% - 30px);
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.uiFitnessSummary text {
    font-size: 10px;
}

.uiFitnessSummary .rv-xy-plot {
    height: auto !important;
    width: auto !important;
}

.uiFitnessSummary .rv-xy-plot__inner {
    transform: translate(-45px, 0);
    height: 100% !important;
    width: 130% !important;
        
}


.lbMobileMain {
    width: 100%;
    position: relative;
    background: #17043d;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}



.lbMobileMain .fdPageHeaderButtons {
    padding-top: 0;
}

.fdPageHeaderSafeArea {
    height: calc(env(safe-area-inset-top));
    width: 100%;
}

.lbMobileMainView {
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
    height: calc(100% - 85px - env(safe-area-inset-bottom, 0px));
}

.lbMobileMainViewFocused {
    height: 100%;
}

.uiLetsBuildAppMobile .lbMobileTodoListSafeArea {
    height: env(safe-area-inset-bottom, 0px);
    width: 100%;
    background:  rgb(235, 235, 235);
}

.lbMobileNav {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #17043d;
    color: white;
    position: absolute;
    bottom: env(safe-area-inset-bottom, 0px);
    width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right) - 45px);
    padding-top: 15px;
    padding-left: 22.5px;
    padding-right: 22.5px;
    height: 75px;
    padding-bottom: 0px;
    padding-top: 10px;
    font-size: 13px;
    z-index: 10;
}




.uiLetsBuildAppIOS.uiLetsBuildAppWeb .lbMobileNav {
    bottom: 0;
}



.uiSidebarMobile .uiSidebarHeader {
    display: none
}

.uiSidebarMobile .uiSideListHeader {
    display: none
}

.uiSidebarMobile .uiSidebarLogo {
    display: none
}

.lbMobileNavButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 45px;
}
.lbMobileNavButtonSelected {
}

.lbMobileNavButtonIcon div {
    height: 45px;
    width: 45px;
}

.lbMobileNavButtonIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lbMobileNavButtonIcon svg {
    fill: white;
}

.lbMobileNavButtonIconSelected svg {
}


.Contacts .lbMobileNavButtonIcon svg {
}

.lbMobileNavButtonlabel {
}

.lbMobileMainTop {
    width: 100%;
    height: 100%;
}

.lbMobileMainChat {
    width: 100%;
    height: 100%;
}

.lbMobileMainView .uiClientMain {
    position: relative;
    background: white;
    height: auto;
    min-height: 100%;
}

.lbMobileMainView .activeContacts {
    /*
    top: calc(0px + env(safe-area-inset-top));
    height: calc(100% - env(safe-area-inset-top));
   */
    top: 0 !important;
    height: 100% !important;
    width: 100%;
    overflow: hidden;
}

.lbMobileMainTop .uiChatButtonContainer {
    margin-left: 0px;
    width: 100%;
}

.lbMobileMainTop .uiChatTyping {
    padding-left: 0;
    font-size: 11px;
    justify-content: center;
    flex-grow: 2;
}

.lbMobileMainTop .uiChatSendButtonContainer {
    width: auto;
}

.lbMobileMainTop .uiChatCallControls {
    width: 100%;
}

.lbMobileMainTop .uiChatInputContainer {
    left: 0px;
    width: 100%;
    max-width: 100%;
    position: absolute;
}

.lbMobileMainTop .uiChatSendButton {
    padding: 0;
}

.lbMobileMainTop .uiChatSendButtonLabel {
    display: none;
}


.lbMobileMain .uiSideListElementControls {
    z-index: 50;
    left: auto;
    right: 0px;
    filter: none;
}

.lbMobileMainTop .uiOpenContactViewMobile {
}

.lbMobileMainTop .uiOpenContactChat {
    z-index: 4;
    position: static;
}

.lbMobileMain .uiOpenContactVideo {
    z-index: 3;
    transform: translate(0, -5px)
}

.lbMobileMain .uiOpenContactVideoFullscreen {
    z-index: 5;
    transform: none;
}

.lbMobileMainTop .fdPageHeaderTitle {
    color: white;
    text-overflow: ellpsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
}

.lbMobileMainTop .fdPageContent {
    background: #17043d;
}


.lbMobileMainTop .fdPageHeader {
    background: #17043d;
    color: white;
}




.lbMobileMainTop .fdPageScroller {
    background: white;
}

.lbMobileMainTop .uiSidebarMobile {
    position: relative;
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.lbMobileMainTop .uiSidebarBodyScroller {
    width: 100%;
}

.lbMobileMainTop .uiSidebarBody {
    z-index: 0;
}

.lbMobileMainTop .uiSideListElementContainer {
    position: relative;
    z-index: 0;
    padding-left: 0px;
}

.lbMobileMainTop .uiSideListMiddle {
}

.lbMobileMainTop .uiSideListRight {
    transform: translate(-22.5px, 0);
    padding-right: 4px;
}

.lbMobileMainTop .uiSideListRight .uiSideListItemSubtitle {
    min-height: auto;
    display: flex;
    justify-content: flex-end;
    width: 53px;
}

.lbMobileMainTop .uiSideListElementStatus {
    top: 3px;
    right: 70px;
}

.lbMobileMainTop .uiSideBarCycleData .uiSideListRight {
    transform: translate(-22.5px, 0)
}

.lbMobileMainTop .uiSideListTablet {
    margin: 0;
    padding: 0;
    height: auto;
}

.lbMobileMainTop .fdSearchField {
    background: white;
}

.lbMobileMainTop .fdPageBackLabel {
    color: white;
}

.lbMobileMainTop .back-arrow-2 {
    fill: white;
}

.lbMobileMainTop .back-arrow-3 {
    fill: transparent;
}

.lbMobileMainTop .uiMeTitle {
    display: none;
}

.lbMobileMainTop .uiMeTab .uiSideListContactUnread {
    height: calc(100%);
}

.lbMobileMainTop .uiSideListContactUnread {
    height: 43px;
}

.lbMobileMainTop .uiMe {
    display: flex;
    flex-direction: column;
}

.lbMobileMainTop .uiMeTitle {
    
}

.lbMobileMainTop .uiMeTitle {
    display: none;
}

.lbMobileMainTop .uiMeBodyContainer {
    top: 0px;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.lbMobileMainTop .uiMeTabLabel {
    white-space: nowrap;
}

.lbMobileMainTop .uiMeTabsContainer {
    position: relative;
    width: 100%;
    height: 100%;
}

.lbMobileMainTop .uiMeBody1Column {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.lbMobileMainTop .uiMeTabsBg {
    background: #17043d;
    position: relative;
}

.lbMobileMainTop .uiMeTabs {
    background: white;
    width: 100%;
    margin: 0;
}

.lbMobileMainTop .uiMeTabs {
    height: 35px;
}

.lbMobileMainTop .uiMeTab {

    height: 35px;
}

.lbMobileMainTop .uiCalendarMobile {
    padding-top: 0px;
    position: relative;
    color: #737373;
    background: white;
    max-height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.lbMobileMainTop .uiCalendarEvents {
    width: 100%;
    padding: 0;
    background: white;
}

.lbMobileMainTop .uiChatMessageCenter {

}

.lbMobileMainTop .uiCalendarAppointmentEvent {
    width: 100%;
}

.lbMobileMainTop .uiAppointment {
    width: calc(100% - 0px);
    margin-right: 0px !important;
    min-width: 0;
}

.lbMobileMainTop #todo .uiMeCardContent {
    box-shadow: none;
}

.lbMobileMainTop .uiMeFeed .uiAppointment {
    width: 100%;
}

.lbMobileMainTop .uiAppointmentWithName {
    max-width: 80px;
}

.lbMobileMainTop .uiAppointmentMeal .uiAppointmentWithName {
    font-size: 11px;
}


.lbMobileMainTop .uiCalendarDropTarget {
    background: white;
}

.lbMobileMainTop .uiSettings {
    background-color: #17043d;
    position: relative;
    padding: 0;
    margin: 0;
}

.lbMobileMainTop .uiSettingsTitle {
    display: none;
}

.lbMobileMainTop .uiSettingsBody {
    margin: 0;
    height: 100%;
}

.lbMobileMainTop .uiSettingsTabview {
    width: 100%;
    background: transparent;
}

:is(.uiLetsBuildAppIPad) .uiSettingsNotifications {
    margin-left: 22.5px;
}

:is(.uiLetsBuildAppMobile) .uiSettingsNotifications {
    width: calc(100% - 30px);
    margin-left: 15px;
}

.uiLetsBuildAppIPad .uiSettings .uiDeviceSetup {
    width: 100%;
    margin: 0;
}

.uiLetsBuildAppIPad .uiSettingsTabviewBodyTab {
    height: 100%;
}

.uiLetsBuildAppIPad .uiSettings .uiDeviceSetupVideo video {
    max-height: none;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiSettingsTabviewTabs {
    height: auto;
    width: calc(100% - 30px);
    margin: 0;
    justify-content: space-between;
    padding-left: 15px;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiSettingsTab {
    width: 100%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiSettingsTabTab {
    width: auto;
}

:is(.uiLetsBuildAppMobile) .uiSettingsProfileFields {
    width: auto;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
}

:is(.uiLetsBuildAppIPad) .uiSettingsProfileFields {
    width: auto;
    margin-left: 22.5px;
    margin-right: 22.5px;
    width: calc(100% - 50px);
}

:is(.uiLetsBuildAppMobile) .uiSettingsProfileFields .uiInputFieldField {
    width: 100%;
}

:is(.uiLetsBuildAppMobile)  .uiSettingsDegreesBody {
    width: auto;
}

:is(.uiLetsBuildAppMobile) .uiSettingsLicensesBody {
    width: auto;
}

:is(.uiLetsBuildAppMobile)  .uiSettings .uiSettingsProfile .uiOKCancel {
    min-width: auto;
    max-width: none;
}


.uiLetsBuildAppIPad .uiSettings .uiOKCancel {

}

.uiLetsBuildAppIPad .uiMeWhoopConnect {

}

.uiLetsBuildAppIPad .uiSettings .uiMeCard {
    margin-left: 0;
    margin-right: 0;
}

.lbMobileMainTop .uiChatEmojiPicker {
    left: 20px;
}

.lbMobileMainTop .uiEmojiPickerArrow {
    left: 18px;
}

.lbMobileMainTop .GIFPicker .uiEmojiPickerArrow {
    left: 10px;
}

.lbMobileMainTop .uiChatCalendarContainer {
    width: calc(100% - 100px);
}


.lbMobileMainTop .uiSideListItemMiddle {
    font-size: 16px;
}

.lbMobileMainTop .uiSideListRight {
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .fdPopup input {
    font-size: 16px !important;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .fdPagePopup input {
    font-size: 16px !important;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad, .uiLetsBuildAppMobile) .fdPopup .uiScheduleAppointmentPopup {
    top: 0;
    position: relative;
    align-items: flex-start;
    background: #17043d;
    min-height: 0;
    border-radius: 0;
    height: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    padding: 0;
    overflow: visible;
    animation: none;
}

:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad, .uiLetsBuildAppMobile) .fdPagePopup .uiScheduleAppointmentPopup {
    top: 0;
    position: relative;
    align-items: flex-start;
    background: #17043d;
    min-height: 0;
    height: auto;
    bottom: auto;
    left: 0;
    width: 100%;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    animation: none;
}


.lbMobileWebPopup .uiScheduleAppointmentMealFoods {
    max-height: none;
}

.fdPopup .uiScheduleAppointment {
    position: relative;
    margin-top: 0;
    transform: none;
    width: 100%;
    box-shadow: none;
}

.fdPagePopup .uiScheduleAppointment {
    position: relative;
    margin-top: 0;
    transform: none;
    width: 100%;
    box-shadow: none;
    align-items: flex-start;
    justify-content: flex-start;
    max-height: calc(100dvh - 80px);
}

.fdPagePopup .uiPage {
    box-shadow: none;
    width: 100%;
    height: auto;
    max-height: inherit;
}

.lbMobileMainTop .uiInputFieldPhoneInput{
    width: calc(100vw - 140px) !important;
}
/*
.lbMobileWebPopup .uiScheduleAppointmentBodyFieldVideo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px
}


.lbMobileWebPopup .uiScheduleAppointmentBodyFieldVideo video {
    max-height: 100px;
    object-fit: contain;
    width: auto;
}
*/

.lbMobileMainTop .uiCalendarEventsDate {
    white-space: nowrap;
    font-size: 14px;
}

.lbMobileMainTop .fdPageScroller {
    background: #17043d;

}

.uiScheduleAppointmentHeaderTitle {

}

.uiScheduleAppointmentHeaderDate {

}

.uiScheduleAppointmentHeaderIcon {
    padding-top: 10px;
}

.uiScheduleAppointmentHeader {

}
.lbMobileMainTop .uiSelectionList {
    min-height: 100%;
    background: white;
}

.lbMobileMainTop .uiSelectionListOption {
    background: white;
}

.lbMobileMainTop .uiSelectionListOptionName {
    white-space: normal;
    max-width: 100%;
    display: flex;
    overflow-wrap: break-word;
}

.lbMobileMainTop .uiDeviceSetupSelection .uiSelectionListOptionName {
    white-space: nowrap;
    max-height: 20px;
    font-size: 13px;
}

.lbMobileMainTop .uiSideListItemMiddleTruncated {
    max-width: none;
}

.lbMobileMainTop .uiCalendarSearch {
    width: calc(100% - 20px);
    margin-left: 10px;
}

.lbMobileMainTop .uiCalendarScroll {
    width: calc(100% - 20px);
    margin-left: 10px;
}

.lbMobileMainTop .uiFileUploadForm {
    display: none;
}

.fdPopup .uiMeBAA {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    filter: none;
    height: calc(100% - 235px);
    border-radius: 0;
    background: rgb(33, 161, 196);
}

.fdPopup .uiMeBAAFooter {
    border-radius: 0;
}

.lbMobileMainTop .uiChatGIFSelect {
}

.lbMobileMainTop .uiChatGIFSelect > div {
}

.lbMobileMainTop .GIFPicker .uiChatEmojiPickerContainer  {
    height: 100%;
}

.lbMobileMainTop .GIFPicker  {
    left: 19px !important;
}

.lbMobileMainTop .GIFPicker .uiEmojiPickerArrow {
    left: 59px;
}

.lbMobileMainTop .uiChatGiphyAttributionImage {
    right: none;
    left: calc(100%/2 - 40px);
}

.lbMobileMainTop .uiChatCalendarPicker {
    left: 15px !important;
    width: calc(100% - 65px)
}

.lbMobileMainTop .uiChatCalendarPicker  .uiCalendarEventControls {
    transform: translate(-0px, -60px);
    width: 100%;
}

.lbMobileMainTop .uiChatCalendarPicker  .uiCalendarEvent {
    max-width: none;
    width: 100%;
}

.lbMobileMainTop .uiChatCalendarPicker  .uiCalendarEventPlus {
}

.lbMobileMainTop .uiChatCalendarPicker  .uiCalendarPlusText {
    max-width: none;
}

.lbMobileMainTop .uiChatCalendarPicker .uiChatCalendarContainer {
    width: 100%;
}

.lbMobileMainTop .uiChatCalendarPicker .uiEmojiPickerArrow {
    left: 103px;
}

.lbMobileMainTop .uiChatInput img {
    max-width: calc(100vw - 10px);
}


.lbMobileMainTop .uiChatInputPlaceholder {
    font-size: 16px;
    bottom: 10px;
}

.lbMobileMainTop .uiChatEditor {
    padding-left: 15px;
    margin-left: 0;

}
.lbMobileMainTop .uiChatEditorBg {
    left: 0;
}

.lbMobileMainTop .uiChatCallControls {
    left: 0px;
}


.lbMobileMainTop input {
    font-size: 16px !important;
}

.lbMobileMainTop .uiChatInput {
    font-size: 16px;
    overflow-wrap: break-word;
}

.lbMobileMainTop .uiToggleButtonLabel {
    display: none;
}

.lbMobileMainTop .uiToggleButton .uiIcon {
    width: 45px;
    padding: 0;
}

.lbMobileMainTop .uiRemoteVideoCallButtonContainer {
    margin-left: 0;
}

.lbMobileMainTop .uiCallLobbyAccept .uiCallButton {
    left: 0;
}

.lbMobileMainTop .uiRemoteVideoBlackboardControlsIPad {
    top: 45px;
    right: 0;
}

.lbMobileMainTop .uiBlackboardColorPicker {
    background: #4d4d4d;
    z-index: 10;
    padding-bottom: 25px;

}

.lbMobileMainTop .uiChatReactionCount {
    font-size: 14px;
}



.lbMobileMainTop .uiActiveContactViewOptions {
    position: relative;
    top: 0px;
}

.lbMobileMainTop .uiActiveContactViewOptionButtons {
    position: relative;
    background: #17043d;
}


.lbMobileMainTop .fdRadioButtonsTrack {
}

.lbMobileMainTop .fdRadioButton {
    font-size: 13px;
}

.lbMobileMainTop .uiActiveContactCalendar {
    background: white;
    min-height: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
}

.lbMobileMainTop .uiActiveContactBlackboard .uiCallButton {
    display: none;
}

.lbMobileMainTop .uiActiveContactCalendar .uiCallButton {
    display: none;
}

.lbMobileMainTop .uiActiveContactBlackboard > .uiRemoteVideoStreamContainer {
    z-index: 5;
}

.lbMobileMainTop .uiActiveContactCalendar > .uiRemoteVideoStreamContainer {
    z-index: 5;
    pointer-events: none;
}


.lbMobileMainTop .uiCallLobbyAccept .uiOKCancel {
    max-width: 60%;
}

.lbMobileMainTop .uiActiveContactCalendar .uiRemoteVideoTrack {
    height: auto;
}
.lbMobileMainTop .uiActiveContactBlackboard .uiRemoteVideoTrack {
    height: auto;
}


.lbMobileMainTop .uiActiveContactSettings .mbsc-form-group {
    margin-left: 0
}
    

.lbMobileMainTop .notImplemented {
    color: white;
}

.lbMobileMainTop .uiActiveContactViewContent {
    position: relative;
    top: 0px;
    height: calc(100% - 45px);
    overflow: hidden;
    background: black;
}

.lbMobileMainTop .uiActiveContactViewContent .fdPageContent {
    background: #17043d;
}

.lbMobileMainTop .uiActiveContactViewContent .fdPageScroller {
    background: #17043d;
}


.uiMealDetails {
    width: calc(100% - 45px);
    background: white;
    display: flex;
    flex-direction: column;
    padding: 15px;
    padding-left: 22.5px;
    padding-right: 22.5px;
}

.lbMobileMainTop .uiNiceButton .spinner-cls-1 {
    stroke: #6d6d6d;
}

.lbMobileMainTop .uiNiceButton .spinner-cls-2 {
    fill: #6d6d6d;
}

.lbMobileMainTop .fdPageTitleRow {
    display: none;
}

.lbMobileMainTop .fdRadioButtons {
    background: #17043d;
}

.lbMobileMainTop .uiWhoopProfileLogo svg {
    transform: scale(.7, .7);
}

.lbMobileMainTop .uiActiveContactViewOptionButtons {
    position: relative;
}

.uiManageGroupSettings .uiCreateGroupBody {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.uiManageGroupSettings .uiCreateGroupMembersLabel {
    margin-top: 0;
}

.uiManageGroupSettings .uiCreateGroupMembers {
    min-height: 125px;
}

.uiMobileContactsSearch {
    display: flex;
    width: 100%;
}
.uiMobileContactsSearch .fdSearchFieldContainer {
    width: 100%;
}

.uiMobileContactsAddContact {
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    margin-right: -5px;
    cursor: pointer;
}

.uiMobileContactsAddContactSelected {
    background: rgb(37, 183, 68); 
}


.uiMobileContactsAddContact svg {
    fill: white;
}

.uiMobileContactsAddContact rect {
    display: none;
}

.uiContactsMobileAddContactCard {
    position: absolute;
    top: 2px;
    left: 16px;
    right: 16px;
    display: flex;
    z-index: 20;
    filter: none;
    box-sizing: border-box;
    border: 1px solid #bac6c1;
    background: white;
}

.uiContactsMobileAddContactCard .uiMeCard {
    width: 100%;
    margin: 0;
}

.uiContactsMobileAddContactCard .uiMeCardTitle {
    margin-left: 16px;
}

.uiContactsMobileAddContactCard .uiMeContactLinkTab {
    display: none;
}

.uiContactsMobileAddContactCard .uiMeContactText {
    padding-top: 10px;
}

.uiContactsMobileAddContactCard .uiMeCardContent {
    width: 100%;
    max-width: none;
    box-shadow: none;
}

.uiContactsMobileContactLinkArrow {
    position: absolute;
    transform: rotate(45deg);
    height: 18px;
    width: 18px;
    right: 2px;
    top: -10px;
    box-sizing: border-box;
    border-left: 1px solid #bac6c1;
    border-top: 1px solid #bac6c1;
    background: white;
}


.lbMobileMainTop .uiChatAppointmentContainer .uiAppointment {
    max-width: 100%;
    min-width: 0;
}

.lbMobileMainTop .fdZXingScanner {
    position: fixed;
    height: 100%;
    width: 100%;
}

.lbMobileNavButton {
    position: relative;
}

.lbMobileNavButtonUnread.uiSideListContactUnread {
    position: absolute;
    left: 45px;
    min-width: 12px;
    top: 0px;
}

.lbMobileNavButtonSelected .uiSideListContactUnread {
  
}

.lbButtons {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;

    width: 100%;
    opacity: 1;

    animation-name: letsButtonsKeys;
    animation-duration: 1s;
    animation-timing-function:ease-out;
    animation-iteration-count: 1;

}

.uiLetsBuildAppMobile .lbButtons {
    padding-top: 70px;
    animation-name: letsButtonsKeysMobile;
}

.lbSignin {
    cursor: pointer;

    height: 50px;
    width: 370px;

    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    color: #BBBBBB;
    font-weight: normal;
    font-size: 18px;
}

.uiLetsBuildAppMobile .lbSignin {
    width: 290px;
}

.lbSignin:hover {
    color: #FFFFFF;
}

.lbCreate {
    cursor: pointer;

    height: 50px;
    width: 470px;

    text-align: center;
    vertical-align: middle;
    line-height: 50px;
    color: #2E3192;

    font-weight: bold;
    font-size: 18px;

    background-color: #00FFD4;
}

.lbButtonText {
    width: 300px;
    padding: 18px;

    text-align: center;
    vertical-align: middle;
    color: #888888;

    font-weight: normal;
    font-size: 13px;
}

.uiLetsBuildAppMobile .lbButtonText {
    width: 300px;
    padding: 13px;
}

.lbBuittonLineSep {
    width: calc(100% - 100px);;
    margin: 10px;
    height: 2px;
    background-color: #666666;
}

.uiLetsBuildAppMobile .lbCreate {
    width: 340px;
    margin-left: 0px;
}

.lbCreate:hover {
    color: #FFFFFF;
    background-color: #008EBF;
}

@keyframes letsButtonsKeys {
    0%  {
        width: calc(100% + 392px);
        opacity: 0;
    }
  
    100% {
        width: calc(100% - 92px);
        opacity: 1;
    }
  }
  
@keyframes letsButtonsKeysMobile {
    0%  {
        width: calc(100% + 300px);
        opacity: 0;
    }
  
    100% {
        width: 100%;
        opacity: 1;
    }
}


.lbFooter {
    position: fixed;
    bottom: 10px;
    left: 0px;
    width: 100%;
    height: 20px;
}

.lbFooterText {
    font-size: 11pt;
    color: #333333;
    padding-left: 27px;
}

.letsLogo {
  position:relative;
  top: -703px;
  width: 360px;
  height: 105px;
 
  animation-name: letsLogoKeys;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes letsLogoKeys {
    0%  {
      opacity: 0;
    }
  
    100% {
      opacity: 1;
    }
}
.lbGraphic {
    max-height: 100%;
}

.letsAnimateDetail {
  margin-left: 0px;
  opacity: 1;

  animation-name: letsGraphicKeys;
  animation-duration: 0.5s;
  animation-timing-function:ease-out;
  animation-iteration-count: 1;
}

@keyframes letsGraphicKeys {
  0%  {
    margin-left: -30px;
    opacity: 0;
  }

  100% {
    margin-left: 0px;
    opacity: 1;
  }
}

.letsDetail {
    /* overflow: hidden; */
}

.letsFill {
    width: 153px;
    height: 325px;

    background-image: url(/static/media/BackDetail_2x.63157ede1f421b2eeedb.png);
    background-size: 153px 325px;
}

.letsHeroContainer {
    width: 100%;
    height: 100%;
}

.lbHeroControls {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.letsHero {
    width: 100%;
    height: 100%;
    opacity: 0.85;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-image: 
      linear-gradient(0deg, rgba(20,36,97,.99) 30%, rgba(20,36,97,0) 73%),
      url(/static/media/Hero_15x.593b7af28bd18127485c.png);
    background-position: 85% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    animation-name: letsHeroKeys;
    animation-duration: 0.8s;
    animation-timing-function:ease-out;
    animation-iteration-count: 1;
}


.letsTitleText {
  width: 690px;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  
  filter: none;
}

.uiLetsBuildAppMobile .letsTitleText {
  width: calc(100% - (28px *2));
  text-align: left;
  font-size: 20px;
}

.letsSubText {
  width: 455px;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 25px;
  text-align: center;
  font-weight: normal;
  
  filter: none;
}

.uiLetsBuildAppMobile .letsSubText {
  width: calc(100% - (35px *2));
  font-size: 15px;
  text-align: right;
  font-weight: bold;
}

.letsSVGDevices svg {
  width: 384px;
  height: 338px;
}

.uiLetsBuildAppMobile .letsSVGDevices svg {
  width: 308px;
  height: 57px;
  filter: none;
}

.letsSVGDevices {
  padding-top: 40px; 
  padding-bottom: 40px;
}

.uiLetsBuildAppMobile .letsSVGDevices {
  padding-top: 20px; 
  padding-bottom: 20px;
}

.letContent {
  position: relative;
  top: -130px;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

@keyframes letsHeroKeys {
    0%  {
      background-position: calc(50% + 30px) 50%;
      opacity: 0;
    }
  
    100% {
      background-position: 50% 50%;
      opacity: 0.85;
    }
}

.letsSurface {
    display: flex;
    flex-direction:row;
    align-items: flex_start;
    height: 100%;
}

.lbMain {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.uiLetsBuildAppMobile .lbMain  {
    position: auto;
    height: 100%;
    width: 100%;
    background: black;
}

.lbHeadline {
    font-size: 30px;
    display: inline-block;
    max-width: 620px;
}

.lbMainTitleMobile {
}

.lbMainBlurbs {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.lbMainBlurbs > div {
    height: 100%;
    width: 100%;
}

.lbMainBlurbs .lbWorkoutCardMediaDots {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 30px;
    height: 40px;
    pointer-events: auto;    
}

.uiLetsBuildAppMobile .lbMainBlurbs .lbWorkoutCardMediaDots {
    bottom: calc(env(safe-area-inset-bottom) + 45px);
}

.uiLetsBuildAppMobile.uiLetsBuildAppWeb .lbMainBlurbs .lbWorkoutCardMediaDots {
    bottom: 10px;
}

.lbMainBlurbs .react-swipeable-view-container {
    height: 100%;
    width: 100%;
}

.lbMainBlurbsBlurb {
    pointer-events: auto;
    width: 100%;
    position: absolute;
    top: calc(max(50%, 320px));
    pointer-events: none;
}

.lbMainBlurbsControls {
    z-index: 4;
    pointer-events: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    pointer-events: none;
}

.lbMainBlurbsBlurbControl {
    top: 0;
    width: 100%;
    position: absolute;
    height: 45px;
    pointer-events: auto;
}

.lbMainBlurbsBack {
    top: 0;
    left: 45px;
    position: absolute;
}

.lbMainBlurbsFwd {
    top: 0;
    position: absolute;
    right: 45px;
}

.uiLetsBuildAppMobile .lbMainBlurbsFwd {
    right: 15px;
    top: 15px;
}

.uiLetsBuildAppMobile .lbMainBlurbsBack {
    left: 15px;
    top: 15px;
}


.lbMainBlurbsBack svg {
    cursor: pointer;
}

.lbMainBlurbsFwd svg {
    transform: rotate(-180deg);
    cursor: pointer;
}

.lbMainBlurbsBack .back-arrow-2 {
    fill: white;
}

.lbMainBlurbsFwd .back-arrow-2 {
    fill: white;
    
}

.uiLetsBuildAppMobile .lbMainTitle {
    display: none;
}

.uiLetsBuildAppMobile.uiLetsBuildAppWeb .footerText {
    display: none;
}

.lbMainTitleMobile {
    color: white;
    position: relative;
    font-weight: bold;
    top: 50%;
    left: 0;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;

    text-align: center;
    flex-direction: column;
    transform: translate(0, -75px);
    pointer-events: auto;
    text-transform: capitalize;
    text-shadow: -1px -1px gray;
}

.uiLetsBuildAppMobile .lbMainTitleMobile {
    font-size: 22px;
    transform: translate(0, -0px) 
}

.uiLetsBuildAppMobile.uiLetsBuildAppWeb .lbMainTitleMobile {
    transform: scale(.8, .8)
}

.uiLetsBuildAppMobile.uiLetsBuildAppWeb .letsHero {
    opacity: 0.65;
}

.uiLetsBuildAppMobile .lbHeadline {
    font-size: 22px;
    max-width: calc(100vw - 45px);
}

.lbDividedBy {
    height: 4px;
    width: 620px;
    background: white;
    color: transparent;
    transform: translate(0, 15px);
}

:is(.uiLetsBuildAppIpad) .lbDividedBy {
    width: 300px;
}

:is(.uiLetsBuildAppMobile) .lbDividedBy {
    width: 326px;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIpad) .lbHeadline {
    margin-top: 5px;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .lbMainTitleMobile {
}

:is(.uiLetsBuildAppFirefoxDesktop) .lbHeadline {
    transform: translate(0, 30px);
}

.lbBlurbFadeSelected {
    animation-name: blurbFadeIn;
    animation-duration: 2s;
}

.lbBlurbFadeUnselected {
    animation-name: blurbFadeOut;
    animation-duration: 2s;
}


@keyframes blurbFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1.0
    }
}

@keyframes blurbFadeOut {
    0s {
        opacity: 1.0
    }

    2s {
        opacity: 0.0
    }
}

.uiSettings {
    font-size: 14px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    background: #17043d;
    background-image: 
        linear-gradient(0deg, rgba(20,36,97,.99) 30%, rgba(20,36,97,0) 73%),
        url(/static/media/Hero_15x.593b7af28bd18127485c.png);
    background-position: 85% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.uiLetsBuildAppMobile .uiSettings {
    /* max-height: calc(100% - env(safe-area-inset-bottom, 45px)); */
}

.uiSettingsTitle {
    max-width: 1280px;
    margin-inline: auto;
    box-sizing: border-box;
    background: white;
    height: 45px;
    min-height: 45px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    padding-left: 24px;
    color: #6d6d6d;
    cursor: default;
    font-size: 18px;
    font-weight: bold;
    z-index: 1;
}


.uiSettingsBody {
    width: 100%;
    height: 100%;
}

.uiLetsBuildAppMobile .uiSettingsBody {
}

.uiSettingsTabBody {
    width: 100%;
}

.uiSettingsTabs {
    height: calc(100% - 90px);
}

.uiSettingsTab {
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.uiSettingsProfile {
    width: 100%;
    padding-bottom: 15px;
}

.uiSettingsProfile .uiNotificationSetting {
    font-size: 14px;
    background: rgb(243, 254, 255)
}

.uiLetsBuildAppMobile .uiSettingsProfile .uiNotificationSetting {
    font-size: 16px;
}

.uiSettingsNotifications {
    width: 100%;
    height: 100%;
}

.uiSettingsProfileFields {
    margin-left: 45px;
    margin-right: 45px;
    width: calc(100% - 90px);
}

.uiSettingsProfileFields .uiInputFieldField {
    width: 100%;
    max-width: 430px;
}

.uiSettingsProfileFields .uiInputFieldInput {
    padding-left: 30px;
    min-width: 0;
    width: 0;
    flex: 1;
}

.uiSettingsProfileFields .uiInputFieldPhoneInputField {
    flex: 1;
    min-width: 0;
}

.uiSettingsProfileFields .uiOKCancel {
    max-width: 430px;
}

.uiSettingsProfileFields .uiOKCancelOKIcon {
    flex: 0 0 45px;
}

.uiSettingsProfileFields .uiOKCancelOKLabel {
    min-width: 0;
    white-space: normal;
    text-align: right;
    line-height: 20px;
}

.uiSettingsProfileFields  .uiInputFieldPhoneInputCountryCode {
    margin-left: 15px;
}

.uiSettingsProfileFields .uiInputFieldPhoneInput {
    padding-left: 5px;
}

.uiSettingsProfileFields .uiOKCancelOK {
}

.uiSettingsProfileFields .uiOKCancelOK:hover {
}

.uiSettingsTabview {
    max-width: 1280px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
}


.uiSettingsProfilePicture {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.uiSettingsTabviewTabs {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    height: 45px;
    padding: 0 22.5px;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    background: white;
}

.uiSettingsTabviewTabs > .uiSettingsTab { flex: 1 1 0; min-width: 0; width: auto; }


.uiLetsBuildAppMobile .uiSettingsTabviewTabs {
    padding: 0;
}

.uiSettingsTabviewBody {
    background: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}







.uiSettingsTabviewBodyTab {
    height: calc(100% - 30px);
    height: 100%;
}


.uiSettingsTabTab {
    background: white;
    display: flex;
    align-items: center;
    height: 45px;
    width: 100%;
    min-width: 0;
    justify-content: center;
    color: #666666;
    cursor: pointer;
}

.uiSettingsTabSelected {
    background: rgb(37, 183, 68);
    color: white;
    cursor: default;
}

.uiSettingsTabTab:hover {
    background: #B6EEFF
}

.uiSettingsTabSelected:hover {
    background: rgb(37, 183, 68) !important;
}


.uiSettingsTabIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 36px;
    flex: 0 0 36px;
    overflow: hidden;
}

.uiSettingsTabIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiSettingsTabIcon svg {
    height: 45px;
    fill: rgb(37, 183, 68);
}

.uiSettingsTabSelected .uiSettingsTabIcon svg {
    fill: white; 
}

.uiSettingsTabLabel {
    padding-right: 8px;
    font-size: 12px;
}

@media only screen and (max-width: 800px) {
.uiSettingsTabLabel {
    display: none;
}
}

.uiLetsBuildAppIPad .uiSettingsTabTab {
    width: auto;
}

.uiLetsBuildAppIPad .uiSettingsTabview {
    width: 100%;
}

.uiLetsBuildAppIPad .uiSettingsTabviewTabs {
    justify-content: space-between;
    width: 100%;
}

.uiLetsBuildAppMobile .uiSettings .uiMeLinkTabContent .uiMeCard {
    margin-left: 0;
    margin-right: 0;
    transform: translate(15px, 0);
    width: calc(100% - 30px);
}

.uiLetsBuildAppMobile .uiSettingsTabviewBodyTab .uiDeviceSetup {
    width: calc(100% - 30px);
    transform: translate(15px, 15px);
}

.uiSettings .uiDeviceSetup {
    height: calc(100% - 30px);
}


.uiLetsBuildAppMobile .uiSettings .uiMeCardContent {
    width: 100%;
    max-width: none;
}

.uiSettings .uiMeCardContent {
    width: 100%;
    max-width: calc(100% - 22.5px);
}

.uiSettings .uiMeCard {

    max-width: none;
}

.uiLetsBuildAppMobile .uiSettingsTabTab {
    justify-content: center;
}

@media (min-width: 701px) and (max-width: 1150px) {
    .uiSettingsTabviewTabs { height: 66px; }
    .uiSettingsTabTab { height: 66px; flex-direction: column; }
    .uiSettingsTabIcon { height: 34px; flex: 0 0 34px; }
    .uiSettingsTabviewTabs .uiSettingsTabLabel { display: block; padding: 0 3px; font-size: 11px; line-height: 14px; text-align: center; overflow-wrap: anywhere; }
}

@media (min-width: 701px) and (max-width: 760px) {
    .uiSettingsTabviewTabs, .uiSettingsTabTab { height: 45px; }
    .uiSettingsTabTab { flex-direction: row; }
    .uiSettingsTabIcon { height: 45px; flex: 0 0 36px; }
    .uiSettingsTabviewTabs .uiSettingsTabLabel { display: none; }
}

.uiSettingsSave {
    width: 100%;
    height: 45px;
    margin-bottom: 30px;
}

.uiSettingsSignout {
}

.uiSettingsSignout .uiOKCancel {
    min-width: 0;
}

.uiSettingsSignout .uiOKCancelOK {
    background: rgb(184, 38, 26);
}

.uiSettingsSignout .uiOKCancelOK:hover {
    background: #CA0000;
}


.uiSettingsFormError {
    font-size: 14px;
    color: rgb(255, 183, 173);
    padding-left: 30px;
    height: 45px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.uiSettingsDegrees {
    display: flex;
    flex-direction: column;
    position: relative;
}

.uiSettingsDegreesButton {
    height: 45px;
    margin-left: 22.5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    width: calc(100% - 22.5px);
    position: relative;
}

.uiSettingsDegreesLabel {
    padding-top: 15px;
    padding-left: 30px;
    color: white;
    cursor: default;
}

.uiSettingsDegreesBody {
    color: #666666;
    height: 45px;
    width: 430px;
    background: rgb(243, 254, 255);
    z-index: 2;
}

.uiSettingsDegreesBody .uiSelectionList {
    height: calc(7 * 45px);
    overflow-y: auto;
}


.uiSettingsLicenses {
    display: flex;
    flex-direction: column;
    position: relative;
}


.uiSettingsLicensesButton {
    height: 45px;
    margin-left: 22.5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.uiSettingsLicensesLabel {
    padding-top: 15px;
    padding-left: 30px;
    color: white;
    cursor: default;
}

.uiSettingsLicensesBody {
    color: #666666;
    height: 45px;
    width: 430px;
    background: rgb(243, 254, 255);
    z-index: 1;
}

.uiSettingsLicensesBody .uiSelectionList {
    height: calc(7 * 45px);
    overflow-y: auto;
}




/* pronouns */
.uiSettingsPronouns {
    display: flex;
    flex-direction: column;
    position: relative;
}

.uiLetsBuildAppMobile .uiSettingsPronouns {
    width: 100%;
}

.uiLetsBuildAppMobile .uiSettingsPronounsBody {
    width: 100%;
}


.uiSettingsPronounsButton {
    height: 45px;
    margin-left: 22.5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.uiSettingsPronounsLabel {
    padding-top: 15px;
    padding-left: 30px;
    color: white;
    cursor: default;
}

.uiSettingsPronounsBody {
    color: #666666;
    height: 45px;
    width: 430px;
    background: rgb(243, 254, 255);
    z-index: 1;
}

.uiSettingsPronounsBody .uiSelectionList {
    height: calc(4 * 45px);
    overflow-y: auto;
}

.uiSettingsPronounsIcon {
    position: absolute;
    right: 0;
    height: 45px;
    width: 45px;
}

.uiSettingsPronounsIcon svg {
    fill: rgb(24, 125, 170);
}


.uiSettingsNotificationsTitle {
    color: white;
    margin-top: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 30px;
    text-align: left;
    cursor: default;
}

.uiSettingsNotifications {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: calc(100% - 90px);
    max-width: 430px;
    margin-left: 45px;
    margin-right: 45px;
}

.uiSettingsNotifications .uiOKCancel {
    max-width: none;
}

.uiNotificationSetting {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
    background: rgb(220, 245, 255);
}

.uiNotificationSetting:hover {
    background: #B6EEFF
}

.uiNotificationSettingChecked {
    background: white;
}

.uiNotificationSettingLabel {
    color: #666666;
    margin-left: 30px;
}

.uiNotificationSettingIcon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiNotificationSettingIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiNotificationSettingIcon .checkbox {
    fill: rgb(24, 125, 170);
}

.uiNotificationSettingIcon .check {
    fill: rgb(37, 183, 68);
}

.uiNotificationSettingIcon svg {
    width: 45px;
    height: 45px;
    fill: rgb(24, 125, 170);
}

.uiSettings .uiInputFieldClear {
}


.uiSettingsLicensesIcon {
    position: absolute;
    right: 0;
    height: 45px;
    width: 45px;
}


.FibitIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px !important;
    width: 45px !important;
}

.FitbitIcon img {
    height: 30px;
    width: 30px;
}

.GarminIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 45px;
}

.GarminIcon img {
    height: 28px;
    width: 28px;
}

.HealthKitIcon svg {
    height: 30px;
    width: 30px;
}

.uiAppleHealthNativeOnly {
    color: #4d4d4d;
    font-size: 16px;
    padding: 22.5px;
    text-align: center;
}

.uiSettingsTabIcon .b8c138a2-df8f-4345-8a7d-dcf931794d97 {
    fill: transparent;
}

.uiSettingsTabIcon .af5fbea1-6fa9-4288-b973-b835cd9af8a9 {
    fill: transparent;
}

.uiSettingsTabIcon  .a177ac50-16e9-4488-a3a6-fb27c96c4285 {
    fill: transparent;
}

.uiSettingsTabIcon .a57dc8b7-397a-4872-86e3-44ca0050b48a {
    fill: rgb(37, 183, 68);
}

.uiSettingsTabSelected .a57dc8b7-397a-4872-86e3-44ca0050b48a {
    fill: white;
}

.uiSettingsSupport  {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.uiSettingsSupport .uiChat {
    margin-top: 5px;
    height: calc(100% - 5px);
    width: 100%;
}



.uiSettingsIsTrainer .uiNotificationSetting {
    margin-top: 30px;
    max-width: 430px;
    margin-bottom: 0px;
}

.uiSettingsPayments {
    margin-top: 30px;
    width: 100%;
    max-width: 430px;
}

.uiSettingsPayments:has(.uiMeStripeConnected > .uiMeStripeConnectedBlurb) {
    margin-top: 0;
}

.uiSettingsPayments .uiMeConnectToStripe {
    align-items: flex-start;
    width: 100%;
}

.uiSettingsPayments .uiMeStripeNotConnected {
    width: 100%;
}

.uiSettingsPaymentMethod {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}
.uiSettingsPaymentMethod .uiChatMakePayment {
    max-width: 430px;
}



.uiSettingsPaymentMethodLabel {
    color: white;
    margin-left: 30px;
}

.uiSettingsPaymentMethodCard {
    background: rgb(33, 161, 196) !important;
    width: 100%;
    max-width: 430px;
}

.uiSettings .uiStripeClientConnectForm {
    max-width: 400px;
}

.fdFastDetectClient {
    background: red;
    position: fixed;
    height: 100%;
    width: 100%;
    font-size: 16px;
    -webkit-font-smoothing: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: -webkit-fill-available;
}

.fdFastDetectClientIPad {
    border-left: 1px solid rgb(239, 239, 244);
    border-right: 1px solid rgb(239, 239, 244);
}

.mbsc-form {
    -webkit-font-smoothing: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.mbsc-btn {
    -webkit-font-smoothing: auto !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.mbsc-label {
    font-size: 1em !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.mbsc-form-group-title {
    z-index: auto !important;
}

input:-webkit-autofill::first-line,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  color:  rgb(109, 109, 109);
  -webkit-text-fill-color: rgb(109, 109, 109);
  -webkit-box-shadow: 0 0 0px 1000px #00000000 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.mbsc-input {
}

.mbsc-ios .mbsc-input-wrap input:-webkit-autofill {
}

.mbsc-input-fill {
    background: transparent !important;
}

input:-internal-autofill-selected {
    background-color: transparent !important;
}

input:-webkit-autofill-selected {
    background: transparent;
}

.mbsc-label {
    text-align: left;
}


.fdSplash {
    width: 100%;
    height: 100%;
    background: lightGray;
    position: relative;
    border-radius: 10px 10px 0 0;
}

.fdFastDetectClientNative .fdSplash {
    border-radius: 10px 10px 0 0;
}

.fdSplashIcon {
    position: absolute;
    left: calc(50% - 100px);
    top: 100px;
}

.fdSplashTitle {
    position: absolute;
    top: 330px;
    font-size: 22px;
    color: rgb(0, 66, 118);
    text-align: center;
    width: 100%;
    font-weight: 250;
}

.fdSplashButtons {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    bottom: 25%;
}

.fdSplashButtons .mbsc-btn {
    border-radius: 0;
    height: 45px;
    margin: 0 !important;
    font-size: 18px;
}

.fdSplashButtons .mbsc-btn:hover {
    opacity: 1.0 !important;
}

.fdSplashButtonSignIn {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;

}

.fdSplashButtonSignIn .mbsc-btn {
    font-weight: bold;
}

.fdSplashButtonSignUp {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    font-weight: 400;
}

.fdSplashButtonSignUp .mbsc-btn {
    font-weight: 600;
}

.fdSplashButtonSignUp .mbsc-btn {
    background: transparent;
    color: white;
}

.fdSplashButtonSignIn.mbsc-btn {
    background: white;
    
}

.fdSelect input:focus {
    outline: none;
}

.fdSelect input {
    border: none;
    margin: none;
    padding: none;
    background: none;
    color: #007bff;
    cursor: pointer;
    text-align: right;
    font-size: 16px;
    font-weight: 520;
}


.fdClickable {
    cursor: pointer;
    font-weight: 600;
}

.fdShowAll {
    cursor: pointer;
}

.fdBusy {
    top: 0;
    left: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    background: rgb(0, 0, 0, 0);
}

.fdOKCancelScreen {
    top: 0;
    left: 0;
    z-index: 100;
    position: fixed;
    height: 100%;
    width: 100%;
    pointer-events: none;
    background: rgb(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.fdOKCancel {
    color: black;
    pointer-events: auto;
    margin-top: 150px;
    border-radius: 15px 15px 15px 15px;
    background: rgb(223, 223, 223);
    max-width: calc(min(100% - 100px, 300px));
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

}

.fdOKCancelBody {
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}

.fdOKCancelHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 520;
    font-size: 16px;
    margin-bottom: 5px;
}

.fdOKCancelBody {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

.fdOKCancelMessage {
    font-size: 13px;
    font-weight: normal;
}

.fdOKCancelButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.fdOKCancelButton {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #cdcdcd;
    width: 100%;
    cursor: pointer;
    font-weight: 520;
    margin-left: 1px;
    height: 45px;
}

.fdOKCancelOKLabel {
    color: #007bff;
}

.fdOKCancelCancelLabel {
    color: rgb(225, 8, 8);
    font-weight: 400;
}

.fdOK {
    border-right: 1px solid #cdcdcd;
    margin-right: -1px;
}

.fdCancel {
    border-left: 0px solid #cdcdcd;
    margin-left: -1px;
}

.fdButton {
    background: rgb(0, 113, 188);
    color: rgb(242, 242, 242);
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 270px;
    height: 40px;
    cursor: pointer;
}

.fdButtonLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 25px;
    height: 100%;
}

.fdButton1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding-left: 15px;
    padding-right: 0px;
    color: #007bff;
    height: 45px;
    font-weight: 520;
    cursor: pointer;
}

.fdButton1Arrow .cls-3 {
    display: none;
}

.fdButton1Arrow div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.fdButton1Spinner div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.fdButton1Spinner svg {
    height: 30px;
    width: 30px;
}

.fdButton1Arrow svg {
    height: 45px;
    width: 45px;
    fill: #007bff;
}

.fdButton2 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background: white;
    padding-left: 10px;
    padding-right: 10px;
    color: #007bff;
    height: 40px;
    font-weight: 520;
    cursor: pointer;
}

.fdButtonException {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 100%;
}

.fdButtonExceptionLabel {
    height: 45px;
    padding-left: 15px;
    padding-right: 15px;
    color: rgb(200, 1, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fdRadioButtons {
    background: white;
    height: 40px;
    width: 100%;
    display: flex;
}

.uiLetsBuildAppDesktop .fdRadioButtons {
    height: 45px;
}


.fdRadioButtonsTrack {
    background: rgb(221, 221, 224);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    margin-right: 15px;
    width: calc(100% - 30px);
    margin-top: 5px;
    margin-bottom: 5px;
    height: calc(100% - 10px);
}

.uiLetsBuildAppDesktop .fdRadioButtonsTrack {
    height: 45px;
}


.fdRadioButton {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    margin: 1px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
}

.uiLetsBuildAppDesktop .fdRadioButton {
    height: 45px;
    margin: 0;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .fdRadioButton {

}

@media (hover: hover) {
    .fdRadioButton:hover {
        background:  #B6EEFF;
        color: #666666;
    }
    .fdRadioButtonSelected:hover {
        background: rgb(37, 183, 68);
        color: white;
    }
}

.fdRadioButtonSelected {
    background: rgb(37, 183, 68);
    color: white;
}

.fdButtonIcon {
    height: 100%;
    width: 100%;
}

.fdButtonIcon svg {
    height: 45px;
    width: 45px;
    fill: rgb(37, 183, 68);
    pointer-events: none;
}

.fdRadioButtonSelected .fdButtonIcon svg {
    fill: white;
}

.fdRadioButtonSelected img {
    filter: invert();
}

.fdButtonIcon div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.back-arrow-3 {
    display: none;
}

.fdArrowField {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding-left: 15px;
    cursor: pointer;
    margin-bottom: 2px;
}

.fdArrowFieldArrow .cls-3 {
    display: none;
}

.lbRingCard {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #e2e8e6;
    border-radius: 0;
    background: white;
    box-shadow: none;
}
.lbRingCard__header {
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #edf1ef;
}
.lbRingCard__title { color: #263e38; font-size: 15px; font-weight: 650; line-height: 1.4; text-align: left; }
.lbRingCard__back { border: 0; border-radius: 0; background: #f0f6f3; padding: 5px; cursor: pointer; }
.lbRingCard__back svg { display: block; width: 20px; height: 20px; color: #37755c; }
.lbRingCard__back:focus-visible { outline: 2px solid #20a1c4; outline-offset: 2px; }
.lbRingCard__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(92px, 32%, 136px) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    min-height: 190px;
    box-sizing: border-box;
    color: #344941;
}
.lbRingCard__metrics { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; margin: 0; padding: 0; }
.lbRingCard__metric { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lbRingCard__metrics--left .lbRingCard__metric { flex-direction: row-reverse; text-align: right; }
.lbRingCard__metricText { display: flex; flex-direction: column-reverse; min-width: 0; }
.lbRingCard__metric dt { color: #728279; font-size: 11px; line-height: 1.3; letter-spacing: .035em; overflow-wrap: anywhere; }
.lbRingCard__metric dd { margin: 0 0 2px; color: #344941; font-size: 14px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.lbRingCard .lbRingCard__legend { width: 3px; height: 25px; min-width: 3px; margin: 0; flex: 0 0 3px; border-radius: 0; }
.lbRingCard .lbRingCard__chart { width: 100%; min-width: 0; height: auto; margin: 0; aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.lbRingCard__chart > .CircularProgressbar { position: absolute; inset: 0; width: 100%; height: 100%; }
.lbRingCard__center { position: absolute; inset: 20%; display: grid; place-items: center; pointer-events: none; }
.lbRingCard__center > div { display: grid; place-items: center; width: 100%; height: 100%; }
.lbRingCard .lbRingCard__center .uiSleepLogoDur { font-size: 25px; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.lbRingCard__center img { width: 38px; height: 38px; object-fit: contain; }
.lbRingCard__center svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.lbRingCard__center > div:not(.uiMealProfilePie):not(.uiSleepLogoDur) { max-width: 44px; max-height: 44px; }
@media (max-width: 700px) {
    .lbRingCard__header { min-height: 44px; padding: 0 14px; }
    .lbRingCard__body { padding: 16px 12px; gap: 9px; min-height: 180px; }
    .lbRingCard__metric dd { font-size: 13px; }
    .lbRingCard__metric dt { font-size: 9px; }
    .lbRingCard__metric { gap: 5px; }
    .lbRingCard .lbRingCard__center .uiSleepLogoDur { font-size: 22px; }
}
@media (max-width: 360px) {
    .lbRingCard__body { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: 7px; }
    .lbRingCard__metric dt { letter-spacing: 0; }
}

.uiCalendar {
    width: calc(100% - 22.5px);
    padding-right: 22.5px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-height: 100%;
    min-width: 900px;
}

.uiLetsBuildAppMobile .uiCalendar {
    min-width: auto;
}

.uiLetsBuildAppIPad .uiCalendar {
    min-width: auto;
}

.uiCalendarScroll {
    height: 100%;
    width: calc(100% - 22.5px);
    overflow-y: auto;
    margin-left: 22.5px;
}

.uiCalendar .mbsc-fr-inline .mbsc-fr-w {
    min-width: 0;
}

.uiCalendarMobile {
    left: 0px;
    width: 100%;
    position: fixed;
    height: 100%;
    padding-top: 45px;
}

.uiCalendarDropTarget {
    top: 0;
    left: 0;
    height: 100%;
    background: #00000000;
}

.uiCalendarEventsDate {
    font-size: 14px;
    color: #4d4d4d;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 22.5px;
}


@media screen and (max-width: 360px) {
    .uiCalendarPlusText {
        font-size: 12px !important;
    }
    .uiCalendarEventsDate {
        font-size: 12px !important;
    }
}

.uiCalendar .mbsc-cal-cell {
    border: 0 !important;
}

.uiCalendar .mbsc-segmented-content {
    text-align: left;
    background: white;
}


.uiLetsBuildAppDesktop .uiCalendarDials .uiCalendarWhoopProfileWorkouts .uiCalendarWhoopProfile {
    width: 100%;
}

.uiLetsBuildAppIPad .uiCalendarDials .uiCalendarWhoopProfileWorkouts {

}

.uiCalendarWhoopProfileWorkouts {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;
    width: 50%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarWhoopProfileWorkouts {
    width: 100%;
}

.uiCalendarTodoProfile  {
    position: relative;
    display: flex;
    flex-direction: column;
}

.uiCalendarTodoProfileRow1 {
    display: flex;
    justify-content: space-between;
    min-width: 100px;
    font-size: 14px;
    align-items: flex-end;
    margin-bottom: 20px;
    color: #666666;
    transform: translate(0, -5px);
}

:is(.uiLetsBuildAppMobile) .uiCalendarTodoProfileRow1 {
    transform: translate(0, -35px);
}

:is(.uiLetsBuildAppIPad) .uiCalendarTodoProfileRow1 {
    transform: translate(11px, -30px);
}

:is(.uiLetsBuildAppIPad) .uiCalendarPlansFilters {
    margin-top: -40px;
}

:is(.uiLetsBuildAppDesktop) .uiCalendarPlansFilters {
    display: flex;
    width: 80%;
    margin-top: 15px;
}

.uiCalendarPlansLikes {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
}

.uiCalendarPlansDislikes {
    min-width: 80px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

:is(.uiLetsBuildAppMobile) .uiCalendarPlansFilters {

}

.uiCalendarPlansFilters {
    justify-content: space-between;
    min-width: 100%;
    flex-direction: column;
}

:is(.uiLetsBuildAppMobile) .uiCalendarPlansFilters {
    margin-top: -50px;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 100%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppMobile) .uiCalendarPlansFilters {
    display: flex;
}

.uiLetsBuildAppDesktop .uiCalendarPlansFilters .fdRadioButtons {
    height: 35px;
    margin-right: 5px;
    margin-left: 5px;
}

.uiLetsBuildAppDesktop .uiCalendarPlansFilters .fdRadioButtonsTrack {
    height: 35px;
}

.uiLetsBuildAppDesktop .uiCalendarPlansFilters .fdRadioButton {
    height: 35px;
    padding-right: 10px;
    padding-left: 10px;
}

.uiCalendarPlansEmoji {
    display: inline-block;
    margin-right: 4px;
}

.uiLetsBuildAppDesktop .uiCalendarPlansEmoji {
    /*
    transform: scale(1.5, 1.5);
    transform-origin: right center;
   */
    font-size: 22px;
}

.uiCalendarPlansFiltersStatus {
    width: 100%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarPlansFilters .fdRadioButton {
    padding-left: 5px;
    padding-right: 5px;
}

.uiLetsBuildAppDesktop .uiCalendarPlansFiltersTerm {
    width: 100%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarPlansFiltersTerm {
    display: flex;
    justify-content: center;
    width: 100%;
}

.uiLetsBuildAppMobile .uiCalendarPlansFiltersTerm .fdRadioButtons {
    max-width: calc(100% * .9);
}

.uiLetsBuildAppIPad .uiCalendarPlansFiltersTerm .fdRadioButtons {
    max-width: calc(100%);
    width: 80%;
}

.uiCalendarTodoProfileRow2 {
    margin-top: 0px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.uiCalendarTodoProfileRow2Column {
    height: 100%;
    width: 100%;
}


.uiLetsBuildAppDesktop .uiCalendarTodoProfileRow2 {
    padding: 5px;
}

:is(.uiLetsBuildAppMobile) .uiCalendarTodoProfileRow2 {

}

.uiCalendarTodoProfileRow2 .uiSelectionList {
    max-height: calc(45px * 5);
    min-height: calc(45px * 5);
    overflow-y: auto;
    box-shadow: none;
}

.uiLetsBuildAppDesktop .uiCalendarTodoProfileRow2 .uiSelectionList {
    background: #efefef;
}

.uiCalendarWorkoutsRow2 {
    width: 50%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarWorkoutsRow2 {
    width: 100%;
}

.uiLetsBuildAppMobile .uiCalendarTodoProfileRow2 {

}

.uiCalendarTodoProfile .uiCalendarWhoopProfile {
}

.uiCalendarTodoProfileCategories {
    position: relative;
    z-index: 1;
    bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 45px;
}

.uiCalendarTodoProfileCategory {
    cursor: pointer;
    color: #666666;
    min-width: 120px;
    position: absolute;
    position: relative;
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    z-index: -1;
    top: -15px;
    white-space: nowrap;
}

.uiCalendarTodoProfileRow2 .uiSelectionList {
     min-width: 200px;
}

:is(.uiLetsBuildAppIPad, .uiLetsBuildAppMobile) .uiCalendarTodoProfileCategory {
    top: 0px;
}


.uiLetsBuildAppDesktop .uiCalendarTodoProfileCategory:hover {
    background: #B6EEFF 
}

.uiLetsBuildAppMobile .uiCalendarTodoProfileCategory:hover {
    background: transparent !important;
}

.uiCalendarTodoProfile .uiCalendarWhoopProfile {
}

:is(.uiLetsBuildAppMobile,.uiLetsBuildAppIPad) .uiCalendarDials .uiCalendarWhoopProfile {
    margin-bottom: 5px;
}

:is(.uiLetsBuildAppMobile,.uiLetsBuildAppIPad) .uiCalendarDials .uiCalendarWhoopProfileWorkouts {
    margin-bottom: 5px;
}

.uiCalendarDials .uiWhoopSleep {
    overflow: hidden;
    height: 100%;
}

.uiCalendarDial .uiWhoopSleep {
    overflow: hidden;
}

.uiCalendarWhoopProfileWorkouts .fdRadioButtons {
    width: auto;
    min-width: 50%;
    background: #f8f8f8;
    padding-bottom: 15px;
}

.uiCalendarPlansFilter {
    display: flex;
    width: 100%;
    display: flex;
    justify-content: center;
}

.uiCalendarPlansFilters .fdRadioButtons {
    min-width: 100%;
}

.uiCalendarPlansFilters {
    display: flex;
    width: 100%;
}

.uiLetsBuildAppIPad .uiCalendarWhoopProfileWorkouts .fdRadioButtons {
    margin-bottom: 18px;
}


.uiLetsBuildAppIPad .uiCalendarPlansFilters .fdRadioButtons {
    margin-bottom: 0 !important;
}

.uiCalendarWhoopProfileWorkouts .uiCalendarWhoopProfile {
    margin-top: 0;
}

.uiSportRadioButton  {
    height: 20px;
    width: 20px;
}

.uiSportRadioButton img {
    height: 20px;
    width: 20px;
}

.mbsc-windows.mbsc-ltr.mbsc-segmented:not(.mbsc-stepper) .mbsc-segmented-item {
    border: 0;
    background: white;
}


.mbsc-segmented-item .mbsc-segmented-content.mbsc-windows.mbsc-segmented .mbsc-segmented-item.mbsc-stepper-control.mbsc-active .mbsc-segmented-content, .mbsc-windows.mbsc-segmented .mbsc-segmented-item input:checked+.mbsc-segmented-content, .mbsc-windows.mbsc-segmented .mbsc-segmented-item {
    background: #B6EEFF;
    color: #666666;
}

.uiCalendarSelectionButtonText {
    font-size: 14px;
}

.uiCalendarSelectionButton {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 45px;
    cursor: pointer;
    font-size: 14px;
    padding-left: 22.5px;
    background: white;
    color: #aaaaaa;
}

.uiLetsBuildAppMobile .uiCalendarSelectionButton {
    height: 35px;
}

.uiLetsBuildAppIPad .uiCalendarSelectionButton {
    height: 35px;
}

.uiCalendarSelectionButtonSelected {
    background: rgb(37, 183, 68); 
    color: white;
}


.uiCalendarSelectionContainer {
    width: 100%;
}

.uiCalendarSelectionMenu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #f2f2f2;
}


.uiCalendarTitle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: default;
    color: #666666;
    font-weight: bold;
    padding-left: 22.5px;
    font-size: 18px;
    min-height: 45px;
}

.uiCalendarCalendar {
    width: 100%;
    display: inline-block;
    background: #f8f8f8;
}

.uiCalendarEventsScroller {
}

.uiCalendarEvents {
    background: #f8f8f8;
    max-height: 100%;
    /* overflow-y: auto; */
    /*
    width: calc(100% - 22.5px);
    padding-left: 22.5px;
   */
}

.uiCalendarEventsTitle {
    height: 45px;
    min-height: 45px;
}

.uiCalendarLogo {
    position: absolute;
    right: 22.5px;
    top: 8px
}

.uiCalendarLogo svg {
    width: 39.5px;
}

.uiCalendarEventControlsButtons {
    display: flex;
    width: 100%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarEventControlsButtons {
    flex-direction: column;
}

.uiCalendarGraphs {
    width: 100%;
    display: flex;
    justify-content: center;
}

.uiCalendarGraphs .uiOKCancelOK {
    background: rgb(0, 113, 187);
}

.uiCalendarEventControls {
    font-size: 14px;
    color: #4d4d4d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    padding-bottom: 5px;
}

.uiCalendarEventPlus {
    color: #4d4d4d;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-right: 15px;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarEventControls {
    padding-top: 5px;
    padding-bottom: 15px;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarEventPlus {
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    margin-top: 10px;
}

.uiCalendarPlusIcon {
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiCalendarPlusText {
    white-space: nowrap;
    max-width: 415px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uiCalendarPlusIcon div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uiCalendarEventPlus svg {
    height: 100%;
    width: 100%;
}

.uiCalendarSearch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(66.66667% - 22.5px);
    margin-left: 22.5px;
    min-height: 45px;
    height: 45px;
    max-height: 45px;
    background:  rgb(243, 254, 255);
}

.uiCalendarSearchField {
    outline: none;
    border: 0;
    font-size: 14px;
    color :#4d4d4d;
    margin-left: 22.5px;
    padding: 0;
    width: 100%;
    background:  rgb(243, 254, 255);
}

.uiCalendarSearchIcon {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.uiCalendarSearchIcon div {
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiCalendarSearchIcon svg {
    height: 45px;
}

.mbsc-event-day {
    color: #666666 !important;
}

.mbsc-cal-days {
    text-align: left;
    font-size: 12px;
}

.mbsc-cal-marks {
    text-align: center;
}

.mbsc-cal-month {
    font-size: 14px !important;
    color: #666666;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mbsc-cal .mbsc-cal-day-date {
    text-align: left;
    font-size: 12px;
}

.mbsc-cal-cell-i.mbsc-cal-cell-txt {
    text-align: left;
    color: #666666;
    padding-left: 22.5px;
}

.mbsc-windows .mbsc-cal-day-date {
    font-size: 12px;
    color: #666666;
    padding-left: 5px;
}

.mbsc-fr-c {
}

.mbsc-fr-w {
    -webkit-font-smoothing: auto;
}

.mbsc-ic-arrow-left6 {
    transform: translate(0px, 0);
}

.mbsc-ic-arrow-right6 {
    transform: translate(-0px, 0);
}

.mbsc-ic-arrow-right6::before {
    color: #25B743;
    font-weight: bold;
    content: "\ea09";
}


.mbsc-ic-arrow-left6::before {
    color: #25B743;
    font-weight: bold;
    content: "\ea06";
}

.mbsc-event-list {
    display: none;
}

.mbsc-windows .mbsc-cal-c {
    padding-top: 3px;
    padding-left: 10px;
}

.mbsc-windows.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-c {
    margin-top: -5px;
    padding-left: 0px;
    
}

.mbsc-windows.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-day-date {
    padding-left: 22.5px;
}

.mbsc-windows.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-days>div {
    padding-left: 22.5px;
}

.uiCalendarEvents {
    background: white;
}

.uiCalendarEventsList {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    justify-content: flex-start;
    align-items: start;
    background: white;
    padding-bottom: 22.5px;
    gap: 16px;
}

.uiCalendarAppointmentEvent {
    display: flex;
    min-width: 0;
}

.uiCalendar .uiCalendarEventsList .uiCalendarAppointmentEvent :is(.uiAppointment, .lbTodoCard, .lbWorkoutCard, .uiSubscription) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.uiCalendarEventsList .uiAppointment {
    margin-right: 0;
    margin-left: 0;
}

.uiCalendarEventsList .lbTodoCard {
    margin-right: 0;
    margin-left: 0;
}

.uiLetsBuildAppMobile .uiCalendarEventsList .lbTodoCard {
    min-width: calc(100% - 45px);
    max-width: calc(100vw);
}

.uiLetsBuildAppDesktop .uiCalendarEventsList .lbTodoCard {
    width: 408px;
}

.uiCalendarEventsList .uiSubscription {
    margin-right: 22.5px;
}


.mbsc-windows.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-cell.mbsc-cal-today {
    color: white !important;
    background:  #20A1C4 !important;
}


.mbsc-cal-today :not(.mbsc-selected):hover .mbsc-cal-cell-txt{
    color: white !important;
    background: #11CEED !important;
}

.mbsc-windows .mbsc-cal-today:not(.mbsc-selected):hover .mbsc-cal-day-i {
    color: white !important;
    background: #11CEED !important;
}

.mbsc-windows .mbsc-cal-today:not(.mbsc-selected) .mbsc-cal-day-i .mbsc-cal-cell-txt {
    color: white !important;
    background: #20A1C4 !important;
}

.mbsc-windows .mbsc-cal-today:not(.mbsc-selected):hover .mbsc-cal-day-i .mbsc-cal-cell-txt {
    color: white !important;
    background: #11CEED !important;
}


.mbsc-windows .mbsc-cal-today:not(.mbsc-selected) .mbsc-cal-day-date {
    color: white !important;
    background:  #20A1C4;
    height: 100%;
}

.mbsc-windows .mbsc-cal .mbsc-cal-day.mbsc-selected:not(.mbsc-disabled) .mbsc-cal-cell-i.mbsc-cal-day-i {
    /*
    color: #666666;
    background-color: #B6EEFF;
   */
    height: 100%;
    color: white !important;
    background: rgb(37, 183, 68); 
}

.mbsc-windows .mbsc-cal .mbsc-cal-day .mbsc-selected:not(.mbsc-disabled):hover .mbsc-cal-cell-i:hover .mbsc-cal-day-i {
}


.mbsc-windows .mbsc-cal .mbsc-cal-day.mbsc-selected:not(.mbsc-disabled) .mbsc-cal-cell-txt {
    /*
    color: #666666 !important;
    background-color: #B6EEFF;
    color: white;
    background: rgb(37, 183, 68); 
   */
    color: white;
}


.mbsc-cal-day:hover {
    color: #666666 !important;
    background-color: #B6EEFF !important;
    height: 100%;;
}

.mbsc-windows .mbsc-cal-day-diff .mbsc-cal-day-i:hover {
    color: #666666 !important;
    background-color: #B6EEFF !important;
}

.mbsc-cal-day-marked:not(.mbsc-cal-today) .mbsc-cal-day-i {
    color: white !important;
    background: #f15a24;
    height: 100%;
}

.mbsc-cal-day-marked.mbsc-today .mbsc-cal-day-i {
    color: white !important;
    background:  #20A1C4;
    height: 100%;
}

.mbsc-cal-day-marked .mbsc-cal-cell-txt {
    color: white !important;
}

.mbsc-cal-day-marked .mbsc-cal-day-i:hover {
    background: #FF6e24;
}

.mbsc-cal-day-marked.mbsc-selected  .mbsc-cal-day-date {
    color: white !important;
    background: rgb(37, 183, 68) !important;
    height: 100%;
}

.mbsc-cal-day.mbsc-selected:not(.mbsc-disabled):hover .mbsc-cal-cell-i.mbsc-cal-day-i {
    /*background: #B6EEFF; */
    color: white !important;
    background: #11D316 !important;
}

.mbsc-cal-day.mbsc-selected:not(.mbsc-disabled):hover .mbsc-cal-cell-txt {
    /*background: #B6EEFF; */
    color: white !important;
    background: #11D316 !important;
}

.mbsc-cal-has-marks .mbsc-cal-day {
    padding-bottom: 0 !important;
}

.mbsc-windows.mbsc-ev-cal.mbsc-fr-md .mbsc-cal-marks {
    height: 100%;
    display: none;
    transform: translate(0, calc(-100% + 14px));
    overflow: visible;
    width: 100%;
    background: rgb(37, 183, 68) !important;
    position: absolute;
    z-index: -1;
}

.mbsc-cal-day-markup {
}

.mbsc-cal-marks {
}

.mbsc-cal-mark {
    display: none;
}

.uiCalendar .fdScopeButtons {
    width: calc(100% - 22.5px);
    margin-left: 22.5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.workoutEvent {
    display: inline-block;
}

.workoutEventSport {
    display: inline-block;
}

.workoutEventStrain {
    display: inline-block;
    color: rgb(0, 113, 188)
}

.uiCalendarMobile .uiSubscription {
    width: 100%;
}

.uiCalendarEventControlsHidden {
    visibility: hidden;
    max-height: 0px;
    padding-bottom: 0px;

}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarEventControlsHidden {
    display: none;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarEventsDate {
    display: none;
}

.uiCalendarWhoopProfile {
    margin-top: 0px;
    padding-top: 0px;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    cursor: pointer;
    min-height: 100%;
}

.uiCalendarDials {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    background: white;
    height: 100%;
}

.uiCalendarProfiles {
    width: 100%;
    min-width: 0;
}

.uiCalendarDeviceGroup {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
}

.uiCalendarDeviceGroupHeader {
    color: #24758a;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 0 6px 0;
    text-align: center;
    width: 100%;
}

.uiCalendarDeviceGroupCards {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.uiCalendarDials .uiCalendarDeviceGroupCards .uiCalendarWhoopProfile {
    min-height: 240px;
    width: 50%;
}

.uiCalendarDials .uiCalendarDeviceGroupCards .uiCalendarWhoopProfileWorkouts {
    width: 50%;
}

.uiCalendarDials .uiCalendarWhoopProfile {
    min-height: 240px;
    display: flex;
}

.uiCalendarDial {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #f8f8f8;
    padding-top: 0px;
    margin-top: 4px;
}

.uiCalendarDial .uiCalendarWhoopProfile {
    width: 100%;
    max-width: 100%;
}


.uiLetsBuildAppMobile .uiCalendarDials .uiCalendarWhoopProfile {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarDials .uiCalendarDeviceGroupCards .uiCalendarWhoopProfile,
:is(.uiLetsBuildAppMobile, .uiLetsBuildAppIPad) .uiCalendarDials .uiCalendarDeviceGroupCards .uiCalendarWhoopProfileWorkouts {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.uiLetsBuildAppIPad .uiCalendarDials .uiCalendarWhoopProfile {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.uiCalendarScopeBack {
    display: flex;
    align-items: center;
    padding-left: 22.5px;
    cursor: pointer;
    width: 100%;
    background: transparent;
}

.uiCalendarScopeBackIcon svg {
    height: 45px;
    width: 45px;
    fill: #8f8f8f;
}

.uiCalendarScopeBackIcon {
    transform: translate(5px, 0);
    background: transparent;
}

.uiCalendarScopeForward svg {
    transform: rotate(180deg);
}

.uiCalendarScopeBackIcon div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiCalendarScopeBackLabel {
    color: #007aff;
}

@media (hover: hover) {

.uiCalendarSelectionButton:hover {
    background: #B6EEFF
}

.uiCalendarSelectionButtonSelected:hover {
    background: #11D316;
}

.uiCalendarEventPlus:hover {
    background:  #B6EEFF;
    color: #666666;
}

.uiCalendarEventPlus:hover svg {
    fill: #666666;
}

.uiCalendarSearchIcon:hover {
    background:  #B6EEFF;
    color: #666666;
}

.uiCalendarSearchIcon:hover svg {
    fill: #666666;
}


.uiCalendarHiddenDuringSearch {
    display: auto !important;
}



.mbsc-ic-arrow-right5:hover {
    background: #f2f2f2 !important;

}

.mbsc-ic-arrow-left5:hover {
    background: #f2f2f2 !important;

}

.mbsc-ic-arrow-right5:hover .mbsc-ic-arrow-right5::before {
    color: #11D316 !important;
}

}

.mbsc-cal-btn {
    height: 45px !important;
    width: 45px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
.mbsc-cal-btn:hover {
    background:  #B6EEFF;
}
}

.mbsc-cal-btn::before {
    font-size: 18px;
}

.mbsc-cal-month-picker {
    display: none;
}

.uiWhoopPerformanceSummary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #f8f8f8;
    margin-top: -5px;
    height: 45px;
}

.uiWhoopPerformanceSummaryLinks {
    display: flex;
    justify-content: space-between;
}

.uiWhoopPerformanceSummaryLink {
    margin-left: 5px;
    pargin-right: 5px;
    padding-left: 15px;
    padding-right: 15px;
    height: 45px;
    color: rgb(0, 113, 187);
    text-decoration: underline;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
}

.uiLetsBuildAppMobile .uiCalendarTodoProfile .fdRadioButtons {
    min-width: 100%;
    max-width: none;
    width: 100%;
}


.uiCalendarTodoProfile .fdRadioButtonsTrack {
    width: 100%;
}

.todoEmojiIcon {
    display: inline-block;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    display: none;
}

.todoEmotionSelection {
    display: flex;
    align-items: center;
}

.todoEmotionName {
    display: inline-block;
}

.uiCalendarProfiles > .uiCalendarDials,
.uiCalendarProfiles .uiCalendarDeviceGroupCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 16px;
    align-items: start;
    height: auto;
    box-sizing: border-box;
}
.uiCalendarProfiles > :is(.uiCalendarDials, .uiCalendarDial) { padding: 16px 0; gap: 16px; background: white; }
.uiCalendarProfiles :is(.uiCalendarDials, .uiCalendarDial) :is(.uiCalendarWhoopProfile, .uiCalendarWhoopProfileWorkouts) {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    box-sizing: border-box;
    background: transparent;
}
.uiCalendarProfiles .uiCalendarDeviceGroup { grid-column: 1 / -1; background: transparent; }
.uiCalendarProfiles .uiCalendarDeviceGroupHeader { display: flex; align-items: center; gap: 10px; padding: 4px 0 12px; text-align: left; font-size: 14px; color: #456357; }
.uiCalendarDeviceGroupHeader img { width: 26px; height: 26px; object-fit: contain; border-radius: 0; }
.uiCalendarProfiles :is(.uiCalendarDials, .uiCalendarDial) .uiWhoopSleep { min-height: 0; background: transparent; }
.uiCalendarProfiles > .uiCalendarDial { align-items: stretch; }
.uiCalendarProfiles > .uiCalendarDial .uiCalendarWhoopProfile { max-width: 100%; }
.uiCalendarProfiles > .uiCalendarDial .uiWhoopSleep { max-width: none; }
@media (min-width: 701px) {
    .uiCalendarProfiles { box-sizing: border-box; padding-right: 22.5px; }
}

.lbAddonRail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: 64px; background: #808080; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 4px; box-sizing: border-box; }
:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiClientMain > .uiSidebar { left: 64px; }
:is(.uiLetsBuildAppDesktop, .uiLetsBuildAppIPad) .uiClientMain > .uiClientMainContainer { left: 334px; width: calc(100% - 334px); }
.uiLetsBuildAppDesktop .uiScheduleAppointmentPopup { left:64px; width:calc(100% - 64px); }
.lbAddonRail button { width: 44px; height: 44px; border-radius: 0; border: 2px solid transparent; background: #334353; color: white; cursor: pointer; font-size: 18px; }
.lbAddonRail button[aria-pressed=true], .lbAddonRail button[aria-current=page] { border-color: #67d5b5; }
.lbAddonRail button:focus-visible { outline: 3px solid #67d5b5; }
.lbAddonRail button { display: flex; align-items: center; justify-content: center; padding: 5px; }
.lbAddonRail button > div { display: flex; align-items: center; justify-content: center; }
.lbAddonRail svg { display: block; width: 30px; height: 30px; fill: white; }
.lbAddonRail .lbAddonRailManage { margin-top: auto; }
.lbAddonManagerPage .uiSettingsTitle { margin: 0 auto; }
.lbMobileMainTop .lbAddonManagerPage .uiSettingsTitle { display: flex; }
.lbAddonManagerContent { box-sizing: border-box; width: 100%; max-width: 1280px; margin-inline: auto; padding: 22.5px; }
.lbAddonManagerPage .lbAddonSettings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 408px)); gap: 22.5px; padding: 0; }
.lbAddonManagerPage .uiMeCard { width: 100%; min-width: 0; max-width: none; margin: 0; box-sizing: border-box; }
.lbAddonManagerPage .uiMeCardContent { width: 100%; max-width: none; height: auto; box-sizing: border-box; border: 1px solid #cdd5d1; }
.lbAddonManagerPage .uiMeCardBody { height: auto; padding-bottom: 0; }
.lbAddonManagerPage .lbAddonCard p { font-size: 14px; margin: 15px 0; }
.lbAddonManagerPage .lbAddonActivation { display: flex; width: 100%; align-items: center; }
.lbWorkspace { position: relative; width: 100%; max-width: 1280px; margin-inline: auto; height: 100%; min-width: 0; background: white; }
.lbWorkspace .uiCalendar { min-width: 0; width: 100%; box-sizing: border-box; padding-right: 0; }
.lbWorkspace .uiCalendarDropTarget { height: 100%; }
.lbWorkspace .uiCalendarMobile { position: relative; left: auto; top: auto; padding-top: 0; }
.lbWorkspace .uiMeTitle { box-sizing: border-box; }
.uiClientMainContainer > :is(.uiCalendarDropTarget, .uiCalendarTitle) { width: 100%; max-width: 1280px; min-width: 0; margin-inline: auto; box-sizing: border-box; }
.uiClientMainContainer > .uiCalendarDropTarget { height: calc(100% - 45px); }
.uiClientMainContainer > .uiCalendarDropTarget > .uiCalendar { width: 100%; min-width: 0; box-sizing: border-box; padding-right: 0; }
@media (min-width: 701px) {
  .uiLetsBuildAppDesktop .lbWorkspace .uiCalendarScroll,
  .uiLetsBuildAppDesktop .uiClientMainContainer > .uiCalendarDropTarget .uiCalendarScroll { width: calc(100% - 45px); }
  .uiLetsBuildAppDesktop .lbWorkspace .uiCalendarSearch,
  .uiLetsBuildAppDesktop .uiClientMainContainer > .uiCalendarDropTarget .uiCalendarSearch { width: calc(100% - 45px); }
  .uiLetsBuildAppDesktop .lbWorkspace .uiCalendarProfiles,
  .uiLetsBuildAppDesktop .uiClientMainContainer > .uiCalendarDropTarget .uiCalendarProfiles { padding-right: 0; }
  .uiLetsBuildAppDesktop .lbWorkspace .uiCalendarEventsDate,
  .uiLetsBuildAppDesktop .uiClientMainContainer > .uiCalendarDropTarget .uiCalendarEventsDate { padding-right: 0; }
}
.lbCoreHomeCalendar { position: absolute; top: 45px; bottom: 0; width: 100%; }
.lbAddonSettings { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 18px 0; color: #4d4d4d; }
.lbAddonCard { padding: 22.5px; }
.lbAddonCard p { line-height: 1.5; }
.lbAddonCardIcon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #25b744; }
.lbAddonCardIcon svg { width: 50px; height: 50px; fill: white; }
.lbAddonActivation { border: 0; padding: 0; font: inherit; color: white; }
.lbAddonActivation:disabled { opacity: .65; cursor: wait; }
.lbAddonActivationDisable { background: #b8261a; }
.lbAddonActivationDisable:hover { background: #ca0000; }
.lbAddonActivation:focus-visible { outline: 3px solid #20a1c4; outline-offset: 3px; }
@media(max-width: 700px) { .lbAddonRail { width: 48px; padding: 10px 2px; } .lbAddonRail button { width: 38px; height: 38px; } .lbMobileMain { left: 48px; width: calc(100% - 48px); } }

.uiLetsBuildAppMobile .lbMobileMain { left: 48px; width: calc(100% - 48px); background: white; }
.lbMobileMain .lbPortalHome { box-sizing: border-box; width: 100%; height: 100%; background: white; color: #192838; white-space: normal; }
.lbMobileMain .lbMobileNav { box-sizing: border-box; width: 100%; padding: 8px 4px; gap: 4px; overflow-x: auto; background: #15202c; }
.lbMobileMain .lbMobileNavButton { flex: 0 0 48px; font-size: 11px; cursor: pointer; }
.lbMobileMain .lbMobileNavButtonIcon div { width: 36px; height: 36px; }

.signUp {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signUpTitle {
    cursor: default;
    color: gray;
    padding-bottom: 20px;
}

.signUpButtonContainer {
    padding-top: 20px;
}

.signUpFields {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.signUpError {
    color: red;
    display: flex;
    justify-content: center;
    align-items: top;
    height: 80px;
    padding-top: 20px;
    max-width: 90vw;
}

.inputField {
    width: 280px;
}

.inputFieldAndLabel {
    display: flex;
    justify-content: space-between;
    margin: 1px 1px 1px 0 ;
}

.inputFieldDateInput {
    width: 60% !important;
    margin: 0 !important;
}

.inputFieldNumberInput {
    width: 220px !important;
    margin: 0 !important;
}

.inputFieldPhoneInput {
    width: 265px !important;
    margin: 0 !important;
}


.inputFieldLabel {
  color: gray;
  font-size: 14px;
  background: #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 15px;
  width: 40%;
  cursor: default;
}

.inputFieldCheckboxLabel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: gray;
  font-size: 14px;
  background: white;
  height: 35px;
  width:  250px;
  right: 0px;
  margin-left: -251px;
  
}

.inputFieldInput[type="checkbox"] {
  background: #e1e1e1;
  color: gray;
}

.inputFieldInput {
  border: 0;
  outline: none;
  height: 35px;
  width: 100%;
  background: #e1e1e1;
  color: gray;

  padding: 0 0 0 15px;
  font-size: 14px;
}

.inputFieldSelect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 280px;
    overflow: hidden;
}

.inputFieldSelectLabel {
  height: 35px;
  font-size: 14px;
  color: gray;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 15px;
  font-size: 14px;
  background: #e1e1e1;
}

.inputFieldSelectContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-1px, 0);
    padding-right: 15px;
    width: 150px;
    height: 35px;
    background: #e1e1e1;
}

.inputFieldSelect select {
    min-width: 165px;
    background-color: #e1e1e1;
    font-size: 14px;
    color: gray;
    border: none;
    border-radius: 0;

}

.inputFieldInput:read-only {
    cursor: default;
}

.inputFieldTimeInputContainer {
    position: relative;
    cursor: default;
}

.inputFieldAmPmSelector {
    font-size: 14px;
    color: gray;
    position: absolute;
    right: -20px;
    top: 0;
    cursor: pointer;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 35px;
    width: 45px;
    padding-right: 20px;
}

.signIn {
    top: 0;
    left: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    background: white;
    z-index: 10;
}

.signInTitle {
    color: gray;
    padding-bottom: 20px;
    cursor: default;
}

.signInButtonContainer {
    padding-top: 20px;
}

.signInFields {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.signInError {
    color: red;
    display: flex;
    justify-content: center;
    align-items: top;
    height: 80px;
    padding-top: 20px;
    max-width: 90vw;
}


.signInProgress {
    background-color: #e1e1e1;
    color: gray;
    display: flex;
    align-items:center;
    justify-content: center;
    width: 200px;
    font-size: 14px;
    height: 35px;
    z-index: 100;
}

.incomingCall {
    top: 0px;
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background: white;
}

.incomingCallTitle {
    color: gray;
    padding-bottom: 20px;
    cursor: default;
}

.incomingCallSubtitle {
    font-size: 14px;
    cursor: default;
}

.incomingCallButtonContainer {
    padding-top: 20px;
}

.incomingCallFields {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}


.showLink {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background: white;
    z-index: 10;
}

.showLinkTitle {
    color: gray;
    padding-bottom: 10px;
}

.showLinkSubtitle {
    color: #101010;
    padding-bottom: 20px;
    font-size: 12px;
}

.showLinkButtonContainer {
    padding-top: 20px;
}

.showLinkFields {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}
.showLinkContainer {
    max-width: 90%;
    background: #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.showLinkText {
    color: #02029e;
    font-size: 14px;
    padding: 20px;
    
}

.contactInfo {
    padding-top: 30px;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.contactInfoTitle {
    cursor: default;
    color: gray;
    padding-bottom: 20px;
}

.paymentMethodTitle {
    cursor: default;
    color: gray;
    padding-top: 20px;
    padding-bottom: 10px;
}

.contactInfoButtonContainer {
    padding-top: 20px;
}

.contactInfoFields {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactInfoError {
    color: red;
    display: flex;
    justify-content: center;
    align-items: top;
    height: 80px;
    padding-top: 20px;
    max-width: 90vw;
}

.productListItem {
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #efefef;
    margin-bottom: -1px;
    padding: 10px;
}

.myContactInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.addProductButtonContainer {
    padding-top: 20px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
}


.productButtonContainer {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}


.stripeConnectMessage {
    padding-top: 30px;
    font-size: 14px;
    color: gray;
    width: calc(min(300px, 90vh));
}

.stripeConnectMessage p {
    text-align: center;
}

.stripeButtonContainer {
}


.stripeButtonConnectedContainer {
    padding-top: 25px;
    pointer-events: none;
}

.myLetsBuildProductsTitle {
    cursor: default;
    color: gray;
}

.insCovGroup {
    border: 1px solid gray;
}


.stripeClientConnectForm {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #e1e1e1;
    padding-left: 15px;
    padding-right: 15px;
}
.cardName {
    color: gray;
    font-size: 14px;
    background: #e1e1e1;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    width: 265px;
    cursor: default;
}
.stripeConnectFormCard {
    width: 100%;
}

.purchaseMethodContainer {
}

.purchaseMethodDescription {
    font-size: 14px;
    color: gray;
}

.purchaseButtonContainer {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
}


.productAccepted {
    height: 35px;
    width: 90px;
    display: flex;
    align-items:center;
    justify-content: center;
    cursor: default;
    color: gray;
    margin-left: 2px;
    font-size: 15px;
}

.product {
    width: 280px;
}

.addProduct {
    top: 0px;
    position: fixed;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}


.productFields {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 15px;
    width: 280px;
}

.teletherapyProduct {
    width: calc(min(100vh, 280px));
}

.teletherapyProductFields {
    justify-content: flex-start;
}

.modifySelectionList {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.teletherapyModifyButtons {
    position: absolute;
    left: calc(50% + min(138px, 50vw - 60px));
    top: calc(50% - 45px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    height: calc(3 * 35px + 6px);
    margin-left: 2px;
}


.selectionList {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 5;
}

.selectionListSearch {
    padding-top: 10px;
    padding-bottom: 10px;
}

.selectionListButtonContainer {
    padding-top: 15px; 
    padding-bottom: 15px; 
    display: flex;
}
.selectionListContainer {
    height: 100%;    
    background: #b3b3b3;
    overflow: scroll;
}

.selectionList > inputField {
    width: 400px !important;
}


.paymentMethod {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paymentMethodDetails {
    display: flex;
    flex-direction: column;
}

.stripe-connect {
  display: inline-block;
  margin-bottom: 1px;

  background-image: -webkit-linear-gradient(#28A0E5, #015E94);
  background-image: -moz-linear-gradient(#28A0E5, #015E94);
  background-image: -ms-linear-gradient(#28A0E5, #015E94);
  background-image: linear-gradient(#28A0E5, #015E94);

  -webkit-font-smoothing: antialiased;
  border: 0;
  padding: 1px;
  height: 30px;
  text-decoration: none;

  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;

  -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);

  cursor: pointer;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.stripe-connected {
    pointer-events: none;
    cursor: default !important;
}

.stripe-connect span {
  display: block;
  position: relative;
  padding: 0 12px 0 44px;
  height: 30px;

  background: #1275FF;
  background-image: -webkit-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
  background-image: -moz-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
  background-image: -ms-linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);
  background-image: linear-gradient(#7DC5EE, #008CDD 85%, #30A2E4);

  font-size: 14px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);

  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.stripe-connect span:before {
  content: '';
  display: block;
  position: absolute;
  left: 11px;
  top: 50%;
  width: 23px;
  height: 24px;
  margin-top: -12px;
  background-repeat: no-repeat;
  background-size: 23px 24px;
}

.stripe-connect:active {
  background: #005D93;
}

.stripe-connect:active span {
  color: #EEE;

  background: #008CDD;
  background-image: -webkit-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
  background-image: -moz-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
  background-image: -ms-linear-gradient(#008CDD, #008CDD 85%, #239ADF);
  background-image: linear-gradient(#008CDD, #008CDD 85%, #239ADF);

  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
}

.stripe-connect:active span:before {

}

/* Images*/

.stripe-connect span:before, .stripe-connect.blue span:before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAKRGlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUFNcXx9/MbC+0XZYiZem9twWkLr1IlSYKy+4CS1nWZRewN0QFIoqICFYkKGLAaCgSK6JYCAgW7AEJIkoMRhEVlczGHPX3Oyf5/U7eH3c+8333nnfn3vvOGQAoASECYQ6sAEC2UCKO9PdmxsUnMPG9AAZEgAM2AHC4uaLQKL9ogK5AXzYzF3WS8V8LAuD1LYBaAK5bBIQzmX/p/+9DkSsSSwCAwtEAOx4/l4tyIcpZ+RKRTJ9EmZ6SKWMYI2MxmiDKqjJO+8Tmf/p8Yk8Z87KFPNRHlrOIl82TcRfKG/OkfJSREJSL8gT8fJRvoKyfJc0WoPwGZXo2n5MLAIYi0yV8bjrK1ihTxNGRbJTnAkCgpH3FKV+xhF+A5gkAO0e0RCxIS5cwjbkmTBtnZxYzgJ+fxZdILMI53EyOmMdk52SLOMIlAHz6ZlkUUJLVlokW2dHG2dHRwtYSLf/n9Y+bn73+GWS9/eTxMuLPnkGMni/al9gvWk4tAKwptDZbvmgpOwFoWw+A6t0vmv4+AOQLAWjt++p7GLJ5SZdIRC5WVvn5+ZYCPtdSVtDP6386fPb8e/jqPEvZeZ9rx/Thp3KkWRKmrKjcnKwcqZiZK+Jw+UyL/x7ifx34VVpf5WEeyU/li/lC9KgYdMoEwjS03UKeQCLIETIFwr/r8L8M+yoHGX6aaxRodR8BPckSKPTRAfJrD8DQyABJ3IPuQJ/7FkKMAbKbF6s99mnuUUb3/7T/YeAy9BXOFaQxZTI7MprJlYrzZIzeCZnBAhKQB3SgBrSAHjAGFsAWOAFX4Al8QRAIA9EgHiwCXJAOsoEY5IPlYA0oAiVgC9gOqsFeUAcaQBM4BtrASXAOXARXwTVwE9wDQ2AUPAOT4DWYgSAID1EhGqQGaUMGkBlkC7Egd8gXCoEioXgoGUqDhJAUWg6tg0qgcqga2g81QN9DJ6Bz0GWoH7oDDUPj0O/QOxiBKTAd1oQNYSuYBXvBwXA0vBBOgxfDS+FCeDNcBdfCR+BW+Bx8Fb4JD8HP4CkEIGSEgeggFggLYSNhSAKSioiRlUgxUonUIk1IB9KNXEeGkAnkLQaHoWGYGAuMKyYAMx/DxSzGrMSUYqoxhzCtmC7MdcwwZhLzEUvFamDNsC7YQGwcNg2bjy3CVmLrsS3YC9ib2FHsaxwOx8AZ4ZxwAbh4XAZuGa4UtxvXjDuL68eN4KbweLwa3gzvhg/Dc/ASfBF+J/4I/gx+AD+Kf0MgE7QJtgQ/QgJBSFhLqCQcJpwmDBDGCDNEBaIB0YUYRuQRlxDLiHXEDmIfcZQ4Q1IkGZHcSNGkDNIaUhWpiXSBdJ/0kkwm65KdyRFkAXk1uYp8lHyJPEx+S1GimFLYlESKlLKZcpBylnKH8pJKpRpSPakJVAl1M7WBep76kPpGjiZnKRcox5NbJVcj1yo3IPdcnihvIO8lv0h+qXyl/HH5PvkJBaKCoQJbgaOwUqFG4YTCoMKUIk3RRjFMMVuxVPGw4mXFJ0p4JUMlXyWeUqHSAaXzSiM0hKZHY9O4tHW0OtoF2igdRzeiB9Iz6CX07+i99EllJWV75RjlAuUa5VPKQwyEYcgIZGQxyhjHGLcY71Q0VbxU+CqbVJpUBlSmVeeoeqryVYtVm1Vvqr5TY6r5qmWqbVVrU3ugjlE3VY9Qz1ffo35BfWIOfY7rHO6c4jnH5tzVgDVMNSI1lmkc0OjRmNLU0vTXFGnu1DyvOaHF0PLUytCq0DqtNa5N03bXFmhXaJ/RfspUZnoxs5hVzC7mpI6GToCOVGe/Tq/OjK6R7nzdtbrNug/0SHosvVS9Cr1OvUl9bf1Q/eX6jfp3DYgGLIN0gx0G3QbThkaGsYYbDNsMnxipGgUaLTVqNLpvTDX2MF5sXGt8wwRnwjLJNNltcs0UNnUwTTetMe0zg80czQRmu836zbHmzuZC81rzQQuKhZdFnkWjxbAlwzLEcq1lm+VzK32rBKutVt1WH60drLOs66zv2SjZBNmstemw+d3W1JZrW2N7w45q52e3yq7d7oW9mT3ffo/9bQeaQ6jDBodOhw+OTo5ixybHcSd9p2SnXU6DLDornFXKuuSMdfZ2XuV80vmti6OLxOWYy2+uFq6Zroddn8w1msufWzd3xE3XjeO2323Ineme7L7PfchDx4PjUevxyFPPk+dZ7znmZeKV4XXE67m3tbfYu8V7mu3CXsE+64P4+PsU+/T6KvnO9632fein65fm1+g36e/gv8z/bAA2IDhga8BgoGYgN7AhcDLIKWhFUFcwJTgquDr4UYhpiDikIxQODQrdFnp/nsE84by2MBAWGLYt7EG4Ufji8B8jcBHhETURjyNtIpdHdkfRopKiDke9jvaOLou+N994vnR+Z4x8TGJMQ8x0rE9seexQnFXcirir8erxgvj2BHxCTEJ9wtQC3wXbF4wmOiQWJd5aaLSwYOHlReqLshadSpJP4iQdT8YmxyYfTn7PCePUcqZSAlN2pUxy2dwd3Gc8T14Fb5zvxi/nj6W6pZanPklzS9uWNp7ukV6ZPiFgC6oFLzICMvZmTGeGZR7MnM2KzWrOJmQnZ58QKgkzhV05WjkFOf0iM1GRaGixy+LtiyfFweL6XCh3YW67hI7+TPVIjaXrpcN57nk1eW/yY/KPFygWCAt6lpgu2bRkbKnf0m+XYZZxl3Uu11m+ZvnwCq8V+1dCK1NWdq7SW1W4anS1/+pDa0hrMtf8tNZ6bfnaV+ti13UUahauLhxZ77++sUiuSFw0uMF1w96NmI2Cjb2b7Dbt3PSxmFd8pcS6pLLkfSm39Mo3Nt9UfTO7OXVzb5lj2Z4tuC3CLbe2emw9VK5YvrR8ZFvottYKZkVxxavtSdsvV9pX7t1B2iHdMVQVUtW+U3/nlp3vq9Orb9Z41zTv0ti1adf0bt7ugT2ee5r2au4t2ftun2Df7f3++1trDWsrD+AO5B14XBdT1/0t69uGevX6kvoPB4UHhw5FHupqcGpoOKxxuKwRbpQ2jh9JPHLtO5/v2pssmvY3M5pLjoKj0qNPv0/+/tax4GOdx1nHm34w+GFXC62luBVqXdI62ZbeNtQe395/IuhEZ4drR8uPlj8ePKlzsuaU8qmy06TThadnzyw9M3VWdHbiXNq5kc6kznvn487f6Iro6r0QfOHSRb+L57u9us9ccrt08rLL5RNXWFfarjpebe1x6Gn5yeGnll7H3tY+p772a87XOvrn9p8e8Bg4d93n+sUbgTeu3px3s//W/Fu3BxMHh27zbj+5k3Xnxd28uzP3Vt/H3i9+oPCg8qHGw9qfTX5uHnIcOjXsM9zzKOrRvRHuyLNfcn95P1r4mPq4ckx7rOGJ7ZOT437j154ueDr6TPRsZqLoV8Vfdz03fv7Db56/9UzGTY6+EL+Y/b30pdrLg6/sX3VOhU89fJ39ema6+I3am0NvWW+738W+G5vJf49/X/XB5EPHx+CP92ezZ2f/AAOY8/wRDtFgAAADQklEQVRIDbWVaUiUQRjHZ96dXY/d1fYQj1U03dJSw9YkFgy6DIkILRArQSSC7PjQjQQqVH7oQ0GHQUWgpQhKHzoNSqiUwpXcsrwIjzVtPVrzbPV9Z6bZhYV3N3WXYAeGmWeeZ37z8J95GEgpBf5oeXn1Es4fYAdzPDlM6je4RBYhR+LMU89UxiCBGiCgkUwsBYSA+SlPKLQBQAYEAZm+3j42K96z3NyOF7VOeMrp62opRcacjPW5+43rDTpNSKQ8QKZAEg7xmPCTs/O27uGJgXuNbW0pxyvLfTmAEBzthEsFZLxRvPdi5rpYo2cmUiQJDA4IVeo0obGdlvGfXUPj0Sym2zPuHxvzcWjDyVupJ/YYizKTGNjLw/HiduNTAqIRIUJ6Vpp+ky8bCSFgwQ2xgkGxFi1ioNWEBGuJB31gbLIv/2pd7SpFoGxtpCYkLSEq4ptlzIYFO7tc7w0TKkeEYg5ADnrWkkYhD8s26GPq3nW0WKxTptftPYBI4Mj3O2fHvKNZBMVSDmMwarXNjDkSF3d5kExZeiCr8M2VI+VFu9IvsPcYtzAvkfoEZkEEE45jMppq3ppbCNPFIY1nD1cpo07lbMmvOXeoDCF8BLKy9uUAAjDkBh+c6bz78mNtVVP7MwET7JBnqb4xXpdWVpC1OVzWn+ELHLCsneX/s7rkRWl1463cy1U3WroG21jhCGKJXPOtKQnpAuENvsAppgDB3TcDVIrpDHbK5Kd+y7W8iodNybHh22rOHyxUK+UaMYjZaoyp25rYL54TSihSKmwZ14v3lc3ZFxdbeywjn/tGJnkmzrydX1ApxOEACKymmXLYfXVpi1JMEOGxPi1ep18doY4r2J7uFumQQ9yGf01bMcZW8dpyc0oIjxxpuC5wuUDX+ovWrnYeg3aXvdLIqnmOvXPsfH6uA5YbTb1DX8ofvTLzTy6ZV4K6fAw+gXiATfdffmjeaUgc1UdpdWplsCooQBrEnqUw82dhdnjit/Vxc4f59tP3DRjzJvYteqrl4rmNlJIfrOwpgNklesDRNQBCHYtQAQqD2CgACNjHAJnG1EyfV/S67fZiJB5t2OGEe4n7L3fS4fpEv/2hUEATfoPbuam5v8N7nps70YTbAAAAAElFTkSuQmCC);
}

.contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contactsHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.contactsTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 20px;
    padding-bottom: 20px;
}

.contactsTitleText {
    font-size: 18px;
    padding-bottom: 5px;
    cursor: default;
}

.contactsSubtitleText {
    color: gray;
    font-size: 14px;
    cursor: default;
}

.contactsSearch {
    padding-top: 10px;
}

.contactCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100vw - 20px);
    padding-left: 5px;
    background: #efefef;
    padding-right: 5px;
}

.unreadCount {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: gray;
    color: white;
    height: 16px;
    width: 16px;
    pointer-events: none;
}

.contactName {
    height: 35px;
    color: gray;
    display: flex;
    align-items:center;
    justify-content: flex-start;
    cursor: default;
    font-size: 14px;
    cursor: pointer;
    width: 100%
}

.contactName:hover {
    text-decoration:underline;
}

.contactCard {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.contactsContainer {
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}

.contactsList {
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.appTitleLeft {
    align-self: flex-start;
}

.uiOpenContactView {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;                 
}

.uiOpenContactViewMobile {
    position: relative;
}

.uiOpenContactChat {
    position: absolute;
    height: 100%;
    width: 100%;
}

.uiOpenContactVideo {
    position: absolute;
    height: 100%;
    width: 100%;
}



.uiBlackboardFeedback { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #bac6c1; background: white; color: #4d4d4d; font-size: 14px; }
.uiBlackboardFeedback .uiIcon { flex-shrink: 0; }
.uiBlackboardFeedback svg { fill: #3171b7; }

.activeContacts {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.uiLetsBuildAppMobile .activeContacts {

}

.activeContactsNonMobile .fdPageScroller {
    background: white;
}

.activeContactsNonMobile .fdPageContent {
    background: white;
}

.uiActiveContactViewNonMobile {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;

}

.uiActiveContactViewOptions {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
}

.uiActiveContactViewInner {
    height: 100%;
    width: 100%;
    background: white;
}

.uiActiveContactViewNonMobile .uiActiveContactViewInnerTitle {
    display: flex;
    z-index: 1;
}

.uiActiveContactViewInnerTitle {
    background: white;
    padding-left: 22.5px;
    color: #4d4d4d;
    cursor: default;
    font-size: 18px;
    font-weight: bold;
    height: 45px;
    display: flex;
    align-items: center;
    position: relative;
    display: none;
}

.uiActiveContactViewOptionButtons {
    position: absolute;
    width: 100%;
    height: 45px;
    z-index: 0;
    display: flex;
    align-items: center;
}

.uiLetsBuildAppDesktop .uiActiveContactViewOptionButtons {
    margin-left: 22.5px;
    margin-right: 22.5px;
    width: calc(100% - 45px);
}

.uiLetsBuildAppDesktop .uiActiveContactViewOptionButtons svg {
    transform: scale(1.25, 1.25)
}

.uiActiveContactViewOptionButtons .uiProfileIcon {
    margin-right: 5px;
    margin-left: 5px;
    height: 45px;
}

.uiActiveContactViewProfileButton {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.uiActiveContactViewProfileButton:hover {
    background:  #B6EEFF;
}

.uiActiveContactViewProfileButtonSelected {
    background: rgb(37, 183, 68);
    cursor: default;
}

.uiActiveContactViewProfileButtonSelected:hover {
    background: rgb(37, 183, 68) !important;
}

.uiLetsBuildAppMobile .uiActiveContactViewOptionButtons .uiActiveContactViewProfileButton {
    height: 40px;
    transform: translate(-10px, 0);
}

.uiActiveContactBlackboard {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.uiActiveContactBlackboard > .uiCallButton {
    margin-left: 22.5px;
}

.uiActiveContactBlackboard > .uiRemoteStreamsBlackboard {
    position: absolute;
    z-index: 3;
    height: auto;
    left: 22.5px;
}

.uiActiveContactCalendar .uiRemoteStreamsBlackboard {
    top: 0px;
    left: 22.5px;
    position: relative;
    z-index: 3;
    height: auto;
}

.uiActiveContactBlackboard > .uiRemoteVideoStreamContainer {
    top: 0;
    position: absolute;
    z-index: 3;
    height: auto;
    width: auto;
}

.uiRemoteStreamsBlackboard video {
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}

.uiActiveContactViewContent {
    position: absolute;
    top: 90px;
    width: 100%;
    height: calc(100% - 90px);
    z-index: 0;
    overflow: hidden;
}

.uiActiveContactViewContent > .uiRemoteVideo {
    position: absolute;
    top: 0;
    z-index: 35;
}

.uiActiveContactCalendar .uiCallButton {
    margin-left: 22.5px;
}    

.uiActiveContactVideo {
    position: relative;
    width: 100%;
    height: 100%;
    background: black;
}

.uiCallFeedback {
    position: absolute;
    z-index: 10;
    top: 16px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid #bac6c1;
    background: white;
    color: #4d4d4d;
    font-size: 14px;
    line-height: 20px;
}

.uiCallFeedback > .uiIcon {
    flex: 0 0 45px;
}

.uiCallFeedback > span {
    min-width: 0;
}

.uiCallFeedback svg {
    display: block;
    width: 45px;
    height: 45px;
    fill: #25b744;
}

.blackboardRadioIcon {
    transform: translate(0, 1px) scale(.72, .72) 
}

.blackboardRadioIcon .board-1 {
    fill: #36A9D3;
}

.calendarRadioIcon {

}

.uiActiveContactSettings {
    height: 100%;
    background: rgb(239, 239, 244);
    background: #17043d;
    background: white;
}

.uiActiveContactSettingsFields {
    padding: 22.5px;
    max-width: 408px;
}

.uiActiveContactSettings .mbsc-form-group {
    margin-left: 15px;
}

.uiActiveContactSettings .fdPageHeaderButtons {
    padding-top: 0;
}

.uiActiveContactSettings .back-arrow-3 {
    fill: transparent
}

.uiActiveContactCalendar {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
}

.notImplemented {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
}

.uiActiveContactViewContent .fdPageContent {
    background: white;
}

.uiActiveContactViewContent .fdPageScroller {
    background: white;
}

.uiActiveContactSettings .mbsc-form-group {
    max-width: 500px;
}

.uiManageGroupSettings {
    padding-top: 15px;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.uiLeaveGroupSettings {
    padding-top: 15px;
    padding-left: 22.5px;
    padding-right: 22.5px;
    width: calc(100% - 45px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.uiManageGroupSettings .uiOKCancel {
    margin-left: 22.5px;
    max-width: calc(min(100% - 45px, 408px));
}

.uiRemoveContact {
    margin-top: 15px;
    position: relative;
}

.uiRemoveContact .uiOKCancel {
}

.uiRemoveContact .uiOKCancelOK {
    background: rgb(184, 38, 26);
}

.uiRemoveContact .uiRemoveContactConfirm {
    left: 0;
}


.uiLeaveGroupSettings .uiOKCancelOK {
    background: rgb(184, 38, 26);
}

.uiChatRadioButton {
    position: relative;
    width: 100%;
    height: 100%;
}

.uiChatRadioButton .uiSideListContactUnread {
    position: absolute;
    top: -1px;
    right: 0;
    height: 30px;
}

.uiLetsBuildAppMobile .uiChatRadioButton .uiSideListContactUnread {
    min-width: 12px;
}

.uiLetsBuildAppDesktop .uiChatRadioButton .uiSideListContactUnread {
    position: absolute;
    top: -1px;
    right: 0;
    height: 45px;
}

.uiUnreadCountZero {
    display: none;
}


.uiMealNutrition {
  max-width: calc(min(100vw, 700px));
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}


.uiMealNutrition {
    font-size: 14px !important;
}

.uiMealDetails {
    background: white;
    max-width: 700px;
}

.uiMealDetails .uiWhoopSleep {
    min-height: 215px;
    margin-left: 0;
    background: #f8f8f8;
    margin-bottom: 10px;
}

.uiMealDetails .uiWhoopSleepDate {
    min-width: calc(min(100%, 700px));
}

.uiMealDetailsFoods {
    max-width: 700px;
}

.uiMealDetailsHeader {
    display: flex;
    background: #f8f8f8;
    width: 100%;
    justify-content: center;
    align-items: center;
}


.Nutrients-headline-1-1-24 {
    display: none;
}

.uiChatEmpty {
    height: 100%;
    width: 100%;
    background: white;
}

.uiActiveContactSettingsSubscription {
    margin-top: 15px;
    width: 100%;
}

.uiActiveContactSettingsSubscription .uiNotificationSetting {
    background: rgb(239, 239, 244);
    font-size: 14px;
}

.uiActiveContactSettingsSubscription .uiNotificationSettingChecked {
    background: rgb(239, 239, 244);
}

.uiActiveContactSettingsSubscription .uiOKCancelOKIcon svg {
    height: 35px;
    width: 35px;
    transform: translate(5px, 5px);
}

.uiActiveContactSettingsSubscriptionCard .uiSubscriptionChat {
    max-width: none;
}

::-webkit-scrollbar-button{
  display: none;
}

/* Track */
::-webkit-scrollbar-track {
  background: #b3b3b3;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #f2f2f2;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.uiLetsBuildAppContainer {
    position: fixed;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.uiLetsBuildApp {
    min-width: 100%;
    height: 100%;
    position: relative;
}

.client {
    height: 100%;
    width: 100%;
}

.app {
    top: 0px;
    left: 0px;
    position: fixed;
    height: 100%;
    width: 100%;
}

.clientCall {
    height: 100%;
    width: 100%;
    position: fixed;
}

.videoVisibilityContainer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.remoteVideosDesktop {
    height: 100%;
    width: 100%;
    display: grid;
    position: fixed;
    grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
    grid-row-gap: 1px;
    grid-auto-rows: minmax(23%, 1fr);
}

.remoteVideosMobile {
    height: 100%;
    width: 100%;
    display: grid;
    position: fixed;
    grid-template-rows: repeat(auto-fit, minmax(33%, 1fr));
    grid-row-gap: 1px;
    grid-auto-columns: minmax(23%, 1fr);
}


.remoteVideo {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.remoteVideoSmall {
   object-fit: cover;
   width: 125px;
   position: absolute;
   right: calc(125px + 10px);
   top: 5px;
   object-fit: cover;
   z-index: 2;
}

.localVideo {
   width: 125px;
   position: absolute;
   right: 5px;
   top: 5px;
   object-fit: cover;
   transform: scale(-1, 1);
   z-index: 10;
}

.controlsContainer {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    bottom: 0px;
    height: 100%;
    width: 100%;
}

.chatContainer {
    position: absolute;
    height: 100%;
    bottom: 45px;
    width: calc(100% - 2px);
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdcdc;
    min-height: 45px;
    z-index: 0;
}

.buttonControls {

    background: white;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
}

.buttonControls buttonContainer {
    margin-top: 4px;
}

.callBackButton {
    position: relative;
    top: 0px;
    left: 0px;
}

.callDuration {
    position: absolute;
    left: calc(50vw - 22.5px);
    bottom: 20px;
    z-index: 1;
    font-size: 9px;
    padding: 2px;
    bottom: 46px;
    background: gray;
    color: white;
    height: 10px;
    width: 30px;
    display: flex;
    justify-content: flex-end;
}

.callCost {
    position: absolute;
    left: 1px;
    bottom: 30px;
    z-index: 1;
    font-size: 9px;
    padding: 2px;
    bottom: 46px;
    background: gray;
    color: white;
    display: flex;
    justify-content: flex-end;
    width: 30px;
    height: 10px;
}

.callStats {
    height: 10px;
    width: 130px;
    position: absolute;
    right: 1px;
    bottom: 46px;
    z-index: 1;
    font-size: 9px;
    padding: 2px;
    background: gray;
    color: white;
    display: flex;
    justify-content: flex-end;
}

.appTitle {
    font-size: 20px;
    padding-bottom: 15px;
    background: #00000000;
}

.appTitle svg {
    height: 150px;
    width: 150px;
}

.uiClientMain {
    position: absolute;
    height: 100%;
    width: 100%;
    background: transparent;
}

.uiClientMainContainer {
    position: absolute;
    width: calc(100% - 270px);
    left: 270px;
    height: 100%;
    background: white;
    top: 0;
}

.stripeConnectPopup {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.appointmentDateTimePromptPopup {
    top: 0;
    left: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    flex-direction: column;
    background: #00000000;
    z-index: 100;
}

.appointmentDate {
    font: 15px;
    color: gray;
    padding-bottom: 5px;
}

.appointmentDateWho {
    font-size: 14px;
    padding-bottom: 10px;
}

.appointmentDateTimePromptTitle {
    padding-top: 20px;
    color: gray;
    padding-bottom: 5px;
}

.appointmentDateTimePrompt {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 300px;
    box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.33);
}

.appointmentButtons {
    padding-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-bottom: 10px;
}

.appointmentDateTimePrompt .inputField {
    width: 245px;
}

.appointmentDateTimePrompt .inputFieldLabel {
    width: 80%;
}

.uiOpenContactIncoming .uiSideListElementContainer {
    width: calc(100% - 45px);
}

.uiOpenContactIncoming .uiSideListMessageHangup {
    background: #CA0000 !important;
}

.uiOpenContactIncoming .uiSideListMessageHangup svg {
    fill: #e6e6e6;
}

.uiMeContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.uiClientProgressIndicatorContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;    
}

.uiClientProgressIndicator {
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 10px 30px 0px rgba(0,0,0,0.33);
    z-index: 1000;
    background: white;
    height: 60px;
    width: 160px;
    position: relative;
}


.uiClientProgressIndicatorMessage {
    text-align: center;
    color: #666666;
    font-size: 14px;
}

.uiClientBlockInput {
    top: 0;
    left: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    cursor: progress;
    z-index: 10000;
    display: block !important;
    background: rgb(0, 0, 0, 0.2);
}


.uiLetsBuildAppMobile .uiClientBlockInput {
    background: rgb(0, 0, 0, 0.3);
}


.uiSettingsContainer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.ant-icon-group {
    transform: scale(1.2857, 1.2857);
    transform-origin: center;
}

.uiVoiceEditor {
    height: 100%;
    width: 100%;
    background: white;
    display: flex;
    flex-direction: column;
}

.uiVoiceEditorErr {
    height: 15%;
    width: calc(100% - 60px);
    background: white;
    padding-left: 30px;
    padding-right: 30px;
    font-style: italic;
    color: black
}

.uiVoiceEditorPrompt {
    height: 15%;
    width: calc(100% - 60px);
    background: white;
    padding-left: 30px;
    padding-right: 30px;
    background: lightgray;
}

.uiVoiceEditorDocument {
    padding-top: 30px;
    height: calc(70% - 30px);
    width: calc(100% - 60px);
    background: white;
    padding-left: 30px;
    padding-right: 30px;
}


html {
  height: 100%;
  width: 100%;    
  position: absolute;
  bottom: 0;
  margin: 0;
  font-family:  OpenSans, Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body, #root{
  height: 100%;
  width: 100%;    
  position: fixed;
  margin: 0;
  font-family:  OpenSans, Arial, Helvetica, sans-serif;
  height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
  scrollbar-width: thin;
  background: #17043d;
  height: 100%;
}

.uiClientBlockInput {
    touch-action: none;
}



.uiLetsBuildAppWindows *::-webkit-scrollbar {
    width: 4px;
}

.uiLetsBuildAppWindows *::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
}

.uiLetsBuildAppWindows *::-webkit-scrollbar-thumb {
    background-color: #dddddd;
}

.uiLetsBuildAppWindows {
    scrollbar-width: thin !important;
}

/* Keep the flat UI consistent, including vendor controls and body-level portals. */
html,
html body,
html body *,
html body *::before,
html body *::after {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Profile images remain circular within the otherwise square interface. */
html body :is(.uiProfileIcon, .uiProfileIconImage, .uiProfileIconImage img, .uiProfileIconRing, .fdUserProfileIconIcon img) {
    border-radius: 50% !important;
}

.uiProfileIconImage {
    overflow: hidden;
}