/* 
 *  Sandeep Shah Misc Buzz Menu and Main Dashboard styles
 *
 *  the following is not used
.buzz-menu {
  position: absolute;
   font-size: 1.5rem;
   font-weight:600;
   font-family: "Anaheim", sans-serif;
   width: 100%;
   height: 120px;
   top: 0;
   left: 0;
   background: aliceBlue;
   opacity: 0;
   visibility: hidden;
   transition: visibility 0s linear, transform 1.5s linear 2.0s, opacity 0.5s linear ;
   z-index: 10000;
}
.buzz-menu .balloon {
  position: absolute;
  display: table-cell;
   opacity: 0.6;
   transition: opacity 1.0s linear, translate 4.0s linear;
   top: 0;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #ffffff;
   vertical-align: middle;
   text-align: center;
   border: 1px solid #f3f3f3;
   transform: translateY(60px) scale(0.8);
}
.buzz-menu .balloon:hover {
   top: 50px;
   opacity: 1.0;
   background: #f3f3f3;
   transition-duration: 0.5s;
   transition-delay: 0.0s;
   transition: scale 1.0s ease-in-out, backgroundColor 1.0s ease-in-out;
   transform: translateY(-10px) scale(1.2);
}

.buzz-menu .balloon.default {
  left: 39px;
  background-image: url(../icons/Share-512.png);
}
.buzz-menu .balloon.linear {
  left: 149px;
  transition-timing-function: ease-in-out;
}
.buzz-menu .balloon.ease-in {
  left: 259px;
  transition-timing-function: ease-in-out;
}
.buzz-menu .balloon.ease-out {
  left: 369px;
  transition-timing-function: ease-in-out;
}
.buzz-menu .balloon.ease-in-out {
  left: 479px;
  transition-timing-function: ease-in-out;
}
.buzz-menu .balloon.cubic-bezier {
  left: 589px;
  transition-timing-function: ease-in-out;
}
.buzz-menu .balloon.default.item0 {
  left: 10px;
}
.buzz-menu .balloon.default.item1 {
  left: 120px;
}
.buzz-menu .balloon.default.item2 {
  left: 230px;
}
.buzz-menu .balloon.default.item3 {
  left: 340px;
}
.buzz-menu .balloon.default.item4 {
  left: 450px;
}
.buzz-menu .balloon.default.item5 {
  left: 560px;
}
*/

/* The popup form - hidden by default */
#buzz-main {
  background: url("../wallpapers/antelope.jpg") center;
}

#buzz-main, .buzzform-popup {
  background-size: cover;
  background-color: white;
  display: none;
  position: fixed;
  top: 64px;
  right: 8px;
  /* border: 3px solid #f1f1f1; */
  z-index: 10000;
  width: 540px;
  height: 700px;
  max-height: 90%;
  overflow: hidden;
  -webkit-box-shadow: 0 8px 40px rgba(0,0,0,.32);
  box-shadow: 0 8px 40px rgba(0,0,0,.16);
}

.buzzform-popup {
  display: block;
  top:50%;left:50%;
  transform:translate(-50%,-50%)
}



.buzz-favorites, #attachment-icons, #attachment-icons-alt {
  /*background: url("../wallpapers/antelope.jpg") center;
  background-size: cover;*/
  background-color: rgba(250,250,250,0.95);
  display: block;
  position: fixed;
  border: 0px solid #f1f1f1;
  z-index: 999999;
  transition: width ease 0.3s;
  margin: auto;
  height: 104px;
  overflow: hidden;
  box-shadow: 0 6px 20px 8px rgba(0,0,0,.1785);
}

#attachment-icons-alt {
  position: absolute;
    bottom: 78px;
    left: 8px;
    height: unset;
  background-color: rgba(250,250,250,0.98);
  display: none;
  padding: 12px 12px 0px;

}

#attachment-icons-alt svg {
  background-color: #d91e43;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: white;
  padding: 24px;
}

#attachment-icons-alt .dropdown-list-item-title {
  padding-left: 12px;
  padding-right: 48px;
  font-family: Rajdhani, sans-serif;
}

svg.attachment-icon {
  width: 64px;
  padding: 16px;
  color: white;
  margin: 0 12px;
}

.buzz-favorites {
  /*background: url("../wallpapers/antelope.jpg") center;
  background-size: cover;*/
  background-color: rgba(250,250,250,0.97);
  display: none;
  width: calc(60%);
  position: fixed;
  top: 64px;
  right: 16px;
}

.buzz-favorites.left, #buzz-entity-monitor.buzz-favorites {
  top: 128px;
  left: 12px;
  right: unset;
  background-image: linear-gradient(146deg, #d8fffc 0%, #1fa3b3 100%);
  width: unset;
  padding: 0 24px;
}

.buzz-favorites.shortcuts {
  background-image: linear-gradient(329deg, #e14491 0%, #e83535 100%);
  top: 72px;
}

#buzz-entity-monitor.buzz-favorites {
  top: 64px;
  left: unset;
  min-width: 400px;
}

#buzz-message-reactions {
  right: unset;
  width: unset;
  padding: 0 24px;
  overflow:hidden;
  -webkit-transition: width 2s ease-in-out;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;

}

#buzz-message-reactions.buzz-favorites {
  height: unset;
  border-radius: 16px;
  background-color: #00e7ff;
}


.common-document-actions .header {
  margin: auto;
  min-width: 75%;
  flex-direction: row;
}

.common-document-actions.high-z-index {
  z-index: 999999999;
}

.common-document-actions .header h4, #buzzflow-tools .header h4 {
  color: teal;
  padding-top: 12px;
  padding-bottom: 6px;
  padding-left: 32px;
  padding-right: 32px;
  font-family: 'Rajdhani', sans-serif;
  flex: auto 9 0;
  text-align: left;
  font-size: 2rem;

}

.common-document-actions h5, #buzzflow-tools .header h5 {
  color: #444;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 32px;
  padding-right: 32px;
  font-size: 1rem;
  margin: auto;
  font-family: 'Montserrat', sans-serif;
  min-width: 75%;
  max-width: 480px;
  line-height: 28px;
}

.media-actions-file {
  color: black;
  font-weight: 800;
  font-size: 1.5rem;
  font-family: 'Anaheim', sans-serif;
  background-color: #ffff002e;
  padding: 0px 6px;
}

.subrow {
  display: flex;
  flex-direction: row;
}

#buzz-incoming-calls, #buzz-group-monitor {
  background-color: white;
  display: none;
  position: absolute;
  top: 64px;
  right: 32px;
  padding-left: 24px;
  /* border: 3px solid #f1f1f1; */
  z-index: 1000050;
  width: 640px;
  overflow: hidden;
  flex-direction: column;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); */
  transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
  -webkit-box-shadow: 0 24px 38px 3px rgb(0 0 0 / 14%), 0 9px 46px 8px rgb(0 0 0 / 12%), 0 11px 15px -7px rgb(0 0 0 / 20%);
  cursor: url("/static/images/vote-bubble.png"), auto;
}
#buzz-call-container-stop-sound {
  color: #009ad1;
  cursor: pointer;
  display: none;
}

#buzz-incoming-calls.incoming  #buzz-call-container-stop-sound {
  display: flex;
}

.buzz-incoming-calls-container {
  width: 100%;

}

#buzz-incoming-calls-list, .common-document-actions-list {
  margin-bottom: 0;
  margin: auto;
  min-width: 75%;
}
.buzz-incoming-calls-list-item-left-group {
  flex-direction: row;
  display: flex;
}

.buzz-incoming-calls-list-item-middle-group {
  display: flex;
}

.buzz-incoming-calls-list-item.buzz-incoming-calls-list-item.flex-column .buzz-incoming-calls-list-item-middle-group {
  height: 256px;
  align-items: center;
}

.buzz-incoming-calls-list-item-title, .pdf-document-actions-item-title {
  font-size: 20px;
  color: #c14e1b;
  letter-spacing: 1.2px;
  padding-left: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  flex: 2 0 auto;
  cursor: pointer;
  font-family: 'Barlow Semi Condensed', proxima-nova, sans-serif;
  max-width: 280px;
}

.buzz-incoming-calls-list-item-title {
  text-transform: uppercase;
  max-width: 440px;

}

.pdf-document-actions-item-title {
  max-width: unset;
  margin-right: 16px;
}
.buzz-incoming-calls-list-item-title.stack {
  flex-direction: column;
  align-items: flex-start;
}

.buzz-incoming-calls-list-item-subtitle {
  font-size: 15px;
  padding-left: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  flex-basis: 1 1 auto;
}

.buzz-incoming-calls-list-item-title.stack .buzz-incoming-calls-list-item-subtitle {
  padding-left: 0;
  padding-top: 12px;

}

