nav {
padding-left: 0px;
position: fixed;
}
html {
scrollbar-width: none; /* Firefox */
scroll-behavior: smooth;
}
html, body {
overscroll-behavior-x: none; /* To avoid moving back with 2-finger swipe to left or right */
}
/* To turn the visible scroll bars off */
::-webkit-scrollbar {
width: 0px;
/* don't want to show */
background: transparent;
/* optional: just make scrollbar invisible */
}
/* Test */
::-webkit-scrollbar-thumb {
background: transparent;
width: 0;
}
#slide-out:hover ::-webkit-scrollbar {
width: 1px;
/* Show it */
background: aliceBlue;
/* optional: just make scrollbar invisible */
}
.debug-wrapper {
margin: 0 24px;
/* width: max-content; */
display: flex;
}
.debug-wrapper item {
margin: 0 8px;
}
/* CURRENT = moved to fancy.css */
.tooltip {
position: fixed;
z-index: 99999999;
padding: 10px 20px;
font-size: 0.9rem;
font-family: 'Montserrat', sans-serif;
border: 1px solid #b3c9ce;
border-radius: 4px;
text-align: left;
/* center */
max-width: 600px;
color: #333;
background: aliceBlue;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
opacity: 1;
}
.tooltip strong {
font-weight: 600;
color: #111;
}
.tooltip.zoom {
background-color: black;
color: white;
}
.larger-tooltip {
background-color: transparent;
color: teal;
padding: 12px 0 18px 0;
font-size: 1.25rem;
}
/* Tooltip container *
.tooltip {
position: relative;
display: inline-block;
border-bottom: 0px dotted black; /* If you want dots under the hoverable text *
}
/* Tooltip text *
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
font-size: 0.9rem;
font-family: 'Montserrat', sans-serif;
height: 24px;
background-color: aliceBlue;
color: #00c9a9;
text-align: center;
padding: 2px 0;
border-radius: 6px;
border: 1px solid #dddddd;
/* Position the tooltip text - see examples below! *
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container *
.tooltip:hover .tooltiptext {
visibility: visible;
}
*/
.conversations-window {
padding-left: 0;
padding-top: 64px;
height: 100vh;
overflow: hidden;
}
#message-container {
background: url("../wallpapers/medwp0.jpg") no-repeat;
background-size: cover;
background-repeat: no-repeat;
}
#user-container {
background: url("../wallpapers/medUserBG.jpg") no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-color: #eee;
}
#htmlOverlay {
max-width: 1024px;
width: 90%;
height: 90%;
margin: auto;
padding: 64px 32px 24px 64px;
}
#htmlOverlay.nopadding {
padding: 0;
}
svg.fal, svg.fas {
cursor: pointer;
}
/*
#message-container:after { content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: none;
mix-blend-mode: overlay;
}
/*
Sandeep - Fiter options
*/
#message-container:hover:after {
background: radial-gradient(circle, transparent 30%, #333333 130%);
}
.collection.body {
position: absolute;
bottom: 44px;
top: 100px;
overflow-y: scroll;
right: 88px;
left: 60px;
}
.with-header {
/* max-height: 500px;
height: 500px; */
overflow-y: scroll;
}
.collection-header {
padding: 16px 6px 16px 16px;
margin-bottom: 16px;
}
.collection-item {
border-bottom: 1px solid #f3f5f8;
cursor: pointer;
}
.list-item {
display: flex;
flex-direction: row;
justify-items: center;
align-items: center;
min-height: 84px;;
}
.list-item .diamond-image, .list-item .group-image {
position:relative;
left: 6px;
top: 16px;
}
.list-item .listTitle.stack {
display: flex;
flex-direction: column;
justify-content: space-evenly;
height: max-content;
margin: 0;
padding-left: 32px;
font-size: 1.8rem;
font-family: Rajdhani, Montserrat, sans-serif;
font-weight: 500;
}
.clickable-item {
border-bottom: 1px solid #f3f5f8;
cursor: pointer;
}
.message-option-container .message-container-me .collection .collection-item:hover, .message-option-container .message-container-other .collection .collection-item:hover {
background-color: transparent;
}
.message-option-container .message-container-me .collection .collection-item.avatar .title,
.message-option-container .message-container-other .collection .collection-item.avatar .title {
font-size: 1.2rem;
font-family: Anaheim;
}
.message-option-container .message-container-me .collection .collection-item.avatar .title {
color: #474d32;
}
.message-option-container .message-container-other .collection .collection-item.avatar .title {
color: #106280;
}
.sent-message p,
.sent-message p span {
color: #474d32;
}
.sent-message p,
.sent-message p span {
color: #106280;
}
p.sent-message.highlighted {
background-color: rgba(0, 255, 255, 0.17);
color: #000000;
}
p.received-message.highlighted {
background-color: rgba(183, 255, 0, 0.17);
color: #000000;
}
.collection .collection-item:hover, .collection .collection-item.avatar:hover {
background-color: rgba(0,0,0,0.05);
}
.collection .collection-item.avatar.org:hover {
background-color: powderblue;
}
.collection .collection-item.avatar.org.parent:hover {
background-image:linear-gradient(152deg, #dbc2ee, #39c7d8);
}
.collection .collection-item.avatar.org.subsidiary:hover {
background-image: linear-gradient(152deg, #dfb419, #e47125);
}
.messageActions {
opacity: 0.1;
color: black;
cursor: pointer;
padding-bottom: 4px;
}
.message-action-icons {
display: flex;
flex-direction: column;
padding: 12px 0;
gap: 4px;
}
.message-option-container {
position: relative;
padding: 1px;
}
.message-option-container.highlight {
padding: 0px;
border: 1px solid darkgray;
}
.message-option-container:hover .messageActions {
opacity: 1.0;
color: #d91e43;
}
#floating-icon {
opacity: 0.5;
border: 0px solid #333;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
position: absolute;
top: 100px;
right: 0;
width: 64px;
height: 64px;
z-index: 100;
}
.top-floating-icon {
opacity: 0.0;
border: 0px solid #333;
background-color: rgba(0, 0, 0, 0.0);
width: 48px;
height: 48px;
z-index: 100;
cursor: pointer;
transition-property: opacity width height;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
}
.top-floating-icon.right-on {
opacity: 0.8;
}
.nav-wrapper {
display: flex;
flex-direction: row;
}
.nav-wrapper.buzzlink {
background-color: aliceblue;
}
.nav-wrapper:hover .top-floating-icon {
opacity: 0.9;
width: 64px;
height: 64px;
}
.right-on {
margin-right: 12px;
float: right !important;
}
.right {
float: right !important;
}
.file-container {
position: relative;
}
.file-container:hover .messageActions {
opacity: 1.0;
color: #d91e43;
}
.floating-icon {
position: relative;
margin: 2px 8px;
font-size: 20px;
cursor: pointer;
}
.weblink-icon {
width: 24px;
}
.floating-icon > span.emoji-icon {
font-size: 32px;
-webkit-text-stroke: 0.2px teal; /* stroke width and color */
color: #56c5c5;
-webkit-font-smoothing: antialiased;
font-weight: bold;
}
.message-container-me .floating-icon {
float: right;
align-self: center;
}
.message-container-other .floating-icon {
float: left;
align-self: center;
}
/* Colors
$bg-color: #1370FB;
$dot-color: white;
// Dimensions
$dot-size: 1px;
$dot-space: 8px;
body {
background:
linear-cy(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center,
$dot-color;
background-size: $dot-space $dot-space;
*/
.message-container-me.stat, .message-container-other.stat {
border: 3px solid #d91e43;
background-color: lightsalmon;
}
.message-container-other.stat {
/* pattern */
background:
linear-gradient(
90deg
, lightsalmon 3px, transparent 1%) center, linear-gradient(lightsalmon 3px, transparent 1%) center, salmon;
background-size: 4px 4px;
}
.message-container-me.stat.read {
background: #f9efd1;
/* FEFCF5 */
padding: 4px 16px 4px 4px;
border-left: 3px solid #d91e43;
}
.message-container-other.stat.read {
background: #eaf7ff;
/* F5FBFD */
padding: 4px 16px 4px 4px;
border-right: 3px solid #d91e43;
}
.message-container-me.stat.raw-text-warning {
background: #f9efd1;
/* FEFCF5 */
padding: 4px 16px 4px 4px;
border-left: 3px solid #d91e43;
}
.message-container-other.stat.raw-text-warning {
background: #eaf7ff;
/* F5FBFD */
padding: 4px 16px 4px 4px;
border-right: 3px solid #d91e43;
}
.message-container-me.private, .message-container-other.private {
border: 3px solid #a7ccba;
background-color: rgb(219 231 221);
}
.message-container-me.stat p.received-message, .message-container-other.stat p.sent-message {
color: black;
padding: 20px 6px;
background-color: lightsalmon;
font-size: 1.1rem;
}
.message-container-other.stat p.sent-message {
background: linear-gradient(
90deg, lightsalmon 3px, transparent 1%) center, linear-gradient(lightsalmon 3px, transparent 1%) center, salmon;
background-size: 4px 4px;
}
.message-option-container.broadcast .message-container-other {
background: linear-gradient( 90deg, #ecfbfb 3px, transparent 1%) center, linear-gradient(#7ae8ff 3px, transparent 1%) center, #96c8c7;
background-size: 4px 4px;
}
.message-option-container.broadcast .message-container-other p.sent-message {
background: linear-gradient( 90deg, #ecfbfb 3px, transparent 1%) center, linear-gradient(#7ae8ff 3px, transparent 1%) center, #96c8c7;
background-size: 4px 4px;
}
.message-container-other.stat.read p.sent-message {
background: unset;
}
message-container-me.stat.read .received-message, message-container-me.stat.raw-text-warning .received-message {
color: #474d32;
}
.message-container-me.stat.read p.received-message, .message-container-me.stat.raw-text-warning p.received-message {
color: #474d32;
padding: 20px 6px;
background-color: unset;
font-size: 1.1rem;
}
.message-container-other.stat.read .sent-message, .message-container-other.stat.raw-text-warning .sent-message {
color: #106280;
}
.message-container-other.stat.read p.sent-message, .message-container-other.stat.raw-text-warning p.sent-message {
color: #106280;
padding: 20px 6px;
background-color: unset;
font-size: 1.1rem;
}
.buzzlink .message-container-me.stat.read p.received-message, .buzzlink .message-container-me.stat.raw-text-warning p.received-message, .buzzlink .message-container-other.stat.read p.sent-message, .buzzlink .message-container-other.stat.raw-text-warning p.sent-message {
font-size: 1.0rem;
}
.mobile .message-container-me.stat.read p.received-message, .mobile .message-container-me.stat.raw-text-warning p.received-message, .mobile .message-container-other.stat.read p.sent-message, .mobile .message-container-other.stat.raw-text-warning p.sent-message {
font-size: 1.0rem;
}
.mobile #attach-poll-message, .mobile #attach-calendar-message, .mobile #attach-buzzflow-message, .mobile #attach-quick-messages-message {
display: none;
}
/* MENTIONS START */
.message-container-me.mention, .message-container-other.mention {
border: 3px solid #009ad1;
border-radius: 0;
/* background-color: #d91e43; */
/* pattern */
background:
linear-gradient(90deg, transparent 3px, transparent 1%) center,
linear-gradient(transparent 3px, transparent 1%) center, #ceeaf4;
background-size: 4px 4px;
}
.message-container-me.mention.ack {
background: #f9efd1;
/* FEFCF5 */
padding: 4px 16px 4px 4px;
border-left: 3px solid #009ad1;
}
.message-container-other.mention.ack {
background: #eaf7ff;
/* F5FBFD */
padding: 4px 16px 4px 4px;
border-right: 3px solid #009ad1;
}
.message-container-me.mention p.received-message, .message-container-other.mention p.sent-message {
color: #106280;
padding: 20px 6px;
/* background-color: #d91e43; */
font-size: 1.1rem;
}
.message-container-me.mention.ack .received-message {
color: #474d32;
}
.message-container-me.mention.ack p.received-message{
color: #474d32;
padding: 20px 6px;
background-color: unset;
font-size: 1.1rem;
}
.message-container-other.mention.ack .sent-message {
color: #106280;
}
.message-container-other.mention.ack p.sent-message {
color: #106280;
padding: 20px 6px;
background-color: unset;
font-size: 1.1rem;
}
/* MENTIONS END */
/* Captions for Images and such */
/* Images as a placeholder */
.attachment-container {
cursor: pointer;
width: min-content;
margin-left: 12px;
margin-top: 12px;
}
.event-caption {
margin-top: 8px;
font-size: 1.25em;
font-weight: 800;
cursor: pointer;
font-family: 'Anaheim';
margin-left: 12px;
color: #197171;
}
.event-caption.future {
color: #333;
}
.event-caption.past {
color: #d91e43;
}
.event-caption.far {
color: steelblue;
}
.event-caption.current {
color: #947a10;
}
.event-caption.recurring {
color: teal;
margin-left: 4px;
}
.download-hook, .richtext-hook {
background-color: transparent;
width: 100%;
padding: 8px;
text-align: right;
border-radius: 4px;
margin-left: 0px;
margin-top: 8px;
z-index: 200;
display: flex;
flex-direction: row;
}
.message-container-me .download-hook, .message-container-me .richtext-hook {
text-align: left;
}
.message-container-other .richtext-hook {
flex-direction: row-reverse;
}
.richtext-hook {
padding: 8px 0;
}
.download-button {
letter-spacing: 2;
padding: 6px;font-size: 0.8rem;
background-color: rgba(0,0,0,0.3);
}
.richtext-hook .invite, .richtext-hook .reply {
/* display: none; */
opacity: 0.0;
}
.richtext-hook .clearview {
/* display: none; */
opacity: 0.3;
}
.message-container-other:hover .richtext-hook .invite, .message-container-other:hover .richtext-hook .reply, .message-container-other:hover .richtext-hook .clearview,
.message-container-me:hover .richtext-hook .invite, .message-container-me:hover .richtext-hook .reply, .message-container-me:hover .richtext-hook .clearview {
display: inline;
opacity: 1.0;
transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
}
.message-container-me .richtext-hook .clearview, .message-container-other .richtext-hook .clearview {
background-color: transparent;
border: 1px solid #333;
color: #333;
}
.message-container-me .richtext-hook .clearview actionbutton, .message-container-other .richtext-hook .clearview actionbutton {
background-color: transparent;
border: 1px solid #333;
color: #333;
}
.message-container-me:hover .richtext-hook a, .message-container-other:hover .richtext-hook a {
background-color: unset;
display: inline-flex;
}
.message-container-me .richtext-hook a, .message-container-other .richtext-hook a {
background-color: transparent;
}
.attachment-representation {
display: flex;
flex-direction: row;
/* justify-content: center; */
width: min-content;
align-items: center;
justify-content: space-between;
padding: 6px;
border: 1px solid transparent;
}
.attachment-representation.reverse {
flex-direction: row-reverse;
}
.attachment-representation.date-time {
display: flex;
flex-direction: column;
justify-content: flex-start;
width: max-content;
font-size: 0.66em;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.attachment-container:hover .overlay {
opacity: 1;
cursor: pointer;
}
.media-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
/* z-index: 100; */
}
.fillscreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: rgba(0,0,0,0.1); */
z-index: 200;
display: flex;
flex-direction: column;;
}
.files-item-content, .folder-item-content {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* padding: 20px 12px 20px 12px; */
}
.files-item-content img, .folder-item-content img {
max-width: 128px;
}
.file-item-media-overlay {
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
/* background-image: url(/static/wallpapers/bg-medicine-alt.jpg); */
background-size: cover;
background-position: center;
/* opacity: 0.25; */
}
img.file-item-media-overlay {
object-fit: cover;
opacity: 0.15;
}
.files-container.tight img.file-item-media-overlay {
display: none;
}
img.file-item-media-image {
object-fit: cover;
mix-blend-mode: calc(overlay + difference);
transition: all 0.5s ease-in-out;
opacity: 0.05;
}
.files-container.list .peek-button, .files-container.list .files-item:hover .peek-button, .files-container.tight .peek-button, .files-container.tight .files-item:hover .peek-button {
display: none;
}
/* .files-item:active img.file-item-media-image */
img.file-item-media-image.peek {
position: fixed;
top: 10%;
left:10%;
width: 80%;
height: 80%;
object-fit: cover;
mix-blend-mode: unset;
opacity: 1;
border: 3px solid #206d6888;
z-index: 10;
-webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
}
.files-item.thumbnail:hover img.file-item-media-overlay {
opacity: 0.25;
}
.files-item.thumbnail:hover .files-item-content {
opacity: 0.95;
}
.files-item.thumbnail:hover {
/* overflow: visible; */
border: 2px solid black;
}
.files-item-action-button, actionbutton.files-item-action-button {
}
.files-upload-action-container {
opacity: 0.0;
z-index: 100;
flex-direction: row;
justify-content: center;
}
.files-item-action-container {
position: absolute;
display: none;
top: 60%;
transform: translate(-50%, -50%);
left: 50%;
z-index: 100;
flex-direction: row;
justify-content: center;
}
.files-item:hover .files-item-action-container {
display: flex;
}
.files-item:active .files-item-action-container {
display: flex;
opacity: 0.2;
}
.folder-item-action-container {
position: absolute;
display: none;
top: 10%;
/* transform: translate(-50%, -50%); */
right: 10%;
background-color: rgb(231, 154, 154);
border-radius: 50%;
width: 42px;
height: 42px;
color: white;
align-items: center;
justify-items: center;
justify-content: center;
z-index: 100;
}
.folder-item:hover .folder-item-action-container {
display: inline-flex;
}
.file-item-media-image {
position: absolute;
top: -20%;
left: -20%;
width: 140%;
height: 140%;
opacity: 0.25;
}
/** float container */
.float-container {
/* border: solid 1px #000; */
box-sizing: border-box;
margin-bottom: 8px;
padding: 0 8px;
position: absolute;
/* width: 300px; */
top: 0;
bottom: -10;
left: 0;
right: 0;
border: 0;
z-index: 100;
background: #b5b5b5f2;
}
.float-container input {
border: none;
font-size: 16px;
outline: 0;
padding: 16px 0 10px;
width: 100%;
}
.float-container label {
font-size: 16px;
position: absolute;
transform-origin: top left;
transform: translate(0, 16px) scale(1);
transition: all 0.1s ease-in-out;
color: #58584b;
}
.float-container input.float-container-input {
transform-origin: top left;
transform: translate(0, 48px) scale(1);
transition: all 0.1s ease-in-out;
font-family: Montserrat;
color: #3d4c5a;
/* width: 60%; */
}
.files-container.list .float-container input.float-container-input,
.files-container.tight .float-container input.float-container-input {
width: 60%;
}
.float-container.active label {
transform: translate(0, 4px) scale(0.75);
}
.float-container-inner {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
padding: 32px 16px;
}
.folder-name-wrapper {
display: flex;
flex-direction: row;
justify-content: center;
justify-items: center;
}
.folder-container.tight .folder-name-wrapper {
align-items: center;
}
.file-name-alias, .file-name-rename, .file-name-action-wrapper {
padding: 0;
display: inline-flex;
width: 0;
overflow: hidden;
opacity: 0;
}
.files-item-name:hover .file-name-alias, .files-item-name:hover .file-name-rename, .files-item-name:hover .file-name-action-wrapper {
align-items: center;
width: unset;
transition: all .4s ease-in-out;
padding: 0 12px;
opacity: 1;
}
.file-name-alias:hover, .file-name-rename:hover {
background-color: yellow;;
}
.folder-name-edit {
display: inline-flex;
width: 0;
overflow: hidden;
padding: 0;
transition: all .4s ease-in-out;
}
.folder-name-wrapper:hover .folder-name-edit {
display: inline-flex;
align-items: center;
margin-left: 12px;
width: 32px;
background-color: yellow;;
}
.folder-name-wrapper:hover .truncated {
background: rgba(153, 205, 50, 0.244);
}
.files-container.list .float-container-inner, .files-container.tight .float-container-inner {
padding: 8px 72px;
}
.files-container.tight .folder-item-content:hover {
background: rgb(221, 228, 234);
}
.float-container-footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 16px 12px;
margin-top: 12px;
height: 48px;
z-index: 1000;
}
.preview-icon.mini.in {
color: white;
}
.preview-icon.mini.out {
color: white;
}
.preview-mini-icon {
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
}
.preview-icon.mini {
width: 24px;
height: 24px;
position: relative;
background-color: rgba(0, 0, 0, 0.5);
}
.preview-icon {
color: black;
font-size: 16px;
padding: 16px;
margin: auto;
/*background-image: url(../icons/Tag.png);*/
background-size: 90%;
background-color: aliceBlue;
color: white;
width: 72px;
height: 72px;
left: calc(50% - 36px);
top: calc(80% - 36px);
position: absolute;
vertical-align: middle;
text-align: center;
border-radius: 50%;
/* box-shadow: 0 8px 17px 0 rgba(0,0,0,.2);*/
z-index: 100;
}
.attachment-container:after {
content: '';
position: relative;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: none;
mix-blend-mode: overlay;
z-index: 100;
}
img .attachment-container:hover:after {
background: radial-gradient(circle, transparent 30%, #333333 130%);
}
.attachment-container .picture, .attachment-container .location {
overflow: hidden;
}
.picture img, .location img, .document img {
/*
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
object-fit: cover; */
width:360px; border-radius: 4px; image-orientation: from-image;
}
.attachment-container .picture .thumb-overlay, .attachment-container .location .thumb-overlay {
width: 64px;
height: 64px;
margin: auto;
display: block;
position: absolute;
left: 24px;
top: 24px;
}
.message-container-other .attachment-container .picture .thumb-overlay, .message-container-other .attachment-container .location .thumb-overlay {
left: unset;
right: 24px;
}
.attachment-container.event {
align-items: flex-start;
display: flex;
flex-direction: column;
width: max-content;
}
.attachment-container.event.me {
align-items: flex-start;
width: auto;
}
.attachment-container.event.other {
align-items: flex-end;
width: auto;
}
.attachment-container .video {}
.attachment-container .audio {}
.attachment-container .file {}
.attachment-container .pdf {}
.recent-message-item .collection-item.avatar li {
border-bottom: 2px solid #f3f5f8;
padding-bottom: 12px;
}
a.disabled {
pointer-events: none;
}
a.recent-message-item:hover {
text-decoration: none;
}
.recent-message-item:hover .collection-item.avatar {
background-color: #f2e7cb;
}
.collection.with-header .collection-item.avatar {
border-bottom: 2px solid #f3f5f8;
}
.collection .collection-item.avatar .listTitle,
.listTitle {
line-height: 48px;
font-size: 1.5vh;
color: #0090c0;
letter-spacing: 0.8px;
text-transform: uppercase;
line-height: normal;
padding-left: 84px;
display: inline-block;
width: 95%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.collection .collection-item.avatar .listTitle.noTransform, .listTitle.noTransform {
text-transform: none;
}
.listTitle.stack {
display: flex;
flex-direction: column;
}
.listAwesomeIcon {
padding-right: 12px;
display: inline-flex;
align-items: center;
width: 84px;
min-height: 54px;
color: lightblue;
}
.collection-item.avatar.list-picker-item {
line-height: 64px;
min-height: 64px;
padding-top: 2px;
padding-bottom: 4px;
padding-left: 0;
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
margin: 10px 0;
}
.collection-item.avatar .list-picker-actions {
position: absolute;
right: 0;
display: flex;
flex-direction: row-reverse;
align-content: space-between;
width: 192px;
align-items: center;
}
.collection-item.avatar .list-picker-actions .list-picker-switch {
position: absolute;
flex: 1 1 auto;
}
.collection-item.avatar .list-picker-actions .list-picker-hover {
display: none;
height: 24px;
line-height: 24px;
align-items: center;
margin-right: 6px;
}
.collection-item.avatar:hover .list-picker-actions .list-picker-hover {
display: flex;
}
.last-message {
color: rgba(0, 0, 0, 0.4);
font-size: 1rem;
margin-top: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/* number of lines to show */
line-height: 20px;
/* fallback */
max-height: 60px;
/* fallback */
/* border-bottom: 2px solid #f3f5f8;
padding-bottom: 12px; */
}
.last-message p {
max-width: 100%;
}
.last-message-hide {
position: absolute;
left: 10px;
bottom: 04px;
color: #555;
opacity: 0.05;
max-width: 16px;
max-height: 16px;
}
.last-message-tooltip, .user-group-tooltip, .unread-tooltip, .active-stat-tooltip {
position: absolute;
right: 4px;
top: 0;
color: #555;
opacity: 0.2;
}
body.lite .last-message-tooltip, body.lite .user-group-tooltip, body.lite .unread-tooltip, body.lite .active-stat-tooltip {
opacity: 0.0;
}
.user-group-tooltip {
right: 32px;
}
.unread-tooltip {
right: 60px;
}
.last-message-tooltip i, .user-group-tooltip i, .unread-tooltip i, .active-stat-tooltip i {
transform: scale(.7);
/*translateX(15%) rotateZ(-11deg) scale(.87);*/
}
.collection-item.avatar:hover .last-message-tooltip, .collection-item.avatar:hover .user-group-tooltip, .collection-item.avatar:hover .unread-tooltip, .collection-item.avatar:hover .active-stat-tooltip {
opacity: 0.5;
color: #009AD1;
transform: scale(1.2);
/*translateX(15%) rotateZ(-11deg) scale(.87);*/
transition: transform .2s ease-out
}
.collection-item.avatar:hover .last-message-hide {
opacity: 0.5;
color: #d91e43;
transform: scale(1.2);
/*translateX(15%) rotateZ(-11deg) scale(.87);*/
transition: transform .2s ease-out
}
.input-field.compact.search {
position: relative;
margin-top: 6px;
margin-bottom: 4px;
font-size: 32px;
font-weight: 300;
height: 24px;
}
.input-field.flex {
display: flex;
justify-content: space-between;
}
.input-field.flex .show-on-hover {
display: none;
}
.input-field.flex:hover .show-on-hover {
display: inline-flex;
}
.input-field.compact, .input-field.tiny {
position: relative;
margin-top: 10px;
margin-bottom: 8px;
font-size: 32px;
font-weight: 300;
}
.input-field.select-row {
font-size: 1rem;
float: left;
text-transform: uppercase;
letter-spacing: 1.2;
font-weight: 400;
color: #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.subscription-preference-item {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-content: center;
padding: 4px 12px;
}
.subscription-preference-item .subscription-label, .input-field .subscription-label {
display: flex;
flex-direction: column;
}
.communication-preference-item {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
padding: 4px 12px;
}
.listPickerFilter {
position: absolute;
left: 54px;
}
.listPickerAction {
}
#listPickerList {
width: 100%;
overflow-y: scroll;
position: relative;
top: 0;
left: 0;
right: 0;
height: 100%;
}
#listPickerListContainer, .listPickerListContainer {
display: flex;
flex-direction: column;
position: absolute;
bottom: 7.5vh;
top: 6rem;
right: 44px;
left: 60px;
}
.conversation-title-container {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
justify-content: center;
cursor: pointer;
}
.conversation-title-actions {
position: absolute;
right: 0;
}
.conversation-title-actions-buzzlink {
position: absolute;
right: 30px;
display: none;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
}
.conversation-title {
padding: 0px 10px 0px 6px;
font-size: 1.8rem;
font-weight: 400;
font-family: 'Rajdhani', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.conversation-title .group {
color: #947a10;
}
.conversation-title .settings {
color: #0c8480;
}
.conversation-title .profile {
color: #0090c0;
}
.conversation-title .buzzphonesettings {
color: #499eaa;
}
.conversation-members, .conversation-individual, .conversation-calendar, .conversation-monitor {
margin-left: -4px;
}
.conversation-members {
align-items: center;
}
#settings, #profile, #buzzphonesettings, #control-panel, #businessprofile, #streamsprofile {
display: none;
object-fit: cover;
background-color: white;
}
#settings section, #buzzphonesettings section, #profile section, #businessprofile section, #profileCommunicationPreferences section, #control-panel section, #profileSubscriptionPreferences section, #buzzStreamActionPanel section, #profileDump section {
font-family: "Barlow Semi Condensed", "Montserrat", "Rajdhani", "Anaheim";
font-weight: 600;
font-size: 1.75rem;
color: #666;
text-align: left;
padding: 0px 12px 0px 0px;
text-transform: uppercase;
letter-spacing: 2px;
background: transparent;
border-bottom: 1px solid #ddd;
}
.profileDumpText {
font-family: "Montserrat", "Rajdhani", "Anaheim";
font-weight: 400;
font-size: 1.1rem;
color: #333;
overflow: hidden;
}
.profileDumpText img {
max-width: 100%;
max-height: 384px;
object-fit: cover;
}
#profileSubscriptionPreferences section {
margin-top: 12px;
color: #6c757d;
background-color: #e9e9e9;
font-size: 1.2rem;
padding: 6px 12px 6px 8px;
letter-spacing: 2px;
}
#buzzphonesettings section {
color: #499eaa;
}
#settings section {
color: #0c8480;
}
#control-panel section {
color: darkslateblue;
}
#profile section, #profileCommunicationPreferences section, #buzzStreamActionPanel section {
color: #0090c0;
}
#smart-key , #font-size-current, #wallpaper-current, #home-wallpaper-current, #idle-time-current, #bypass-category-time-current, #logout-time-current, #enter-key-selected, .current-user-setting {
color: black;
text-decoration-line: underline;
font-weight: 500;
font-family: Lekton, Anaheim, sans-serif;
}
item#selectedProduct {
font-size: 1.2 rem;
font-weight: 800;
}
.productCurrency {
flex: 2;
display: flex;
justify-content: end;
align-items: center;
}
#productCurrency {
margin-right: 6px;
}
.input-field.product {
display:flex;
flex-direction: row;
}
#settings item, #buzzphonesettings item, #profile item, #businessprofile item, #userInformation item, #profileCommunicationPreferences item, #createGroupPopup item, #inviteVideoForm item, #control-panel item, #profileSubscriptionPreferences item, #buzzStreamActionPanel item, #requestPaymentPopup item, .modal item {
font-size: 1.2rem;
float: left;
text-transform: uppercase;
letter-spacing: 1.2;
font-weight: 400;
color: #324e32;
display: flex;
align-items: center;
}
#control-panel item .count {
font-size: 1.0rem;
color:rgb(160, 28, 28);
font-family: 'Barlow Semi Condensed', sans-serif;
}
item.secondary {
text-transform: unset;
letter-spacing: unset;
color: #324e32;
font-size: 0.9rem;
font-family: 'Barlow Semi Condensed', sans-serif;
}
#requestPaymentPopup item {
flex: 9;
}
.gotomeeting-id {
background-color: rgba(0, 144, 192, 0.1);
}
.gotomeeting-id.copied {
background-color: rgba(0, 144, 192, 0.4);
}
.select-wrapper input.select-dropdown {
font-size: 1.3rem;
text-transform: uppercase;
letter-spacing: 1;
font-weight: 500;
color: #009ad1;
}
.conversation-image {
margin-left: 2px;
margin-top: 8px;
cursor: pointer;
display: flex;
flex-direction: row;
width: 80px;
align-content: center;
align-items: center;
justify-content: center;
}
.entity-image {
margin: auto;
display: flex;
flex-direction: row;
width: 100%;
align-content: center;
align-items: center;
justify-content: center;
}
.input-field {
height: 32px;
}
.user-name {
font-size: 14px;
font-weight: 200;
}
#user-name {
font-size: 14px;
color: teal;
text-align: center;
margin: auto;
font-weight: 200;
padding: 3px;
border-radius: 0px;
width: 200px;
border: 2px solid rgba(0, 144, 192, 0.1);
font-family: 'Montserrat', sans-serif;
margin-bottom: 6px;
overflow: hidden;
display: table;
text-transform: uppercase;
}
#organization-filter, #create-group-organization-filter, #manage-group-organization-filter, #manage-group-person-filter, #buzz-link-organization-filter,
#buzz-link-subsidiary-filter, .organization-filter {
font-size: 14px;
color: #a66a8b;
text-align: center;
margin: auto;
font-weight: 200;
padding: 8px;
border-radius: 0px;
width: 100%;
border: 0px solid rgba(0, 144, 192, 0.1);
font-family: 'Montserrat', sans-serif;
margin-bottom: 0px;
overflow: hidden;
display: flex;
align-items: center;
text-transform: uppercase;
cursor: pointer;
}
#create-group-organization-filter, #manage-group-organization-filter, #manage-group-person-filter {
text-align: right;
width: unset;
padding-right: 0;
font-size: 18px;
}
#organization-filter.selected {
color: white;
background-color: #a66a8b;
}
#organization-context-label, #create-group-organization-context-label, #manage-group-organization-context-label,
#manage-group-person-context-label {
flex: 10;
}
#organization-filter actionbutton {
display: none;
}
#create-group-organization-filter actionbutton, #manage-group-organization-filter actionbutton,
#manage-group-person-filter actionbutton {
display: none;
}
#organization-filter.selected actionbutton {
display: inline-block;
}
#create-group-organization-filter.selected actionbutton, #manage-group-organization-filter.selected actionbutton,
#manage-group-person-filter.selected actionbutton, #buzz-link-organization-filter.selected actionbutton,
#buzz-link-subsidiary-filter.selected actionbutton {
display: inline-block;
border: 1px solid #a66a8b;
margin: 0 0 0 12px;
color: #a66a8b;
}
.message-container-me {
max-width: 60%;
min-width: 360px;
background-color: #f9efd1;
/* FEFCF5 */
padding: 4px 16px 4px 4px;
border-left: 2px solid #e4b707;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#lightning-search-results .message-container-me-messages, #buzzstream-search-results .message-container-me-messages {
display: block;
font-size: 1.2rem;
padding-bottom: 48px;
border: 1px solid rgba(99, 99, 99, 0.2);
border-left: 5px solid #e4b707;
}
#lightning-search-results a.cloudlink, #buzzstream-search-results a.cloudlink {
color: #2a6a6c;
font-size: 1.8rem;
}
.message-container-other {
min-width: 360px;
background-color: #eaf7ff;
/* F5FBFD */
padding: 4px 16px 4px 4px;
border-right: 2px solid #009AD1;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.sent-message {
text-align: right;
margin-bottom: 12px;
margin-top: 12px;
/*width: 60%;*/
margin-left: 40%;
padding-left: 24px;
word-break: break-word;
color: #106280;
z-index: 101;
}
p.sent-message {
margin-left: 12px;
line-height: 1.6;
}
p.received-message {
line-height: 1.6;
}
.message-container-other .sent-message .caption {
/* font-size: 1rem;
font-family: "Barlow Semi Condensed", sans-serif; */
}
.message-container-me .received-message .caption {
/* font-size: 1rem;
font-family: "Barlow Semi Condensed", sans-serif; */
}
.message-container-me .received-message.forward-container span {
/* /* font-size: 1rem; */
/* font-family: "Barlow Semi Condensed", sans-serif; */
color: teal;
padding: 4px 4px;
display: inline;
}
.message-container-other .sent-message.forward-container span {
/* /* font-size: 1rem; */
/* font-family: "Barlow Semi Condensed", sans-serif; */
color: teal;
padding: 4px 4px;
display: block;
}
.message-container.theme-bold .forward-container span {
color: #004343;
}
.message-container-other:hover .sent-message.forward-container span, .message-container-me:hover .received-message.forward-container span, .message-container-other:hover .message-inner-container.forward, .message-container-me:hover .message-inner-container.forward
{
border: 1px solid lightgray;
border-radius: 5px;
background-color: rgba(0,0,0,0.05);
}
.forward-caption {
border-top: 1px solid rgba(0,0,0,0.05);
margin-top: 15px;
padding: 4px 4px;
}
.forward-caption svg {
margin-right: 5px;
}
.message-inner-container {
display: flex;
flex-direction: column;
}
.message-container-other .message-inner-container, .thread-message.sent .message-inner-container {
align-items: flex-start;
}
.message-container-me .message-inner-container {
align-items: flex-start;
}
.message-container-other:hover .sent-message .message-inner-container.forward, .message-container-me:hover .received-message .message-inner-container.forward {
border: 1px solid lightgray;
border-radius: 5px;
background-color: rgba(0,0,0,0.05);
}
.file-name {
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 1rem;
text-align: center;
white-space: nowrap;
color: black;
flex-direction: column;
display: flex;
justify-content: space-around;
align-items: flex-start;
opacity: 0.5;
}
.file-name .actionbutton.mini {
display: flex;
opacity: 0.5;
color: teal;
}
.actionbutton.light {
background-color: #b4b4b4;
color: white;
}
.file-name:hover {
opacity: 1.0;
}
.message-container.theme-bold .file-name {
opacity: 0.8;
font-family: 'PT Sans', Montserrat, sans-serif;
font-weight: 500;
}
.message-container.theme-bold .file-name:hover {
opacity: 1.0;
font-weight: 500;
color: black;
}
.attachment-container:hover .file-name {
opacity: 1.0;
}
.attachment-container:hover .actionbutton.mini {
opacity: 1.0;
background-color: #009ad1;
color: white;
}
.attachment-container:hover .attachment-representation {
border: 1px solid lightgray;
border-radius: 5px;
background-color: rgba(0,0,0,0.05);
}
.notify-badge{
position: relative;
background: teal;
min-height: 48px;
top: 0.5rem;
left: -1rem;
width: 48px;
text-align: center;
line-height: 64px;
font-size: 1rem;
border-radius: 50%;
color: white;
opacity: 0.7;
}
.file-container:hover .nofity-badge {
opacity: 1;
}
.message-sender-icon {
opacity: 0.1;
color: gray;
}
.message-direction {
padding-right: 3px;
}
.message-sender-wrapper {
display: flex;
}
.message-sender-wrapper:hover .message-sender-icon {
opacity: 1.0;
}
.message-sender-wrapper.left {
justify-content: flex-end;
flex-direction: row-reverse;
color: #e4b707;
}
.message-sender-wrapper.right {
justify-content: flex-end;
flex-direction: row;
color: #009ad1;
}
.valign-wrapper {
flex-direction: column;
align-items: unset;
}
.sender-display.sent-message {
background-color: #009AD1;
padding-right: 12px;
padding-top: 3px;
padding-bottom: 3px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 4px;
float: right;
}
.sent-timestamp {
text-align: right;
margin-bottom: 0;
margin-top: 0;
width: 100%;
/* margin-left: 60%; */
}
.triangle-top-right {
width: 0px;
height: 0;
background-color: transparent;
border-left: 32px solid transparent;
border-top: 32px solid rgba(0, 154, 209, 0.05);
}
.sticky-top-right {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
}
.sticky-top-left {
position: absolute;
top: 0;
left: 0;
display: inline-flex;
width: 20px;
height: 20px;
padding: 4px;
cursor: crosshair;
}
.sticky-top-left.marked {
opacity: 0.3;
transition: color opacity 0.5s ease-in-out;
}
.files-item:hover .sticky-top-left.marked {
opacity: 1.0;
color: salmon;
}
.sticky-top-left.unmarked {
display: none;
}
.files-item:hover .sticky-top-left.unmarked {
display: inline-flex;
}
.triangle-top-left {
width: 0px;
height: 0;
background-color: transparent;
border-right: 32px solid transparent;
border-top: 32px solid rgba(244, 183, 7, 0.05);
transition: all 0.5s ease-in-out;
}
.triangle-top-left.mark-element {
border-top: 18px solid rgba(244, 183, 7, 0.15);
border-right: 18px solid transparent;
float: left;
position: absolute;
top: 0;
left: 0;
display: inline-flex;
}
.triangle-top-left.mark-element.marked {
border-top: 24px solid rgba(0, 154, 209, 0.55);
border-right: 24px solid transparent;
}
.message-container-me:hover .triangle-top-left {
border-top: 48px solid rgba(244, 183, 7, 0.30);
border-right: 48px solid transparent;
}
.message-container-other:hover .triangle-top-right {
border-top: 32px solid rgba(0, 154, 209, 0.30);
}
.files-item:hover .triangle-top-left {
border-top: 48px solid rgba(225, 177, 32, 0.5);
border-right: 48px solid transparent;
}
.files-item:hover .triangle-top-left.marked {
border-top: 48px solid rgba(0, 154, 209, 0.60);
border-right: 48px solid transparent;
}
.message-container-me:hover .triangle-top-left {
border-top: 48px solid rgba(244, 183, 7, 0.30)
}
.message-container-other:hover .triangle-top-right {
border-top: 32px solid rgba(0, 154, 209, 0.30);
}
/* actually this is for the sent message - 5e6543 */
.received-message {
text-align: left;
margin-bottom: 16px;
margin-top: 16px;
margin-left: 12px;
padding-right: 24px;
width: 100%;
word-break: break-word;
color: #474d32;
z-index: 101;
}
.received-message a, .sent-message a, .forward-caption a {
font-size: 1.1rem;
font-family: Anaheim;
letter-spacing: 0.2;
margin-left: 4px;
margin-right: 4px;
}
.received-message a.mention, .sent-message a.mention, .forward-caption a.mention {
margin-left: 4px;
margin-right: 0;
color: black;
}
.received-message a, .forward-caption a {
color: #577d5e;
background-color: rgba(244, 183, 7, 0.15);
}
.message-clearview .received-message a {
font-size: 1.8rem;
}
.received-message a:hover {
background-image: linear-gradient(transparent calc(100% - 0.35em),#e2cbba 0),linear-gradient(transparent calc(100% - 0.35em),rgba(0,183,174,.3) 0);
}
.sent-message a:hover {
background-image: linear-gradient(transparent calc(100% - 0.35em),#bbd7d8 0),linear-gradient(transparent calc(100% - 0.35em),rgba(0,183,174,.3) 0);
}
.received-message a.url.insecure {
color: #990000;
background-color: rgb(244 183 7 / 35%)
}
.received-message a.mention.group-mention, .forward-caption a.mention.group-mention {
background-color: rgba(167, 122, 22, 0.45);
}
.sent-message a {
color: #106280;
background-color: rgba(0, 154, 209, 0.08);
}
.sent-message a.url.insecure {
color: #990000;
background-color: #10628069;
}
.sent-message a.mention.group-mention {
background-color: #10628085;
}
.sender-display.received-message {
background-color: #e4b707;
padding-left: 12px;
padding-top: 3px;
padding-bottom: 3px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.received-message.mention a {
color: #777d5e;
background-color: rgba(244, 183, 7, 0.15);
}
.sent-message.mention a {
color: #106280;
background-color: rgba(0, 154, 209, 0.15);
}
.mention {
font-family: Rajdhani, sans-serif;
border-radius: 0.3em;
padding: 0.1em .25em;
border: solid 1px rgba(51, 51, 51, 0.12);
cursor: pointer;
}
.received-message .ssdropdown .hashtag a {
background-color: #777d5e;
color: rgba(244, 183, 7, 0.15);
}
.sent-message .ssdropdown .hashtag a {
background-color: #106280;
color: rgba(0, 154, 209, 0.15);
}
.hashtag {
font-family: Rajdhani, sans-serif;
border-radius: 6px;
padding: 0.1em .25em;
border: solid 1px rgba(46, 158, 212, 0.52);
cursor: pointer;
}
.url {
}
.url:before {
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
content: "";
}
.last-message a.cloudlink {
font-size: unset;
line-height: unset;
}
a.cloudlink {
border-bottom: 1px dotted #d91e43;
background-color: transparent;
font-size: 1.5rem;
line-height: 3rem;
font-family: Anaheim, sans-serif;
}
a.cloudlink:hover {
background-color:rgba(0, 154, 160, 0.30);
color: midnightblue;
}
a.cloudlink::after {
content: '';
}
svg.cloudlink {
cursor: pointer;
color: gray;
}
.cloudlink:before {
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
content: "";
}
a.extlink {
color: #106280;
background-color: rgba(36, 154, 209, 0.15);
/* font-size: 0.8rem; */
padding: 4px 8px;
line-height: 2.5rem;
}
a.extlink:hover {
background-color:rgba(0, 154, 160, 0.30);
color: midnightblue;
}
.extlink {
font-family: Rajdhani, sans-serif;
border-radius: 0.3em;
padding: 0.1em .25em;
border: solid 0px rgba(51, 51, 51, 0.12);
cursor: pointer;
}
.dialogInfoText a.extlink {
background-color: aliceBlue;
border: solid 1px rgba(51, 51, 51, 0.62);
line-height: 2.5rem;
}
.bridge-user-name.athena {
background-color: #d1b700;
border-bottom: 4px solid #d1b700;
}
.bridge-user-name.pointclickcare {
background-color: #d1007e;
border-bottom: 4px solid #d1007e;
}
.bridge-user-name.epic {
background-color: #009ad1;
border-bottom: 4px solid #009ad1;
}
.bridge-user-name.ecw {
background-color: #00d1d1;
border-bottom: 4px solid #00d1d1;
}
.bridge-user-name.current {
border-bottom: 4px solid #800000;
}
.bridge-user-name {
font-size: 1.1rem;
background-color: #aaa;
}
.message-container-main {
width: 100%;
display: flex;
justify-content: flex-start;
/* transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out; */
}
.message-option-container.filter .message-container-main, .file-container.filter .message-container-main {
/* /* height: 8px; */
overflow: hidden;
transform: scaleY(0.75);
transform-origin: top;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
cursor: pointer;
max-height: 20px;
/* transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out; */
}
.message-option-container.filter .message-action-icons {
padding: 0;
}
.message-option-container.filter .messageActionIcon, .message-option-container.filter .message-top-row , .file-container.filter .messageActionIcon, .file-container.filter .message-top-row {
display: none;
}
.message-option-container.filter .message-container-me, .message-option-container.filter .message-container-other, .file-container.filter .message-container-me, .file-container.filter .message-container-other
{
background-color: rgba(0,0,0,0.1);
}
.message-option-container.filter .message-container-me, .file-container.filter .message-container-me
{
border-radius: 0 10px 10px 0;
}
.message-option-container.filter .message-container-other, .file-container.filter .message-container-other
{
border-radius: 10px 0 0 10px;
}
.messagePeekIcon, .messageReactionIcon, .messageClearViewIcon {
display: flex;
transition: opacity 1.5s ease-in-out;
-webkit-transition: opacity 1.5s ease-in-out;
-moz-transition: opacity 1.5s ease-in-out;
-o-transition: opacity 1.5s ease-in-out;
}
.messagePeekIcon {
display: none;
}
.messageReactionIcon, .messageClearViewIcon {
opacity: 0.0;
}
.message-option-container.filter .messagePeekIcon, .file-container.filter .messagePeekIcon {
display: flex;
color: teal;
}
.message-option-container:hover .messageReactionIcon, .file-container:hover .messageReactionIcon {
display: flex;
color: teal;
opacity: 1.0;
}
.message-option-container:hover .messageClearViewIcon, .file-container:hover .messageClearViewIcon {
display: flex;
color: teal;
opacity: 1.0;
}
.message-option-container:hover .message-action-icons, .file-container:hover .message-action-icons {
/* background-color: rgba(220, 240, 240, 0.3); */
}
.message-option-container.file-background-received:hover .message-action-icons, .file-container.file-background-received:hover .message-action-icons {
/* background-color: rgb(254 255 159 / 10%); */
}
#reactions-edit-icon {
color: teal;
}
/* The following effect is not smooth as it involves height *
* uncomment to check for FILTER messages in conversation
.message-option-container.filter .message-container-main:hover, .file-container.filter .message-container-main:hover {
cursor: pointer;
transform: scaleY(1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
max-height: 100%;
}
*/
.message-container-main.right {
flex-direction: row-reverse;
}
.message-container-main.left {
flex-direction: row;
}
.message-option-container.filter .sender-display.received-message, .file-container.filter .sender-display.received-message {
background-color: #ffffff;
border: 1px solid #e4b707;
color: #e4b707;
}
.message-option-container.filter .sender-display.sent-message, .file-container.filter .sender-display.sent-message {
background-color: #ffffff;
border: 1px solid #009ad1;
color: #009ad1;
}
.sender-display {
display: flex;
flex-direction: row;
}
.sender-display svg {
display: none;
}
.message-option-container.filter .sender-display svg, .file-container.filter .sender-display svg {
display: flex;
flex-direction: row;
margin: 0 4px;
}
.notification-count, .voicemail-count, .online-status, .conversation-title-indicator
{
position: absolute;
font-family: Montserrat, "Barlow Semi Condensed", sans-serif;
left: 54px;
top: 0px;
min-width: 20px;
height: 20px;
line-height: 18px; /* match the height element */
border-radius: 50%;
vertical-align: top;
background-color: #FC3C37;
padding: 2px 6px;
text-align: center;
color: #ffffff;
font-size: 12px;
}
.notification-count {
left: 64px;
top: 10px;
}
.conversation-title-indicator {
background-color: rgb(155 122 170);
height: 24px;
width: 24px;
right: 0;
top: 3px;
display: flex;
align-items: center;
justify-content: center;
}
#allStats .recent-message-item.stat .notification-count {
background-color: teal;
/* left: 6px;
top: 3px; */
border-radius: 0;
}
.online-status {
top: 8px;
left: 8px;
background-color: #009ad1;
height: 12px;
width: 12px;
line-height: 12px;
padding: 0;
min-width: unset;
display: none;
}
.online-status.online {
top: 8px;
left: 8px;
background-color: #42d100;
}
.online-status.offline {
top: 8px;
left: 8px;
background-color: #d91e43;
}
.online-status.mask {
top: 8px;
left: 8px;
background-color: rgb(133, 133, 133);
}
.redhand {
cursor: pointer;
color: #d91e43;
}
/* Not working as intended - a badge on upper right of the button */
.voicemail-count {
top: -5px;
left: 68px;
position: fixed;
margin-left: 0;
height: 32px;
width: 32px;
align-items: center;
justify-content: center;
text-align: center;
padding: 0;
margin: auto;
}
pre {
font-family: Monaco, monospace;
font-size: 1.2em;
background-color: #00000088;
color: antiquewhite;
white-space: pre-wrap;
}
print .result {
max-width: 1200px;
}
print .result div, print .result pre {
font-family: Monaco, monospace;
font-size: 1.2em;
line-height: 2em;
background-color: #00000008;
color: #255464;
white-space: pre-wrap;
}
.highlight {
background-color: #bbcd18a8;
color: #255464;
cursor: pointer;
}
.pointer {
cursor: pointer;
}
print .result .highlight {
background-color: #00000028;
color: #255464;
cursor: pointer;
}
print .input .date-time {
width: max-content;
display: inline-block;
font-size: 1.5rem;
letter-spacing: 0.5px;
}
print .row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
print .input .time-hours {
width: 280px;
display: inline-block;
background: transparent;
border: none;
font-family: Montserrat, sans-serif;
font-size: 1.5rem;
border-bottom: 1px solid #9e9e9e;
border-radius: 0;
}
print .input .action {
width: max-content;
display: inline-block;
font-family: Montserrat, sans-serif;
font-size: 1.55rem;
}
print .input .text {
color: rgb(134, 26, 26);
display: inline-block;
width: clamp(192px, 45%, 280px);
}
pre.pre-light {
background-color: antiquewhite;
color: #333;
}
.rainbow-btn {
margin: 12px auto;
width: 600px;
text-align: center;
position: relative;
/* color: #ffffff; */
text-decoration: none;
/* border-radius: 6px; */
box-sizing: border-box;
display: block;
z-index: 2;
overflow: hidden;
padding: 1.5px;
/* height: 100%; */
}
.rainbow-btn.animate:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(115deg,#4fcfb8,#fa4848,#a767e5,#12bcfe,#44aece);
background-size: 50% 100%
}
.rainbow-btn span {
position: relative;
z-index: 2;
padding: 10px 0;
font-size: 1.1rem;
font-family: Montserrat, sans-serif;
text-decoration: none;
align-items: center;
background: #ffffff;
/* border-radius: 3px; */
display: flex;
justify-content: center;
box-sizing: border-box;
height: 36px;
/* font-size: 50px; */
/* font-family:Verdana, Geneva, Tahoma, sans-serif; */
border: 1px solid black;
}
.rainbow-btn.active:before,
.rainbow-btn.animate:before {
animation: rainbow-btn .75s linear infinite
}
@keyframes rainbow-btn {
to {
transform: translateX(-50%)
}
}
.ssteal {
background-color: teal !important;
}
.ssblue {
background-color: #009ad1 !important;
}
.ssblue-fg {
color: #009ad1 !important;
}
.ssred {
background-color: #d91e43 !important;
}
.ssgroup {
background-color: #947a10 !important;
}
.ssorg {
background-color: teal !important;
}
.sslight {
/* background-color: rgba(0,0,0,0.2) !important; */
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(.2, #ca209173), color-stop(1, #009ad163)) !important;
}
.dim {
opacity: 0.5;
}
.hover-container .dim {
opacity: 1.0;
}
.ssonline {
background-color: #42d100 !important;
}
#shim {
border: 5px dashed #009AD1;
background: rgba(255, 255, 255, 0.94);
}
#shim h4 {
color: #884444;
font-family: "Barlow Semi Condensed", "Montserrat", "Rajdhani", "Anaheim";
font-weight: 600;
color: #444444;
margin: auto;
align: center;
vertical-align: middle;
text-align: center;
position: absolute;
bottom: 30%;
width: 100%;
}
.hide-empty-banner {
display: none !important;
}
#empty-banner {
/* Use CSS gradient as initial background - instant render, no image load needed */
/* Background image will be loaded progressively after critical content */
background: linear-gradient(
162deg, #ffffff 0%, #d4e8ed 50%, #c0dce2 100%);
/* Temporary: Use SVG as background mask */
background-image: url('/static/svg/diamond-sunset.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: absolute;
overflow-x: hidden;
overflow-y: hidden;
z-index: 1;
/* Optimize rendering - browser can skip painting when not visible */
will-change: background-image;
transition: background-image 0.3s ease-in-out;
}
#empty-banner h4 {
color: #884444;
font-family: "Barlow Semi Condensed", "Montserrat", "Rajdhani", "Anaheim";
}
#message-container {
background-color: #fbfbfb;
/* f9f9fa */
height: calc(100vh - 200px);
/* need the top + footer height ideally + top-banner height */
overflow-y: scroll;
/* position: absolute; /* sandeep */
transition: height 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.messages {
padding: 32px;
padding-top: 0px;
margin-bottom: 0px;
overflow-y: scroll;
overflow-x: hidden;
min-height: 100%;
transition: height 0.4s cubic-bezier(0.42, 0, 0.58, 1), min-height 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.message-container.theme-bold .messages, .message-clearview.message-container .messages {
font-weight: 600;
letter-spacing: 0.5px;
line-height: 1.6;
font-family: Montserrat, sans-serif;
}
.message-container .message-clearview .messages, .message-container .message-clearview .message-container-me-messages {
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.6;
font-family: Montserrat, sans-serif;
padding: 12px 40px;
border-left: 0px solid transparent;
background-color: #d8e7e04d;
font-size: 1.8rem;
max-width: 100%;
min-width: 100%;
border: 1px solid rgba(99,99,99,0.2);
}
.message-container .message-clearview .message-container-other.messages {
border: 1px solid rgba(99, 99, 99, 0.2);
border-right: 5px solid #009ad1;
}
.message-container .message-clearview .message-container-me.messages {
border: 1px solid rgba(99, 99, 99, 0.2);
border-left: 5px solid #e4b707;
}
textarea#inputRawMessageInput {
min-height: 64px;
background-color: 180 192 190 / 38%;
}
textarea#inputRawMessageInput:focus {
background-color: rgba(113, 118, 111, 0.16);
}
#readability-container .message-container, #search-main-container .message-container {
background-color: transparent;
}
#readability-container .readability-input-container {
background-color: rgba(99, 99, 99, 0.1);
}
.search-screen-input-container {
display: flex;
align-items: center;
}
#search-input-cancel {
/* float: right;
position: relative;
right: 5px;
top: 0;
align-items: center; */
}
#search-input-cancel svg {
color: red;
}
#readability {
flex-direction: column;
align-items: stretch;
justify-content: center;
overflow-y: scroll;
}
.readability-container, .readability-input-container {
flex: 9;
align-self: center;
width: 80%;
max-width: 1080px;
margin: auto;
}
.readability-container.csv {
max-width: unset;
width:90%;
overflow: scroll;
max-height: calc(100vh - 200px);
}
#lightning-screen-search-results-container, #buzzstream-screen-search-results-container {
position: relative;
min-height: 64px;
}
/* Buzz Notes Clear View - overlay EDIT button and inline edit panel */
.notability-message-container .overlay-buttons {
position: absolute;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: flex-end;
align-items: center;
z-index: 10;
}
#notability-container .notability-message-container .showonhover {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#notability-container .notability-message-container:hover .showonhover {
opacity: 1;
}
/* Edit mode: wrapper and textarea expand to fill available height */
#notability-container.readability-container {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
.notability-message-container {
display: flex;
flex-direction: column;
min-height: 320px;
flex: 1;
}
.notability-message-container #messageNotable {
flex: 1;
min-height: 0;
}
#notability-edit-wrapper.notability-edit-wrapper-flex {
display: flex;
flex-direction: column;
flex: 1;
min-height: min(400px, calc(100vh - 280px));
}
#notability-edit-wrapper #notability-edit-text {
flex: 1;
min-height: 240px;
margin: 0 0 48px 0;
padding: 12px 12px 12px 10px;
width: 100%;
box-sizing: border-box;
resize: vertical;
font-family: 'Anaheim', sans-serif;
font-size: 20px;
line-height: 1.6;
}
/* Edit panel CANCEL/SAVE buttons - always visible and prominent */
#notability-edit-buttons.notability-edit-buttons-visible,
#notability-edit-buttons.notability-edit-buttons-visible actionbutton {
opacity: 1;
}
#notability-edit-buttons actionbutton {
background-color: rgba(0, 154, 209, 0.9);
color: #fff;
border: 1px solid #007aa3;
padding: 8px 16px;
font-weight: 600;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
#notability-edit-buttons actionbutton:hover {
background-color: #009AD1;
color: #fff;
}
.readability-input-container .showonhover, .readability-container .showonhover, minifooter .showonhover, footer .showonhover {
opacity: 0;
transition: all 1.0s ease-in-out;
}
.readability-input-container .brightenonhover, .readability-container .brightenonhover {
opacity: 0;
}
.readability-input-container:hover .showonhover, .readability-container:hover .showonhover, .readability-input-container:hover .brightenonhover, .readability-container:hover .brightenonhover, minifooter:hover .showonhover, footer:hover .showonhover {
opacity: 1.0;
}
minifooter:hover .overlay-buttons:hover, footer:hover .overlay-buttons:hover {
opacity: 1.0;
}
minifooter:hover .overlay-buttons, footer:hover .overlay-buttons {
opacity: 0.75;
}
minifooter .showonhover.enhance-with-ai, footer .showonhover.enhance-with-ai {
width: 48px;
height: 48px;
color: #3f0505;
cursor: pointer;
}
.no-spark-think .showonhover.enhance-with-ai {
display: none;
}
.overlay-buttons .showonhover.enhance-with-ai {
height: 48px;
color: #3f0505;
cursor: pointer;
justify-content: center;
}
minifooter:hover .showonhover.enhance-with-ai, footer:hover .showonhover.enhance-with-ai {
/* align-items: center; */
justify-content: center;
background: linear-gradient(163deg, #c0d740 0%, #14e8ca 100%);
}
.notepad-input-text-box:hover .showonhover.enhance-with-ai {
/* align-items: center; */
justify-content: center;
background: linear-gradient(163deg, #40d7c8 0%, #0dc1a9 100%);
}
minifooter:hover .showonhover.enhance-with-ai, footer:hover .showonhover.enhance-with-ai {
border-radius: 50%;
}
minifooter:hover .showonhover.enhance-with-ai:hover, .notepad-input-text-box:hover .showonhover.enhance-with-ai:hover, footer:hover .showonhover.enhance-with-ai:hover {
border-style: inset;
border: 3px solid #8ed3d1;
background-color: #31cbcb;
background: linear-gradient(163deg, #40abd7 0%, #14e8ca 100%);
}
minifooter:hover .showonhover.enhance-with-ai:hover, footer .showonhover.enhance-with-ai:hover {
transform: scale(1.33);
}
.message-container.theme-bold {
background: white;
}
.message-container.theme-bold .sent-message {
color: #073b4e;
}
.message-container.theme-bold .sent-message.sender-display {
color: yellow;
}
.message-container.theme-bold .sent-message, .message-container.theme-bold .received-message {
line-height: 1.6;
}
.message-container.theme-bold .message-container-me {
color: #888;
opacity: 0.8;
}
#lightning-search-results .message-container.theme-bold .message-container-me-messages, #buzzstream-search-results .message-container.theme-bold .message-container-me-messages {
color: #111;
opacity: 0.8;
}
.message-container.theme-bold .message-container-me:hover {
color: #111;
opacity: 1;
}
#lightning-search-results:hover .message-container.theme-bold .message-container-me-messages, #buzzstream-search-results:hover .message-container.theme-bold .message-container-me-messages {
color: #333;
opacity: 0.8;
}
.sender-name {
font-family: 'Rajdhani', sans-serif;
font-size: 1.2rem;
}
.sender-name.sent {
color: #009ad1;
}
.sender-name.received {
color: #000;
}
.message-timestamp {
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 16px;
margin-top: 4px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
}
.message-status {
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 16px;
margin-top: 4px;
font-family: 'Montserrat', sans-serif;
cursor: pointer;
}
.message-status.received-timestamp {
margin-left: 8px;
}
.message-status.sent-timestamp {
margin-right: 8px;
}
.messageActionIcon {
z-index: 105;
}
.info {
margin-left: 12px;
color: #ddd;
}
.stack-message-date.message-timestamp {
margin-bottom: 4px;
margin-top: 12px;
display: table;
}
.sender-display {
font-size: 0.75rem;
color: #fff;
margin-top: 16px;
letter-spacing: 1.5px;
width: auto;
text-transform: uppercase;
cursor: pointer;
}
.blooming-menu__container {
left: 0;
bottom: auto;
top: 0px;
position: relative;
z-index: 20000;
transition: all ease-in-out 2.5s;
}
.blooming-menu__main {
background-color: white;
color: red;
}
.menu-trigger {
display: none;
}
#messageThread, #messageThreadModal {
display: flex;
flex-direction: column;
}
#messageThread .sender-display, #messageThreadModal .sender-display {
width: fit-content;
margin-left: 0;
}
#messageThread .thread-message .sent-message, #messageThreadModal .thread-message .sent-message {
width: unset;
margin-left: unset;
text-align: left;
padding-left: 12px;
}
.message-clearview, .message-clearviewModal {
display: flex;
flex-direction: column;
gap: 24px;
}
.message-clearview .sender-display, .message-clearviewModal .sender-display {
width: fit-content;
margin-left: 0;
}
.message-clearview .thread-message .sent-message, .message-clearviewModal .thread-message .sent-message {
width: unset;
margin-left: unset;
text-align: left;
padding-left: 12px;
}
.message-clearview .download-hook {
text-align: left;
}
.message-clearviewModal .thread-message.unselected .sent-message, .message-clearviewModal .thread-message.unselected .received-message {
opacity: 0.5;
}
#threadCaption {
padding-top: 12px;
padding-bottom: 6px;
margin-bottom: 4px;
}
#threadUser {
padding-top: 3px;
padding-bottom: 6px;
margin-top: 0;
}
#threadDateRange {
font-size: 12px;font-weight: 400;
}
#messageThread .download-hook {
text-align: left;
}
#messageThreadModal .thread-message.unselected .sent-message, #messageThreadModal .thread-message.unselected .received-message {
opacity: 0.5;
}
/*
Tag
Broadcast
Favorite
SafeBox
Reply
Forward
Trash
Edit
*/
.blooming-menu__item {
width: 64px;
height: 64px;
}
.blooming-menu__item:nth-of-type(1) .blooming-menu__item-btn {
background-image: url(../icons/Tag.png);
background-size: 90%;
background-color: aliceBlue;
color: white;
}
.blooming-menu__item:nth-of-type(2) .blooming-menu__item-btn {
background-image: url(../icons/Broadcast.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(3) .blooming-menu__item-btn {
background-image: url(../icons/Favorite.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(4) .blooming-menu__item-btn {
background-image: url(../icons/SafeBoxBW.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(5) .blooming-menu__item-btn {
background-image: url(../icons/Reply.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(6) .blooming-menu__item-btn {
background-image: url(../icons/Forward.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(7) .blooming-menu__item-btn {
background-image: url(../icons/Trash.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(8) .blooming-menu__item-btn {
background-image: url(../icons/CloudLink.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(9) .blooming-menu__item-btn {
background-image: url(../icons/Write.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item:nth-of-type(10) .blooming-menu__item-btn {
background-image: url(../icons/Stat0.png);
background-size: 90%;
background-color: aliceBlue;
}
.blooming-menu__item-btn:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2);
opacity: 1;
}
@keyframes placeHolderShimmer {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
.animated-background {
/*animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-.(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
height: 16px;
position: relative;*/
}
.animated-background-right {
/* margin-left: 80%;
width: 20%; */
}
.animated-background-left {
/* width: 20%; */
}
.profile-image {
width: 40px;
height: 40px;
object-fit: cover;
vertical-align: middle;
border-radius: 50%;
}
.profile-image.large {
width: 256px;
height: 256px;
}
.file-background {
width: 200px;
/* background-color: #f3f5f8; */
/* height: 50px; */
border-radius: 4px;
/*text-align:center;*/
}
.file-background-sent {
margin-left: 30%;
text-align: right;
}
.text-background-sent {
margin-left: 30%;
text-align: right;
}
.file-background-received {
margin-left: 0;
text-align: left;
}
.file-type-icon {
font-size: 48px;
margin: 16px;
color: #888;
}
footer {
position: absolute;
left: 0;
right: 0;
/* bottom:0; height: 90px; */
background-color: rgba(255, 255, 255, 0.9);
border-top: 2px solid rgba(0, 0, 0, 0.08);
/* width: 100%; */
padding: 16px;
}
.modal-content.mega-footer {
position: absolute;
height: calc(100% - 72px);
max-height: 100%;
width: 100%;
overflow-y: auto;
}
#findUserContainer {
height: 64px;
overflow: hidden;
}
.settings, .profile, .buzzphonesettings {
font-family: 'Rajdhani', sans-serif;
font-weight: 600;
font-size: 24px;
}
#control-panel input[type=text]:disabled
{
color: #a06b6b;
}
#profile item, #profileCommunicationPreferences item, #profileSubscriptionPreferences item, #businessprofile item {
font-size: 1rem;
float: left;
text-transform: uppercase;
letter-spacing: 1.2;
font-weight: 400;
color: #333;
}
#calendarInputPopup item, #scheduleEventInputPopup item {
font-size: 1rem;
float: left;
text-transform: uppercase;
letter-spacing: 1.2;
font-weight: 200;
color: #555555;
}
.skyscape {
width: 100%;
height: 100%;
}
#buzzLogo, #entityProfileImage, #monitored-entityProfileImage {
display: block;
}
#buzzBG img:hover {
filter: blur(5px);
-webkit-filter: blur(5px);
transition: .5s ease;
}
#buzzBG {
/* Add the blur effect */
filter: blur(3px);
-webkit-filter: blur(3px);
top: -5px;
left: -5px;
right: 5px;
width: 110%;
height: 110%;
object-fit: cover;
}
#monitoringSelf button, #monitoringUsers button {
width: 128px;
height: 128px;
}
#monitoringSelf, #monitoringUsers {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-bottom: 12px;
}
#entityProfileBG img:hover, #monitored-entityProfileBG img:hover {
filter: blur(12px);
-webkit-filter: blur(12px);
transition: .5s ease;
}
#entityProfileBG, #monitored-entityProfileBG {
/* Add the blur effect */
filter: blur(80px);
-webkit-filter: blur(80px);
top: -25px;
left: -25px;
right: 25px;
width: 110%;
height: 110%;
object-fit: cover;
opacity: 0.6;
}
#aboutEntitycard, #monitored-aboutEntitycard {
background-color: rgba(0, 0, 0, 0.75);
}
/* Scheduler - loaded only if the subscription allows it */
schedule {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 1.0);
border-top: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 0px;
width: 100%;
padding: 16px;
}
.form-marquee {
/*background: url("../wallpapers/antelope.jpg") center;
background-size: cover;*/
background-color: rgba(250,250,250,0.95);
border: 1px solid lightGray;
display: none;
width: calc(60%);
position: fixed;
top: 64px;
z-index: 10000;
}
.form-marquee h4 {
color: #884444;
margin-top: 20px;
margin-bottom: 4px;
font-size: 2rem;
font-family: "Barlow Semi Condensed", "Montserrat", "Rajdhani", "Anaheim";
text-transform: uppercase;
}
.form-marquee h5 {
color: teal;
font-size: 1.25rem;
font-family: "Barlow Semi Condensed", "Montserrat", "Rajdhani", "Anaheim";
margin-top: 20px;
}
.form-marquee .btn {
width: 64px;
height: 64px;
border-radius: 32px;
background-color: #4CAF50;
color: white;
margin: 4px 12px;
padding: 0;
display: inline-block;
}
.form-marquee .btn.hidden {
display: none;
}
.marquee-container .caption {
color: #009ad1;
padding-top: 0px;
padding-bottom: 4px;
font-family: 'Rajdhani', sans-serif;
font-size: 0.9rem;
position: absolute;
top: 0px;
right: 24px;
}
/* Add styles to the form container */
.marquee-container {
padding: 10px;
background-color: rgba(0,0,0,0);
text-align: center;
margin-top: 12px;
overflow-x: scroll;
line-height: 2;
}
.marquee-container .mention, .bridged-user .mention {
font-size: 1.2rem;
padding: 4px 12px;
font-weight: 400;
color: midnightblue;
}
.marquee-resource {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 4px;
}
.debug-only {
display: none;
}
.marquee-resource .resource {
font-size: 1.2rem;
padding: 4px 12px;
font-weight: 400;
color: midnightblue;
cursor: pointer;
transition: all 0.5s ease-in-out;
border: solid 1px transparent;
}
body.lite #recentCollectionHeader #tabHeaderButtonsContainer {
opacity: 0;
}
body.lite #recentCollectionHeader:hover #tabHeaderButtonsContainer {
opacity: 1;
transition: all 0.5s ease-in-out;
}
.marquee-resource .resource svg {
font-size: 16px;
color: gray;
padding: 0 8px;
}
.marquee-container .resource:hover {
color: teal;
font-weight: 400;
border: dotted 1px rgba(51, 51, 51, 0.42);
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
.hover-element, .hover-inline-element {
display: none;
padding: 0 6px;
cursor: pointer;
margin-right: 3px;;
}
.hover-element.bottom, .hover-inline-element.bottom {
display: inline-flex;
bottom: 0;
height: 0;
opacity: 0.0;
box-shadow: none;
}
.hover-container:hover .hover-element {
display: inline-flex;
opacity: 1.0;
max-width: 100%;
}
.hover-container:hover .hover-inline-element {
display: inline;
opacity: 1.0;
max-width: 100%;
}
.hover-container:hover .hover-element.bottom,
.hover-container:hover .hover-inline-element.bottom {
display: inline-flex;
width: 98%;
height: 45%;
align-items: center;
justify-content: center;
gap: 100px;
box-shadow: 0 3px 10px rgb(188 135 135);
transition: all 0.5s ease-in-out;
}
.hover-container:hover .hover-element.bottom {
display: inline-flex;
}
.hover-container:hover .hover-inline-element.bottom {
display: inline;
}
.bridged-user {
font-size: 2rem;
/* background-color: teal;
color: white; */
padding: 8px 12px;
margin-bottom: 16px;
}
.drive-folder-group {
/* border-left: 1px solid gray; */
}
.drive-folder-group span {
font-size: 1.2rem;
padding: 4px 12px;
font-weight: 400;
color: midnightblue;
font-family: Anaheim, 'Barlow Semi Condensed', sans-serif;
}
.drive-folder-group.first {
border-left: 0px;
}
.mention svg {
margin: 0 8px;
}
#marquee {
z-index: 1000;
height: 100%;
white-space: nowrap;
margin: auto;
margin-bottom: 32px;
margin-top: 32px;
padding: 0 32px 0 32px;
white-space: normal;
}
.main-image {
height: 100%;
}
.card .main-image img {}
.card-overlay, .entity-card-overlay {
margin: auto;
position: absolute;
top: 45%;
width: 100%;
}
.entity-card-overlay {
top: 0;
bottom: 0;
}
.card .card-overlay .main-title, .card .entity-card-overlay .main-title, .html-overlay-content .main-title {
font-size: 36px;
font-family: 'Rajdhani', sans-serif;
font-weight: 400;
color: #e3e3e3;
margin: auto;
display: block;
text-align: center;
position: relative;
background-color: rgba(0, 0, 0, 0.77)
}
.card .entity-card-overlay .main-title {
background-color: rgba(0, 0, 0, 0.47);
padding: 24px 0;
}
.card .card-overlay .main-subtitle, .card .entity-card-overlay .main-subtitle, .html-overlay-content .main-subtitle {
font-size: 30px;
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 100;
color: rgba(255, 255, 255, 1);
margin: auto;
display: block;
text-align: center;
position: relative;
background-color: rgba(0, 0, 0, 0.17);
padding: 12px 24px;
}
.card .entity-card-overlay .main-info, .html-overlay-content .main-info {
font-size: 24px;
font-family: 'Barlow Semi Condensed', sans-serif;
font-weight: 200;
color: rgba(255, 255, 255, 0.9);
margin: auto;
display: block;
text-align: center;
position: relative;
margin: 32px 32px 32px 32px;
background-color: rgba(0, 0, 0, 0.0)
}
.html-overlay-content {
position: absolute;
bottom: 32px;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
minifooter {
position: fixed;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9);
border-top: 2px solid rgba(0, 0, 0, 0.08);
width: 100%;
padding: 16px;
}
minifooter textarea {
vertical-align: middle;
display: inline-block;
margin: 0px;
/* height: 119px; */
width: calc(100% - 112px);
}
toastfooter {
border-top: 1px solid rgba(0, 0, 0, 0.08);
width: 100%;
padding: 12px 0 6px 0;
display: none;
flex-direction: row;
}
toastfooter textarea {
vertical-align: middle;
display: inline-block;
margin: 0px;
min-height: 32px;
width: calc(100% - 54px);
background-color: rgba(0,0,0,0.05);
border: 0px;
}
.toast-send-button i {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 1.2rem;
line-height: 48px;
background-color: #0090c0;
border-radius: 50%;
}
#notepad-container {
display: none;
flex-direction: column;
height: calc(100% - 128px);
}
.notepad-input-title, .readability-title {
font-family: Montserrat, sans-serif;
font-size: 2rem;
color:rgba(40, 60, 50, 0.50);
padding-left: 24px;
margin: 12px auto 8px;
text-transform: uppercase;
}
.readability-title {
font-size: 1.4rem;
letter-spacing: 1.5;
}
#search-screen-title {
padding-left: 0;
}
.notepad-input-text-box {
border: none;
border-radius: 4px;
/* background-color: #fff; */
margin-left: 0;
width: 90%;
height: 80%;
display: flex;
flex-direction: column;
margin: auto;
flex: 9 0 auto;
}
.notepad-input-text {
border: none;
border-radius: 4px;
background-color: #fff;
margin-left: 0;
/* width: 90%; */
/* height: 80%; */
line-height: 1.6;
flex: 9 0 auto;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
font-size: 1.5vh;
padding: 20px 32px;
color: teal;
background-color: rgba(51, 51, 51, 0.12);
margin: 6px auto;
flex: 9 0 auto;
}
.notepad-input-text:focus {
border-style: none;
background-color: rgba(51, 51, 51, 0.05);
outline: none;
}
textarea.notepad-input-text {
max-height: calc(100% - 48px);;
}
#notepad-enhance-buttons {
right: 10px;
bottom: 64px;
}
.notepad-input-text-box .overlay-buttons {
right: 0;
bottom: 0;
position: relative;
opacity: 1;
display: flex;
justify-content: right;
flex: 0 1 auto;
}
.notepad-footer {
height: 64px;
width: 90%;
margin: 6px auto;
display: flex;
flex-direction: row-reverse;
justify-content: right;
align-items: flex-start;
justify-items: flex-start;
}
.notepad-footer.left {
margin: 6px 0;
}
#lightning-edit-container .notepad-footer, #lightning-edit-container .notepad-notes {
margin: 6px 0;
}
#lightning-edit-container {
display: none;
flex-direction: column;
flex: 1 1 auto;
position: relative;
overflow-y: scroll;
margin:0;
width: 100%;
}
#lightning-edit-container textarea {
margin: 0 0 24px 0;
padding-left: 10px;
}
#lightning-template-title-input {
/* padding-left: 10px; */
}
.note-pad-footer-icon {
/* position: absolute; */
/* right: 32px; */
text-align: center;
padding: 4px 24px;
}
.notepad-notes, .globalmenu-container, .files-container {
display: flex;
flex-direction: row;
flex-flow: row wrap;
justify-content: left;
align-items: flex-start;
justify-items: flex-start;
width: 90%;
gap: 3.33% 20px;
line-height: 1.6;
padding: 20px 0px;
margin: 6px auto;
/* border-top: 10px solid rgba(0, 100, 20, 0.1); */
overflow-y: scroll;
}
#conversationNotesPopup .notepad-notes {
flex-direction: column;
}
#conversationNotesPopup .notepad-note {
width: 100%;
margin-bottom: 20px;
background: linear-gradient(163deg, #78b6f661 0%, #66ede854 100%);
}
#conversationNotesPopup .notepad-note.private {
background: linear-gradient(163deg, #f6e77861 0%, #e77d127b 100%);
cursor: pointer;
/* background: rgba(51, 51, 51, 0.02); */
}
.notepad-note actionButton.mini {
display: none;
}
span.tiny {
font-size: 8px;
font-family: 'Rajdhani', sans-serif;
white-space: nowrap;
overflow: hidden;
}
.folder-files-container {
display: grid;
grid-auto-columns: 1fr;
/* grid-auto-rows: max-content max-content minmax(auto, max-content); */
grid-auto-rows: max-content max-content;
overflow-y: scroll;
overflow-x: hidden;
height: calc(100% - 128px);
}
.files-container {
/* position: absolute; Removed for bento */
/* top: 128px;
bottom: 144px; */
justify-content: space-evenly;
width: unset;
gap: unset;
overflow-y: scroll;
}
.folder-navigation-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
width: unset;
overflow-y: hidden;
height: max-content;
max-height: 96px;
padding-bottom: 32px;
position: relative;
transition: all 1s ease-in-out;
border-bottom: 1px solid lightgray;
}
.bulk-menu {
position: absolute;
bottom: 0px;
left: 50%;
border: 1px solid lightgray;
border-radius: 10px 10px 0 0;
background-color: rgb(233, 230, 230);;
transform: translate(-50%, 0);
padding: 3px 12px;
}
.single-media-move-folder.selected {
background-color: lightblue;
}
.single-media-move-folder.empty {
background-color: rgb(169, 198, 207);
font-size: 2rem;
font-family: "Anaheim", sans-serif;
color: white;
text-align: center;
/* width: 100%; */
background: rgba(0, 0, 0, 0.435);
margin: auto;
padding: 8px 20px;
border-radius: 5px;
width: max-content;
margin: 32px auto;
}
.single-media-move-hierarchy {
font-family: Anaheim, sans-serif;
color: #000000;
font-family: Montserrat;
font-size: 1rem;
font-weight: 600;
background-color: #f0f8ff36;
text-align: left;
padding-left: 32px;
min-height: 32px;
align-content: center;
display: flex;
flex-wrap: wrap;
margin-bottom: 8px;
position: relative;
}
.single-media-move-hierarchy::before {
opacity: 0.5;
right: 12px;
bottom: 5;
top: unset;
border: 0;
position: absolute;
font-family: Anaheim, sans-serif;
color: #044444;
font-family: Montserrat;
font-size: 1rem;
font-weight: 600;
content: 'Current Folder';
}
.no-notes-message {
font-size: 2rem;
font-family: "Anaheim", sans-serif;
opacity: 0.2;
color: white;
text-align: center;
/* width: 100%; */
background: black;
margin: auto;
padding: 8px 20px;
border-radius: 5px;
}
.single-media-move-folder.relative {
background-color: #f5f5dc2e;
}
.single-media-move-folder .folder-navigate {
display: none;
}
.single-media-move-folder:hover .folder-navigate {
display: inline-block;
}
.single-media-move-folder {
min-height: 64px;
padding-left: 0px;
position: relative;
background-color: rgba(0, 0, 0, 0);
line-height: 1.5rem;
flex: 10 1 auto;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px dotted #ddd;
/* min-height: 96px; */
padding: 4px 24px;
cursor: pointer;
}
.pdf-document-actions-item:hover {
background-color: aliceblue;
}
.folder-navigation-container::before {
opacity: 0.5;
right: 12px;
bottom: 5;
top: unset;
border: 0;
position: absolute;
font-family: Anaheim, sans-serif;
color: #044444;
font-family: Montserrat;
font-size: 1.2rem;
font-weight: 600;
}
.folder-navigation-container::before {
content: attr(data-navpath);
/* color: teal; */
}
.folder-files-container-wrapper {
max-height: max-content;
overflow-y: scroll;
overflow-x: hidden;
height: max-content;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
.folder-container {
display: flex;
flex-direction: column; /* was row */
justify-content: flex-start;
width: unset;
overflow-y: hidden;
height: max-content;
/* max-height: 256px; */
max-height: max-content;
position: relative;
}
/* Grid view - similar to Global Actions grid */
.folder-container.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
padding: 8px;
overflow-y: auto;
overflow-x: hidden;
}
/* List view - similar to Global Actions grid but in list format */
.folder-container.list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 8px;
padding: 8px;
overflow-y: auto;
overflow-x: hidden;
}
.folder-container.tight {
display: flex;
flex-direction: column;
max-height: max-content;
/* overflow-y: scroll; */
overflow-x: hidden;
}
.folder-container.tight .folder-item-content img {
max-height: 84px;
max-width: 84px;
object-fit: contain;
}
.folder-container::before
{
/* background-image: url("/static/wallpapers/BuzzFlashDriveFolderHeader.jpg"); */
background-size:cover;
content: "";
left: -5%;
right: 0;
top: -5%;
z-index: -1;
display: inline-block;
width: 110%;
height: 110%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(8px);
/* background-blend-mode: lighten; */
/* overflow: hidden; */
position: absolute;
}
.folder-container.tight .folder-item {
width: 100%;
padding: 8px 0;
/* background-color: rgba(0, 0, 0, 0.1); */
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin: 0;
font-size: 1.4rem;
font-weight: 600;
color: darkred;
}
.folder-container.tight .folder-item .folder-item-content {
display: flex;
flex-direction: row;
align-items: center;
}
.folder-container.tight .folder-item .folder-item-content .header {
display: none;
}
.folder-container.tight .folder-item .folder-item-content .body {
height: 100%;
}
.files-container.list {
flex-direction: column;
flex-flow: wrap;
justify-content: flex-start;
width: 100%;
/* overflow-y: scroll; */
height: max-content;
}
.files-container.tight {
flex-direction: column;
flex-flow: wrap;
justify-content: flex-start;
width: 100%;
/* overflow-y: scroll; */
height: max-content;
}
#media-move-popup {
min-width: 600px;
}
#single-media-move-or-attach-container {
overflow-y: scroll;
position: relative;
}
#single-media-move {
width: clamp(500px, 80%, 1200px);
min-height: 500px;
max-height: 90%;
display: grid;
grid-template-rows: 72px 1fr auto auto;
grid-template-columns: 1fr;
}
#single-media-move.move {
background-image: linear-gradient(120deg, #e3e4b2 0%, #d2a137 100%)
}
#single-media-move.attach {
background-image: linear-gradient(193deg, #e7f8f4 0%, #bccac7df 100%);
}
#single-media-move.attach ul#single-media-attach-list span {
color: black;
}
#single-media-move.attach ul#single-media-move-list {
display: flex;
flex-direction: row;
width: 100%;
overflow: scroll;
}
/* #single-media-move.attach #single-media-move-list li {
border-right: 1px solid lightblue;
} */
#single-media-move.attach .pdf-document-actions-item-title {
width: max-content;
max-width: unset;
}
#single-media-move.attach ul#single-media-move-list .pdf-document-actions-item-title {
border-right: 1px solid lightsalmon;
padding-right: 32px;
}
#single-media-move .header {
width: 100%;
}
#single-media-move-name, #single-media-move-message {
margin-left: 0;
text-align: left;
max-width: unset;
line-height: 48px;
}
#lightning-templates {
flex-direction: column;
flex-flow: column;
width: 100%;
}
#lightning-templates .notepad-note-footer {
font-size: 0.7rem;
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
}
#lightning-templates .notepad-note {
width: 100%;
height: unset;
margin: 12px 0 0 0;
}
#lightning-templates .notepad-note.aiprompt {
background: linear-gradient(163deg, #78b6f661 0%, #66ede854 100%);
}
#lightning-templates .notepad-note.template {
background: linear-gradient(163deg, #b0861461 0%, #e4572c54 100%);
}
#lightning-templates .notepad-note:hover {
background-color: #dcf8fc;
}
#lightning-templates .notepad-note-title {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#lightning-templates .notepad-note .notepad-note-title actionbutton {
display: none;
}
#lightning-templates .notepad-note:hover .notepad-note-title actionbutton {
display: inline-block;
}
#lightning-templates .notepad-note-body {
height: max-content;
font-size: 1.2rem;
}
.bf-container {
font-family: Montserrat, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #fff;
color: #333;
padding: 100px 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.step-status {
position: absolute;
top: -10px;
right: -30px;
font-size: 24px;
z-index: 10;
}
.buzzflow-main-title {
font-size: 2.5rem;
margin-bottom: 50px;
color: #046689;
position: absolute;
top: 64px;
left: 50%;
transform: translateX(-50%);
font-family: Rajdhani;
width: 100%;
}
.steps {
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
margin-bottom: 50px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
max-width: 180px;
height: 280px; /* Fixed height for all steps */
justify-content: flex-start;
position: relative;
}
.step .img {
width: 128px;
height: 128px;
margin-bottom: 15px;
opacity: 0.5;
flex-shrink: 0;
/* Prevent image from shrinking */
cursor: pointer;
}
.step .img img {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.3s ease-in-out;
}
.step:hover .img {
opacity: 1;
}
.step .title {
margin-top: 24px;
font-weight: bold;
margin-bottom: 5px;
font-family: Rajdhani;
font-size: 2rem;
color: #999;
flex-shrink: 0;
/* Prevent title from shrinking */
}
.step .description {
font-size: 1.0rem;
color: #777;
text-align: center;
flex-shrink: 0;
/* Prevent description from shrinking */
}
.step-status .unchecked {
color: #ccc;
display: block;
}
.step .info {
display: inline-block;
}
.step.completed .step-status .checked {
color: #16a7c4;
}
.step.skippable .step-status .checked {
display: none;
color: #c7751e;
}
.step .step-status .checked {
display: none;
}
/* Step completion states */
.step.completed .step-status .unchecked, .step.completed .info, .step.skippable .step-status .unchecked, .step.skippable .info {
display: none;
}
.step.completed .step-status .checked, .step.skippable .step-status .checked {
display: block;
}
.step.completed img {
opacity: 1 !important;
}
.step.completed .title {
color: #16a7c4 !important;
}
.step.skippable .title {
color: #c7751e !important;
}
.arrow {
font-size: 24px;
align-self: center;
margin-top: 30px;
color: #ccc;
}
.button-container {
margin-top: 20px;
}
.action-button {
background-color: white;
color: #16a7c4;
padding: 12px 30px;
border: 1px solid #16a7c4;
border-radius: 5px;
font-size: 1.5rem;
cursor: pointer;
font-family: Rajdhani;
}
.action-button:hover {
background-color: #16a7c4;
color: #fff;
border: 1px solid #16a7c4;
}
.globalmenu-container {
position: absolute;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%);
*/
right: 12px;
top: 128px;
width: 80%;
height: 80%;
gap: 0;
border-top: 6px solid rgba(0, 100, 20, 0.1);
}
.notepad-note, .globalmenu-item, .files-item {
background-color: white;
border: 1px solid rgba(0, 0, 0, .1);
width: 16.66%;
height: 15rem;
overflow: hidden;
padding: 4px 16px 4px 24px;
box-shadow : 0 3px 1px rgb(0 0 0 / 10%);
cursor: pointer;
background: rgba(51, 51, 51, 0.02);
}
.files-item .notify-badge {
display: none;
}
.files-container .notepad-note {
background: rgba(51, 51, 51, 0.2);
}
.globalmenu-item, .files-item {
min-width: 300px;
max-width: 400px;
width: unset;
border: 0px solid rgba(0, 0, 0, .1);
box-shadow : unset;
background: transparent;
border-radius: 30px;
margin: 8px;
}
.favorites-gridview-item {
display: flex;
flex-direction: column;
align-items: center;
}
.folder1-item {
max-width: 420px;
max-height: 310px;
margin: 5em auto 2em;
border-radius: 5px 25px 25px 25px;
filter: drop-shadow(0 0 0.75rem grey);
background: white;
position: relative;
}
.folder1-item::before{
content: '';
position: absolute;
top: -18px;
width: 200px;
height: 25px;
background: white;
border-radius: 25px 0 0 0;
clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
.folder1-item::after{
content: '';
position: absolute;
left: 40px;
width: 85px;
height: 5px;
top: -18px;
background: #7036E9;
border-radius: 0 0 5px 5px;
}
.folder-item {
/* border: 1px solid rgba(0, 0, 0, .1); */
width: max-content;
position: relative;
/* height: 15rem; */
overflow: hidden;
padding: 4px 16px 4px 24px;
/* box-shadow : 0 3px 1px rgb(0 0 0 / 10%); */
cursor: pointer;
/* background: rgba(255, 255, 255, 0.49); */
margin: 10px 16px;
font-size: 1.0rem;
font-weight: 400;
color: rgb(145, 20, 20);
font-family: Montserrat, Anaheim, sans-serif;
}
/* Grid and List view folder items - styled like globalmenu-item */
.folder-container.grid .folder-item,
.folder-container.list .folder-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 300px;
max-width: 400px;
width: calc(16.66% - 16px); /* 6 columns with gap */
height: 15rem;
padding: 24px 18px;
margin: 0;
border: 0px solid rgba(0, 0, 0, .1);
border-radius: 30px;
box-shadow: unset;
background: transparent;
overflow: visible;
}
/* Ensure folder-item-content displays properly in grid/list */
.folder-container.grid .folder-item .folder-item-content,
.folder-container.list .folder-item .folder-item-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
gap: 12px;
}
/* Icon styling in grid/list view */
.folder-container.grid .folder-item .folder-item-content .icon,
.folder-container.list .folder-item .folder-item-content .icon {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
flex-shrink: 0;
}
.folder-container.grid .folder-item .folder-item-content .icon img,
.folder-container.list .folder-item .folder-item-content .icon img,
.folder-container.grid .folder-item .folder-item-content .icon svg,
.folder-container.list .folder-item .folder-item-content .icon svg {
max-width: 120px;
max-height: 120px;
width: auto;
height: auto;
object-fit: contain;
}
/* Title/Footer styling in grid/list view */
.folder-container.grid .folder-item .folder-item-content .header,
.folder-container.list .folder-item .folder-item-content .header,
.folder-container.grid .folder-item .folder-item-content .footer,
.folder-container.list .folder-item .folder-item-content .footer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
text-align: center;
font-family: Rajdhani, 'Barlow Semi Condensed';
font-weight: 500;
font-size: 1.35rem;
color: #71308d;
padding: 6px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Body styling in grid/list view */
.folder-container.grid .folder-item .folder-item-content .body,
.folder-container.list .folder-item .folder-item-content .body {
/* display: none; /* Hide body in grid/list view */
}
/* Hover effects for grid/list folder items */
.folder-container.grid .folder-item:hover,
.folder-container.list .folder-item:hover {
box-shadow: 3px 3px 40px rgb(0 0 0 / 20%);
background: rgba(91, 117, 154, 0.02);
transform: translateY(-2px);
transition: all 0.2s ease;
}
.folder-navigation-item {
overflow: hidden;
cursor: pointer;
margin: 4px 16px 4px 0;
height: 90%;
position: relative;
transition: all 1s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
}
.folder-navigation-item .folder-navigation-name {
width: 0;
font-size: 1.4rem;
font-family: Anaheim, monospace;
padding: 0;
overflow: hidden;
transition: all 1s ease-in-out;
}
.folder-navigation-item:hover .folder-navigation-name, .folder-navigation-item .folder-navigation-name.last {
width:max-content;
background-image: linear-gradient(transparent calc(100% - 0.35em), #bbd7d8 0), linear-gradient(transparent calc(100% - 0.35em), rgba(0, 183, 174, .3) 0);
display: flex;
align-items: center;
justify-items: center;
}
.folder-navigation-icon {
/* position: absolute; */
/* content: ''; */
background-image: url("/static/icons/BuzzFlashDriveOpenFolder-1024.png");
background-size: contain;
left: 0;
top: 0;
height: 54px;
display: inline-block;
width: 64px;
background-repeat: no-repeat;
}
.folder-navigation-item .folder-navigation-name.last .folder-new {
display: none;
flex-direction: row;
justify-items: center;
align-items: center;
padding: 0 12px;
}
.folder-navigation-item.last:hover .folder-new {
display: inline-flex;
}
.folder-navigation-icon.root {
background-image: url("/static/icons/BuzzFlashDriveRootFolder-1024.png");
}
.files-item {
border-radius: 10px;
width: 25%;
border: 1px solid rgba(0, 0, 0, .4);
/* background: rgba(91, 117, 154, 0.02);
background-color: rgb(124 214 224 / 50%); */
/* background-image: linear-gradient(321deg, #5bc5c391 0%, #e2f3f6c2 100%); */
/* background-color: rgba(91, 117, 154, 0.1); */
padding: 24px 18px;
position: relative;
}
.files-container.list .files-item {
width: 100%;
border-radius: 0px;
border: 0px;
padding: 4px 18px;
margin: 8px 12px 8px 0;
max-width: unset;
max-height: 8rem;
overflow: hidden;
}
.files-container.tight .files-item {
width: 100%;
border-radius: 0px;
border: 0px;
padding: 4px 18px;
margin: 8px 12px 8px 0;
max-width: unset;
max-height: 54px;
overflow: hidden;
}
.files-container.list .files-item .body .icon, .files-container.tight .files-item .body .icon {
display: none;
}
.files-container.list .files-item .body, .files-container.tight .files-item .body {
display: none;
}
.files-container.list .files-item .footer {
font-size: 1.5rem;
}
.files-container.tight .files-item .footer {
font-size: 1.2rem;
}
.files-container .files-item .footer .full, .files-container.list .files-item .footer .truncated, .files-container.tight .files-item .footer .truncated {
display: none;
}
.files-container.list .files-item .footer .full, .files-container.tight .files-item .footer .full, .files-container .files-item .footer .truncated {
display: inline;
width: max-content;
}
.files-container .files-item .footer .truncated:hover, .files-container .files-item .footer .full:hover {
background-color: rgba(153, 205, 50, 0.244);;
}
.files-container .files-item .footer .truncated svg, .files-container .files-item .footer .full svg {
display: none;
}
.files-container .files-item .footer .files-item-name {
text-align: left;
flex: auto 9 1;
display: flex;
align-items: center;
}
.file-type-icon-wrapper {
padding: 0 12px 0 0;
}
.file-type-icon-wrapper.brand {
display: flex;
flex-direction: column;
align-items: center;
}
.file-type-icon-wrapper.brand span.live {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 10px;
background-color: #c0eedf;
/* border-radius: 3px; */
color: black;
/* border: 1px solid teal; */
}
.files-container.tight .files-item .footer .files-item-name {
display: grid;
align-items: center;
grid-template-columns: 48px 1fr max-content auto;
border-bottom: 1px dotted lightsteelblue;
padding-bottom: 5px;
}
.files-container.tight .files-item:hover .footer .files-item-name {
border-bottom: unset;
}
.files-container.tight .files-item .footer .files-item-name .file-name-alias {
display: none;
}
.files-container .files-item .footer .files-item-name .file-details {
display: none;
}
.files-container.tight .files-item .footer .files-item-name .file-details {
display: flex;
color: rgba(95, 158, 160, 0.783);
padding: 0 16px;
}
.files-container.tight:hover .files-item .footer:hover .files-item-name .file-details {
display: none;
}
.files-item:hover .footer .files-item-name .file-details {
color: cadetblue;
}
.files-container.list .files-item:hover img.file-item-media-image, .files-container.tight .files-item:hover img.file-item-media-image {
display: none;
}
.files-item .file-timestamp {
display: flex;
flex-direction: column;
align-items: center;
border-left: 3px solid #3a8d9a33;
padding: 4px 0 4px 12px;
margin-top: 12px;
/* transform: translateY(-10px); */;
}
.files-container.list .files-item .file-timestamp, .files-container.tight .files-item .file-timestamp {
margin-top: 0;
}
.file-timestamp date {
font-size: 2rem;
color: rgba(26, 126, 114, 0.653);
}
.file-timestamp month {
font-size: 0.75rem;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.9);
margin-top: -12px;
letter-spacing: 2px;
}
.file-timestamp year {
font-size: 0.75rem;
color: rgba(0, 0, 0, 0.5);
display: none;
}
.globalmenu-container.medium .globalmenu-item {
min-width: 192px;
max-width: 256px;
}
.globalmenu-container.small .globalmenu-item {
min-width: 144px;
max-width: 192px;
}
.globalmenu-item:hover {
box-shadow : 3px 3px 40px rgb(0 0 0 / 20%);
background: rgba(91, 117, 154, 0.02);
}
.files-item:hover, .folder-item:hover {
box-shadow: 3px 3px 40px rgb(0 0 0 / 20%);
background: rgba(91, 117, 154, 0.02);
background-color: rgb(124 224 165 / 75%);
background-image: linear-gradient(321deg, #5bc5c391 0%, #e2f3f6c2 100%);
background-blend-mode: screen;
}
.files-item:hover .watermark {
display: none;
}
.globalmenu-item.matched {
background-color:rgb(125 165 171 / 30%);
}
.files-item.matched {
background-color: rgb(61 100 42 / 36%);
background-blend-mode: multiply;
}
.globalmenu-item.matched.unique, .files-item.matched.unique {
background-color:#0096885e;
}
.globalmenu-item.favorites-gridview-item.matched.unique, .files-item.matched.unique {
background-color:#a298445e;
}
.notepad-note-icon {
font-family: Anaheim;
font-size: 24px;
color: rgba(0 0 0 / 60%);
padding: 10px 0 12px 0;
height: calc(100% - 6rem);
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.notepad-note-icon.row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2rem;
}
.notepad-note-icon actionbutton {
/* color: #009ad1; */
display: inline-block;
}
.notepad-note-icon svg, .globalmenu-item .icon svg {
color: #009ad1;
}
.notepad-note-title, .globalmenu-item .title, .files-item .header .title {
font-family: Rajdhani, 'Barlow Semi Condensed';
font-weight: 500;
font-size: 1.35rem;
height: 3rem;
line-height: 1.5rem;
padding: 6px 0;
color: #71308d;
overflow: hidden;
}
.notepad-note-title {
display: flex;
justify-content: space-between;
}
.notepad-note-linked-message {
color: #b429bb;
margin-left: 6px;
}
.files-item .header .title {
color: #095a6d;
flex: 9 1 auto;
text-align: left;
text-overflow: ellipsis;
}
.files-container.list .header .title {
opacity: 0.3;
}
.files-container.tight .header .title {
opacity: 0.3;
color: transparent;
}
.files-item .header .overlay-button {
display: none;
}
.files-item .icon svg {
color: #009688;
mix-blend-mode: multiply;
}
.files-item:hover .header .overlay-button {
display: inline-block;
}
.files-item .header {
font-family: Montserrat, 'Barlow Semi Condensed';
font-size: 24px;
color: rgba(0 0 0 / 60%);
padding: 4px 0 ;
height: 3rem;
text-align: right;
color: #d91e43;
/* border-top: 1px solid #81a8a2; */
display: flex;
justify-content: space-between;
align-items: center;
}
.tight .files-item .header {
display: none;;
}
.globalmenu-container.medium .globalmenu-item .footer, .files-container.small .files-item .footer {
font-size: 12px;
}
.globalmenu-container.small .globalmenu-item .footer, .files-container.small .files-item .footer {
font-size: 10px;
}
.notepad-note:hover {
box-shadow : 0 3px 1px rgb(0 0 0 / 20%);
background: rgba(51, 51, 51, 0.05);
}
.notepad-note:hover .notepad-note-title {
color: #0090c0;
}
.notepad-note-time {
font-family: Rajdhani, 'Barlow Semi Condensed';
font-weight: 500;
font-size: 1.2rem;
padding-left: 4px;
}
.notepad-note-body, .globalmenu-item .body {
font-family: Anaheim;
font-size: 0.95rem;
color: rgba(0 0 0 / 60%);
padding: 0.5rem 0 1rem 0;
height: calc(100% - 6rem);
overflow: hidden;
line-height: 1.5rem;
}
.files-item .body {
font-family: Anaheim;
font-size: 1.2rem;
color: rgba(0 0 0 / 60%);
padding: 0.5rem 0 1rem 0;
height: calc(100% - 6rem);
overflow: hidden;
line-height: 1.75rem;
}
.globalmenu-item .body img , .files-item .body img {
object-fit: contain;
width: 100%;
height: 100%;
}
.globalmenu-item .favorites img {
object-fit: cover;
}
.notepad-note-footer, .globalmenu-item .footer, .files-item .footer {
font-family: Montserrat, 'Barlow Semi Condensed';
font-size: 24px;
color: rgba(0 0 0 / 60%);
padding: 4px 0 ;
height: 3rem;
text-align: right;
color: #d91e43;
border-top: 1px solid #81a8a2;
display: flex;
justify-content: space-between;
align-items: center;
}
.notepad-note-footer .note-overlay-button, .files-item .footer .note-overlay-button {
display: none;
}
.notepad-note:hover .note-overlay-button, .files-item:hover .footer .note-overlay-button {
display: inline-block;
padding: 0 12px;
}
.notepad-note:hover .hover {
display: inline;
}
.globalmenu-item .footer {
font-size: 18px;
text-align: center;
color: black;
border-top: 0px solid #e3d9d9;
justify-content: center;
}
.globalmenu-item .footer.user {
color:#147598;
}
.globalmenu-item .footer.group {
color:#a08516;
}
.files-item .footer {
font-size: 18px;
text-align: center;
color: black;
border-top: 0px solid #e3d9d9;
}
.notepad-input-text:hover #note-pad-clear {
display: flex;
}
.message-input-text {
border: none;
border-radius: 4px;
background-color: #fff;
margin-left: 0;
}
.message-input-text.dim {
background: linear-gradient(163deg, #40d7c899 0%, #339db77a 100%);
color: #21252991;
}
.message-input-text.error, .notepad-input-text.error {
background: linear-gradient(163deg, #d5961799 0%, #e40e0ebb 100%);
color: #21252991;
animation: shake 0.2s ease-in-out 0s 5;
}
.message-input-text.reply {
background-color: #cee4e480;
min-height: 128px;
}
.message-input-text.forward {
background-color: #c5d86762;
min-height: 128px;
}
.message-input-text.edit {
background-color: #d295da4a;
min-height: 128px;
}
#buzzreply-attachment-text-section {
border: 1px solid lightgray; padding: 10px 24px; max-height: 128px; overflow: hidden scroll; opacity: 0.6; display: flex;
}
#buzzreply-attachment-text-section {
transition: opacity position opacity position 0.5s ease-in-out;
}
#buzzreply-attachment-text-section:hover {
opacity: 1.0;
/* position: absolute;
top: 100px;
bottom: 0; */
background-color: #ccc;
}
#buzzreply-attachment-text-section .page-preview {
transition: font-size 0.5s ease-in-out;
}
#buzzreply-attachment-text-section:hover .page-preview {
font-size: 20px;
}
.filepond--root {
font-family: Anaheim, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
}
.custom-file-upload {
border: 0px solid #ccc;
display: inline-block;
padding: 8px;
width: 100%;
font-size: 1.4rem;
color: #555;
letter-spacing: 1.33;
text-align: center;
}
#uploadFileInputLabel {
cursor: pointer;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
#uploadFileInputLabel>actionbutton, #uploadInviteFileInputLabel>actionbutton {
padding: 4px 12px;
background-color: #aaa;
}
div.file-input-label {
top: 0;
margin: 0;
display: block;
justify-content: center;
align-items: center;
height: 44px;
-webkit-user-select: none;
user-select: none;
will-change: transform, opacity;
background-color: #f4f4f4;
border-radius: 12px;
font-family: Anaheim, sans-serif;
font-size: 1.5rem;
color: #444;
left: 0;
cursor: pointer;
}
div.upload-thumbnail-container {
width:100%;
background-color: #f4f6f8;
border-radius: 12px;
margin-bottom: 4px;
object-fit: scale-down;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
position: relative;
}
div.upload-thumbnail-container.ics {
background-color: #f4f6f8;
}
div.upload-thumbnail-container.audio {
background: linear-gradient(160deg, #f8e2a4f5 0%, #d17900f7 100%);
}
.upload-thumbnail-container svg {
color: white;
}
.before-label {
position: relative;
}
.before-label::before {
opacity: 0.5;
right: 24px;
bottom: unset;
top: 12px;
border: 0;
position: absolute;
font-family: Anaheim, sans-serif;
color: #044444;
font-family: Montserrat;
font-size: 1.5rem;
font-weight: 600;
border-radius: 5px;
background-color: #cccccc5e;
padding: 4px 12px;
}
.before-label::before {
content: 'File';
/* color: teal; */
}
.before-label.flash-drive::before {
content: 'BuzzDrive™';
color: teal;
background-color: #f5c20b87;
}
.before-label.buzz-scribe::before {
content: 'BuzzScribe™';
color: rgb(44, 86, 110);
background-color: #0bf5da87;
}
.before-label.top-left::before {
top: 12px;
left: 12px;
right: unset;
bottom: unset;
/* Ensure long labels don't overlap buttons on the right */
max-width: calc(100% - 200px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.before-label.dynamic::before {
content: attr(data-dynamic);
color: attr(data-color);
/* Prevent overlap with actionbutton - truncate long labels */
max-width: calc(100% - 200px); /* Reserve space for button (typically ~150px) + padding */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1; /* Lower than button */
}
/* Ensure actionbutton stays on top and is clickable */
.modal-footer .actionbutton {
/* position: relative;*/
z-index: 10; /* Higher than before-label::before */
flex-shrink: 0; /* Don't shrink button */
}
/* For top-left positioned labels, ensure they don't overlap buttons on the right */
.before-label.top-left.dynamic::before {
max-width: calc(100% - 200px); /* Reserve space for button */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-thumbnail-container {
width: 100%;
/* max-height: 240px; */
display: none;
display: none;
margin: auto;
padding: 0;
}
img.upload-thumbnail {
width: 100%;
max-height: 240px;
display: none;
margin: auto;
padding: 0;
object-fit: contain;
transition: object-fit 1.5s ease-in-out 0.5s;
cursor: pointer;
}
#faxFileInputImage {
max-height: 64px;
}
img.upload-thumbnail.icon {
display: block;
}
img.upload-thumbnail:hover {
object-fit: cover;
}
img.upload-thumbnail.icon:hover {
object-fit: scale-down;
transform: scale(1.2);
transition: scale 1s;
}
div.filepond--drop-label label {
font-family: Anaheim, sans-serif;
font-size: 1.5rem;
color: #444;
}
.filepond--root .filepond--label-action {
margin: 6px;
letter-spacing: 2px;
border: 0;
background: #e4b707;
color: white;
text-transform: uppercase;
vertical-align: .25em;
cursor: pointer;
border-radius: .3em;
padding: 4px 8px;
font-size: 16px;
text-decoration: none;
}
/* Used by Reply and Edit */
#replyMessageInput, #editMessageInput {
vertical-align: middle;
display: inline-block;
margin: 4px 4px 4px 44px;
/* height: 119px; */
width: calc(100% - 104px);
}
#replyMessageFileInput {
}
.message-top-row {
display: flex;
flex-direction: row;
width: 100%;
margin-bottom: 12px;
z-index: 102; /* was 1000 - conflicting with menu action items root being 105 */
}
.message-top-row.sent {
float: left;
flex-direction: row;
}
.message-top-row.received {
float: right;
flex-direction: row-reverse;
}
.kb-chatbot-message-top-row {
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;;
}
.kb-chatbot-message-top-row .received-message {
width: auto;
margin-left: 0;;
background: #50b1b8;
align-self: center;
text-transform: uppercase;
font-size: 16px;
padding: 2px 12px;
color: white;
}
.aux-icon {
opacity: 0.5;
width: 24px;
box-shadow: none;
background-color: transparent;
color: #343434;
cursor: pointer;
transition: background-color 0.2s;
}
/* .mobile #messageInputContainer {
display: none;
} */
#messageInputContainer:hover .aux-icon {
opacity: 1.0;
color: #009ad1;
width: 36px;
}
#messageInputContainer .aux-icon i {
font-size: 1rem;
}
#messageInputContainer:hover .aux-icon i {
font-size: 2rem;
transition: .3s ease;
}
#messageInput {
vertical-align: middle;
display: inline-block;
margin: 4px 4px 4px 24px;
position: absolute;
left: 42px;
background-color: #fbfbfb;
/* this is based on the left icons - adjust */
width: calc(100% - 154px);
}
#proFileImageInput {
display: none;
}
/* when the icons move around */
#messageInputContainer:hover #messageInput {
left: 42px;
/* this is based on the left icons - adjust */
transition: .3s ease;
/* width: calc(100% - 172px); */
}
.message-input-text {
border: none;
border-radius: 4px;
background-color: #efefef;
margin-left: 48px;
cursor: text;
}
.message-text {
height: 60px;
border: none;
border-radius: 4px;
background-color: #fff;
width: calc(100% - 150px);
}
textarea {
font-family: "Anaheim", sans-serif;
font-size: 1.5rem;
padding: 6px;
background-color: #f9f9f9;
vertical-align: middle;
display: inline-block;
/* min-height: 5em;*/
max-height: 50vh;
min-height: 3rem;
width: 100%;
/* resize:none; */
}
.pseudo-input {
font-family: "Anaheim", sans-serif;
font-size: 1.5rem;
padding: 6px;
background-color: #f9f9f9;
vertical-align: middle;
display: inline-block;
/* min-height: 5em;*/
max-height: 50vh;
min-height: 96px;
width: 100%;
border: 1px solid gray;
margin-top: 12px;
z-index: 10000;
}
.pseudo-input::before{
content: 'PREVIEW';
position: absolute;
/* top: 0; */
/* bottom: 0; */
/* left: 0; */
right: 24px;
z-index: 0;
color: #0d745e;
font-size: 64px;
font-weight: 500;
display: grid;
justify-content: center;
align-content: center;
opacity: 0.1;
font-family: monospace;
}
.pseudo-input.hidden {
display: none;
}
.pseudo-input.broadcast, .pseudo-input.deleted, .pseudo-input.disabled, .pseudo-input.drive, .pseudo-input.notAMember, .pseudo-input.verifying, .pseudo-input.buzzlink {
/* top: 0; */
bottom: 0;
/* left: 0; */
/* right: 24px; */
position: absolute;
width: 100%;
/*z-index: 2000;*/
border: 0;
background: linear-gradient(0deg, #209eac5c 0%, transparent 100%);
color: #0d745e;
}
.pseudo-input.drive.preview {
width: max-content;
align-items: center;
right: 0;
background: white;
padding: 4px 24px;
}
.pseudo-input.broadcast::before, .pseudo-input.deleted::before, .pseudo-input.disabled::before, .pseudo-input.drive::before, .pseudo-input.notAMember::before, .pseudo-input.verifying::before, .pseudo-input.reply::before, .pseudo-input.forward::before, .pseudo-input.edit::before, .pseudo-input.buzzlink::before {
opacity: 0.5;
/* top: 0; */
/* bottom: 0; */
/* left: 0; */
left: 24px;
right: unset;
bottom: 0;
top: unset;
border: 0;
position: absolute;
color: cadetblue;
cursor: text;
}
.pseudo-input.buzzlink {
background-color: white;
}
.pseudo-input.broadcast::before {
content: 'BROADCAST';
color: teal;
}
.pseudo-input.buzzlink::before {
content: 'BUZZLINK';
color: rgb(212, 113, 7);
top:unset;
bottom: unset;
}
.pseudo-input.disabled::before {
content: 'READ-ONLY';
}
.pseudo-input.reply::before {
content: 'THREADED REPLY';
color: #0d745e;
}
.pseudo-input.reply::before,
.pseudo-input.forward::before,
.pseudo-input.edit::before {
left: unset;
right: 24px;
opacity: 33%;
z-index: 1;
font-size: 1.5rem;
font-weight: 500;
text-transform: uppercase;
}
.pseudo-input.forward::before {
content: 'FORWARD MESSAGE';
color: #d91e43;
}
.pseudo-input.edit::before {
content: 'EDIT MESSAGE';
color: #009ad1;
}
.pseudo-input.reply, .pseudo-input.forward, .pseudo-input.edit {
position: absolute;
left: 5%;
width: 90%;
background-color: transparent;
border: 0;
z-index: -1;
}
.pseudo-input.drive::before {
content: 'BUZZDRIVE™';
color: rgba(156, 174, 119, 0.706);
}
.pseudo-input.drive.preview::before {
content: 'PREVIEW MESSAGE';
font-size: 1rem;
left: unset;
right: 10px;
color: #2a2a2ae9;
}
.pseudo-input.drive mark {
color: teal;
background: beige;
}
.pseudo-input.notAMember::before {
content: 'NOT A MEMBER';
}
.pseudo-input.verifying::before {
content: 'VERIFYING MEMBERSHIP';
}
.pseudo-input.deleted::before {
content: 'DELETED';
color: #d91e43;
}
.watermark {
color: #3e3d3d8e;
font-size: 24px;
position: absolute;
bottom: 0px;
right: 0px;
z-index: -1;
}
.watermark.rotate-left {
transform: translate(100%, -10px) rotate(-90deg);
transform-origin: left bottom;
}
.files-container.list .watermark.rotate-left, .files-container.tight .watermark.rotate-left {
transform: unset;
transform-origin: unset;
padding-right: 12px;
opacity: 0.3;
top: 0;
right: 64px;
font-family: Montserrat;
font-size: 32px;
bottom: unset;
}
.files-container.tight .watermark.rotate-left {
display: none;
}
.watermark.rotate {
transform: rotate(90deg);
}
.watermark.rotate.bottom-right {
transform-origin: bottom right;
bottom: 0px;
right: 0px;
}
.watermark.rotate.top-left {
/* transform-origin: 100% 100%; */
top: 0px;
left: 0px;
}
.group-member-name {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.group-member-name svg {
color: bisque;
padding: 4px 0;
}
#buzzLinkGroupMessageInput::before {
content: 'Type Your Message';
position: absolute;
border: 0;
/* top: 0; */
/* bottom: 0; */
/* left: 0; */
right: 18px;
z-index: 0;
color: #0d745e;
font-size: 32px;
/* font-weight: 500; */
display: grid;
justify-content: center;
align-content: center;
opacity: 0.1;
font-family: monospace;
}
.send-button {
position: absolute;
right: 16px;
}
.send-button i {
width: 48px;
height: 48px;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.6rem;
line-height: 48px;
background-color: #0090c0;
border-radius: 50%;
}
.send-map-button i {
width: 32px;
height: 32px;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.0rem;
line-height: 32px;
background-color: #009AD1;
border-radius: 50%;
}
shim {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 200000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 0.9);
border-top: 2px solid rgba(0, 0, 0, 0.08);
/* border-radius: 30px; */
width: 100%;
padding: 16px;
}
/* For Floating Menu */
white-bg {
display: flex;
visibility: visible;
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: white;
flex-direction: row;
justify-items: center;
align-items: center;
}
/* Overlay on the white BG */
card {
width: 300px;
height: 300px;
margin: auto;
}
qrcode {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2000000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 1.0);
border-top: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 30px;
width: 100%;
padding: 16px;
}
readable {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2000000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 1.0);
border-top: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 0px;
width: 100%;
padding: 16px;
}
shortcut {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2000000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 1.0);
border-top: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 0px;
width: 100%;
padding: 16px;
}
.flex-top {
display: flex;
flex-direction: column;
}
.flex-main {
margin:auto;
display: flex;
flex: 1;
overflow-y: auto;
flex-direction: column;
justify-items: flex-start;
width: 80%;
max-width: 1080;
}
#shortCutDiv {
display: flex;
flex-direction: column;
justify-items: center;
align-content: center;
align-items: center;
margin: auto;
width: 100%;
height: 50%;
}
#shortCutInfo {
text-align:center;
color:#999;
font-family: 'Barlow Semi Condensed', 'Montserrat', 'Rajdhani', 'Anaheim';
font-size: 2rem;
}
.shortCutNotes {
text-align:center;
color:#aaa;
font-family: 'Barlow Semi Condensed', 'Montserrat', 'Rajdhani', 'Anaheim';
font-size: 1rem;
}
#shortCutButtons, #lightningButtons {
display: flex;
flex-direction: row;
justify-items: center;
align-content: space-between;
align-items: stretch;
margin: auto;
margin-bottom: 20px;
/* width: 100%; */
height: 50%;
}
#lightning-screen-input-container, .screen-input-container {
overflow-y: scroll;
}
#lightning-screen-input, #lightning-search-results, .content-height {
height: max-content;
}
#lightning-search-results {
margin:12px 0;height:
max-content;
padding: 0 0 64px 0;
background-color: transparent;
}
#lightning-screen-input, #lightning-screen-edit-text {
font-family: 'Anaheim';
font-size: 20px;
line-height: 1.6;
padding: 0 0 0 12px;
width: 100%;
margin: 0;
}
#lightningButtons {
flex-direction: row;
display: flex;
align-items: center;
height: 72px;
padding: 0 12px;
width: 80%;
justify-content: flex-start;
}
.lightning-overlay-button {
display: flex;
width:max-content;
float:right;
color:white;
position:absolute;
top:0;
right:-300px;
cursor:pointer;
background-color: #009ad1;
border-radius: 50%;
padding: 16px;
opacity: 0.1;
font-size: 20px;
}
#lightning-screen-input:not(:placeholder-shown) ~ .lightning-overlay-button, #buzzstream-screen-input:not(:placeholder-shown) ~ .lightning-overlay-button {
/* pull back the negative value of the width */
transform: translateX(calc(-192px));
opacity: 1;
transition: 1s;
}
.lightning-overlay-button.fixed {
transform: translateX(calc(-192px));
opacity: 1;
right: -216px;
}
.lightning-overlay-button.bottom-right {
display: flex;
position: absolute;
right: 24px;
bottom: 24px;
background: #7e2d2d63;
top: unset;
opacity: 1;
}
.lightning-overlay-button.top-right {
display: flex;
position: absolute;
right: 10px;
top: 10px;
opacity: 1;
}
.lightning-overlay-button.fixed.cancel {
font-size: 8px;
background-color: #d91e43;
border-radius: 50%;
color: white;
box-shadow: 0 0 15px 3px #d91e43;
cursor: pointer;
right: -18px;
}
.shortcutContainer {
display: flex;
flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#shortcut-input, .shortcut-input {
width: 100%;
text-align: center;
font-family: 'PT Mono', 'Montserrat', sans-serif;
color: teal;
font-size: 5rem!important;
letter-spacing: 3px;
height: 6rem;
margin: auto;
border: 1px gray;
}
.menu-input.shortcut-input {
position: absolute;
top: 72px;
/* max-width: 256px; */
border: 0;
width: 100%;
text-align: center;
font-family: 'PT Mono', 'Montserrat', sans-serif;
color: teal;
font-size: 3rem!important;
letter-spacing: 3px;
height: 6rem;
margin: auto;
border: 0px gray !important;
box-shadow: unset !important;
}
.menu-input.shortcut-input > input::placeholder, .shortcut-input > input::placeholder {
color: #999;
font-size: 10px;
content: 'input';
}
.shortcut-input > input::placeholder {
color: #ddd;
}
.shortcut-header {
height: 64px;
}
print, search {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2000000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 1.0);
border-top: 2px solid rgba(0, 0, 0, 0.08);
border-radius: 0px;
width: 100%;
padding: 16px;
flex-direction: column;
}
print .result {
display: flex;
flex-direction: column;
/* justify-items: center;
align-content: center;
align-items: center; */
margin: auto;
width: 100%;
max-height: 50%;
overflow-y: scroll;
padding-top: 18px;
}
print .section {
width: clamp(400px, 80%, 1920px);
margin: auto;
}
print .section h2 {
font-size: 1.75rem;
margin-top: 0;
margin-bottom: 12px;
}
print h3 {
text-align: center;
color: #333;
font-family: 'Barlow Semi Condensed', 'Montserrat', 'Rajdhani', 'Anaheim';
font-size: 1.75rem;
}
print button, search button {
font-family: 'PT Mono', 'Montserrat', sans-serif;
font-size: 1rem;
border-radius: 3px;
padding: 4px 8px;
border: 1px solid #888;
}
print h2, search h2 {
text-align:center;
color:#333;
font-family: 'Barlow Semi Condensed', 'Montserrat', 'Rajdhani', 'Anaheim';
font-size: 3rem;
}
print p, search p {
width: 80%;
}
#lightning-screen-message p {
width: 90%;
}
print .form, search .form {
width: 400px;
margin: auto;
}
preview {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 200000;
/* height: 90px; */
background-color: rgba(255, 255, 255, 0.9);
border-top: 0px solid rgba(0, 0, 0, 0.08);
border-radius: 0;
width: 100%;
padding: 0;
}
#preview h4 {
color: #884444;
font-family: "Barlow Semi Condensed", "Montserrat", "Rajdhani", "Anaheim";
}
#preview-image {
/* background-color: aliceBlue; */
padding: 0px;
/* test */
object-fit: contain;
}
#preview-image img {}
.download-link:hover {
cursor: pointer;
}
media, flashdrive {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 200000;
/* height: 90px; */
background-color: rgba(206, 223, 199, 0.9);
border-top: 0px solid rgba(0, 0, 0, 0.08);
border-radius: 0;
width: 100%;
padding: 0;
justify-content: center;
}
media.document-type, flashdrive.document-type {
background-image: linear-gradient(120deg, #65f4f6e6 0%, #507f7c 100%);
}
media.picture-type, flashdrive.picture-type {
background-image: linear-gradient(120deg, #65f6c1e6 0%, #507f7c 100%);
}
media.video-type, flashdrive.video-type {
background-image: linear-gradient(120deg, #e3b0e7e6 0%, #507f7c 100%);
}
media.audio-type, flashdrive.audio-type {
background-image: linear-gradient(120deg, #f6c865e6 0%, #507f7c 100%);
}
media.calendar-type, flashdrive.calendar-type {
background-image: linear-gradient(120deg, #ed96ade6 0%, #507f7c 100%);
}
media h4, flashdrive h4 {
color: black;
margin: auto;
text-align:center;
font-family:'Rajdhani';
padding-right: 96px;
}
flashdrive h4 {
}
#media-image {
filter: blur(18px);
-webkit-filter: blur(18px);
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
object-fit: cover;
opacity: 0.2;
}
.fillscreen .media-context {
color: black;
margin: 16px 0 6px 32;
padding-left: 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(19, 137, 139, 0.372);
flex: 9 1;
text-align: left;
cursor: pointer;
font-size: 1.8rem;
font-weight: 400;
font-family: 'Rajdhani', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
color: teal;
}
flashdrive .fillscreen .media-context {
color: teal;
font-size: 1.5rem;
height: 54px;
margin: 0;
padding-left: 64px;
padding-bottom: 0;
display: flex;
align-items: center;
}
flashdrive h4 {
color: #d91e43;
font-size: 1.5rem;
color: #444444;
padding: 24px;
margin: auto;
text-align:center;
font-family:'Rajdhani';
}
#media-status {
color: rgb(160, 28, 28);
font-family: 'Barlow Semi Condensed', Montserrat, system-ui, -apple-system, sans-serif;
font-size: 1.2rem;
background-color: rgba(19, 137, 139, 0.372);
margin: auto;
padding: 6px 36px;
border-radius: 8px;
}
.display-link:hover {
cursor: pointer;
}
#loadMoreButton.show {
opacity: 1.0;
transition: opacity .5s ease-out;
}
#loadMoreButton>a:hover {
cursor: pointer;
}
#loadMoreButton>a {
font-size: 1.2rem;
color: white;
letter-spacing: 1.2;
cursor: pointer;
padding: 6px 6px 6px 24px;
}
.buzzlink #loadMoreButton>a {
font-size: 0.9rem;
letter-spacing: 2;
}
#loadMoreButton>a.icon
{
border-radius: 50%;
border: white 1px solid;
padding: 0;
align-items: center;
}
#loadMoreButton:hover {
cursor: pointer;
background-color: #009AD1;
}
#loadByCalendarIcon, #printConversationIcon, #buzzStreamConversationIcon, #userMentionIcon, #loadByFavoritesIcon {
opacity: 1.0;
margin-left: 12px;
width: 48px;
display: flex;
height: 48px;
border-radius: 50%;
color: wheat;
background-color: #009ad1;
align-items: center;
opacity: 0.05
}
#loadMoreButton:hover #loadByCalendarIcon, #loadMoreButton:hover #printConversationIcon, #loadMoreButton:hover #buzzStreamConversationIcon, #loadMoreButton:hover #userMentionIcon, #loadMoreButton:hover #loadByFavoritesIcon {
opacity: 1.0;
color:white;
}
#loadMoreButton {
/* margin: auto; */
padding: 12px 20px 6px 20px;
background-color: rgba(40, 60, 50, 0.50);
border: 0px solid rgba(0, 0, 0, 0.00);
/* width: 180px; */
display: flex;
text-align: center;
opacity: 0.05;
transition: opacity .5s ease-out;
height: 48px;
align-items: center;
}
#messageFilterButton {
padding: 12px 20px 6px 20px;
/* background-color: rgba(40, 60, 50, 0.80); */
/* border: 1px solid rgba(0, 0, 0, 0.40); */
/* width: 180px; */
display: flex;
text-align: center;
transition: opacity .5s ease-out;
height: 48px;
align-items: center;
position: absolute;
left: 0;
color: black;
font-size: 1rem;
cursor: pointer;
}
.bold-button-item {
letter-spacing: 1.2px;
font-size: 2rem;
padding-left: 5px;
background-color: yellow;
background-image: linear-cs(120deg, #e7f7fc 0%, #f5c30b 100%);
padding: 4px 18px;
border-radius: 20px;
margin-left: 10px;
}
.bold-button-item svg {
display: none;
}
.bold-button-item:hover svg {
display: inline;
}
.email {
font-family: 'Anaheim', sans-serif;
font-weight: 800;
font-size: 1.2rem;
color: teal;
}
.forward-container.email {
font-weight: 200;
font-size: 0.9rem;
}
.ssdropdown .email {
color: #678e19;
border: 0.5px dashed;
padding: 2px 3px;
border-radius: 5px;
font-size: 0.9rem;
background-image: unset;
transition: background-image .4s var(--ease), transform .4s var(--ease)
}
.ssdropdown .email .buzzlink {
/* width: 0%; */
transition: width .4s var(--ease), transform .4s var(--ease)
}
.ssdropdown .email:hover {
color: black;
background-image: linear-gradient(-45deg, #56cece, #6bb3d9);
}
.ssdropdown .email:hover .buzzlink {
/* width: 100%; */
}
#buzzStreamConversationIcon {
margin-left: 12px;
margin-right: 12px;
background-color: #d91e43;
}
/* #userMentionIcon {
margin-left: 12px;
margin-right: 12px;
background-color: #009ad1;
} */
.richtext h1, mdh1 {
font-size: 1.4rem;
font-family: 'Montserrat', sans-serif;
letter-spacing: 0.4;
font-weight: 800;
}
.richtext h2, mdh2 {
font-size: 1.2rem;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
}
.richtext h3, mdh3 {
font-size: 1.2rem;
font-family: 'Barlow Semi Condensed';
font-weight: 800;
}
.richtext h4, mdh4 {
font-size: 1.0rem;
/* font-family: sans-serif; */
font-weight: 500;
}
.richtext .empty {
line-height: 12px;
margin-top: 6px;
margin-bottom: 6px;
}
.richtext blockquote, blockquote {
font-family: 'Anaheim';
font-size: 1.3rem;
}
.received-message .richtext h1, .received-message mdh1 {
color: #5d0e0e;
}
.received-message .richtext h2, .received-message mdh2 {
color: #400808;
}
.received-message .richtext h3, .received-message mdh3 {
color: #311f1f;
}
.received-message .richtext h4, .received-message mdh4 {
color: black;
}
.received-message blockquote {
padding: 8px 6px;
border-left: 5px solid #ffc107;
border-right: 0px;
background-color: #ffe8a5;
}
.sent-message .richtext h1, .sent-message mdh1 {
color: #056284;
}
.sent-message .richtext h2, .sent-message mdh2 {
color: #1b80a5;
}
.sent-message .richtext h3, .sent-message mdh3 {
color: #5298b1;
}
.sent-message .richtext h4, .sent-message mdh4 {
color: #176583;
}
.sent-message blockquote {
padding: 8px 6px;
border-right: 5px solid #4fc3f7;
border-left: 0px;
background-color: #c9edfd;
}
.modal-content {
border: unset;
}
doublestrike {
text-decoration: line-through;
text-decoration-style: double;
}
code {
font-family: Lekton, monospace;
font-size: 1.2em;
color: #333;
display: inline-block;
}
.recent-message-item code {
display: inline-block;
font-size: 1rem;
}
/* This can be used for overriding elements such as logo while printing
@media print
{
.mccp-logo
{
display: none;
}
} */
@media (max-width: 767px) {
.steps {
flex-direction: column;
gap: 40px;
}
.arrow {
display: none;
}
}
@media only screen and (min-width: 600px) {
nav {
padding-left: 0;
position: fixed;
}
.conversations-window {
padding-left: 0;
padding-top: 64px;
height: 100vh;
overflow: hidden;
}
.message-text {
height: 60px;
border: none;
border-radius: 4px;
background-color: #fff;
width: calc(100% - 150px);
}
}
@media only screen and (max-width: 767px) {
nav {
padding-left: 0px;
position: fixed;
}
.conversations-window {
padding-left: 0;
padding-top: 64px;
height: 100vh;
overflow: hidden;
}
.message-text {
height: 60px;
border: none;
border-radius: 4px;
background-color: #fff;
width: calc(100% - 150px);
}
}
.modal-content h4 {
font-size: 3rem;
}
@media only screen and (min-width: 992px) {
nav {
padding-left: 30vw;
position: fixed;
}
.conversations-window {
/* padding-left: 300px; /* Sandeep */
margin-left: 30vw;
/* Sandeep */
margin-right: 0;
padding-top: 64px;
height: 100vh;
overflow: hidden;
position: absolute;
width: calc(100% - 30vw);
}
.message-text {
height: 60px;
border: none;
border-radius: 4px;
background-color: #fff;
width: calc(70% - 150px);
}
leftshim {
position: fixed;
top: 0;
right: 100%;
padding: .5em 1em;
white-space: nowrap;
font-size: 120%;
color: rgba(0, 0, 0, .1);
-moz-transform: rotate(-90deg);
-moz-transform-origin: top right;
-ms-transform: rotate(-90deg);
-ms-transform-origin: top right;
-o-transform: rotate(-90deg);
-o-transform-origin: top right;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: top right;
transform: rotate(-90deg);
transform-origin: top right;
}
}
@media only screen and (min-width: 1200px) {
.message-text {
height: 60px;
border: none;
border-radius: 4px;
background-color: #fff;
width: calc(75% - 150px);
}
}
/* if no footer */
.modal-content.mega-footer {
height: calc(100% - 64px);
}
.modal-content {
height: calc(100% - 64px);
}
.modal-content h4 {
padding-top: 1vh;
padding-bottom: 1vh;
font-size: 2.0rem;
}
.modal-content h5 {
font-size: 1.0rem;
color: #555;
font-family: 'Barlow Semi Condensed', Avenir, sans-serifg;
}
.modal-content p {
font-size: 1rem;
}
/* See conversation-hint */
.note {
position: absolute;
bottom: 0;
margin-right: 58px;
text-align: right;
right: 0;
padding-right: 6px;
z-index: 102;
padding: 0 10px;
border: 1px solid rgba(0, 154, 209, 0.1);
background: rgba(200,200,200,0.1);
border-radius: 5px;
line-height: 1.4rem;
}
pin {
font-family: 'Montserrat', 'Rajdhani', sans-serif;
font-size: 4rem;
font-weight: 700;
color: #888888;
}
#infoOrWarningText {
letter-spacing: 0.4;
line-height: 1.75;
}
#infoOrWarningText .subtitle {
font-family: 'Montserrat', 'Rajdhani', sans-serif;
font-size: 1.4rem;
margin-top: 12px;
color: #333;
margin-top: 2rem;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
#infoOrWarningText .warning {
font-family: 'Montserrat', 'Rajdhani', sans-serif;
font-size: 1.2rem;
color: #000;
margin-top: 1rem;
margin-bottom: 1rem;
padding-top: 6px;
padding-bottom: 6px;
background-color: #ff003080;
}
#infoOrWarningText div {
margin-bottom: 1rem;
}
#inputMessageInfoText {}
.dialogInfoText {
font-size: 1.4rem;
color: #555;
font-family: 'Barlow Semi Condensed', Avenir, sans-serif;
}
.dialogInfoText div {
margin-bottom: 1rem;
}
#refresh-bottom-text, #refresh-top-text {
font-size: 1rem;
}
.extra-action {
color: rgba(0, 0, 0, 0.3);
}
.extra-action:hover {
cursor: pointer;
}
.tag-icon {
color: rgba(0, 154, 209, 0.5);
}
.tag-icon:hover {
cursor: pointer;
color: rgba(0, 154, 209, 0.5);
}
.fav-icon {
color: rgba(217, 31, 67, 0.5);
}
.fav-icon > span, .fav-icon-count, .reaction-count {
font-size: 12px;
vertical-align:super;
color: teal;
}
.fav-icon:hover {
cursor: pointer;
color: rgba(217, 31, 67, 0.5);
}
.raw-text-icon {
color: teal;
}
.raw-text-icon:hover {
cursor: pointer;
color: teal;
}
.thread-icon {
color: rgba(0, 0, 0, 0.5);
}
.thread-icon:hover {
cursor: pointer;
color: rgba(0, 0, 0, 1.0);
}
.readability-icon {
color: rgba(0, 0, 0, 0.5);
}
.readability-icon:hover {
cursor: pointer;
color: rgba(0, 0, 0, 1.0);
}
.stack-icon {
color: rgba(0, 0, 0, 0.5);
}
.stack-icon:hover {
cursor: pointer;
color: rgba(0, 0, 0, 1.0);
}
.message-separator {
display: inline-block;
width: 100%;
background-color: rgba(0, 0, 0, 0.0);
border-top: 4px solid rgba(0, 0, 0, 0.06);
padding-top: 4px;
margin-bottom: 6px;
margin-top: 6px;
}
.message-separator.subtle {
/* background-color: rgba(200,200,0,0.16); */
border-top: 4px solid rgba(0, 0, 0, 0.01);
}
.date-separator {
/* border-color: rgba(0, 0, 0, 0.06); */
padding: 8px;
border-radius: 0px;
/* width: 7rem; */
border: 2px solid rgba(0, 0, 0, 0.09);
font-family: 'Montserrat', sans-serif;
margin-bottom: 6px;
display: table;
cursor: pointer;
}
.date-separator:hover {
cursor: pointer;
/* background-color: rgba(96, 155, 175, 0.7); */
background-image: linear-gradient(120deg, #2edfde 0%, #9ce843 100%);
border: 2px solid transparent;
}
.meta-message {
border-color: rgba(0, 0, 0, 0.0);
background-color: rgba(96, 155, 175, 0.7);
padding: 3px 10px 3px 10px;
border-radius: 0px;
max-width: 90%;
border: 2px solid rgba(0, 0, 0, 0.06);
font-family: 'Montserrat', sans-serif;
margin: auto;
display: table;
}
.meta-message.checkout {
background-color: #895e6730;
}
.meta-message.checkin {
background-color: #17a2b826;
}
.meta-message.eventStart {
background-color: #58b81726;
}
.meta-message.eventEnd {
background-color: #b8172026;
}
.meta-message.eventAnnouncement {
background-color: #5e9e9a26;
}
.meta-message:hover {
cursor: pointer;
background-color: rgba(96, 155, 175, 1);
}
.meta-message:hover .meta-message-text {
color: white;
}
.meta-message-text {
text-align: center;
font-size: 0.8rem;
margin-bottom: 0px;
margin-top: 0px;
padding: 0;
width: 100%;
word-break: break-word;
color: #e3e3d3;
z-index: 101;
}
.meta-message.checkin .meta-message-text, .meta-message.checkout .meta-message-text, .meta-message.eventStart .meta-message-text, .meta-message.eventEnd .meta-message-text, .meta-message.eventAnnouncement .meta-message-text {
color: black;
}
.meta-message.eventStart:hover, .meta-message.eventEnd:hover, .meta-message.eventAnnouncement:hover {
background-image: linear-gradient(120deg, #eeb6e1 0%, #e9ceac 100%);
}
.meta-message.checkin:hover .meta-message-text, .meta-message.checkout:hover .meta-message-text {
color: white;
}
.message-meta-action {
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 4px;
margin-top: 4px;
font-family: 'Montserrat', sans-serif;
}
.message-meta-action.meta {
display: none;
}
.meta-message:hover .message-meta-action.meta {
display: inline-block;
}
.meta-message:hover .message-meta-hint.meta {
display: none;
}
/* One line banner to show specific messages like "fitering", "load more", etc */
.banner {
display: none;
padding: 8px;
border-radius: 0px;
color: rgba(0, 0, 0, 0.06);
font-family: 'Montserrat', sans-serif;
margin-bottom: 6px;
max-height: 44px;
height: 44px;
}
#top-banner, #floating-banner {
background: transparent;
padding-top: 32px;
z-index: 800;
width: 100%;
height: 256px;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
}
#top-banner:hover {
background: linear-gradient(180deg, #ffffff 0%, transparent 100%);
}
#floating-banner {
background-color: white;
display: flex;
}
#top-banner:hover #loadMoreButton, #top-banner:hover #loadByCalendarIcon, #top-banner:hover #printConversationIcon, #top-banner:hover #buzzStreamConversationIcon, #top-banner:hover #userMentionIcon, #top-banner:hover #loadByFavoritesIcon {
opacity: 1.0;
}
.groupMembersLink:hover {
cursor: pointer;
color: #947a10;
opacity: 1.0;
}
.groupMembersLink {
color: #947a10;
opacity: 0.8;
}
.groupMembersBroadcast:hover {
cursor: pointer;
opacity: 1.0;
}
.groupMembersBroadcast {
color: teal;
opacity: 0.8;
padding-left: 6px;
}
#groupMembersBroadcast {
display: none;
}
.individualProfileLink:hover {
cursor: pointer;
color: #009ad1;
opacity: 1.0;
}
.individualProfileLink {
color: #009ad1;
opacity: 0.8;
}
.conversationActionLink:hover {
cursor: pointer;
color: #947a10;
opacity: 1.0;
}
.conversationActionLink {
color: #947a10;
opacity: 0.4;
}
.conversationAction {
margin-left: 12px;
}
.calendarViewLink:hover {
cursor: pointer;
color: steelblue;
opacity: 1.0;
}
.calendarViewLink {
color: steelblue;
opacity: 0.8;
margin-left: 12px;
}
i {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
/*=========================Search Users for forward=========================*/
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.dropdown-container, .instructions {
width: auto;
margin: 20px auto 0;
font-size: 14px;
font-family: sans-serif;
}
.instructions {
width: 100%;
text-align: center;
}
.dropdown-button {
float: left;
width: 100%;
background: whitesmoke;
padding: 10px 12px;
cursor: pointer;
border: 1px solid lightgray;
box-sizing: border-box;
.dropdown-label, .dropdown-quantity {
float: left;
}
.dropdown-quantity {
margin-left: 4px;
}
.fa-filter {
float: right;
}
}
.dropdown-list {
float: left;
width: 100%;
border: 1px solid lightgray;
border-top: none;
box-sizing: border-box;
padding: 10px 12px;
input[type="search"] {
padding: 5px 0;
}
ul {
margin: 10px 0;
max-height: 200px;
overflow-y: auto;
input[type="checkbox"] {
position: relative;
top: 2px;
}
}
}
[type=checkbox] {
position: relative;
opacity: 1;
}
.stack-message.sent {
background-color: #eaf7ff;
border-right: 2px solid #009AD1;
}
.stack-message.received {
background-color: #f9efd1;
border-right: 2px solid #e4b707;
}
.stack-message {
background-color: #F5FBFD;
padding: 8px 16px 4px 12px;
margin-top: 8px;
margin-bottom: 16px;
width: 80%;
}
.thread-message {
background-color: #F5FBFD;
padding: 8px 16px 4px 12px;
margin-top: 0px;
margin-bottom: 16px;
width: 80%;
}
.thread-message.sent {
background-color: #eaf7ff;
border-left: 2px solid #009AD1;
float: left;
}
.thread-message.received {
background-color: #f9efd1;
border-left: 2px solid #e4b707;
}
.thread-message.unselected {
background-color:#ccc;
}
.thread-message.overlay .sent-message, .thread-message.overlay .received-message {
opacity: 0.3;
}
#lightning-screen .overlay-buttons {
opacity: 1;
}
#lightning-screen .top-row {
opacity: 1;
position: absolute;
top: 0;
right: 84px;
font-family: Barlow Semi Condensed;
font-size: 10px;
color: gray;
}
.thread-message .thread-overlay {
right: 0;
top: 0;
/* display: flex;
align-items: flex-start;
justify-content: flex-start; */
padding: 12px;
float: right;
cursor: pointer;
z-index: 9999999;
position: relative;
}
.thread-overlay svg {
color: #009ad1;
}
.forward-notice.sent-message, .event-notice.sent-message {
background: rgba(0, 144, 172, 0.7);
float: left;
align-self: center;
}
.forward-notice.received-message, .event-notice.received-message {
float: right;
width: auto;
background: #999;
align-self: center;
}
.event-notice.received-message {
background: saddlebrown;
}
.event-notice.sent-message {
background: teal;
}
.forward-notice, .event-notice {
font-size: 0.8rem;
display: inline;
margin: 4px 10px;
padding: 0 5px;
background: #777;
color: #fff;
text-transform: uppercase;
font-family: 'Anaheim', sans-serif;
}
.forward-users {
padding: 16px;
font-size: 16px;
border-bottom: 2px solid #f3f5f8;
}
.forward-users:hover {
cursor: pointer;
background-color: #f3f5f8;
}
.forward-groups {
padding: 16px;
font-size: 16px;
border-bottom: 2px solid #f3f5f8;
}
.forward-groups:hover {
cursor: pointer;
background-color: #f3f5f8;
}
.collection-header h6 {
font-family: 'Anaheim', sans-serif;
}
.active-convo {
background-color: #f4f4f4 !important;
}
.active-buzzflow {
background-color: #cee6e8 !important;
}
.buzzflow-indicator {
display: none;
}
.buzzflow-indicator.show {
display: inline-block;
}
.title.active-buzzflow:after {
content: '•';
}
.recent-drop-target {
border-right: solid 4px salmon;
}
.recent-overlay {
position: fixed;
width: 100%;
height: 90%;
background-color: aliceBlue;
border: 3px dashed #009AD1;
display: none;
}
.recent-image-overlay, .favorite-image-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: #00000070;
/* border: 3px dashed #009AD1; */
/* display: none; */
font-size: 1.8rem;
font-weight: 500;
font-family: Montserrat;
display: flex;
justify-content: center;
align-items: center;
left: 0;
top: 0;
/* -webkit-text-stroke: 0.75px #00000070; */
color: white;
text-shadow: 20px 20px 20px #009ad1, -1px -1px 18px #9a1c1c70, 1px -1px 17px #a3232370, -1px 1px 5px #71181870, 10px 8px 10px #b51f1fad;
}
.group-image .recent-image-overlay , .group-image .favorite-image-overlay {
background-color: #cda92ca3;
}
.diamond-image .recent-image-overlay, .user-image .recent-image-overlay {
background-color: #239ca39e;
}
#eventNotesLabel {
transform: translateY(-24px) scale(0.8);
transform-origin: 0 0;
}
#send-as-calendar {
text-align: center;
position: absolute;
top: 62px;
right: 42px;
width: 192px;
display: none;
}
.upload-thumbnail-container.ics #send-as-calendar {
display: block;
}
.upload-thumbnail-container.csv #send-as-calendar {
display: none;
}
/* Add the following to the common dialog management */
actionbutton, .actionbutton, .parameter {
padding: 6px 2vw;
margin: 6px;
letter-spacing: 2px;
border: 0;
background: #009AD1;
color: white;
font-size: 1.1rem;
text-transform: uppercase;
vertical-align: .25em;
cursor: pointer;
border-radius: .3em;
}
.parameter {
text-transform: unset;
padding: 5px 12px;
font-size: 0.8rem;
background: transparent;
border: 1px solid #999;
margin: 4px;
color: #777;
height: max-content;
}
.actionbutton.lightgray {
background: lightgray;
color: white;
}
actionbutton.compact {
max-height: 28px;
}
.parameter.error {
color: crimson;
background-color: beige;
border-color: crimson;
font-weight: bold;
}
.dynamic {
font-weight: bold;
}
.pseudo-input:hover .parameter {
border: 0;
font-weight: bold;
margin: 0;
padding: 0;
vertical-align: 0;
}
.parameter .variable {
display: inline-block;
}
.pseudo-input:hover .parameter .key, .message-clearview .parameter .key {
display: none;
}
.pseudo-input .parameter .value {
display: none;
background-color: beige;
}
.dynamic .value {
display: inline-block;
}
.dynamic .key {
display: none;
}
.message-clearview .parameter .value {
display: inline-block;
}
.inline-image {
vertical-align: middle; /* Align the image vertically with the text */
display: inline-block; /* Allow the image to behave like a block element within a line */
width: auto; /* Maintain the image's original aspect ratio */
height: auto; /* Maintain the image's original aspect ratio */
max-width: 30px; /* Set a maximum width for the image */
}
.pseudo-input:hover .parameter .value {
display: inline-block;
font-family: 'Anaheim';
color: teal;
font-size: 1.5rem;
letter-spacing: 0;
}
actionbutton.invitation-button {
background: #009AD1;
margin-left: 0px;
cursor: pointer;
}
actionbutton:hover, .actionbutton:hover, .actionbutton.mini:hover, actionbutton.mini:hover {
background: #d91e43;
}
actionbutton:focus, .actionbutton:focus {
box-shadow: 0 0 5px 3px #f08;
}
actionbutton, .actionbutton.mini, actionbutton.mini {
padding: 5px 12px;
font-size: 0.8rem;
background: #999999ba;
margin: 4px;
align-items: center;
display: inline-flex;
}
actionbutton.hollow {
font-size: 0.66rem;
border: solid 1px #63949a;
color: #63949a;
background-color: transparent;
}
.animated-btn.mini {
height: 24px;
}
.actionbutton.mini {
max-height: 24px;
}
.actionbutton.mini.buzzflow {
max-height: unset;
}
.files-item-action-button {
display: none;
}
.files-item:hover .files-item-action-button {
display: block;
}
actionbutton.light {
padding: 5px 12px;
font-size: 0.8rem;
background: transparent;
border: 1px solid #999;
margin: 4px;
color: #777;
}
actionbutton.light.teal {
background: teal;
border: 1px solid teal;
color: white;
}
actionbutton.light.grey, actionbutton.light.gray {
background:#777;
border: 1px solid #777;
color: white;
}
actionbutton.light.selected {
background: #50b1b8;
border: 1px solid #50b1b8;
color: white;
}
actionbutton.micro, .actionbutton.micro, actionbutton.tiny {
max-height: 24px;
padding: 2px 8px;
margin-left: 2px;
margin-right: 2px;
}
actionbutton.micro.context, .actionbutton.micro.context {
max-height: 28px;
display: none;
margin-left: 8px;
border-radius: 5px;
padding: 3px 8px;
}
.popup-list-item:hover actionbutton.micro.context {
background-color: #009ad1;
display: inline-flex;
}
actionbutton.micro svg, .actionbutton.micro svg {
max-height: 32px; max-width: 32px;
}
actionbutton.disabled, .actionbutton.disabled {
background-color: lightGray;
}
.micro.group {
background: #947a10;
}
body.theme-bold .micro.group {
color: #78630e;
}
.micro.subtle {
background: transparent;
color: darkgoldenrod;
}
.micro.subtle.icon {
float: right;
border-radius: 50%;
width: 32px;
flex: 0 1 auto;
height: 28px;
background: #ffffff57;
display: flex;
justify-content: center;
align-items: center;
}
.buzz-number {
font-family: 'JetBrains Mono', 'Barlow Semi Condensed', sans-serif;
font-size: 1.75rem;
}
.micro {
padding: 2px 6px 2px 6px;
margin: auto;
letter-spacing: 2px;
border: 0;
background: #009AD1;
color: white;
font-size: 0.8rem;
text-transform: uppercase;
cursor: pointer;
border-radius: 0;
}
.micro.hollow {
background: transparent;
color: white;
border: 1px solid rgba(255,255,255,0.5);
padding: 1px 4px;
font-size: var(--xx-small);
}
.micro.hollow.dark {
color: teal;
border-color: rgba(0, 0, 0, 0.5);
margin-left: 5px;
}
/*
*
* poll
*
*/
.poll, .vote {
margin: 30px 0px 30px 12px;
border: 0px solid rgba(0, 0, 0, .99);
border-radius: 10px;
overflow: hidden;
z-Index: 100;
}
.poll {
height: 104px;
width: 256px;
}
.vote {
width: 100%;
margin: 30px 12px 30px 12px;
}
.poll .poll-bg {
position: relative;
background: #aae1fa;
height: 104px;
/* The image used
background-image: url("/static/wallpapers/antelope.jpg"); */
/* Add the blur effect
filter: blur(16px);
-webkit-filter: blur(16px); */
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.poll.me {
align-items: flex-start;
margin: 30px 12px 30px 0;
}
.poll.me .poll-bg {
background-color: rgba(255,255,255,0.3);
}
.poll.other {
align-items: flex-end;
}
.poll.other .poll-bg {
background-color: #aae1fa;
}
.poll .poll-content {
top: -104px;
left: 0;
right: 0;
height: 72px;
position: relative;
overflow: hidden;
background: rgba(250, 250, 250, .5);
}
.poll.me .poll-content {
background: rgba(250, 250, 250, .2);
}
.poll.other .poll-content {
background: rgba(250, 250, 250, .5);
}
.poll-choice-names {
line-height: 18px;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
overflow-y: auto;
}
.poll-choice-names actionbutton {
margin: 6px 6px 6px 0;
}
.poll-choice-items {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.poll-choice-items title {
font-family: 'Barlow Semi Condensed', Anaheim, sans-serif;
font-size: 1.6rem;
color: teal;
display: block;
margin-top: 8px;
border-bottom: teal 1px dotted;
margin-top: 8px;
}
.poll .poll-content .poll-middle {
position: absolute;
margin: auto;
width: 100%;
left: 0;
top: calc(33%);
}
.poll .poll-content .poll-image {
display: none;
margin: auto;
height: 48px;
width: 48px;
}
.poll .poll-content .poll-caption {
margin: auto;
height: 24px;
width: 100%;
}
.poll-button .poll-icon {
margin-right: 8px;
}
.poll .poll-content>:first-child {
right: 8px;
top: 12px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
}
.poll .poll-footer {
padding: 4px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: flex-start;
flex-direction: row;
top: -114px;
position: relative;
}
#pollMessageStatusListing, .poll-list {
}
#pollMessageStatusListing li, .poll-list li {
list-style-type: square;
padding-left: 8px;
}
/* 'left' is misnomer */
.poll .poll-footer .poll-footer-left {
float:left;
flex-grow:8;
font-family: "Barlow Semi Condensed", sans-serif;
font-size: 1rem;
line-height: 2.6rem;
}
.vote .vote-footer .poll-footer-left {
font-size: 1rem;
line-height: 2.6rem;
}
.vote .poll-content .poll-middle {
display: flex;
flex-direction: row;
margin: auto;
width: 100%;
}
.vote.me .poll-content .poll-middle {
justify-content: flex-start;
}
.vote.other .poll-content .poll-middle {
flex-direction: row-reverse;
}
.vote .poll-content .poll-image {
margin: 0;
height: 24px;
width: 24px;
}
.vote .poll-content .poll-caption {
display: flex;
align-items: center;
justify-content: space-around;
justify-items: center;
}
.vote .poll-content .poll-caption span {
margin: 0 12px;
font-family: 'Montserrat', sans-serif;
font-size: 1.25rem;
}
.vote.me .poll-content .poll-caption span {
margin: 0 12px 0 0;
}
.vote.other .poll-content .poll-caption span {
margin: 0 0 0 12px ;
}
.poll.me .poll-footer {
background-color: rgba(0,0,0,0.1);
}
.poll.other .poll-footer {
}
.poll .poll-footer-choices {
display:flex;
flex-grow:1;
padding: 6px;
}
.poll .poll-footer>a {
margin-left: 0;
padding: 0;
height: 28px;
border-bottom: none
}
.poll .poll-footer>a>img {
margin: 6px;
width: 16px;
height: 16px
}
.poll .poll-button {
background-color: #009AD1;
font-size: 0.75rem;
font-family: sans-serif;
padding: 1px 6px;
border-radius: 5px;
color: white;
float: right;
margin: 0 0 0 4px;
cursor: pointer;
}
#pollMessageStatusDetailsMessage .poll-button {
background-color: lightgray;
font-size: 0.9rem;
font-family: sans-serif;
padding: 4px 8px;
border-radius: 5px;
color: black;
margin: 0 4px 10px 0;
}
.poll.me .poll-button {
background-color: rgba(0,0,0,0.3);
}
.poll.other .poll-button {
background-color: #009AD1;
}
.poll .poll-button.readonly {
background-color: rgba(0,0,0,0.05);
font-size: 0.75rem;
padding: 1px 6px;
border-radius: 5px;
color: #333;
}
.poll .poll-button.revoked , .poll .poll-button.destructive {
background-color: #d91e43;
}
.poll .poll-button.positive {
background-color: #009ad1;
}
.poll .poll-button.neutral {
background-color: gray;
}
/* Vote */
.vote .poll-button {
background-color: #009AD1;
font-size: 0.75rem;
font-family: sans-serif;
padding: 1px 6px;
border-radius: 0px;
color: white;
float: right;
margin: 0 0 0 4px;
cursor: pointer;
}
.vote.me .poll-button {
background-color: rgba(0,0,0,0.3);
margin: 0 6px 0 0;
}
.vote.other .poll-button {
background-color: #009AD1;
margin: 0 0 0 6px;
}
.vote .poll-button.readonly {
background-color: rgba(0,0,0,0.05);
font-size: 0.75rem;
padding: 1px 6px;
border-radius: 5px;
color: #333;
}
.vote .poll-button.revoked , .poll .poll-button.destructive {
background-color: #d91e43;
}
.vote .poll-button.positive {
border: 1px solid #909a9e;
background-color: #ffffff;
color: black;
letter-spacing: 1px;
font-size: 0.8rem;
}
.vote.category .poll-button.positive {
font-size: 1.0rem;
}
.vote .poll-button.neutral {
border: 1px solid gray;
background-color: #ffffff;
color: black;
letter-spacing: 1px;
font-size: 1rem;
}
.vote .poll-footer-choices {
display: flex;
flex-grow: 1;
margin-top: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.vote.me .poll-footer-choices {
justify-content: flex-start;
}
.vote.other .poll-footer-choices {
display:flex;
flex-grow:1;
justify-content: flex-end;
}
.vote .poll-1footer-choices .poll-button {
padding: 4px 16px;
margin-bottom: 12px;
font-family: Montserrat, 'Barlow Semi Condensed', Anaheim, sans-serif;
font-weight: 800;
border-radius: 5px;
text-transform: uppercase;
}
.vote.category .poll-footer-choices .poll-button {
}
.vote .poll-response {
border: 1px solid lightgray;
background-color: #00000010;
padding: 4px 6px;
margin-right: 0;
}
.vote.me .poll-response {
margin-right: 6px;
}
.vote.other .poll-response {
margin-left: 6px;
}
.vote.other {
margin: 30px 0px 30px 0px;
}
/* .poll-footer-choices.single .poll-button::before {
content: url(/static/icons/dot-circle-black-small.png);
border: 1px solid black;
}
.poll-footer-choices.multiple .poll-button.selected::before {
content: url(/static/icons/check-circle-black-small.png);
}
.poll-footer-choices.single .poll-button.selected::after {
content: url(/static/icons/dot-circle-black-small.png);
border: 1px solid black;
}
.poll-footer-choices.multiple .poll-button::after {
content: url(/static/icons/check-circle-black-small.png);
} */
.vote .poll-button.positive.selected, .vote .poll-button.selected, .poll-button.selected {
background-color: hsl(39deg 67.69% 85.61%);
}
.poll-button.disabled {
background-color: #dddddd;
text-decoration-line: line-through;
}
.drop-shadow {
position: relative;
/* width: 90%; */
}
/* Drop Shadow for buttons */
.drop-shadow:before,
.drop-shadow:after {
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
left: 10px;
width: 50%;
height: 20%;
max-width: 300px;
box-shadow :0 15px 10px rgba(0, 0, 0, 0.7);
transform: rotate(-3deg);
}
.drop-shadow:after{
right: 10px;
left: auto;
transform: rotate(3deg);
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
max-height:100px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
/* Rotated box */
.rotated {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rotated > :first-child:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.poll h5 {
margin: 0 0 0 12px;
font-weight: 400;
color: #333;
text-align: left;
font-size: 1rem;
font-family: Rajdhani;
}
.line-poll .poll-content>div:first-child {
top: 52%;
width: 60%;
height: 8px
}
.circle-poll .poll-content>div:first-child {
width: 120px;
height: 120px
}
.semi-circle-poll .poll-content>div:first-child {
width: 160px;
height: 80px
}
.customshape-poll .poll-content>:first-child {
height: 95%;
width: 160px;
display: block
}
.modal:focus {
outline: -webkit-focus-ring-color auto 0px;
}
.modal .modal-footer {
height: 84px;
position: absolute;
bottom: 0;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 100%;
border: 0;
}
.modal .modal-footer.compact {
height: 72px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.modal .modal-footer.compact.stat {
width: 100%;
border: 3px solid #d91e43;
background-color: #d91e43;
background: linear-gradient(90deg, #d91e43 3px, transparent 1%) center, linear-gradient(#d91e43 3px, transparent 1%) center, lightsalmon;
background-size: 4px 4px;
}
.raw-text-warning {
display: "none";
}
.large {
font-family: 'Barlow Semi Condensed';
font-size: 2rem;
padding: 74px 12px 24px;
background: #00ced144;
}
.modal .modal-footer.compact.stat .raw-text-warning {
display: "inline-block";
}
#inviteUserForm>div.modal-content>p, #inviteVideoUserForm>div.modal-content>p {
color: #888;
font-size: 1.0rem;
}
#submitInviteGroupRawInititate {
border: 1px solid #d91e43;
/* color: #d91e43; */
background: #d91e43;
}
#submitVideoAux, #submitSessionVideoAux, #submitRepeatEventMessage, #submitInviteGroupPreRegister,
#create-group-groups-button, .light-left-button {
position: absolute;
left: 64px;
background: transparent;
border: 1px solid #009ad1;
color: #0091d1;
}
.light-button {
background: transparent;
border: 1px solid #009ad1;
color: #0091d1;
}
.modal-footer .actionbutton.left.bright-button {
left: 64px;
background-image: linear-gradient(152deg, #f8b042, #d91e43);
color: white;
border: unset;
}
.actionbutton.micro.bright-button.alt {
left: 64px;
background-image: linear-gradient(152deg, #25f6e9, #08836f);
color: white;
border: unset;
}
.bright-button {
background-image: linear-gradient(152deg, #19dfcc, #08836f);
color: white;
border: unset;
}
.actionbutton.micro.bright-button {
left: 64px;
background-image: linear-gradient(152deg, #f8b042, #d91e43);
color: white;
border: unset;
border-radius: 5px;
}
.light-left-button-group {
position: absolute;
left: 64px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.left0 {
left: 0;
}
.right0 {
right: 0;
}
.modal-footer .actionbutton.left {
position: absolute;
left: 64px;
background: transparent;
border: 1px solid #009ad1;
color: #0091d1;
}
#submitSessionVideoAux {
left: 0;
}
.session-highlight {
background-color: #d91e43;
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
margin-left: 12px;
}
.recent-highlight.visible {
display: inline-block;
}
.recent-highlight.green {
background-color: #1ed9bf;
}
.recent-highlight.blue {
background-color: #009ad1;
}
.recent-highlight {
background-color: #d91e43;
width: 12px;
height: 12px;
border-radius: 50%;
display: none;
margin-left: 12px;
}
.recent-mention-highlight {
background-color: #009ad1;
width: 12px;
height: 12px;
border-radius: 50%;
display: none;
margin-left: 12px;
}
.bold.text {
font-weight: 800;
font-size: 1.4rem;
font-family: Montserrat, sans-serif;
}
.italic.text {
font-style: italic;
}
.recent-mention-highlight.no-anim, .recent-highlight.no-anim {
width: 24px;
height: 24px;
align-content: center;
justify-content: center;
flex-wrap: revert;
}
.recent-mention-highlight.no-anim {
background-color: lightblue;
}
.recent-highlight.no-anim {
background-color: coral;
color: white;
width: 24px;
height: 24px;
}
.recent-highlight.no-anim svg, .recent-mention-highlight.no-anim svg {
align-self: center;
}
.recent-mention-highlight.show.no-anim::before {
content: "@";
color: black;
}
.recent-highlight.show.no-anim::before {
content: "!";
color: black;
}
.recent-message-item.stat .recent-highlight {
display: inline-block;
}
#recentsCategoryFilter.hidden, #recentsCategoryTypeFilter.hidden {
display: none;
}
#recentsCategoryFilter, #recentsCategoryTypeFilter {
display: flex;
margin-bottom: 8px;
text-transform: uppercase;
padding: 8px 8px;
flex-wrap: wrap;
max-height: 48px;
overflow-y: hidden;
cursor: pointer;
}
#recentsCategoryFilter {
background-image: linear-gradient(120deg, #e0e0e0 0%, #efefef 100%);
}
#recentsCategoryTypeFilter {
justify-content: space-between;
/* background-image: linear-gradient(150deg, #61d6bc61 0%, #c0c55b85 100%); */
height: 0;
padding: 0 8px;
display: flex;
align-items: center;
font-family: 'Barlow Semi Condensed', sans-serif;
color:#197171;
}
#recentsCategoryTypeFilterTitle {
display: flex;
justify-content: space-between;
width: 100%;
}
#recentCollectionHeader:hover {
background-image: linear-gradient(150deg, #61d6bc61 0%, #c0c55b85 100%);
transition: all 0.5s ease-in-out;
}
#recentCollectionHeader:hover #recentsCategoryTypeFilter {
height: 48px;
padding: 8px 8px;
transition: all 0.5s ease-in-out;
}
#recentsCategoryFilter:hover {
max-height: unset;
overflow-y: visible;
}
#recentsCategoryFilter .poll-button {
border: 1px solid #909a9e;
background-color: #ffffff;
color: black;
letter-spacing: 1px;
font-size: 1rem;
padding: 6px 8px;
height: 32px;
margin-bottom: 6px;
margin-right: 6px;
}
#recentsCategoryFilter .clear-filter {
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
opacity: 0.05;
}
#recentsCategoryFilter:hover .clear-filter {
opacity: 1;
}
#video-session-order-text {
color: #d91e43;
}
.repeat-end-type {
font-weight: 400;
font-size: 1rem;
color: teal;
}
.repeat-end-date {
font-weight: 400;
font-size: 1rem;
color: teal;
}
.dialogclose, .mapicons, .dialogicons {
top: 24px;
right: 24px;
width: 64px;
height: 64px;
position: absolute;
z-index: 10005;
display: flex;
justify-items: center;
align-items: center;
justify-content: center;
align-content: center;
}
.mapicons.small {
width: 32px;
height: 32px;
background-color: transparent;
box-shadow: unset;
color: #000;
}
.dialogicons a {
color: #009ad1;
}
.dialogclose.auxbutton {
top: 24px;
right: 96px;
height: 64px;
width: auto;
display: flex;
align-items: center;
justify-items: center;
position: absolute;
}
#organizationsMenuInsightsBtn.insights-btn,
actionbutton#organizationsMenuInsightsBtn.insights-btn {
background: linear-gradient(135deg, #0891b2 0%, #0d9488 50%, #10b981 100%);
background-color: #0d9488;
border: none;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(8, 145, 178, 0.35);
}
#organizationsMenuInsightsBtn.insights-btn:hover,
actionbutton#organizationsMenuInsightsBtn.insights-btn:hover {
background: linear-gradient(135deg, #0e7490 0%, #0f766e 50%, #059669 100%);
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.45);
}
#organizationsMenuInsightsBtn.insights-btn img,
actionbutton#organizationsMenuInsightsBtn.insights-btn img {
position: relative;
z-index: 1;
}
.dialogclose img, .mapicons img {
width: 44px;
height: 44px;
position: absolute;
z-index: 10005;
}
.mapicons a {
top: 0px;
right: 0px;
background-color: rgba(0, 0, 0, 0.0);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0);
}
.mapicons {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 32px;
color: #fff;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
}
.mapicons svg {
/* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
}
#pdf-viewer .dialogclose {
position: fixed;
top: 12px;
}
.material-icons.dialogclose-icons.small {
width: 32px;
height: 32px;
color: #ccc;
font-size: 1.5rem;
}
.material-icons.dialogclose-icons {
/* width: 64px;
height: 64px; */
color: #ccc;
font-size: 3rem;
text-align: center;
vertical-align: middle;
cursor: pointer;
}
.material-icons {
vertical-align: middle;
}
.padclose {
top: 4px;
right: 4px;
width: 24px;
height: 24px;
position: absolute;
z-index: 10005;
}
.material-icons.padclose-icons {
width: 24px;
height: 24px;
color: #aaa;
font-size: 2rem;
text-align: center;
vertical-align: middle;
}
.chip>img {
/* padding: 4px;
margin: 8px 8px 0 0px; */
height: 40px;
width: 40px;
background-color: #aaa;
}
#add-buzzlink-streams-user-chips .chip>img, #add-user-chips .chip>img {
background-color: transparent;
/* border: 1px solid black; */
}
#add-buzzlink-streams-user-chips .chip>img {
height: 24px;
width: 24px;
}
#add-buzzlink-streams-user-chips .chip.selected, #add-user-chips .chip.selected {
color:white;
background-color: teal;
}
#add-buzzlink-streams-user-chips .chip, #add-user-chips-xxx .chip {
border: 1px solid #0b4256;
font-size: 13px;
letter-spacing: 0;
font-weight: 300;
background-color: #f0f0f0;
text-transform: uppercase;
height: 24px;
line-height: 24px;
cursor: pointer;
}
#add-buzzlink-streams-user-chips .chip:hover, #add-user-chips .chip:hover {
color: teal;
background-color: lightgray;
}
.video-chip>img {
padding: 4px;
margin: 8px;
height: 32px;
width: 32px;
}
.chip, .video-chip {
font-size: 16px;
letter-spacing: 1.1;
font-weight: 600;
font-family: Anaheim;
color: #0b4256;
background-color: #f0f0f0;
text-transform: uppercase;
height: 40px;
line-height: 40px;
border-radius: 20px;
padding-right: 20px;
display: flex;
justify-items: center;
align-content: center;
flex-direction: row;
margin: 4px 12px;
}
.chip .close {
line-height: 40px;
padding-left: 12px;
}
.chip.invalid {
text-decoration: line-through;
background-color: salmon;
}
.video-chip {
background-color: #cdd;
display: flex;
align-items: center;
cursor: pointer;
margin-right: 8px;
font-size: 14px;
height: 36px;
padding-right: 16px;
padding-left: 0;
}
.video-chip:hover {
background-color: #009ad1;
color: white;
}
.chip.video-chip.new:hover {
background-color: #d91e43;
color: white;
}
.chip.video-chip {
font-family: Anaheim, 'Barlow Semi Condensed', sans-serif;
font-weight: 400;
}
.chip.video-chip.new {
color: white;
background-color: #009ad1;
}
.buzz-phone-container-shim {
position: relative;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: none;
}
/*https://www.w3schools.com/css/css_rwd_mediaqueries.asp*/
.profile-container {
position: absolute;
bottom: 44px;
top: 112px;
overflow-y: scroll;
right: 88px;
left: 60px;
}
.profile-container>.input-field>label {
left: 0;
}
.profile-container>.input-field {
margin-top: 36px;
}
#inviteVideoUserSessionPassword.disabled {
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: #009ad1 line-through; /* Ignored in CSS1/CSS2 UAs */
}
#submitVideoSendIcon {
margin-right: 8px;
}
#idle-continue-button {
font-size: 10px;
}
.error-message {
padding-left: 16px;
padding-right: 8px;
text-align: center;
text-align: center;
color: #ffffff;
vertical-align: middle;
background-color: #b12a45;
line-height: 40px;
font-family: Montserrat, sans-serif;
font-size: 1rem;
}
error-text {
vertical-align: middle;
line-height: normal;
}
.row {
vertical-align: middle;
margin-bottom: 20px;
width: 100%;
}
.row.bottom {
margin-bottom: 12px;
}
.row-switch, .row-picklist {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.row.wrapper {
flex-direction: column;
border: 1px solid #bebcbc;
padding: 12px;
border-radius: 12px;
background: linear-gradient(338deg, rgb(209 163 181 / 50%) 20%, #d0f0ea);
}
.row-embedded {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
padding: 12px 32px;
width: 100%;
}
.row-detail {
flex-grow: 9;
font-size: 1.4rem;
padding-left: 12px;
font-family: Anaheim, sans-serif;
margin: 8px 0;
}
.row-action {
flex-grow: 1;
}
.row-patient {
font-size: 1.2rem;
padding-left: 0px;
font-family: Anaheim, sans-serif;
margin: 8px 0;
}
.row.lowest-distance item {
background-image: linear-gradient(transparent calc(100% - 0.35em),#db56e8 0),linear-gradient(transparent calc(100% - 0.8em),rgb(224 63 211 / 37%) 0);
color: #009ad1;
}
.row.lowest-time item {
background-image: linear-gradient(transparent calc(100% - 0.35em),#77d7d8 0),linear-gradient(transparent calc(100% - 0.8em),rgba(0,183,174,.3) 0);
color: black;
}
.row.lowest-time.lowest-distance item {
background-image: linear-gradient(transparent calc(100% - 0.35em),#77d7d8 0),linear-gradient(transparent calc(100% - 0.8em),rgba(0,183,174,.3) 0);
font-weight: 800;
color: teal;
}
#poll-type-list, #poll-type-value, #streams-type-list, #streams-type-value {
width: unset;
box-shadow: 0 3px 6px rgb(0 0 0 / 10%);
background-color: #f0f0f0;
}
#streams-type-list {
display: none;
}
#poll-type {
margin-top: 24px;
}
#end-poll-date {
display: none;
}
#streams-integration-enabled {
color: #d91e43;
}
.col {
width: 100%;
min-height: 0px;
}
.error-close {
vertical-align: middle;
float: right;
text-color: #ffffff;
}
#canned-messages-container-old {
top: -340;
left: 64px;
z-index: 50000;
background: linear-gradient(180deg,#e8f4fd 4.73%,#d1ecf9);
border-radius: 12px;
box-shadow: 0 4px 12px rgb(77 83 110 / 40%);
padding: 6px 12px;
font-family: 'Anaheim';
font-size: 1rem;
max-width: calc(100% - 128px);
max-height: 340px;
overflow: scroll;
}
#canned-messages-panel-old {
display: none;
flex-direction: column;
}
.canned-message-panel-top {
width: 100%;
float: right;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.canned-message-panel-close a {
cursor: pointer;
float: right;
}
.canned-messages-close {
z-index: 100;
position: relative;
float: right;
color: black;
opacity: 0.4;
/* width: 32px; */
padding: 0 4px;
/* height: 32px; */
transform: scale(0.4);
webkit-transform: scale(0.4);
transition: transform .3s ease, -webkit-transform .3s ease;
}
#canned-messages-panel:hover .canned-messages-close {
box-shadow: 0 6px 20px 8px rgba(0,0,0,.1485);
background-color: white;
transform: scale(1.5);
top: 4px;
right: 4px;
cursor: pointer;
}
.canned-messages-close:hover, .canned-messages-close svg:hover .canned-messages-close {
transform: scale(2);
box-shadow: 0 6px 20px 8px rgba(0,0,0,.0785);
background-color: white;
top: -12px;
right: -12px;
}
.canned-messages-panel-list {
}
.canned-messages-close svg:hover .emoji-close {
colr:red;
}
.canned-message-item {
color: teal;
font-family: Anaheim, 'Barlow Semi Condensed', sans-serif;
padding: 4px 4px;
cursor: pointer;
}
/* Always set the map height explicitly to define the size of the div * element that contains the map. */
#preview-map {
height: calc(100vh); /* Was - 64px */
}
#preview-map:hover .floating-panel {
display: flex;
}
.flex {
display: flex;
}
.flex.column {
flex-direction: column;
align-items: center;
justify-content: center;
display: flex;
}
.floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.map-select {
position: relative;
overflow: hidden;
display: block;
margin: auto;
width: 330px;
height: 100%;
border-bottom: 0px;
border-radius: 3px;
font-size: 12px;
box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
}
.map-select > i.toggle {
position: absolute;
z-index: 4;
right: 1.5em;
top: 1.6em;
color: #ccc;
}
.map-select .title,
.map-select .placeholder {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 1.5em 2em;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.map-select > input {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
height: 100%;
display: block;
opacity: 0;
cursor: pointer;
}
.map-select > input:checked ~ i.toggle.icon-arrow-down {
display: none;
}
.map-select > input:checked ~ i.toggle.icon-arrow-up {
display: block;
}
.map-select > input:checked div.options label.option .title {
display: none !important;
}
.map-select > input:not(:checked) {
z-index: 4;
}
.map-select > input:not(:checked) ~ label.option > span.title {
display: none;
}
.map-select > input:not(:checked) ~ i.toggle.icon-arrow-up {
display: none;
}
.map-select > input:not(:checked) ~ i.toggle.icon-arrow-down {
display: block;
}
.map-select > input:disabled {
cursor: no-drop;
}
.map-select > span.placeholder {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
color: #999;
border-top: 0px;
}
.map-select label.option {
display: block;
overflow: hidden;
z-index: 1;
width: 100%;
transition: all 1s ease-out;
}
.map-select label.option span.title {
position: relative;
z-index: 2;
transition: background 0.3s ease-out;
}
.map-select label.option span.title i.icon {
padding-right: 8px;
color: #92a8d1;
}
.map-select label.option span.title:hover {
color: #fff;
background: rgba(255, 255, 255, 0.3);
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.map-select label.option input {
display: none;
}
.map-select label.option input:checked ~ span.title {
position: absolute;
display: block;
z-index: 3;
top: 0px;
font-size: 12px;
background: #fff;
border-top: 0px;
box-shadow: none;
color: inherit;
width: 100%;
}
.floating-panel select {
font-size: 12px;
font-family: 'Barlow Semi Condensed', 'Montserrat', sans-serif;
cursor: pointer;
}
.map-select label.option input:disabled ~ span.title {
background: #f9f9f9 !important;
color: #aaa;
}
.map-select label.option input:disabled ~ span.title:hover {
color: #aaa;
background: none;
cursor: no-drop;
}
.bottom-panel {
position: fixed;
bottom: -144px;
left: 5;
right: 5;
padding: 0px 0 20px 0;
z-index: 10000;
/* background-color: orange; */
/* border-bottom: 2px solid black; */
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
background-image: linear-gradient(#fffefbcc,#dcf1f1cc);
display: none;
border-radius: 5px 5px 0px 0px;
transition: height 300ms ease-out 0s, transform 300ms ease-out 0s;
z-index: 1000000102;
border-width: 1px 1px 0px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: rgb(151, 151, 151);
border-right-color: rgb(151, 151, 151);
border-left-color: rgb(151, 151, 151);
border-image: initial;
border-bottom-style: initial;
border-bottom-color: initial;
flex-direction: column;
/* align: center; */
}
.bottom-panel .bottom-panel-top-row {
display: flex;
flex-direction: row-reverse;
height: 48px;
justify-content: flex-start;
align-items: center;
}
.preview-map-icons {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
align-content: center;
margin: 0 0 0 0;
padding: 0 12px 0 12px;
width: 48px;
height: 100%;
}
.bottom-panel:hover {
/* height: calc(100vh - 64px); */
transform: translateY(-128px);
background-image: linear-gradient(#a8e5de,#dcf1e5);
}
.bottom-panel.flex {
display: flex;
}
#preview-map-input {
padding: 4px 20px;
left: 10%;
width: 80%;
margin: auto;
/* right: 100px; */
background: rgba(0, 0, 0, 0.66);
color: #0aeae1;
font-size: 1.8rem;
font-family: Anaheim;
letter-spacing: 1.2;
font-weight: 600;
position:absolute;
bottom: 32px;
}
.map-address .small {
font-size: 0.9rem;
}
.map-address .title {
font-size: 1.2rem;
color: teal;
}
.map-address, #map-address, .map-message {
padding: 20px 30px 10px 5px;
display: table;
float: left;
font-size: 1.2rem;
font-family: 'Montserrat', sans-serif;
text-align: left;
max-width: 300px;
color: #333;
background-color: rgba(0, 0, 0, 0);
}
.map-address-stack {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 0;
padding: 0;
}
.map-address.user {
display: flex;
flex-direction: row;
margin: 0 0 20px 0;
max-width: 450px;
}
.map-address.user .image-wrapper {
position: relative;
}
.map-address.user .diamond-image {
position: absolute;
}
.map-address.user .name {
font-weight: 600;
font-size: 24px;
color: teal;
}
.map-address.user .info {
padding: 0;
margin: 0;
color: chocolate;
}
.map-address.user .addr {
padding: 0;
margin: 0;
color: black;
}
.map-address.user .route {
color: coral;
}
.map-address-footer {
display: flex;
flex-direction: row-reverse;
width: 100%;
margin: 30px 0 16px 0;
}
.map-message.error {
color: #000090;
}
.map-header {
font-weight: 600;
color: #009ad1;
}
p.footnote {
font-size: 1rem;
color: #888;
margin-top: 5rem;
border-top: 1px solid gray;
padding-top: 8px;
}
/* The container - needed to position the dropdown content */
.ssdropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.ssdropdown-content, .ssinline-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 360px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 1.25rem;
background-color: #d1e7e7;
text-align: left;
}
.ssinline-content {
background-color: rgba(0, 0, 0, .1);
font-size: 3rem;
}
#buzzPhoneMentionDropDown{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
flex-direction: column;
justify-items: stretch;
max-height: 90%;
overflow-y: scroll;
z-index: 10000;
}
#buzzShortcutMentionDropDown{
/* top: 50%;
left: 50%;
transform: translate(-50%,-50%); */
flex-direction: column;
justify-items: stretch;
position: relative;
max-height: 40rem;
overflow-y: scroll;
}
/* Links inside the dropdown */
.ssdropdown-content a {
padding: 12px 16px 12px 36px;
text-decoration: none;
display: block;
margin: 0;
background-color: #d1e7e7;
text-align: left;
}
.ssdropdown-content a.highlighted {
background-color: #0aeae1;
}
.ssinline-content a {
font-family: Anaheim;
padding: 12px 16px 12px 84px;
text-decoration: none;
display: block;
margin: 0;
background-color: rgba(0, 0, 0, .1);
text-align: left;
color: teal;
line-height: 4rem;
cursor: pointer;
}
.ssinline-content a .group-image, .ssinline-content a .diamond-image {
position: absolute;
left: 2px;
}
.ssinline-content a:hover {
background-color: rgba(0, 0, 0, .3);
color: white;
}
.ssinline-content .highlighted {
background-color: rgba(0, 0, 0, .1);
color: white;
}
.ssdropdown-content .minititle, .ssinline-content .minititle {
margin-left: 14px;
font-family: Anaheim;
font-size: 1.5rem;
text-align: left;
font-weight: 700;
color: #333;
}
.ssdropdown-content .minititle strong, .ssinline-content .minititle strong {
font-weight: 800;
color: #000;
}
.ssdropdown-content a {
display: flex;
flex-direction: row;
justify-content: space-between;
color: teal;
font-size: 1.15rem;
font-family: 'Barlow Semi Condensed';
align-items: center;
}
/* Change color of dropdown links on hover */
.ssdropdown-content a:hover {
background-color: teal;
color: white;
}
.ssdropdown-content a actionbutton {
float: right;
font-size: 11px;
letter-spacing: 1px;
}
.ssdropdown-content a actionbutton.hollow {
background-color: transparent;
color: teal;
border: solid teal 1px;
}
.ssdropdown-content a:hover actionbutton.hollow {
background-color: transparent;
color: white;
border: solid white 1px;
}
.ssdropdown-content a actionbutton.teal {
background-color: teal;
color: white;
border: solid teal 1px;
}
.ssdropdown-content a actions {
flex: 1 0 auto;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
.event-container {
/* height: 600px;
left: 50%;
position: absolute;
top: 50%;
width: 200px; */
margin: 12px 0;
}
.calendar-container {
position: relative;
width: 256px;
}
.calendar-container header {
border-radius: 1em 1em 0 0;
background: #fffefe73;
color: #fff;
padding: 1em 1em;
height: 128px;
}
.calendar-container header.me {
padding: 0.6em 1em 1.2em 1.2em;
background: #fffefe73;
}
.calendar-container header.other {
padding: 0.6em 1.2em 1.2em 1em;
background-color: #d4effa91;
}
.day.me {
color: #654;
}
.day.other {
color: #106280;
}
.day {
font-size: 1.5em;
font-weight: 400;
line-height: 1em;
text-transform: uppercase;
font-family: Rajdhani;
text-transform: uppercase;
}
.month {
font-size: 0.8em;
line-height: 1em;
text-transform: uppercase;
}
.month.me {
color: #654;
}
.month.other {
color: #009AD1;
}
.calendar {
background: rgba(255, 255, 255, .8);
border-radius: 0 0 1em 1em;
/*
-webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff; */
color: #555;
display: inline-block;
padding: 24px 0px 0px 0px;
width: 256px;
height: 72px;
font-size: 0.8em;
text-align: center;
text-transform: uppercase;
font-size: 0.9em;
}
.calendar span {
color: #e66b6b;
font-weight: 400;
font-size: 0.6em;
text-transform: uppercase;
}
.calendar td {
padding: .5em 0.2em;
text-align: center;
}
.calendar tbody td:hover {
background: #cacaca;
color: #fff;
}
.current-day {
color: #e66b6b;
}
.calendar-activity {
color: rgba(0, 0, 0, 0.3);
font-family: Montserrat, 'Rajdhani', sans-serif;
font-size: 1.2em;
}
.calendar-activity.future {
content: 'FUTURE';
color: rgba(0, 0, 0, 0.8);
font-size: 0.6em;
}
.calendar-activity.current {
content: 'CURRENT';
font-size: 0.6em;
color: #d91e43;
}
.calendar-activity.past, .calendar-activity.far {
font-size: 1.2em;
padding: 0.6em 0 0.6em;
}
.prev-month,
.next-month {
color: #cacaca;
}
.day-top {
position: absolute;
top: 8px;
right: 16px;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
font-family: Rajdhani;
}
.day-top-other {
left: 16px;
position: absolute;
top: 8px;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
font-family: Rajdhani;
}
.day-top-me {
right: 16px;
position: absolute;
top: 8px;
font-size: 1em;
font-weight: 500;
text-transform: uppercase;
font-family: Rajdhani;
}
.badge-top-other {
right: 16px;
position: absolute;
top: 8px;
font-size: 0.8em;
font-weight: 500;
text-transform: uppercase;
font-family: Rajdhani;
text-align: center;
}
.badge-top-me {
right: 16px;
position: absolute;
top: 8px;
font-size: 0.8em;
font-weight: 500;
text-transform: uppercase;
font-family: Rajdhani;
text-align: center;
}
.ring-left,
.ring-right {
position: absolute;
top: 6em;
}
.ring-left {
left: 8px;
}
.ring-right {
right: 8px;
}
.ring-left:before,
.ring-left:after,
.ring-right:before,
.ring-right:after {
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
content: "";
display: inline-block;
margin: 6px;
height: 24px;
width: 6px;
}
#eventNotesLabel label:active {
transform: translateY(-28px) scale(0.8);
}
.event-date-field {
border: 0px solid #ccc;
display: inline-block;
padding: 8px;
width: 100%;
font-size: 0.9rem;
color: #555;
letter-spacing: 1.33;
height: 44px;
text-align: center;
}
.buzz-phone-picker-field {
border: 0px solid #ccc;
display: inline-flex;
padding: 8px;
width: 100%;
font-size: 1.5rem;
font-weight: 400;
color: #555;
letter-spacing: 1.33;
height: 64px;
text-align: center;
background: #a6d8d8;
}
.buzz-phone-picker-field:hover {
background: unset;
background-image: linear-gradient(152deg, #f8b042, #d91e43);
color: white;
}
.buzz-phone-picker-field span {
flex: auto;
}
div.event-date {
top: 0;
margin: 0;
display: block;
justify-content: center;
align-items: center;
height: 44px;
-webkit-user-select: none;
user-select: none;
will-change: transform, opacity;
background-color: #f4f4f4;
border-radius: 12px;
font-family: Anaheim, sans-serif;
font-size: 0.9rem;
color: #444;
left: 0;
cursor: pointer;
}
div.buzz-phone-picker-item {
top: 0;
margin: 0;
display: block;
justify-content: center;
align-items: center;
height: 64px;
-webkit-user-select: none;
user-select: none;
will-change: transform, opacity;
background-color: #f4f4f4;
border-radius: 12px;
font-family: Anaheim, sans-serif;
font-size: 1.2rem;
color: #444;
left: 0;
cursor: pointer;
}
/* Dropdown */
.m-dropdown {
width: 80px;
display: inline;
font-family: Anaheim, sans-serif;
}
.m-dropdown .e-button {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-ms-border-radius: 12px;
font-size: 16px;
font-weight: 400;
line-height: 18px;
padding: 8px 8px 8px 8px;
z-index: 900;
color: #333;
position: relative;
border: 2px solid transparent;
margin-top: 2px;
z-index: 5;
display: block;
width: 100px;
margin: 0 auto;
background-color: #f4f4f4;
height: 44px;
}
.m-dropdown .e-button:hover {
cursor: pointer;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
color: #009AD1;
}
.m-dropdown .e-button:hover .e-burger span {
background: #009AD1;
}
.m-dropdown .e-button:after, .m-dropdown .e-button:before {
display: block;
content: " ";
position: absolute;
top: 2px;
height: 100%;
width: 20px;
z-index: 0;
}
.m-dropdown .e-button:after {
left: 100%;
margin-left: 2px;
border-bottom-left-radius: 10px;
}
.m-dropdown .e-button:before {
right: 100%;
margin-right: 2px;
border-bottom-right-radius: 10px;
}
.m-dropdown .e-button .e-burger {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 15px;
width: 15px;
height: 14px;
transform-origin: center;
z-index: -1;
}
.m-dropdown .e-button .e-burger span {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-ms-border-radius: 2px;
width: 100%;
height: 2px;
background: #fff;
display: block;
left: 0;
transform-origin: center;
}
.m-dropdown .e-button .e-burger span:first-child {
top: 0;
transform: none;
}
.m-dropdown .e-button .e-burger span:last-child {
top: auto;
bottom: 0;
transform: none;
}
.m-dropdown .e-button .e-burger:after {
-webkit-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-ms-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
content: " ";
display: block;
position: absolute;
top: 12px;
right: -37px;
height: 0;
width: 199px;
left: auto;
z-index: -2;
background: #666;
opacity: 0;
}
.m-dropdown .e-button.open {
border-color: transparent;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-moz-border-bottom-left-radius: 0px;
-moz-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
color: #009AD1;
background-color: #bbb;
}
.m-dropdown .e-button.open .e-burger span {
background: #009AD1;
}
.m-dropdown .e-button.open .e-burger span:first-child {
opacity: 0;
}
.m-dropdown .e-button.open .e-burger span:nth-child(2) {
transform: translateY(-50%) rotate(-45deg);
}
.m-dropdown .e-button.open .e-burger span:nth-child(3) {
transform: translateY(-50%) rotate(45deg);
}
.m-dropdown .e-button.open .e-burger span:last-child {
opacity: 0;
}
.m-dropdown .e-button.open .e-burger:after {
height: 15px;
opacity: 1;
}
.m-dropdown .e-list {
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-ms-border-radius: 0px;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-bottom-left-radius: 12px;
-moz-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;
-ms-border-bottom-left-radius: 12px;
-ms-border-bottom-right-radius: 12px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
width: 100px;
padding: 0;
list-style: none;
background: #f4f4f4;
float: left;
overflow: hidden;
z-index: 999;
margin: 0;
position: absolute;
}
.m-dropdown .e-list li {
display: block;
width: 100%;
float: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.01);
box-sizing: border-box;
}
.m-dropdown .e-list li:last-child {
border: none;
}
.m-dropdown .e-list li a {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding: 4px;
float: left;
width: 100%;
text-decoration: none;
color: #111;
font-size: 1em;
box-sizing: border-box;
}
.m-dropdown .e-list li a:hover {
background: #fff;
color: #111;
}
.user-list {
width: 100%;
}
#conversation-banner, #snooze-banner {
position: absolute;
top: 64px;
margin-top: 6px;
z-index: 39;
padding: 6px 10px;
border: 1px solid #0ff;
background: rgba(50,255,244,0.8);
right: 20px;
font-size: 0.9rem;
text-align: center;
border-radius: 5px;
line-height: 28px;
color: #444;
}
#snooze-banner {
border: #d91e43;
background: linear-gradient(120deg, #ff7907 0%, #ffc107 100%);
box-shadow: 0 6px 20px 8px rgb(0 0 0 / 18%);
}
.footer-float-container {
position: absolute;
top: -48px;
z-index: 102;
padding: 0 10px;
border: 0px solid #cb2;
/* background: #ffb; */
right: 20px;
font-size: 14px;
text-align: center;
border-radius: 5px;
line-height: 28px;
display: flex;
flex-direction: row;
width: 100%;
padding-left: 16px;
justify-content: space-between;
}
.footer-float-container .pseudo-input {
display: none;
}
.footer-float-container-left.drive {
}
.pseudo-input.drive {
display: flex;
background-color: #f4f4f4;
}
.footer-float-container-right, .footer-float-container-left {
padding: 0 10px;
border: 0px solid #cb2;
/* background: #ffb; */
font-size: 14px;
text-align: center;
border-radius: 5px;
line-height: 28px;
display: flex;
flex-direction: row;
align-items: center;
}
.footer-float-container-right {
float: right;
}
.footer-float-container-left {
float: left;
}
.intro {
margin-bottom: 2rem;
font-size: 1.2rem;
color: #333;
font-family: 'Barlow Semi Condensed', Anaheim, sans-serif;
}
.intro.middle {
margin-top: 1.2rem;
margin-bottom: 1.2rem;
}
.intro.warning {
color: bisque;
background-color: #d91e43;
}
#search-screen-results-text {
font-family: 'Barlow Semi Condensed';
font-size: 1.4rem;
}
#conversation-banner-button, #conversation-edit-stat-button, .message-stat-ack-button {
color: white;
background-color: rgba(255,255,244,0.9);
color: #222;
font-size: 0.8rem;
padding: 4px 10px;
margin-left: 24px;
border-radius: 5px;
}
#conversation-edit-stat-button, .message-stat-ack-button {
font-size:0.8rem;
padding: 0px 10px;
}
.message-action-ack-icon {
height: 32px;
width: 32px;
align-items: center;
display: flex;
}
.message-stat-ack-button {
display: none;
float: left;
}
.message-stat-ack-button.jump {
float: unset;
background-color: rgba(205,205,204,0.9);
}
#search-screen .messages:hover .message-stat-ack-button.jump {
display: block;
}
#messageThread .thread-message:hover .message-stat-ack-button.jump {
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.message-stat-ack-button.jump:hover {
background-color: #009ad1;
}
.stack-message-date-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 8px;
}
#search-screen .message-timestamp {
margin-bottom: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.wallpaper {
display: flex;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.message-container:hover .wallpaper {
filter: blur(3px);
}
.message-container-other.stat .message-stat-ack-button {
display: block;
position: relative;
z-index: 100;
}
.message-container-other.stat.read .message-stat-ack-button, .message-container-other.stat.raw-text-warning .message-stat-ack-button {
display: none;
}
.message-container-other.mention .message-stat-ack-button {
display: block;
position: relative;
z-index: 100;
margin-bottom: 3px;
background-color: #eaf7ff;
}
.message-container-other.mention.ack .message-stat-ack-button {
display: none;
}
#conversation-hint, #conversation-edit-hint, #conversation-edit-stat, #conversation-input-rawtext, #lightning-hint, #search-hint,
#upload-files-buzzflow-hint, #upload-files-buzzflow-stat {
position: absolute;
top: -54px;
z-index: 102;
padding: 0 10px;
border: 1px solid #cb2;
background: #ffb;
right: 20px;
font-size: 14px;
text-align: center;
border-radius: 5px;
line-height: 28px;
}
#conversation-input-rawtext {
right: unset;
left: 12px;
top: -36px;
background: darkgray;
color: white;
position: unset;
}
#conversation-input-rawtext.stat {
background: #d91e43;
}
#conversation-hint {
top: -36px;
/* position: unset; */
}
#lightning-hint, #search-hint {
background: white;
background-image: linear-gradient(120deg, #9ee5fa 0%, #f0a0fa 100%);
/* bottom: 0; */
left: 0;
right: unset;
top: 64px;
height: 64px;
width: 64px;
display: flex;
padding: 0;
justify-content: center;
align-items: center;
}
#search-hint {
width: unset;
flex-direction: row;
z-index: 1000000;
}
#conversation-hint-lightning {
display: flex;
justify-content: center;
align-items: center;
}
#lightning-hint img, #lightning-hint svg, #search-hint img, #search-hint svg {
width: 60%;
height: 60%;
}
#search-hint svg {
flex: 0 0 auto;
width: 64px;
}
#search-hint-caption {
flex: 1 1 auto;
font-family: Anaheim, sans-serif;
font-size: 1.5rem;
}
#search-hint-close {
flex: 0 0 auto;
width: 64px;
height: 64px;
position: relative;
cursor: pointer;
}
#search-hint-close svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
height: 32px;
}
#search-hint a {
flex: 0 0 auto;
width: 64px;
}
#upload-files-interactive {
display: none;
}
.message-action-ack, .messages-shortcut {
margin-right: 8px;
z-index: 102;
padding: 0 10px;
border: 1px solid #cb2;
background-color: #cdfb15;
font-size: 14px;
text-align: center;
border-radius: 5px;
line-height: 28px;
}
.messages-shortcut.user-mentions
{
background-color: salmon;
}
.messages-shortcut.group-mentions
{
background-color: lightcyan;
}
.messages-shortcut {
transition: opacity 1s ease-in-out 1.2s;
opacity: 0;
cursor: pointer;
}
.message-action-ack-button {
padding: 2px 6px;
border-radius: 5px;
cursor: pointer;
}
.message-action-ack-button.transparent {
border: 1px solid gray;
color: gray;
}
.message-action-ack-switch {
transition: scale 1.5s ease-in-out 0.5s;
cursor: pointer;
}
.message-action-ack-switch:hover {
transform: scale(1.2);
}
#connection-banner {
z-index: 999999;
display: block;
opacity: 1;
top: 48px;
left: unset;
transform: scaleX(1) scaleY(1);
max-width: 600px;
height: 96px;
}
#connection-banner.slow {
top: 64px;
transform: scaleX(0.75) scaleY(0.75);
max-width: 600px;
}
#connection-banner.slow .modal-content {
padding: 16px 32px;
/* gradient background bold red orange top left to bottom right */
background: linear-gradient(152deg, #f7e08d, #fdae7a);
}
#connection-banner.offline .modal-content {
padding: 16px 32px;
/* gradient background bold red orange top left to bottom right */
background: linear-gradient(152deg, #fdae7a, #f7e08d);
}
#connection-banner.slow .modal-content h4, #connection-banner.offline .modal-content h4 {
color: #947a10;
}
#connection-banner .dialogclose-icons {
color: #000;
font-size: 2rem;
}
#connection-banner .dialogclose {
top: 4px;
right: 4px;
}
#conversation-edit-stat, .message-action-ack {
padding: 2px 12px;
background: white;
border: 2px solid #009ad1;
top: -54px;
flex-direction: row;
justify-content: center;
align-items: center;
}
.message-action-ack.stat {
border: 2px solid #d91e43;
}
#upload-files-buzzflow {
background: #6bb8b8;
color: wheat;
cursor: pointer;
}
#upload-files-buzzflow:hover {
background-color: teal;
color: white;
}
.message-action-ack:hover .message-action-ack-button {
background-color: wheat;
color: teal;
}
#conversation-hint.group, #conversation-edit-hint.group {
background: #ffb;
border-color: #947a10;
color: #000;
}
body.theme-bold .group {
color: #78630e;
}
#conversation-hint.personal, #conversation-edit-hint.personal {
background: #009AD1;
opacity: 0.8;
border-color: #009AD1;
color: #fff;
}
#conversation-hint.buzzlink {
background: teal;
opacity: 0.8;
border-color: teal;
color: #fff;
}
.profileDump {
width: 100%;
background-color: #999;
padding: 12px 10px;
font-family: Anaheim, monospace;
}
#sentEmailEventsDumpText {
background-color: beige;
}
#sentEmailEventsDumpName .title {
font-family: Montserrat, Anaheim;
font-size: 1.2rem;
color: firebrick;
}
#sentEmailEventsDumpName .subtitle {
font-family: Anaheim;
font-size: 1rem;
color: #c71500;
}
#sentEmailEventsDumpName.row {
padding: 12px;
display: flex;
flex-direction: column;
}
.profileDump li {
padding-top: 12px;
padding-left: 6px;
border-left: 4px solid teal;
margin: 8px;
}
#sentEmailEventsDumpForm {
}
/*
#refresh-banner-XXX {
position: absolute;
top: 64px;
margin-top: 6px;
height: 64px;
line-height: 64px;
padding: 6px 10px;
border: 1px solid #0ff;
background: #323232;
right: 20px;
font-size: 0.9rem;
text-align: center;
border-radius: 10px;
color: rgba(255,255,255,0.7);
z-index: 9999;
}
#refresh-banner-button-XXX, #close-banner-button-XXX {
cursor: pointer;
color: white;
background-color: rgba(255,255,244,0.9);
color: #222;
font-size: 0.8rem;
padding: 4px 10px;
margin-left: 24px;
border-radius: 5px;
}
*/
#refresh-version-title {
color: darkred;
font-weight: 600;
font-family: Anaheim, sans-serif;
font-size: 1.25rem;
}
#refresh-version-text {
font-size: 1rem;
color: #333;
}
.hover {
transform: scale(1.5) translateX(-32px);
/*translateX(15%) rotateZ(-11deg) scale(.87);*/
transition: transform .2s ease-out;
}
/* To be Used for Invitation Item */
.invitation-grid {
max-width: 1200px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap
}
.invitation-grid h5 {
margin-bottom: 0;
font-size: 0.5rem;
font-family: Rajdhani
}
.invitation {
width: 300px;
margin: 30px 12px;
border: 2px solid rgba(0, 0, 0, .99);
border-radius: 10px;
height: 184px;
overflow: hidden;
z-Index: 100;
}
.invitation .invitation-bg {
position: relative;
background: #aae1fa;
height: 184px;
/* The image used
background-image: url("/static/wallpapers/antelope.jpg"); */
/* Add the blur effect
filter: blur(16px);
-webkit-filter: blur(16px); */
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.invitation.me {
align-items: flex-start;
}
.invitation.me .invitation-bg {
background-color: rgba(255,255,255,0.3);
}
.invitation.location {
background: url(../images/BuzzLocationRequest.jpg) no-repeat;
background-size: cover;
}
.invitation.other {
align-items: flex-end;
}
.invitation.other .invitation-bg {
background-color: #aae1fa;
}
.invitation.location.other .invitation-bg {
background-color: #009ad152;
}
.invitation .invitation-content {
top: -184px;
left: 0;
right: 0;
height: 144px;
position: relative;
overflow: hidden;
background: rgba(250, 250, 250, .5);
}
.invitation.me .invitation-content {
background: rgba(250, 250, 250, .2);
}
.invitation.other .invitation-content {
background: rgba(250, 250, 250, .5);
}
.invitation .invitation-content .invitation-middle {
position: absolute;
margin: auto;
width: 100%;
left: 0;
top: calc(33%);
}
.invitation .invitation-content .invitation-image {
margin: auto;
height: 48px;
width: 48px;
}
.invitation .invitation-content .invitation-caption {
margin: auto;
height: 24px;
width: 100%;
}
.invitation .invitation-content>:first-child {
right: 8px;
top: 12px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
}
.invitation .invitation-footer {
padding: 4px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
top: -180px;
position: relative;
}
.invitation .invitation-footer .invitation-footer-status {
font-size: 0.75rem;
color: #333;
font-family: 'Barlow Semi Condensed', Anaheim, sans-serif;
}
.invitation.me .invitation-footer {
background-color: rgba(0,0,0,0.1);
}
.invitation.other .invitation-footer {
}
.invitation .invitation-footer>a {
margin-left: 0;
padding: 0;
height: 28px;
border-bottom: none
}
.invitation .invitation-footer>a>img {
margin: 6px;
width: 16px;
height: 16px
}
.invitation .invitation-button {
background-color: #009AD1;
font-size: 0.65rem;
font-family: 'Barlow Semi Condensed', Anaheim, sans-serif;
letter-spacing: 1px;
padding: 2px 8px;
border-radius: 5px;
color: white;
float: right;
cursor: pointer;
}
.invitation.me .invitation-button {
background-color: rgba(0,0,0,0.3);
}
.invitation.other .invitation-button {
background-color: #009AD1;
}
.invitation .invitation-button.readonly {
background-color: rgba(0,0,0,0.05);
font-size: 0.75rem;
padding: 1px 6px;
border-radius: 5px;
color: #333;
}
.invitation .invitation-button.revoked {
background-color: #d91e43;
}
.invitation h5 {
margin: 0;
font-weight: 400;
color: #333;
text-align: center;
font-size: 1rem;
font-family: Rajdhani;
}
.line-invitation .invitation-content>div:first-child {
top: 52%;
width: 60%;
height: 8px
}
.circle-invitation .invitation-content>div:first-child {
width: 120px;
height: 120px
}
.semi-circle-invitation .invitation-content>div:first-child {
width: 160px;
height: 80px
}
.customshape-invitation .invitation-content>:first-child {
height: 95%;
width: 160px;
display: block
}
/* Image Rotations */
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate45 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* https://stackoverflow.com/questions/41390934/comment-highlight-css-transition-effect */
#allUsers.active {
border-radius: 0px;
animation: usersHilite 1000ms ease-out;
}
#userGroups.active {
border-radius: 0px;
animation: groupsHilite 1000ms ease-out;
}
#allStats.active {
border-radius: 0px;
animation: allStatsHilite 1000ms ease-out;
}
#recents.active {
border-radius: 0px;
animation: recentsHilite 1000ms ease-out;
}
#orgUsers.active {
border-radius: 0px;
animation: orgUsersHilite 1000ms ease-out;
}
#smart-key-row.active {
border-radius: 0px;
animation: smartKeyHilite 1000ms ease-out;
}
.tabHeader {
display: flex;
justify-content: space-between;
align-items: center;
}
.tabHeaderTitle {
flex-grow: 9;
display: flex;
}
.tabHeaderTitleIcon {
margin-left: 6px;
}
.tabHeaderButtons {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
@media only screen and (max-height: 1024px) {
.modal .modal-footer {
height: 72px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
}
@keyframes usersHilite {
0% {
background-color: #009ad1;
}
100% {
background-color: white;
}
}
@keyframes orgUsersHilite {
0% {
background-color: #a66a8b;
}
100% {
background-color: white;
}
}
@keyframes recentsHilite {
0% {
background-color: salmon;
}
100% {
background-color: white;
}
}
@keyframes allStatsHilite {
0% {
background-color: #d91e43;
}
100% {
background-color: white;
}
}
@keyframes groupsHilite {
0% {
background-color: #947a10;
}
100% {
background-color: white;
}
}
@keyframes smartKeyHilite {
0% {
background-color: #d91e43;
border: 2px solid #d91e43;
}
100% {
background-color: transparent;
border: 0px solid transparent;
}
}
.bright, .top-floating-icon.bright {
opacity: 1.0;
}
/*
*
*/
.calendar-frame {
height:90%;
margin:auto;
width: 90%;
display: flex;
position: relative;
flex-direction: row;
justify-content: center;
overflow-y: scroll;
}
.calendar-full-day {
/* height: 2000px; */
}
.calendar-day.dark {
background-color: #333;
}
.calendar-day.dark .timerange {
color: wheat;
}
.calendar-day.dark .calendar-event .notes {
color: lightblue
}
.calendar-inline-viewer {
height:90%;
margin:auto;
width: 100%;
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
}
.calendar-inline-viewer h4 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.calendar-inline-viewer h4, .calendar-inline-viewer h4 span {
font-family: Montserrat, Rajdhani, sans-serif;
font-size: 1.5rem;
color: rgba(0,128,128,0.5);;
text-align: center;
}
.calendar-title-icon {
margin-left: 12px;
margin-right: 12px;
color: rgba(0,128,128,0.5);
cursor: pointer;
transform: scale(0.7);
transition: scale 0.5s ease-in-out;
}
.calendar-title-icon:hover {
transform: scale(1.0);
}
.calendar-timings {
text-align: right;
padding-right: 10px;
width: 120px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white;
font-size: 0.65em;
box-sizing: border-box;
position: absolute;
top:0;
left:0;
font-family: 'Open Sans';
color: #999;
}
.calendar-timings span {
font-size: 200%;
color: #999;
}
.calendar-day {
height: 100%;
width: calc(100% - 132px);
position: absolute;
padding: 0px 10px;
background-color: #F0F0F0;
border-color: #D1D1D1;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
overflow: hidden;
top: 0;
right: 12px;
border-bottom: solid 3px salmon;
border-top: solid 4px salmon;
}
.calendar-event {
background-color: white;
border-style: solid;
border-width: 1px;
border-left-width: 5px;
border-color: #D1D1D1;
border-left-color: salmon;
padding-left: 10px;
padding-top: 15px;
position: absolute;
font-size: 1.25rem;
box-sizing: border-box;
overflow: scroll;
cursor: pointer;
text-align: left;
transition: height .5s ease-out;
background-color: rgba(0,128,128,0.1);
line-height: 1.7rem;
}
.calendar-event.expanded {
background-color: white;
padding-top: 2rem;
z-index: 200;
line-height: 2.2rem;
}
.calendar-event.outlook {
background-color: #d5e0cc;
border-left-color: #198169;
}
.calendar-event .tip {
position: absolute;
right: 2px;
bottom: 0;
color: #555;
opacity: 0.2;
}
.calendar-event .context, .modal-content .context {
/* opacity: 0.6; */
font-size: 0.7rem;
display: inline;
margin: 0;
padding: 0 5px;
background: #009ad1;
color: #fff;
text-transform: uppercase;
font-family: 'Anaheim', sans-serif;
line-height: 1rem;
}
.calendar-event .context {
position: absolute;
right: 0;
top: 0;
}
.modal-content .context {
background-color: #009ad1;
margin-top: 5px;
display: inline-block;
padding: 4px 12px;
font-size: unset;
}
.modal-content .strong {
color: black;
font-weight: 700;
}
.context.group {
background-color: #f7d089;
}
#importConversationFromWA, #importRecognizedFile {
display: none;
}
#importRecognizedFile {
margin-top: 48px;
font-family: 'Anaheim';
}
#importRecognizedFile .caption {
color: #0090c0;
padding-top: 8px;
padding-bottom: 8px;
font-family: 'Rajdhani', sans-serif;
font-size: 1.4rem;
font-weight: 600;
}
#importRecognizedFile .summary {
}
#importRecognizedFile .date {
font-weight: bold;
font-size: 1.2rem;
}
#importRecognizedFile .date bold {
border: 1px solid rgba(0, 0, 0, .6);
border-radius: 5px;
padding: 0 6px;
background-color: rgba(0,0,0,0.1);
}
#importRecognizedFile .location {
}
#import-chat-container, #import-recognized-file-container {
display: none;
max-height: 120px;
/* background-color: aliceblue; */
overflow-y: scroll;
}
#import-recognized-file-container {
/* background-color: #c4fff7b3; */
padding: 12px;
margin-top: 18px;
font-family: 'Anaheim';
max-height: unset;
}
.import-chat-shim {
width: 100%;
}
#upload-thumbnail-container {
margin-top: 8px;
}
#importConversationMessage {
display: flex;
font-size: 16px;
font-family: 'Barlow Semi Condensed', sans-serif;
flex: 1 1 auto;
}
.importConversationButton {
margin-left: 8px;
}
#importConversationMessageContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#importConversationMessagePreviewButton, #importConversationMessagePublishButton, #importConversationMessagePreviewExternalButton,
#importConversationMessageImportButton {
display: none;
}
.calendar-event.expanded .tip {
display: none;
}
.calendar-event .tip i {
transform: scale(.7);
/*translateX(15%) rotateZ(-11deg) scale(.87);*/
}
.calendar-event:hover .tip {
opacity: 0.5;
color: #009AD1;
transform: scale(1.2);
/*translateX(15%) rotateZ(-11deg) scale(.87);*/
transition: transform .2s ease-out
}
.calendar-timeline {
background-color: transparent;
/* border-style: solid; */
/* border-width: 1px;
border-left-width: 5px;
border-color: solid 0 salmon; */
/* padding-left: 10px; */
padding-top: 0px;
position: absolute;
font-size: 0.5em;
box-sizing: border-box;
/* overflow: scroll; */
cursor: pointer;
display: flex;
justify-items: center;
z-index: 300;
}
.calendar-timeline .title {
background-color: white;
color: darksalmon;
border: solid 1px salmon;
padding: 3px 12px;
font-size: 9px;
font-family: 'Barlow Semi Condensed', monospace;
border-radius: 5px;
position: absolute;
top: calc( 50% - 10px);
right: 20px;
height: 20px;
}
.calendar-timeline .line {
height: 2px;
top: 50%;
width: 100%;
background-color: salmon;
position: absolute;
}
.calendar-event .title {
color: #009ad1;
font-size: 100%;
font-family: 'Barlow Semi Condensed', Rajdhani, Montserrat, sans-serif;
}
.calendar-event .notes {
color: #727e82;
font-size: 66%;
}
.calendar-event.expanded .title {
font-size: 150%;
}
.calendar-event .timerange {
position: absolute;
top: 0px;
left: 10px;
font-size: 66%;
}
.calendar-event.expanded .notes {
font-size: 100%;
}
.calendar-event.expanded .timerange {
position: absolute;
top: 0;
right: 12px;
}
/* .calendar-event:hover {
z-index: 1000;
font-size: 2rem;
width: 100%;
} */
#calendar-date-title {
text-transform: uppercase;
}
.smart-actions {
display: flex;
flex-direction: row;
position: absolute;
right: 48px;
border: 1px solid #b6d0d6;
border-radius: 5px;
margin: 0 12px 0;
overflow: hidden;
}
.smart-actions.relative {
position: unset;
}
/* Calendar-Month */
/* body { margin: 0; } */
.calendar-full-month { width:90%; margin: auto; display: none;}
table.calendar-month { width: 100%; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); font-family: 'Montserrat', sans-serif; /*border-collapse: collapse;*/ border-spacing: 0; background-color: rgba(226, 229, 229, 0.1); border-radius: 0;
}
table.calendar-month.dark {
background-color: #333;
}
.calendar-month.dark th, .calendar-month.dark td { border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
.calendar-month th, .calendar-month td { border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; cursor: pointer;}
.calendar-month th { text-transform: uppercase; font-size:10px; font-weight:700; padding: 10px 0; color: teal; background-color: #cdd; letter-spacing: 1px; border-radius: 0; text-align: center;}
.calendar-month.dark th { color: lightblue; background-color: #292929;}
.calendar-month td { width: 14.285%; transition: all 0.3s; font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 400; font-size: 14px; padding: 1.5% 1.5% 5%; vertical-align: initial; padding: 1.5% 0 ; height: 12.5vh; }
.calendar-month .month-day:hover { background-color: rgba(0,0,0,0.1); cursor:pointer; }
.calendar-month.dark .today { color: #FFF; background-color: rgba(0,0,0,.25) !important; }
.calendar-month .today { color: #FFF; background-color: #ced7d8a8 !important; }
.calendar-month span.number { margin-left: 10% ; color: #444;}
.calendar-month.dark span.number { margin-left: 10% ; color: #ddd;}
.calendar-month.dark .today span.number { color: aqua; }
.calendar-month .today span.number { color: teal; }
.calendar-month span.event { height: 4px; background-color: rgba(0,0,0,.3); display: block; margin: 10px 30%; border-radius: 2px; background-color: #bcdeda; }
.calendar-month.dark span.event { background-color: #33bdb1; }
.calendar-month span.event-multiday { margin: 5px -2px; border-radius: 0; }
.calendar-month span.event-multiday-start { margin-right: -4px; }
.calendar-month span.event-multiday-finish { margin-left: -4px; }
.calendar-month span.event-ghost { background-color:transparent; }
.calendar-month-row.hidden {
display: none;
}
.calendar-month .month-day .count {
background-color: #a0c9c5a8;
color: white;
border-radius: 12px;
width: 24px;
height: 24px;
float: right;
margin-right: 6px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.calendar-month .month-day .count.hidden {
display: none;
}
.calendar-month span.event .time { display: none;}
.calendar-month span.event .context { display: none;}
.calendar-month span.event .thumbnail { display: none;}
/* Calendar Weekly Stuff */
.calendar-full-week {
width: 100%; display: none; margin: auto;
}
table.calendar-week { width: 100%; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1); font-family: 'Montserrat', sans-serif; /*border-collapse: collapse;*/ border-spacing: 0; background-color: rgba(226, 229, 229, 0.1); border-radius: 0;
}
table.calendar-week.dark {
background-color: #333;
}
.calendar-week th, .calendar-week td { border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; cursor: pointer;}
.calendar-week th { text-transform: uppercase; font-size:10px; font-weight:700; padding: 10px 0; color: teal; background-color: #cdd; letter-spacing: 1px; }
.calendar-week.dark th { color: lightblue; background-color: #292929;}
.calendar-week td { width: 14.285%; transition: all 0.3s; font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 400; font-size: 14px; padding: 1.5% 1.5% 5%; vertical-align: initial; padding: 1.5% 0 ; height: 75px; }
.calendar-week .week-day:hover { background-color: rgba(0,0,0,0.1); cursor:pointer; }
.calendar-week.dark .today { color: #FFF; background-color: rgba(0,0,0,.25) !important; }
.calendar-week .today { color: #FFF; background-color: #ced7d8a8 !important; }
.calendar-week span.number { margin-left: 10% ; color: #444;}
.calendar-week.dark span.number { margin-left: 10% ; color: #ddd;}
.calendar-week.dark .today span.number { color: aqua; }
.calendar-week .today span.number { color: teal; }
.calendar-week span.event { min-height: 48px; background-color: rgba(0,0,0,.3); display: block; margin: 12px 10%; padding: 6px 6px 16px 8px; border-radius: 2px; background-color: #dae6e66b; cursor: pointer;}
.calendar-week span.event.duplicate {
background-image: linear-gradient(
45deg
, transparent 45%, #dddddd 50%, transparent 55%, transparent 100%), linear-gradient(
-45deg
, transparent 45%, #dddddd 50%, transparent 55%, transparent 100%);
background-size: 8px 8px;
background-position: 4px 4px;
/* background-color: #0000006b; */
}
.calendar-week span.event .time { padding: 0; color: maroon; font-family: 'Barlow Semi Condensed', sans-serif; font-size: 13px;}
.calendar-week span.event .context { padding: 0; color: gray; float:right; font-family: 'Barlow Semi Condensed', sans-serif; font-size: 13px;}
.calendar-week span.event .context.group {color: #947a10; background-color: transparent; padding: 1px 4px;}
.calendar-week span.event .context.individual {color: #009ad1; background-color: transparent; padding: 1px 4px;}
.calendar-week span.event .thumbnail { padding: 0; color: #444; font-family: 'Barlow Semi Condensed', sans-serif; font-size: 14px;}
.calendar-week span.event-multiday { margin: 5px -2px; border-radius: 0; }
.calendar-week span.event-multiday-start { margin-right: -4px; }
.calendar-week span.event-multiday-finish { margin-left: -4px; }
.calendar-week span.event-ghost { background-color:transparent; }
.calendar-week span.event-ghost:hover { background-color:#dae6e6;; }
.calendar-week-row.hidden {
display: none;
}
.day-name {
text-align: center;
}
::placeholder {
text-transform: none;
}