.buzz-incoming-calls-list-item, .pdf-document-actions-item {
  min-height: 84px;
  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;
}
.pdf-document-actions-item {
  min-height: 96px;
  padding: 4px 12px;
  cursor: pointer;
}

.pdf-document-actions-item:hover {
  background-color: aliceblue;
}

.pdf-document-actions-item:hover .buzz-incoming-calls-list-item.icon svg, .pdf-document-actions-item:hover .buzz-incoming-calls-list-item.icon img {
  color: teal;
}

.buzz-incoming-calls-list-item.last, .pdf-document-actions-item.last {
  border-bottom: 0px;
  padding-bottom: 32px;
}
.buzz-incoming-calls-list-item.flex-column {
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
}

.buzz-incoming-calls-list-item.icon img, .buzz-incoming-calls-list-item.icon svg {
  background-color: transparent;
  /* margin-left: 12px; */
}

.pdf-document-actions-item.icon img, .pdf-document-actions-item.icon svg {
  background-color: transparent;
  margin-left: 12px;
  width:48px;
  color: darkgray;
}


.buzz-incoming-calls-list-item-aux {
  font-size: 1.8vh;
  padding-left: 12px;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  width: 164px;
  max-width: 164px;
}

.buzz-incoming-calls-list-item-icon {

}

.round-button {
  border-radius: 50%;
  height: 48px;
  width: 48px;
  color: white;
  display: flex;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}

.round-button.call-reject-icon {
  background-color: #d91e43;
}

.round-button.call-accept-icon {
  background-color: #009ad1;
}

.round-button .round-button-text {
  display: none;
}

.round-button.confirm .round-button-text {
  display: inline-block;
  margin-left: 50px;
  color: #009ad1;
}

#mentions-popup.confirm .round-button-text {
  font-size: 12px;
}

.round-button.confirm {
  width: 128px;
  border-radius: 10px;
  content: 'CONFIRM';
  background-color: aliceblue;
  flex-direction: row;
}

#attachment-icons {
  background-color: rgba(250,250,250,0.95);
  display: block;
  position: absolute;
  bottom: 78px;
  left: 8px;
}

.buzz-favorites .btn, #attachment-icons .btn {
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background-color: #4CAF50;
  color: white;
  margin: 4px 12px;
  padding: 0;
  display: inline-block;
}

.buzz-favorites .btn.transparent {
  box-shadow: none;
}

.buzz-favorites .btn img, #attachment-icons .btn img {
  object-fit: cover;
}
.buzz-favorites .btn.hidden, #attachment-icons .btn.hidden {
  display: none;
}

.buzz-favorites.monitor {
  height: unset;
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

#buzz-message-reactions .btn {

}

#entity-monitor-message, #entity-monitor-someone-message {
  color: black;
  font-size: 0.8rem;
  font-family: 'Barlow Semi Condensed';
  text-align: left;
}

#entity-monitor-someone-message {
  text-align: center;
  text-transform: uppercase;
  color: white;
}

#message-reactions button {
  font-size: 32px;
  width: 48px;
  height: 48px;
  border-radius: 32px;
  margin: 4px;
}

#message-reactions .message-reactions-row {
  display: flex;flex-direction: row;
}

.favorites-container .caption, .attachment-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 */
.favorites-container {
  padding: 10px;
  background-color: rgba(0,0,0,0);
  text-align: center;
  margin-top: 12px;
  overflow-x: scroll;
}

.favorites-container .dialogclose {
  color: black;
}

#buzz-entity-monitor .favorites-container .caption {
  right: unset;
  left: 12px;
  top: 20px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: black;
  font-weight: 600;
}

#buzz-message-reactions .favorites-container {
  padding: 0px;
  margin: 0;
  width: 100%;
}

#monitoringUsers.hide {
  border-top: 0px solid white;
}

#monitoringUsers {
  /* border-top: 1px solid white; */
    padding-top: 12px;
    margin-top: 12px;
}

#buzz-entity-monitor .favorites-container {
  margin: 48px auto 0;
}

#favorites, #attachments {
  z-index: 1000;
  height: 100%;
  white-space: nowrap;
  margin: auto;
}

/* Include Attachment */

/* Add styles to the form container */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 1.0;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 0.9;
}

/* Main Menu */
.home-page {
/*  background: url("../static/images/antelope.jpg") no-repeat center center fixed;
  background-size: cover;*/
  display: none;
  position: fixed;
  top: 0;
  right: 0px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

.main-menu-container h4 {
  color: #ffffff;
  padding-top: 24px;
  padding-bottom: 16px;
  font-family: 'Rajdhani', sans-serif;
}

/* Add styles to the form container */
.main-menu-container {
  max-width: 320px;
  padding: 10px;
  background-color: rgba(0,0,0,0);
  text-align: center;
  margin: auto;
}

/* Full-width input fields */
.main-menu-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.main-menu-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.main-menu-container .btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 1.0;
  vertical-align: middle;
}

/* Add a red background color to the cancel button */
.main-menu-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.main-menu-container .btn:hover, .open-button:hover {
  opacity: 0.95;
  transform: scale(1.05); /*translateX(15%) rotateZ(-11deg) scale(.87);*/
  transition: transform .2s ease-out
}

/* Add styles to the form container */
.buzz-phone-container {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 0px;
  background-color: rgba(255,255,255, 1);
  text-align: center;
  margin: auto;
  z-index: 200;
  flex-direction: column;
}

#buzz-phone-container-bg, .buzz-call-container-bg {
  filter: blur(50px);
  -webkit-filter: blur(50px);
  top: -25px;
  left: -25px;
  right: 25px;
  width: 110%;
  height: 110%;
  object-fit: cover;
  opacity: 0.6;
  position: absolute;
  background-color: white;
  display: none;
}

.buzz-call-container-bg {
  display: block;
  opacity: 0.2;
}

#buzz-main-phone-container.buzz  .material-icons.padclose-icons {
  color: white;
}

#buzz-main-phone-container.buzz #buzz-phone-container-bg {
  display: block;
  background: url("../wallpapers/antelope.jpg") center;

}

/* Container */
#buzz-main-phone-container {
  background-color: white;
}

#buzz-main-phone-container.buzz {
  background-color: black;
}

#buzz-main-phone-container.buzz #caller-id-phone {
  background-color: transparent;
  color: wheat;
}


#buzz-main-phone-container.buzz #caller-id-name {
  color: white;
}


#buzz-main-phone-header {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 64px;
  z-index: 101;
}

.buzz-phone-footer {
  display: flex;
  flex-direction: row;
  width: 100%;
  position: absolute;
  bottom: 0;
  justify-content: space-between;
  align-items: center;
}

#caller-id {
  width: 100%; 
  margin: auto; 
  background-color: transparent; 
  border: 0px solid #eee;
  display: flex;
  flex-direction: column;
}

.caller-id-top {
  text-align: left;
  padding-left: 12px;
  display: flex;
  align-items: center;
}

.caller-id-bottom {
  display: flex;
  flex-direction: row;
  justify-items: left;
}

#caller-id-phone {
  text-align: left;
  margin-left: 12px;
  font-family: 'Avenir Next', Anaheim, sans-serif; 
  font-size: 1.2rem;
  background-color: #ebeeee;;
  padding: 2px 8px;
  border-radius: 0px;
  height: 24px;
  line-height: 24px;
  /* padding-bottom:0px; */
  color: black;
  letter-spacing: 2px;  
}

#caller-id-name {
  display: inline;
  font-family: 'Rajdhani', sans-serif; 
  font-size: 1.6rem; 
  color: #136586; 
  padding-top:0px; 
  letter-spacing: 2px;
  text-transform: uppercase;
}

#caller-id-icon, .buzz-main-phone-header-icons {
  /* line-height: 42px;  */
  width: 42px; 
  margin-left: 8px; 
  height: 42px;
  color:#0090c0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#caller-id-icon, #phone-paste-icon, #phone-list-icon {
  background-repeat: no-repeat;
  background-size: 36px 36px;
  width: 36px;
  height: 36px;
}

#caller-id-icon {
  background-image: url("/static/icons/Bizcard-512.png");
}
#phone-paste-icon {
  background-image: url("/static/icons/Buzz-Phone-Paste.png");
}
#phone-list-icon {
  background-image: url("/static/icons/Buzz-Phone-List.png");
}

.buzz-phone-container.buzz #caller-id-icon {
  background-image: url("/static/icons/Bizcard-White-512.png");
}

.buzz-phone-container.buzz #phone-paste-icon {
  background-image: url("/static/icons/Buzz-Phone-Paste-White.png");
}

.buzz-phone-container.buzz #phone-list-icon {
  background-image: url("/static/icons/Buzz-Phone-List-White.png");
}

.buzz-main-phone-header-buttons {
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  justify-items: center;
}

#buzz-phone {
  height: 500px;
  width: 320px;
  left: 0px;
  display: flex;
  margin: auto;
  z-index: 100;
}


#buzz-phone-inline {
  height: 500px;
  width: 320px;
  left: 0px;
  display: flex;
  margin: auto;
  z-index: 100;
}

#addtoinbox {
  position: absolute;
  z-index: 1000002;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	display: none;
	align-items: center;
	justify-content: space-around;
  justify-items: center;
  background-color: aliceblue;
  flex-direction: column;
}

#addtoinboxInfo {
  width: 90%;
  margin-top: 64px;
}

#addtoinboxInput {
  flex: 9 0 auto;
  text-align: left;
  margin-bottom: 4px;
  margin-left: 12px;
  max-width: 80%;
}

#individualProfileLinkMenu, #groupMembersLinkMenu, #groupPennantLinkMenu {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-content: center;
  justify-items: center;
}

#individualProfileLinkMenu svg, #groupMembersLinkMenu svg, #groupPennantLinkMenu svg {
  width: 64px;
  position: absolute;
  left: 0;
}

#groupMembersLinkToSettingsMenu svg {
  width: 24px;
  transition: color 0.8s;
  position: unset;
  height: 24px;
  transition: all 0.8s;
  color: gray;
}

#groupMembersLinkToSettingsMenu svg:hover {
  color: teal;
}

#individualProfileLinkMenuTitle, #groupMembersLinkMenuTitle, #groupPennantLinkMenuTitle {
  padding-left: 0;
}

.svg-icon {
  width: 64px;
  display: flex;
  justify-content: center;
}

.dropdown-content li>a {
  color: #d31943;
  display: block;
  font-size: 1.33rem;
  font-weight: 800;
  height: 48px;
  line-height: 48px;
  padding: 0 32px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown-content li>a.dropdown-item {
  color: #009ad1;
  padding: 8px 32px 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.dropdown-content li>a.dropdown-item svg {
  color: lightslategray;
  width: 32px;
  margin: 12px;
}

.dropdown-content, .attachment-content {
  font-size: 1.5rem;
  min-width: 400px;
  max-width: 95%;
}

.attachment-content .dropdown-list-item-subtitle {
  text-transform: uppercase;

}

.dropdown-title {
  color: darkslategray;
  padding-left: 8px;
}

#pdf-floating-button, #audio-floating-button, #buzzphone-floating-button,  #search-floating-button, #skyscape-lightning-floating-button, #buzzlocomotion-floating-button, #flashdrive-floating-button  {
  position: absolute;
  height: 64px;
  width: 64px;
  background-color: #479696;
  color: #FFFFFF;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  text-align: center;
  border-radius: 32px;
  font-weight: bold;
  line-height: 35px;    
  margin: 0 auto;
  z-index:999980;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;

}

#search-floating-button {
  background-color: salmon;
}

#buzzlocomotion-floating-button  {
  background-color: orange;
}

#flashdrive-floating-button {
  background-color: #beffe9;
}


#pdf-floating-button a, #audio-floating-button a, #buzzphone-floating-button a, #skyscape-lightning-floating-button a, #search-floating-button a, #buzzlocomotion-floating-button a {
  text-decoration: none;
  color: wheat;
  font-size: 100%;
  position: relative;
}

#audio-floating-button a {
  background-color: #009ad1;
}

#skyscape-lightning-floating-button {
  background-color: aliceblue;
  z-index: 9999999;
  top: 64px;
  left: calc(100% - 64px);
}

#buzzlocomotion-floating-button-image {
  /* background-color: aliceblue; */
  z-index: 9999999;
  top: 64px;
  right: calc(100% - 64px);
  object-fit: contain;
}
#buzzphone-floating-button a {
  background-color: #499eaa;
}

#search-floating-button a {
  background-color: transparent;
}

#audio-floating-button-image {
  width: 64px;
  height: 64px;
}

#flashdrive-floating-button-image {
  width: 48px;
  height: 48px;
}

#buzzphone-floating-button {
  background-color: #499eaa;
}

#buzzphone-floating-button-image {
  width: 32px;
  height: 32px;
}
#skyscape-lightning-floating-button-image, #search-floating-button-image, #buzzlocomotion-floating-button-image {
  width: 75%;
  height: 75%;
}

.schedule-inline-menu-button {
  height: 64px;
  display: flex;
  align-items: center;
}

.schedule-inline-menu-button span {
  width:64px;
  height:64px;
  background-color:transparent;    
  padding: 0; margin: 0;
  display:flex;
  align-items: center;
  justify-items: center;
}

.schedule-inline-menu-button span svg {
  color: gray;
}

.schedule-inline-menu-button span svg.active {
  color: teal;
}

.logout-container, .idle-container, .pdf-container, .schedule-container, .cloudlink-container, #buzz-cloud-link-container, #buzz-import-container, .global-menu-container, #wallpaper-container  {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 100vh;
  padding: 0px;
  background-color: rgba(255,255,255, 1);
  text-align: center;
  margin: auto;
  z-index: 999999;
  display:none;
  align-items: center;
  justify-items: center;
  flex-direction: column;
}

#buzzforms-container, #buzzscheduler-container  {
  display: none;
  background-color: #e1e6e6;
}

#wallpaper-container {
  background-image: linear-gradient(120deg, #2ec5df 0%, #e84343 100%);
}

#buzz-cloud-link-container, #buzz-import-container, .buzzscheduler-container  {
  width: 100%;
}

#buzz-import-container {
  background-color: #fcfffe;
}

#buzz-popup-container {
  display: none;
}

.cloudlink-container {
  display:flex;
  height: calc(100vh - 64px);
  top: 64px;
}
#buzz-import-link {
  background-color: transparent;
}

.pdf-container, .schedule-container, .cloudlink-container  {
  width: 100%;
  align-items: flex-start;
  align-content: center;
  justify-content: flex-start;
  z-index: 999990;
}

.buzzscheduler-content {
  width: 100vw;
  padding: 0px;
  /* background-color: rgba(0,255,255, 1); */
  text-align: center;
  display:flex;
  align-items: center;
  justify-items: center;
  flex-direction: column;
  align-items: flex-start;
  align-content: center;
  justify-content: flex-start;
  z-index: 1;
}

.buzzscheduler-container.cloudlink-container  {
  z-index: 1;
}

#buzz-import-container cloudlink-header, #buzzforms-container cloudlink-header, .buzzscheduler-container cloudlink-header {
  background-color: transparent;
}

.pdf-container h4, .schedule-container h4, cloudlink-header h4 {
  font-size:48px;
  font-weight: 500;
  font-family: Rajdhani, sans-serif;
  color: #009ad1;
}

cloudlink-header h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 30px;
}

#cloudlink-inline-title {

}

cloudlink-header .title {
  margin-top: 0;
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-between;
  flex: 9;
}

cloudlink-header .inline-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}

cloudlink-header .inline-menu img {
  cursor: pointer;
}

flashdrive-header .inline-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
}

flashdrive-header .media-title {
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  flex: 9 1 auto;
}

.schedule-container h4 {
  margin-top: 6px;
  margin-bottom: 6px;
}

.pdf-header, .calendar-header, cloudlink-header {
  width: 100%;
  height: 64px;
  padding: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: white;
  display: flex;
  flex-direction: row;
}

cloudlink-header {
  justify-content: space-between;
}

/* Header element in all pages */

pdf-header, cloudlink-header, flashdrive-header {
  width: 100%;
  height: 64px;
  padding: 8px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: white;
  background: white;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.pdf-container.mobile pdf-header {
  height: 96px;
}

pdf-header .container,  flashdrive-header .container {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 900px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

pdf-header .container > div:first-child {
  float: left;
}

pdf-header .container > div:first-child > a {
  display: inline-block;
  width: 242px;
  height: 44px;
}

pdf-header .container > div:last-child {
  float: right;
  height: 44px;
}

pdf-header .title {
  color: #009ad1;
  font-size: 1.7em;
  line-height: 44px;
  margin-left: 8px;
  float: right;
}

flashdrive-header .title {
  color: #009ad1;
  font-size: 1.7em;
  line-height: 44px;
  margin-left: 8px;
  float: right;
}

.pdf-container.mobile pdf-header .title {
  height: 96px;
  line-height: 96px;
  text-align: left;
}


pdf-header .pdf-inline-menu, pdf-header .schedule-inline-menu {
  flex: 1 1 auto;
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.pdf-container.mobile pdf-header .pdf-inline-menu {
  height: 96px;
}


pdf-header .title, flashdrive-header .title {
  font-size: 2rem;
  font-family: Rajdhani, sans-serif;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 192px);
  flex: 9 1 auto;
}

flashdrive-header .title {
  max-width: unset;
  height: 72px;
}

pdf-header .button {
  display: inline-block;
  padding: 12px 17px;
  margin: 0 10px;
  color: white;
  text-decoration: none;
  border: 1px solid white;
  border-radius: 5px;
}

pdf-header .button.filled {
  background: white;
  color: #00a5e4;
}

/* pdf-header .logo {
  display: block;
  width: 160px;
  height: 100%;
  margin-right: 82px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDgiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0MDggNDQiPiAgPHBhdGggZmlsbD0iI0ZGRiIgZD0iTTM5My4xNywwLjQgTDM5My4xNywzMiBDMzkzLjE3LDMyLjYgMzkyLjkxLDMzLjEgMzkyLjQxLDMzLjUgQzM5MS44OSwzMy44IDM5MS4yOSwzNCAzOTAuNTgsMzQgQzM5MC4wMSwzNCAzODkuNDUsMzMuOSAzODguOSwzMy43IEMzODguMzcsMzMuNSAzODcuOTMsMzMuMSAzODcuNiwzMi43IEMzODYuNDIsMzEgMzg0LjU1LDI2LjcgMzgyLDE5LjkgQzM3OS43LDEzLjYgMzc3LjI3LDkuMSAzNzQuNzIsNi4zIEMzNzAuODgsMi4xIDM2NS43NSwzLjYzNzk3ODgxZS0xMiAzNTkuMzIsMy42Mzc5Nzg4MWUtMTIgQzM1NC41MSwzLjYzNzk3ODgxZS0xMiAzNTAuNTQsMC43IDM0Ny40NCwyIEMzNDMuODcsMy43IDM0Mi4wNyw2IDM0Mi4wNyw5LjEgTDM0Mi4wNyw0Mi44IEwzNTYuNDgsNDIuOCBMMzU2LjQ4LDExLjIgQzM1Ni40OCwxMC42IDM1Ni42NSwxMC4yIDM1Ni45OSw5LjggQzM1Ny4zMiw5LjUgMzU3Ljk2LDkuMyAzNTguODgsOS4xIEMzNjAuMjUsOSAzNjIuMDEsMTAuOCAzNjQuMTQsMTQuNiBDMzY1LjY1LDE3LjIgMzY3LjQ2LDIxLjEgMzY5LjYxLDI2LjIgQzM3MS45LDMxLjYgMzczLjE5LDM0LjYgMzczLjQ4LDM1LjEgQzM3NC44OCwzNy45IDM3Ny4zLDQwIDM4MC43MSw0MS41IEMzODMuNzQsNDIuOCAzODcuMTksNDMuNCAzOTEuMDcsNDMuNCBDMzk1LjUsNDMuNCAzOTkuMzIsNDIuNiA0MDIuNTEsNDEgQzQwNS44OSwzOS4yIDQwNy41OCwzNyA0MDcuNTgsMzQuMyBMNDA3LjU4LDAuNCBMMzkzLjE3LDAuNCBaIE0zMjIuMjksMjkuOSBDMzIwLjIyLDMyLjUgMzE3LjQ3LDMzLjggMzE0LjA2LDMzLjggTDI5Ny42NCwzMy44IEMyOTQuMiwzMy44IDI5MS40NSwzMi41IDI4OS40MSwyOS45IEMyODcuNTYsMjcuNiAyODYuNjMsMjQuNyAyODYuNjMsMjEuNCBDMjg2LjYzLDE4LjIgMjg3LjU1LDE1LjUgMjg5LjM2LDEzLjMgQzI5MS4zOCwxMC45IDI5NC4xMyw5LjcgMjk3LjY0LDkuNyBMMzE0LjA2LDkuNyBDMzE3LjYsOS43IDMyMC4zNywxMC45IDMyMi4zOSwxMy4zIEMzMjQuMjEsMTUuNSAzMjUuMTIsMTguMiAzMjUuMTIsMjEuNCBDMzI1LjEyLDI0LjcgMzI0LjE4LDI3LjYgMzIyLjI5LDI5LjkgTDMyMi4yOSwyOS45IFogTTMxNi40NCwwLjggTDI5NS4yNCwwLjggQzI4Ny43NCwwLjggMjgxLjc2LDMgMjc3LjI4LDcuNSBDMjc1LjEzLDkuNyAyNzMuNTcsMTIuMSAyNzIuNTcsMTQuNyBDMjcyLjYxLDE0LjMgMjcyLjYzLDEzLjkgMjcyLjYzLDEzLjUgQzI3Mi42MywxMC4xIDI3MS4xNyw3LjEgMjY4LjIyLDQuOCBDMjY1LDIuMSAyNjAuNjMsMC44IDI1NS4xLDAuOCBMMTcyLjI2LDAuOCBMMTcyLjI2LDkuNyBMMTg2Ljg4LDkuNyBMMTg2Ljg4LDQyLjkgTDIwMS4wOSw0Mi45IEwyMDEuMDksOS43IEwyNTIuNzMsOS43IEMyNTQuMzUsOS43IDI1NS42NCwxMC4xIDI1Ni41NiwxMC45IEMyNTcuMzgsMTEuNiAyNTcuODEsMTIuNSAyNTcuODEsMTMuNSBDMjU3LjgxLDE0LjUgMjU3LjM4LDE1LjMgMjU2LjU2LDE2IEMyNTUuNjQsMTYuOCAyNTQuMzUsMTcuMSAyNTIuNzMsMTcuMSBMMjM1LjA5LDE3LjEgQzIyOS4zMiwxNy4xIDIyNC45NCwxOC4zIDIyMS45NiwyMC43IEMyMTkuMzcsMjIuOCAyMTguMDgsMjUuNSAyMTguMDgsMjguOSBMMjE4LjA4LDQyLjggTDIzMi4yOSw0Mi44IEwyMzIuMjksMzIuMyBMMjczLjE1LDQzLjcgTDI3My4xNSwzMy44IEwyNDYuMTQsMjYuMiBMMjU1LjEsMjYuMiBDMjYwLjY2LDI2LjIgMjY1LjA1LDI0LjkgMjY4LjI3LDIyLjMgQzI2OS43OCwyMSAyNzAuODksMTkuNyAyNzEuNjEsMTguMSBDMjcxLjM4LDE5LjQgMjcxLjI2LDIwLjggMjcxLjI2LDIyLjIgQzI3MS4yNiwyNy44IDI3My4yMywzMi42IDI3Ny4xOSwzNi40IEMyODEuNiw0MC43IDI4Ny42Miw0Mi45IDI5NS4yNCw0Mi45IEwzMTYuNDQsNDIuOSBDMzI0LjEsNDIuOSAzMzAuMTMsNDAuNyAzMzQuNTMsMzYuNCBDMzM4LjQ3LDMyLjYgMzQwLjQzLDI3LjggMzQwLjQzLDIyLjIgQzM0MC40MywxNi40IDMzOC40MSwxMS41IDMzNC40LDcuNSBDMzI5LjkzLDMgMzIzLjk0LDAuOCAzMTYuNDQsMC44IEwzMTYuNDQsMC44IFogTTEyNC43OCwzLjggQzEyMS42Niw1LjUgMTE5LjM1LDggMTE3Ljg5LDExLjQgQzExNi42OCwxNC4yIDExNi4wNywxNy41IDExNi4wNywyMS41IEwxMTYuMDcsNDIuOSBMMTMwLjQ4LDQyLjkgTDEzMC40OCwyNi4yIEwxNzAuODgsMjYuMiBMMTcwLjg4LDE3LjEgTDEzMC40OCwxNy4xIEMxMzAuNTcsMTYuNSAxMzAuNjksMTUuOSAxMzAuODIsMTUuMiBDMTMxLjIzLDEzLjcgMTMxLjk2LDEyLjUgMTMzLjAyLDExLjYgQzEzNC40OSwxMC4zIDEzNi40OSw5LjcgMTM5LjAxLDkuNyBMMTcwLjg4LDkuNyBMMTcwLjg4LDAuOCBMMTM5LjAxLDAuOCBDMTMzLjExLDAuOCAxMjguMzcsMS44IDEyNC43OCwzLjggTDEyNC43OCwzLjggWiBNOTUuNDQsMjkuOSBDOTMuMzcsMzIuNSA5MC42MiwzMy44IDg3LjIxLDMzLjggTDcyLjIyLDMzLjggTDcyLjIyLDkuNyBMODcuMjEsOS43IEM5MC43NSw5LjcgOTMuNTMsMTAuOSA5NS41NCwxMy4zIEM5Ny4zMywxNS41IDk4LjIyLDE4LjIgOTguMjIsMjEuNCBDOTguMjIsMjQuOCA5Ny4yOSwyNy42IDk1LjQ0LDI5LjkgTDk1LjQ0LDI5LjkgWiBNODkuNjEsMC44IEw1Ny44MSwwLjggTDU3LjgxLDQyLjkgTDg5LjYxLDQyLjkgQzk3LjI2LDQyLjkgMTAzLjI5LDQwLjcgMTA3LjcxLDM2LjQgQzExMS42MywzMi42IDExMy41OSwyNy44IDExMy41OSwyMi4yIEMxMTMuNTksMTYuNCAxMTEuNTksMTEuNSAxMDcuNTYsNy41IEMxMDMuMDksMyA5Ny4xMSwwLjggODkuNjEsMC44IEw4OS42MSwwLjggWiBNNTAuMTcsNC44IEM0Ni45NSwyLjEgNDIuNTcsMC44IDM3LjA1LDAuOCBMMC4wNCwwLjggTDAuMDQsOS43IEwzNC42Niw5LjcgQzM2LjMsOS43IDM3LjU4LDEwLjEgMzguNSwxMC45IEMzOS4zNCwxMS42IDM5Ljc1LDEyLjUgMzkuNzUsMTMuNSBDMzkuNzUsMTQuNSAzOS4zNCwxNS4zIDM4LjUsMTYgQzM3LjU4LDE2LjggMzYuMywxNy4xIDM0LjY2LDE3LjEgTDE3LjA0LDE3LjEgQzExLjI2LDE3LjEgNi44OSwxOC4zIDMuOTEsMjAuNyBDMS4zMiwyMi44IDAuMDQsMjUuNiAwLjA0LDI4LjkgQzAuMDIsMzEuMSAxLjI2MjE3NzQ1ZS0yOSwzMy4yIDEuMjYyMTc3NDVlLTI5LDM1LjIgTDEuMjYyMTc3NDVlLTI5LDQwIEMxLjI2MjE3NzQ1ZS0yOSw0MS4yIDAuMDIsNDIuMiAwLjA0LDQyLjkgTDE0LjIzLDQyLjkgTDE0LjIzLDMzLjkgQzE0LjE0LDMzLjggMTQuMDksMzMuNiAxNC4wNywzMy40IEMxNC4wNCwzMy4zIDE0LjAzLDMzIDE0LjAzLDMyLjUgQzE0LjAzLDMwLjkgMTQuNTQsMjkuNiAxNS41NywyOC42IEMxNy4xLDI3IDE5LjYzLDI2LjIgMjMuMTgsMjYuMiBMMzcuMDMsMjYuMiBDNDIuNiwyNi4yIDQ3LDI0LjkgNTAuMjIsMjIuMyBDNTMuMTIsMTkuOSA1NC41OCwxNyA1NC41OCwxMy41IEM1NC41OCwxMC4xIDUzLjExLDcuMSA1MC4xNyw0LjggTDUwLjE3LDQuOCBaIi8+PC9zdmc+);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
} */

pdf-header .menu {
  width: 40px;
  height: 40px;
  display: none;
  cursor: pointer;
  float: right;
}

pdf-header .menu div {
  width: 32px;
  height: 4px;
  background-color: white;
  margin: 7px 4px;
}

.pdf-inline-menu-item {
  width: 64px;
  height: 64px;
  display: flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;
}
.pdf-inline-menu-button {
  height: 64px;
  display: flex;
  align-content: center;
}
.pdf-container.mobile pdf-header .pdf-inline-menu-button {
  height: 64px;
}

.pdf-viewer-aux-button:hover {
  background-color: #d91e43;
  transition: background-color 1s;
}

.pdf-inline-menu-icon {
  width: 64px;
  height: 64px;
  display: flex;
  justify-items: center;
  align-items: center;
}


#pdf-inline-viewer {
  width: 100%;
  flex: 9 1 auto;
  -webkit-box-shadow: 1px 1px 10px #bbb;
  box-shadow: 1px 1px 10px #bbb;
}

iFrame#logout-shim.logout, iFrame#pdf-shim.flow-document {
  width: 100vw;
  height: 100vh;
}

.idle-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  justify-items: stretch;
  cursor: pointer;
  /* background-color: teal; */
  background-size: cover;
  transition: opacity 1s;
  background-color: #0093E9;
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

}

#idle-container.image {
  background: url("/static/wallpapers/antelope.jpg") no-repeat center center fixed;
  background-size: cover;
}

#idle-buzzlink-container.image {
  background: url("/static/wallpapers/NatGeo01.jpg") no-repeat center center fixed;
  background-size: cover;
}

#idle-buzzlink-container {
  display: none;
}

#idle-buzzflow-tools, .common-document-actions {
  display: none;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: default;
  background-image: linear-gradient(120deg, #aeb4b7d4 0%, #1d3c49d4 100%);
}


.idle-container .header {
  display: flex;
  flex: 1 1 auto;
  justify-content: stretch;
  flex-direction: column;
  margin-top: 32px;
}

.idle-container .title {
  display: block;
  flex: 1 1 auto;
}


.idle-container .content {
  display: flex;
  /* background-color: aliceblue; */
  flex: 8 1 auto;
  flex-direction: column;

}



.idle-container .content label {
  color: #bbb;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 1.0;
  vertical-align: middle;
  font-family: Montserrat, Anaheim, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
}

.idle-container .content .sessions, .idle-container .content .contacts,
.idle-container .content .video, .idle-container .content .chat {
  color: white;
}

.idle-container:hover .content .sessions {
  color: #14a793;

}

.idle-container:hover .content .contacts {
  color: #d91e43;

}

.idle-container:hover .content .video {
  color: salmon;

}

.idle-container:hover .content .chat {
  color: #009ad1;

}

#idle-title {
  align-self: center;
}

#idle-title-icons {
  align-self: center;
  display: none;
  flex-direction: row;
  /* max-width: 192px; */
  justify-content: space-between;
}
.idle-container:hover #idle-title-icons {
  display: flex;
}

.idle-container .title {
  font-family: Rajdhani, proxima-nova, sans-serif;
  font-size: 2.0rem;
  color: rgb(216, 216, 125);
  margin-top: 18px;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  min-height: 64px;
}
.idle-container:hover .title {
  color: teal;
  font-size: 2.0rem;
}

.idle-container .footer, #about .footer {
  bottom: 0; 
  position: absolute; 
  width: 100%; 
  height: 64px;
  z-Index:999999;
  display: flex;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: stretch;
}

#about .footer {
}

.idle-container .toprow {
  top: 0; 
  right: 20px;
  position: absolute; 
  margin: 12px;
  height: 64px;
  z-Index:999999;
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: stretch;
  background-color: transparent;
  opacity: 0;
  transition: opacity 1s;
  width: fit-content;
  flex-shrink: 0;
}

.idle-container .toprow.left {
  top: 0; 
  left: 20px;
  position: absolute; 
  margin: 12px;
  height: 64px;
  z-Index:999999;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-items: center;
  justify-content: stretch;
  background-color: transparent;
  opacity: 0;
  transition: opacity 1s;
}



body.mobile {
  font-size: 1.5rem;
}

body.mobile .smart-text {
  font-size: 1.5rem;
}

.smart-action {
  margin: 6px 18px;
}

body.mobile .circle-button-48 {
  width: 64px;
  height: 64px;
}

body.mobile .conversation-image {
  display: none;
}

body.mobile .circle-button {
  width: 84px;
  height:84px;
}


body.mobile #listAwesomeIcon svg {
  transform: scale(0.7);
}

.sidenav-buzzlink, body.mobile .sidenav {
  transform: translateX(0);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  position: absolute;
  background: white;
  z-index: 100000;
  display: none;
  overflow-x: hidden;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  overflow-y: scroll;
  border: 2px solid lightgray;
}

.sidenav-buzzlink.open, body.mobile .sidenav.open {
  display: block;    
}


/* Add the following to the common dialog management */
.footerbutton {
  padding: 0.5rem 2vw;
  margin: 6px;
  letter-spacing: 2px;
  border: 0;
  background: #009AD1;
  color: white;
  font-size: 1.3vmin;
  text-transform: uppercase;
  vertical-align: .25em;
  cursor: pointer;
  border-radius: .3em;
}

.footerbutton.plain {
  background: transparent;
  flex: 1 0 auto;
}
.footerbutton.plain:hover {
  background: #009AD1;
  color: white;
}

.footer-central {
  flex: 8 0 auto;
}
.circle-button {
  background-color: white;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 0 12px;
  -webkit-transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.circle-button.red {
  color: white;
  background-color: #d91e43;
}

.circle-button.bright {
  color: white;
  background-color: #efa219;
}


#idle-continue-button {
  margin: auto;
}



.idle-container .content button {
  background-color: whitesmoke;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  width: 192px;
  height: 192px;
  align-items: center;
}

#buzzflow-tools .content button {
  height: 128px;

}

.idle-container .content button img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 24px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.01), 0 8px 16px -1px rgba(0, 0, 0, 0.06), 0 4px 10px 0 rgba(0, 0, 0, 0.01);
}

.idle-container .content button img:hover {

  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 8px 16px -1px rgba(0, 0, 0, 0.12), 0 4px 10px 0 rgba(0, 0, 0, 0.08);
}
.idle-container .content .group {
  display: flex;
  flex-direction: column;
  width: max-content;
  margin: auto;
  justify-content: center;
}

.idle-container:hover {
  opacity: 0.95;
}

#idle-buzzflow-tools .content .group {
  width: unset;
}

#idle-buzzflow-tools .content button img {
  width: 64px;
  height: 64px;
  box-shadow: none;
  -webkit-box-shadow: none;
  fill: #94d31b; 
}

.buzzflow-tools {
  display: block;
  text-indent: -9999px;
  width: 64px;
  height: 64px;
  background-size: 64px 64px;
  opacity: 0.25;
}

.buzzflow-tools.search {
  background: url(/static/svg/buzzflow_search.svg) no-repeat center center;
  background-size: contain;
}
.buzzflow-tools.freehand {
  background: url(/static/svg/buzzflow_freehand.svg) no-repeat center center;
  background-size: contain;

}

.buzzflow-tools.eraser {
  background: url(/static/svg/buzzflow_eraser.svg) no-repeat center center;
  background-size: contain;

}

.buzzflow-tools.freetext {
  background: url(/static/svg/buzzflow_freetext.svg) no-repeat center center;
  background-size: contain;

}

.buzzflow-tools.notes {
  background: url(/static/svg/buzzflow_notes.svg) no-repeat center center;
  background-size: contain;
}

.buzzflow-tools.square {
  background: url(/static/svg/buzzflow_square.svg) no-repeat center center;
  background-size: contain;
}

.buzzflow-tools.highlight {
  background: url(/static/svg/buzzflow_highlight.svg) no-repeat center center;
  background-size: contain;
}

.buzzflow-tools.signature {
  background: url(/static/svg/buzzflow_signature.svg) no-repeat center center;
  background-size: contain;
}


.buzzflow-tools:hover {
  opacity: 0.5;
}

.tooltip.pdf-viewer {
  position: absolute;
  top: 66px;
  right: 4px;
  display: none;
}

.buzzflow-info {
  margin-top: 5px;
  margin-bottom: 15px;
}

.idle-container .header.center {
  margin-left: unset;
  margin: auto;
  text-align: center;
}

.idle-container .content .row, #buzzflow-tools .content .row {
  display: flex;
  flex-direction: row;
  height: 128px;
}

#buzzflow-tools.mobile .content .row {
  display: flex;
  flex-direction: column;
  height: 256px;
}


div#idle-effects {
  position: absolute;
  width: 80vw;
  height: 90vh;
  top: 5vw;
  left: 10vh;
  background-color: rgba(0, 0, 0, 0.0);
}

#id-effects-ripple, .idle-effects-zone.left, .patents-badge {
  /* background: url("../images/ResumeGraphics.png") center;
  background-size: cover; */
  position: absolute;
  top: 45vmin;
  right: 0;
  width: 144px;
  height: 144px;
  background-color: transparent;
  /* transform: translate(50%, -50%); */
  display: flex;
  flex-direction: row;
  border-radius: 50%;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  color: rgba(218, 31, 67, 0.2);
  opacity: 0.0;
  transition: opacity 1s;
}

#id-effects-ripple img, .idle-effects-zone.left img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.idle-effects-zone.left {
  right: unset;
  left: 0;
  top: 40vh;
}
.idle-effects-zone.left.patents-badge {
  top: 0;
  right: unset;
  left: 0;
  opacity: 0.5;
  cursor: pointer;
}

.idle-effects-zone.left.patents-badge.sso {
  top: 0%;
  left: -300px;
  right: unset;
  opacity: 0.5;
  cursor: pointer;
  z-index: 0;
  position: relative;
  z-index: 10;
}
/* .idle-container:hover #id-effects-ripple  {
  /* background-color: rgba(106, 177, 209, 0.15); 
  opacity: 0.6;
} */

#id-effects-ripple, .idle-effects-zone.left, .patents-badge {
  transition: transform 1s;
}

#id-effects-ripple:hover, .idle-effects-zone.left:hover, .patents-badge:hover, .idle-effects-zone.left.patents-badge.sso:hover {
  /* background-color: rgba(106, 177, 209, 0.15); */
  opacity: 1;
  transform: scale(2.5);
  z-index: 1000;
}


.idle-container:hover  #id-effects-ripple {
  border:15px solid rgba(218,31,67,0.05);
  transition: color 0.5s transform 1s;
  color: wheat;
  opacity: 0.6;
}

.idle-container:hover  .idle-effects-zone.left, .idle-container:hover .patents-badge {
  border:15px solid rgba(218,31,67,0.05);
  transition: color 0.5s transform 1s;
  color: #009ad1;
  opacity: 0.5;
}

.idle-container:hover .idle-effects-zone.left:hover  {
  /* background-color: rgba(106, 177, 209, 0.15); */
  opacity: 1;
  transform: scale(4);
}

.idle-container:hover .toprow {
  opacity: 1;
}

.idle-effects-text {
  font-size: 8px;
  font-family: Montserrat, sans-serif;
  margin: 3px;
}


div#buzzfloat, div#buzzfloat-buzzlink, div#buzzflow-tools, div#buzzflow-actions {
  height: 80vh;
  width: 60vw;
  max-width: 800px;
  max-height: 1024px;
  border-radius: 32px;
  margin: auto;
  /* border: 1px solid #f3f3f3; */
  background-color: aliceblue;
  overflow: hidden;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  z-index: 10;
}

div#buzzfloat-buzzlink {
  height: 80vh;
  width: 90vw;
  max-width: unset;
  max-height: unset;
  border-radius: 20px;
}

div#buzzflow-tools {
  top: 112px;
  right: 0;
  border-radius: 0;
  position: absolute;
  margin: auto;
  z-index: 9999999;
  height: unset;
  width: unset;
}

div#buzzflow-actions {
  top: 112px;
  border-radius: 0;
  position: absolute;
  z-index: 9999999;
  height: unset;
  width: unset;
}




.SmartActions {
  /* height: 72px; */
  width: 100%;
  overflow-x: scroll;
  background-color: transparent;
  justify-content: center;
  justify-items: center;
  flex: 1 1 auto;
  flex-direction: row;
  display: flex;
  align-items: center;
  opacity: 0.0;
}

.idle-container .SmartActions {
  opacity: 0.3;
}

div#buzzfloat:hover .SmartActions {
  opacity: 1;
  color: teal;
  background-color: rgba(82, 43, 43, 0.025);
}

div#buzzfloat:hover  .smart-action.divider {
  color : "gray";
}

div#buzzfloat:hover .idle-container {
  opacity: 1;
}

#buzzContactsShim {
  width: 100%;
  height: 100%;
  background-color: rgba(215,225,250,0.5);
  position: absolute;
  left: 0;
  top: 0;
}
.smart-text {
  font-size: 1.1rem;
  color: #333;
  font-family: Montserrat, sans-serif;
}

.smart-action {
  margin: 4px 6px;
  display: flex;
  flex-direction: column-reverse;
  transition: margin 0.4s;
  /* min-height: 128px; */
  /* min-width: 84px; */
  align-items: center;
  justify-content: flex-start;
}

.smart-action.mini {
  flex-direction: column;
  margin: 0;
}

.smart-action icon {
  display: flex;
  width: 48px;
  height: 48px;
  justify-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  color: #009ad1;
  cursor: pointer;
  font-size: 1.5rem;
}

.smart-action.mini:hover .smart-action-label, .smart-action.mini.selected .smart-action-label {
  display: inline-block;
  opacity: 1;
  font-size: 11px;
  font-weight: 800;
  /* background-color: #009ad1;
  color: white; */
}
.smart-action.mini.selected {
  /* outline: 0px solid #009ad1;
  outline-offset: 4px; */
  border-bottom: 4px solid #009ad15c;
  background-color: #dce7f0
}


.smart-action svg {
  /* padding-left: 20px; */
}

.smart-action .smart-action-label {
  color: gray;
  display: inline-block;
  opacity: 0.1;
  margin-top: 3px;
  /* letter-spacing: 1; */
  text-transform: uppercase;
  font-size: 11px;

    /* Abs positioning makes it not take up vert space
    position: relative;
    top: 0;
    left: 0;
  
    /* Border is the new background *
    background: none;
  
    /* Rotate from top left corner (not default) *
    transform-origin: 0 0;
    transform: rotate(270deg); */
}
.smart-action.mini .smart-action-label {
  line-height: 12px;
  height: 12px;
  opacity: 0.2;
  color: #009ad1;
  padding: 2px 4px;
}

.smart-action.divider {
  color: gray;
}

.SmartActions:hover .smart-action {
  margin: 4px 12px;
  scrollbar-width: none;  /* Firefox */
}

.SmartActions:hover .smart-action .smart-action-label {
  display: inline-block;
  opacity: 1;
  font-size: 11px;
}

.smart-action-divider {
  display: flex;
  justify-items: center;
  align-content: center;
  align-items: center;
}

.idle-container  .LoadingDots {
  flex: 1 1 auto;
  position: relative;
  bottom: 0;
  height: 48px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: stretch;
}

.LoadingDots .row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex: 0 5 auto;
  margin: 0 12px;
  font-size: 12px;
}

.LoadingDots {
  text-align:center;
  font-size: 32px;
  color: rgba(78, 192, 176, 0.5);
  margin: auto;
  width: 100px;
  position: absolute;
  z-index: 200000;
  bottom: 100px;
}

#loading-dots-message {
  font-family: Rajdhani, 'Barlow Semi Condensed', sans-serif;
  font-size: 15px;
  color: white;
  padding-bottom: 24px;
}

.idle-container:hover #loading-dots-message {
  color: teal;
}

.circle-button-48 {

}

/* Perspective */ 

.message-container-other.perspective {
  animation-name: perpective-right;
  animation-duration: 1s;
  transform: perspective(400px) rotateY(-6deg);
  transition: perspective 1.0s ease-in-out, rotateY 1.0s ease-in-out;

}

.message-container-me.perspective {
  animation-name: perpective-left;
  animation-duration: 1s;
  transform: perspective(400px) rotateY(6deg);
  transition: perspective 1.0s ease-in-out, rotateY 1.0s ease-in-out;
}



@keyframes perspective-right {
  from {
      transform: perspective(0) rotateY(0)
  }

  to {
      transform: perspective(400px) rotateY(-6deg)
  }
}
@keyframes perspective-left {
  from {
      transform: perspective(0) rotateY(0)
  }

  to {
      transform: perspective(400px) rotateY(6deg)
  }
}

@keyframes perspective-right-back {
  from {
      transform: perspective(400px) rotateY(-6deg)
  }

  to {
      transform: perspective(0) rotateY(0)
  }
}

@keyframes perspective-left-back {
  from {
      transform: perspective(400px) rotateY(6deg)
  }

  to {
      transform: perspective(0) rotateY(0)
  }
}

.conversation-title-actions.wide-title {
  bottom: -60%;
}
.conversation-title-actions.wide-title .circle-button-48 {
  background-color: white;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
margin: 0 12px;
-webkit-transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.conversation-title.wide-title {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.5px;
}

.LoadingDots--white {
  color:#fff
 }

 .LoadingDot {
  -webkit-animation-duration:1.4s;
  animation-duration:1.4s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  padding: 8px;

 }

 .LoadingDots.animate .LoadingDot {
  -webkit-animation-name:b;
  animation-name:b;
 }

 .LoadingDots-2 {
  -webkit-animation-delay:.2s;
  animation-delay:.2s
 }

 .LoadingDots-3 {
  -webkit-animation-delay:.4s;
  animation-delay:.4s
 }

 @-webkit-keyframes b {
  0% {
   opacity:.2
  }
  20% {
   opacity:1
  }
  to {
   opacity:.2
  }
 }
 @keyframes b {
  0% {
   opacity:.2
  }
  20% {
   opacity:1
  }
  to {
   opacity:.2
  }
 }

 #main_menu {
  width: 90px; 
  height: 32px; 
  margin-top: 12px; 
  display: inline-block; 
  margin-right: 18px;
  cursor:pointer;
 }

.buzz-phone-container.wide-title {
  padding-top: 32px;
}

#buzz-main.wide-title {
  padding-top: 32px;
  height: 732px;
}

#buzz-incoming-calls.wide-title {
  top: 96px;
}

 /* On screens that are 800px or less in width, adjust the properties */
 @media screen and (max-width: 1400px) {
  div#buzzfloat {
    height: 80vh;
    width: 90vw;
    max-width: 720px;
    /* max-height: 700px; */
  }

  .idle-container .header {
    flex-direction: row;
    margin-top: 0px;
    margin-left: 10%;
  }

  .idle-container .title {
    flex-direction: column;
  }

  .idle-container .header img {
    /* margin: 0 32px; */
  }

  .idle-container .content .group {

  }

  .idle-container .content button {
    width: 144px;
    height: 144px;
  }

  .smart-action .smart-action-label {
    font-size: 9px;
  }

  #main_menu {
    /* display: none; */
    width: 45px;
    height: 16px;
    position: absolute;
    top: -48px;
    right: 0;
  }

  #buzz-main, .buzzform-popup {
    top: 96px;
  }

  .conversation-image {
    margin-left: 0px;
    margin-top: 0px;
  }
  .conversation-title-actions {
    bottom: -30px;
  }
  .circle-button-48 {
    background-color: white;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 0 12px;
  -webkit-transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .top-floating-icon.right-on {
    opacity: 0.8;
  }
  .conversation-title {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  .conversationAction, .conversation-members, .conversation-individual {
    margin-left: 2px;
  }
  nav .sidenav-trigger {
    margin: 0 6px;
  }

  #notification-container-trigger {
    top: 96px;
  }


}
.buzzfloat {
  /* display: none; */
  position: absolute;top: 0; border: 0;border-radius: 0; bottom: 0;left: 0;right: 0; background: transparent;
}

div#buzzfloat {
  height: unset;
  width: 80vw;
  opacity: 1;
  /* max-height: 700px; */
  -webkit-transition: height 1.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: height 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: #0000004d;
}

.idle-container:hover div#buzzfloat  {
  /* height: 80vh; */
  opacity: 1;
  background-color: aliceblue;
}

.idle-container .content .home-collection {
  display: flex;
  flex-direction: row;
  align-content: space-around;
  width: unset;
  margin: auto;
}

 /* On screens that are 800px or less in height, adjust the properties */
@media screen and (max-height: 800px) {
  div#buzzfloat {
    height: 80vh;
    width: 80vw;
    max-width: 1024px;
    /* max-height: 700px; */
  }

  .idle-container .header {
    flex-direction: row;
    margin-top: 0px;
    margin-left: 10%;
  }

  .idle-container .header img {
    margin: 0 32px;
  }

  .idle-container .content .group {
    flex-direction: row;
    align-content: space-around;
    width: unset;
  }



  .idle-container .LoadingDots {
    display: none;
  }

  .idle-container .content button {
  }

  #main_menu {
    display: none;
  }

}

@media screen and (max-width: 600px) {
  .idle-container .content .row, #buzzflow-tools .content .row {
    display: flex;
    flex-direction: column;
    height: 256px;
  }
  
}

/* For GLobal Menu */

:root {
  --ss-orange: #d91e43;
  --ss-neutral: #ffffff;
  --button-color: var(--ss-orange);
  --button-border-color: var(--ss-neutral);
  --button-font-size: 28px;
  --button-font-size-small: 28px;
  --xx-small: 9px;
}


.global-menu-bg, .menu-bg {
  background-image: url('../wallpapers/medwp1.jpg');
  /* -webkit-filter: blur(2px);
  filter: blur(2px); */
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.menu-bg {
  display: none;
}

.global-menu-container  {
  background-color: white;
  display: none;
}

#wallpaper-container {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#wallpaper-container .header {
  width: 100%;
  display: flex;
}

#wallpaper-container .header h4 {
  width: 100%;
  font-family: Rajdhani;
  color: white;
}

#wallpaper-preview {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.filter-overlay { 
  background-color: #000000; 
  opacity: 0.25; position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; }


.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  width: 100vw;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ffcba785;
  ;
  -webkit-perspective: 90rem;
          perspective: 90rem;
  -webkit-perspective-origin: 34% 61%;
          perspective-origin: 34% 61%;
      
}

.box .cover img {
  width: 160px;
}

.global-menu-item {
  cursor: pointer;
  /* margin: 12px 12px 0 12px; */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}


#refresh_button {
  display: none;
}

#user-container:hover #refresh_button {
  display: flex;
}


.global-menu-header {
  height: 108px;
  position: fixed;
  top:0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.global-menu-list {
  position: fixed;
  top:0;
  left: 0;
  margin: 2px 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48px;
  background-color: #7e9e9811;
  border-radius: 24px;
  padding: 6px 0;
  cursor: pointer;
}

#user-container:hover .global-menu-list {
  background-color: #7e9e9834;
}

global-menu-title {
  font-family: 'Rajdhani';
  font-size: 0.8rem;
  cursor: pointer;
  outline: 0;
  width: 240px;
  height: 48px;
  border-radius: 8px;
  background-color: #2C3138;
  margin-top: 10px;
  overflow: hidden;
  -webkit-transform: scale(.7);
          transform: scale(.7);
}

global-menu-title::after {
  content: "";
  /* position: relative;
  top: -40px;
  display: block;
  width: 48px;
  height: 107%;
  background-color: #000;
  margin-top: -1px;
  margin-left: -7px;
  border-radius: 6px 0 0 6px; */
  /* background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTRweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTQgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUxLjEgKDU3NTAxKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wLUhELUNvcHktMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwOS4wMDAwMDAsIC0xMDA4LjAwMDAwMCkiIGZpbGw9IiNGOUZDRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTQ3LjAwMDAwMCwgNDk5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTYtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDYuMDAwMDAwLCA0OTUuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2ZpbGVfZG93bmxvYWRfYmxhY2tfMjRweC0oMSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LjAwMDAwMCwgOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LDEyIEwxMCwxMiBMMTAsNiBMNCw2IEw0LDEyIEwwLDEyIEw3LDE5IEwxNCwxMiBaIE0wLDIxIEwwLDIzIEwxNCwyMyBMMTQsMjEgTDAsMjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4='); */
  background-repeat: no-repeat;
  background-position: center;
}

global-menu-title::before {
  content: "";
  display: block;
  width: 48px;
  height: 46px;
  margin-left: -7px;
  margin-top: -1px;
  -webkit-transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
  transition: all 200ms cubic-bezier(0.25, 0.75, 0.5, 1.25);
}

.box-1:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-2:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-3:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color)
}

.box-4:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-5:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-6:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-7:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-8:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-9:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-10:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-11:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}

.box-12:hover global-menu-title::before {
  width: 120%;
  opacity: .8;
  background-color: var(--button-color);
}
.internal-container {
  padding: 5% 30% 10% 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 50%;
  height: 80%;
  margin-left: 6vw;
  /* transform:rotateX(7deg) rotateZ(-4deg) rotateY(13deg) scale3d(1, 1, -0.9); */
  -webkit-transform: rotateX(1deg) rotateZ(352deg) rotateY(18deg) scale3d(1, 1, -0.8);
          transform: rotateX(1deg) rotateZ(352deg) rotateY(18deg) scale3d(1, 1, -0.8);
  -webkit-transition: color 2s ease-out, -webkit-transform 2s ease-out;
  transition: color 2s ease-out, -webkit-transform 2s ease-out;
  transition: transform 2s ease-out, color 2s ease-out;
  transition: transform 2s ease-out, color 2s ease-out, -webkit-transform 2s ease-out;
}

.box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
  will-change: transform;
  cursor: pointer;
}

.menu-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-transition: all .3s ease-out;
          transition: all .3s ease-out;
          will-change: transform;
}

.box:hover .cover {
  -webkit-transform: translateY(-14px) scale(1.04);
          transform: translateY(-14px) scale(1.04);
}

.box-1 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-1 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-2 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-2 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-3 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-3 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-4 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-4 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}


.box-5 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-5 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-6 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-6 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-7 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-7 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-8 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-8 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

/* */
.box-13 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-13 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}


.box-9 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-9 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-10 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-10 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-11 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-11 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}

.box-12 global-menu-title {
  border: 2px solid var(--button-border-color);
  color: #fff;
  font-size: var(--button-font-size);
  text-align: center;
  padding-right: 20px;
  line-height: 40px;
}

.box-12 global-menu-title::after {
  content: "";
  background-color: var(--button-color);
  top: -85px
}
.cover {
  -webkit-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
  will-change: transform;
}

.box .cover img {
  -webkit-transition: all 260ms ease-in-out;
  transition: all 260ms ease-in-out;
  border-radius: 15px;
}

.box .cover:hover img {
  border: 2px solid rgba(255,255,255, 0.596);
}

.box .cover::after {
  content: "";
  z-index: -99;
  position: absolute;
  top: 20px;
  left: -20px;
  display: block;
  width: 160px;
  height: 214px;
  opacity: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 160px 214px;
  -webkit-filter: blur(24px);
          filter: blur(24px);
  -webkit-transition: all 260ms ease-in-out;
  transition: all 260ms ease-in-out;
  will-change: transform;
  -webkit-transform: scale(.6);
          transform: scale(.6);
}

.box:hover .cover::after {
  opacity: 0.5;
  border: 2px solid white;
  -webkit-transform: scale(1);
          transform: scale(1);
}

.box-1 .cover::after {
  background-image: url('/static/globals/MemoryBox.png');
}

.box-2 .cover::after {
  background-image: url('/static/globals/Stat.png');
}

.box-3 .cover::after {
  background-image: url('/static/globals/CloudLink.png');
}

.box-4 .cover::after {
  background-image: url('/static/globals/Write.png');
}


.box-5 .cover::after {
  background-image: url('/static/globals/Wallet.png');
}

.box-6 .cover::after {
  background-image: url('/static/globals/Events.png');
}

.box-7 .cover::after {
  background-image: url('/static/globals/BuzzLink.png');
}

.box-8 .cover::after {
  background-image: url('/static/globals/BuzzPhoneDialer.png');
}

.box-9 .cover::after {
  background-image: url('/static/globals/BuzzPay.png');
}


.box-10 .cover::after {
  background-image: url('/static/globals/Connector.png');
}

.box-11 .cover::after {
  background-image: url('/static/globals/Connector.png');
}

.box-12 .cover::after {
  background-image: url('/static/globals/Connector.png');
}

.box-13 .cover::after {
  background-image: url('/static/globals/Connector.png');
}

.box-1 global-menu-title div::before {
  content: 'Safe Memory Box';
  position: relative;
  top: -44px;
  left: -4px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-1:hover global-menu-title div::before {
  color: #fff;
} */

.box-2 global-menu-title div::before {
  content: 'STAT Messages';
  position: relative;
  top: -44px;
  left: -6px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-2:hover global-menu-title div::before {
  color: #fff;
} */

.box-3 global-menu-title div::before {
  content: 'Skyscape Lightning™';
  position: relative;
  top: -44px;
  left: 3px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-3:hover global-menu-title div::before {
  color: #fff;
} */

.box-4 global-menu-title div::before {
  content: 'Open Notepad';
  position: relative;
  top: -44px;
  left: -9px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-4:hover global-menu-title div::before {
  color: #fff;
} */


.box-5 global-menu-title div::before {
  content: 'Digital Wallet';
  position: relative;
  top: -44px;
  left: -4px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-5:hover global-menu-title div::before {
  color: #fff;
} */

.box-6 global-menu-title div::before {
  content: 'Buzz Calendar';
  position: relative;
  top: -44px;
  left: -6px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-6:hover global-menu-title div::before {
  color: #fff;
} */

.box-7 global-menu-title div::before {
  content: 'BuzzLink™';
  position: relative;
  top: -44px;
  left: 3px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-7:hover global-menu-title div::before {
  color: #fff;
} */

.box-8 global-menu-title div::before {
  content: 'BuzzPhone™';
  position: relative;
  top: -44px;
  left: -9px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-8:hover global-menu-title div::before {
  color: #fff;
} */


.box-9 global-menu-title div::before {
  content: 'BuzzPay™';
  position: relative;
  top: -44px;
  left: -4px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-9:hover global-menu-title div::before {
  color: #fff;
} */

.box-10 global-menu-title div::before {
  content: 'BuzzStream™';
  position: relative;
  top: -44px;
  left: -6px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-10:hover global-menu-title div::before {
  color: #fff;
} */

.box-11 global-menu-title div::before {
  content: 'AthenaHealth';
  position: relative;
  top: -44px;
  left: 3px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

.box:hover global-menu-title div::before {
  color: #fff;
  font-size: 32px;
}

/* .box:hover global-menu-title {
  width: 100%;
} */

.box-12 global-menu-title div::before {
  content: 'PointClickCare®';
  position: relative;
  top: -44px;
  left: -9px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-12:hover global-menu-title div::before {
  color: #fff;
} */

.box-13 global-menu-title div::before {
  content: 'Scanner';
  position: relative;
  top: -44px;
  left: -9px;
  color: var(--button-border-color);
  font-size: var(--button-font-size-small);
  font-weight: 300;
}

/* .box-13:hover global-menu-title div::before {
  color: #fff;
} */

.gtooltip {
  padding: 4px 24px;
  white-space: nowrap;
  font-family: "Rajdhani";
  font-size: 32px;
  position: fixed;
  height: 48px;
  line-height: 48px;
  background-color: wheat;
  border: 2px solid black;
  z-index: 100;
  -webkit-transform: rotateX(1deg) rotateZ(352deg) rotateY(18deg) scale3d(1, 1, -0.8);
  transform: rotateX(1deg) rotateZ(352deg) rotateY(18deg) scale3d(1, 1, -0.8);
  display:  none;
}

.dr {
position: absolute;
bottom: 16px; 
right: 16px;
width:100px;
}

@media (max-height: 900px) {
  #attachment-icons-alt svg {
    /* Smaller padding to make icons fit better */
    padding: 8px;
  }
}