@charset "UTF-8";

.author__image,.settings__image {
    transform-origin: 0 100%;
    overflow: hidden;
    border-radius: 11px
}


.author__image img,.settings__image img {
    display: block;
    width: 100%;
    border-radius: 11px;
    min-height: 50px;
    transition: height .2s ease-in-out
}

.author__image .js-gravatar,.settings__image .js-gravatar {
    width: 100%
}

.settings__image svg path {
    fill: #d33a2c
}

.author__image.selected {
    background: #d33a2c;
    border: 3px solid #d33a2c;
}

.custom-file-upload.selected {
    border: 3px solid #d33a2c;
}

.author__image {
    background: #d33a2c;
    border: 2px solid #aaa;  /* 5px solid #d33a2c */
}

.author__image::before {
    content: '';
    width: 1px;
    margin-left: -1px;
    float: left;
    height: 0;
    padding-top: calc(1px * 100%)
}

.author__image::after {
    content: '';
    display: table;
    clear: both
}


.author__desc {
    padding: 0;
    position: relative;
    top: -1em;
    float: left;
    width: 65%;
    font-style: normal!important;
    padding-left: 2em;
    color: #333;
    font-size: .8em;
    font-family: Calibri,Georgia,serif,
}


.author__name {
    color: #000;
    text-decoration: none;
    padding: 10px 0;
    background-image: linear-gradient(#2da2c5,#2da2c5);
    background-repeat: no-repeat;
    background-size: 100% 1.5px;
    background-position: center bottom 29%;
    background-origin: padding-box;
    text-shadow: 3px 0 #fff,2px 0 #fff,1px 0 #fff,-1px 0 #fff,-2px 0 #fff,-3px 0 #fff;
    transition: color .1s ease-out
}

.entity-image-container {
    display: flex;
    flex-direction: column;
}

.entity-image-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
    width: max-content;
    margin: auto;
    gap: 24px;
}

.author__image-wrapper,.settings__image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 11px;
    overflow: visible;
/* sandeep   position: relative */
}


.author__image-wrapper .author__image,.author__image-wrapper .settings__image,.settings__image-wrapper .author__image,.settings__image-wrapper .settings__image {
    transform: translateX(60%) rotateZ(-45deg) scale(.87); /*translateX(15%) rotateZ(-11deg) scale(.87);*/
    transition: transform .2s ease-out
}

.author__image-wrapper .author__image img,.author__image-wrapper .settings__image img,.settings__image-wrapper .author__image img,.settings__image-wrapper .settings__image img {
    transition: transform .2s ease-out;
    transform-origin: 0 100%;
    transform: scale(1.4) translateX(-35%) translateY(-35%) rotateZ(45deg); /* scale(1.2) translateX(-16%) translateY(-3%) rotateZ(11deg) */
}

.author__image-wrapper::after,.settings__image-wrapper::after {
    transition-duration: .2s;
    opacity: 1;
    transform: scaleX(1)
}

.author__image-wrapper::before,.settings__image-wrapper::before {
    display: block;
    content: '';
    height: 90%;
    width: 160%;
    position: absolute;
    background-image: url(../images/shadow.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 89%;
    left: -30%;
    right: 0;
    transition: all .1s ease-out;
    transform-origin: 30% 50%;
    pointer-events: none
}

.author__image-wrapper:hover .author__image,.author__image-wrapper:hover .settings__image,.settings__image-wrapper:hover .author__image,.settings__image-wrapper:hover .settings__image,a:active .author__image-wrapper .author__image,a:active .author__image-wrapper .settings__image,a:active .settings__image-wrapper .author__image,a:active .settings__image-wrapper .settings__image,a:focus .author__image-wrapper .author__image,a:focus .author__image-wrapper .settings__image,a:focus .settings__image-wrapper .author__image,a:focus .settings__image-wrapper .settings__image,a:hover .author__image-wrapper .author__image,a:hover .author__image-wrapper .settings__image,a:hover .settings__image-wrapper .author__image,a:hover .settings__image-wrapper .settings__image {
    transform: translateX(15%) rotateZ(0) scale(.87); /* sandeep */
}

.author__image-wrapper:hover img,.settings__image-wrapper:hover img,a:active .author__image-wrapper img,a:active .settings__image-wrapper img,a:focus .author__image-wrapper img,a:focus .settings__image-wrapper img,a:hover .author__image-wrapper img,a:hover .settings__image-wrapper img {
    transform: scale(1.2) translateX(-10%) translateY(6%) rotateZ(0); /* sandeep */
}

.author__image-wrapper.selected {
    transform: scale(1.2) translateX(-10%) translateY(6%) rotateZ(0); /* sandeep */
}

.author__image-wrapper:hover::before,.settings__image-wrapper:hover::before,a:active .author__image-wrapper::before,a:active .settings__image-wrapper::before,a:focus .author__image-wrapper::before,a:focus .settings__image-wrapper::before,a:hover .author__image-wrapper::before,a:hover .settings__image-wrapper::before {
    opacity: 0;
    transform: scaleX(0)
}

.author__image-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 48px;
    max-width: 64px
}

.author__image-wrapper::before,.books__book__image::before {
    display: block;
    content: '';
    height: 90%;
    width: 160%;
    position: absolute;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAI8AAAASCAYAAABim40OAAACuElEQVRogc1XUZJjIQjEzN7/yMl8ucP0dkNjXrKh6pWAqERaICveR+vD96vo8cazOvoYX54NwOl6Z52ycc907E4C4a45DfKrwHH5vpPgd7aTYKNOyUvYKL7zRZG6WNRP5cne7pxrMwHLEbCqS3aDMglwpcvjMmTGVz4wejQ86lDfjZ0OeSY/az/VMaJ2XQZA/QQQChSKV99N8OpjvuHvUsGt+ErX2bI9q7Hy0dE580pnZ0R1uTi/eSVX2SLrbmKeAeQG34qIL2KDozo/kwosBv4Ouk5WOheMyrfK5t1Z8K++Ak9XVjK/ZRW8LnMgYDZQtpx5lBFoERxI//z40EFmQLgn2R27PZkP0fDVGmaj5thdoE7JEREPBR6nFJ1+CCAFgq9mVF91dhUcBRgGHMWjju0TZN7xi+nVGmaH8wG2IeaUHH+ibyqRTuxZCVGyAhgrZQi0KrtlYgHYAV1JXvET8IjfF7jnb4mPpMtg2TZbr0rpSnwQO9SzjLAauxV83Zj2j1FU9QtX0fQMfD1VM6zWn9D00agz3fOr866OwRF1mUe9EmaDL8d9HflF5jS/M8Yd1rHzsWzt87HMdr0D+sB6HixPXV/EyqH6QvCqBOE9qPXMTsmMqI3TMG9eNc7P9EJYYvK/KdUsZz0raZF06Hu+DCxBD+BZv1L1RKeAcXsZpnNtgtiEmEOeyRHx0zBvchtnHBWAUFa66q86ggltuj5HZU73pVdAcMHhAEX5xHys/Ge/j43IO/IvfZdxmM4FVDdOs1X1Twr3YWciTYPjZopXZILOxgWElVGIjs5V/Yw752QrxU/A1fGdL4yciz551U45qILa+fbsOmeutekud2I7BeJJhmPr3L07KlN0Y/eMzpmb2JzYntgfXfIr9nLWXgl0RuPLO1xzxdqPOPNK8FxJn+rXhP4HON5K31PHDhmjlm6fAAAAAElFTkSuQmCC);
    background-size: 100% auto;
    background-repeat: no-repeat;
    top: 89%;
    left: -30%;
    right: 0;
    transition: all .1s ease-out;
    transform-origin: 30% 50%;
    pointer-events: none
}


.author__desc__image-placeholder {
    min-height: 50px;
    background: #f3f3f3;
}

.custom-image-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 4px 8px;
    cursor: pointer;
}

/* Tooltips */
.tooltip {
      position: fixed;
      z-index: 100000000009;
      padding: 10px 20px;
      font-size: 0.9rem;
      font-family: 'Montserrat', sans-serif;
      border: 1px solid #b3c9ce;
      border-radius: 4px;
      text-align: center;
      max-width: 450px;
      color: #333;
      background: aliceBlue;
      box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

#dynamicForm section {
    font-size: 1.75rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    color: darkcyan;
}

/* Search related tests - check if being used */
section {
  background: #f1f1f1;
  /* min-height: 100%; */
  z-index: 1;
}

section aside {
  position: fixed;
  top: 70px;
  left: 0;
  bottom: 10px;
  width: 230px;
  background: #ffffff;
  border-right: 1px solid #e8e8e8;
}
section aside .nav {
  margin: 0 20px;
  font-size: 1.1em;
}
section aside .nav #genres li a {
  display: block;
  padding: 2px 10px;
  margin: 10px 0;
}
section aside .nav #genres li a:hover {
  color: #ffffff;
  background: #333333;
}
section aside .nav li.separator {
  height: 1px;
  background: #e8e8e8;
}
section aside .panel-header {
  color: #ce1312;
  margin-left: 30px;
  text-transform: uppercase;
  font-size: 10px;
  margin-top: 20px;
  border-bottom: none;
}
section aside .badge {
  background: #bbbbbb;
  position: relative;
  top: 1px;
}
section aside #genres label {
  display: block;
  cursor: pointer;
  padding: 4px 4px 4px 8px;
  font-weight: normal;
  font-size: 0.9em;
  margin: 0 0 -1px;
}
section aside #genres label:hover {
  color: #ffffff;
  background: #333333;
}
section aside #genres label input {
  display: none;
}
section aside #genres .active label {
  border: 1px solid #ce1312;
  margin-top: -1px;
}
section aside #genres .active .badge {
  background: #333333;
}
section aside #ratings {
  margin-left: 10px;
}
section aside #ratings .link {
  font-size: 0.9em;
}
section aside #ratings .link:hover,
section aside #ratings .link:active,
section aside #ratings .link:focus {
  text-decoration: none;
}
section aside #ratings .item {
  margin-bottom: 6px;
}
section aside #ratings .selectedItem a {
  color: #ce1312;
}
section aside #ratings .starIcon {
  height: 14px;
  width: auto;
}
section article {
  margin-top: 70px;
  margin-bottom: 10px;
  margin-left: 237px;
  margin-right: 10px;
  padding: 10px 0;
  max-width: 100%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
section article #stats {
  padding-right: 14px;
  font-size: 0.8em;
  line-height: 24px;
}
section article #hits {
  padding: 0 15px;
}
section article #hits .list {
  list-style: none;
  padding: 0;
}
section article #pagination .root {
  display: flex;
  justify-content: center;
}
section article #pagination .disabledItem {
  display: none;
}
section article #pagination .pagination a {
  background: #f8f8f8;
  padding: 3px 8px;
  color: #333333;
  margin-right: 4px;
}
section article #pagination .pagination a.selectedItem {
  border-color: #b5b5b5;
  background: #e8e8e8;
}
section article #pagination .pagination a:hover {
  border-color: #cfcfcf;
  background: #ebebeb;
}
section article .hit {
  margin-bottom: 10px;
  height: 130px;
  border: 1px solid #f3f3f3;
}
section article .hit mark {
  font-style: normal;
  background: #ffffd4;
  text-decoration: underline;
}
section article .hit .media-object {
  height: 130px;
  width: 130px;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
section article .hit .media-heading {
  color: #167ac6;
  font-weight: normal;
  font-size: 18px;
}
section .thank-you {
  font-size: 0.8em;
  margin-top: 18px;
  margin-left: 30px;
}
section .thank-you a {
  color: #ce1312;
}

.genre,
.year {
  margin: 12px 0;
}

.year {
  font-weight: bold;
}

.genre .badge {
  background: #bbbbbb;
}

.starIcon {
  fill: #fbae00;
}

li.ais-Hits-item {
  list-style-type: none;
}

.search-user-list {
  padding-left: 0;
}

.search-user-name {
  font-size: 1.5em;
  font-family: 'Rajdhani', sans-serif;
  color: #175a73;
  margin-bottom: 6px;
  cursor: pointer;
}

.search-user-image {
  width: 36px;
  height: 36px;
  margin: 0 12px 0 0;
  transition: all .2s ease-in-out;
}
.search-user-image:hover .collection {
  overflow: visible;
}

#findUserList {
  overflow-x: visible;
}
#findDebugUserList {
    overflow-x: visible;
  }

.search-user-image:hover {
  transform: scale(4);
  transform-origin: 0px;
  /*
  width: 256px;
  height: 256px;
  translateX: 236px;
  position: absolute;
  */
}

.ais-SearchBox-form {
  margin-block-end: 0;
}

.ais-SearchBox-submit, .ais-SearchBox-submitIcon, .ais-SearchBox-reset {
  display: none;
}

input.ais-SearchBox-input {
  margin-left: 60px;
  font-family: 'Anaheim', sans-serif;
  height: 32px;
}

.chips.focus {
  box-shadow: 0 0 0 0 transparent;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

.switch label .lever {
  font-size: 0.5rem;
  text-align: center;
}

/* Buzz Bar Animation */
.buzzAnimation {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  z-index: 100000;
  display: flex;;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.buzzAnimation.horizontal {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.buzzAnimation .caption {

  color: white;
  font-size: 1.5rem;
  font-family: 'Rajdhani', sans-serif;
  /*
  position: absolute;
  top: calc( 50% + 64px );
  margin-left: auto;
  left: 50%;
  transform: translateX(-50%); */
}

.playing {
  width: 128px;
  height: 128px;
  background: url("/static/icons/buzz-logo-no-bars.png") center;
  background-size: contain;
  /*
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);*/
  z-index: 10000000;
}

.buzzAnimation.horizontal .playing {
  width: 72px;
  height: 72px;
}

.playing:after {
  content: "";
  /*background: url("buzz-logo-no-bars.png") center;*/
  display: block;
  width: 100%;
  margin-top: 10px;
}
.barContainer {
  position: relative;
  width: 36%;
  height: 33%;
  top: 0;
  left:30%;
  margin: 0;
  /* transform: translateX(70%) translateY(0%); */
  padding-left: 0;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.barContainer .bar {
  display: inline-block;
  position: relative;
  margin-right: 5%;
  margin-left: 5%;

  /* width: 12.5%; */
  height: 110%;
  top:99%;
  overflow: hidden;
  background: linear-gradient(to bottom, #ff9500, #ff5e3a);
  color: transparent;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
}
.paused.playing .bar {
  animation-iteration-count: 1;
}
.paused.playing:after {
  content: "Paused (Lame)"
}
.n1 {
  animation-delay: 0.5s;
  top: 70%;
  animation-name: short-pulse;
}
.n2 {
  animation-delay: 0.2s;
  top: 50%;
  animation-name: pulse;
}
.n3 {
  animation-delay: 1.2s;
  top: 40%;
  animation-name: pulse;
}
.n4 {
  animation-delay: 0.9s;
  top: 60%;
  animation-name: short-pulse;
}
.n5 {
  animation-delay: 2.3s;
  animation-name: pulse;
}
.n6 {
  animation-delay: 1.3s;
  animation-name: pulse;
}
.n7 {
  animation-delay: 3.1s;
  animation-name: pulse;
}
.n8 {
  animation-delay: 1.9s;
  animation-name: pulse;
}
@keyframes pulse {
  0% {
    top: 99%;
  /*  margin-top: 0; */
  }
  10% {
    top: 40%%;
  /*  margin-top: -60%; */
  }
  50% {
    top: 50%;
  /*      margin-top: -25%; */
  }
  60% {
    top: 75%;
  /*      margin-top: -35%; */
  }
  80% {
    top: 1%;
  /*      margin-top: -100%; */
  }
  100% {
    top: 99%;
  /*      margin-top: 0; */
  }
}

/* For edges */
@keyframes short-pulse {
  0% {
    top: 99%;
  /*  margin-top: 0; */
  }
  10% {
    top: 45%%;
  /*  margin-top: -60%; */
  }
  50% {
    top: 55%;
  /*      margin-top: -25%; */
  }
  60% {
    top: 80%;
  /*      margin-top: -35%; */
  }
  80% {
    top: 15%;
  /*      margin-top: -100%; */
  }
  100% {
    top: 99%;
  /*      margin-top: 0; */
  }
}


/* Buzz Animation - UNUSED
barAnimation {
    background-color:red;
    width:30px;
    height:60px;
    animation-iteration-count:infinite;
    animation-iteration-function:linear;
    position:fixed;
    box-shadow:2px 2px 5px grey;
}
barAnimation .bar{
    background-color:red;
    animation:ex1 1.9s linear infinite ;
    top:200px ;
    left:60px ;
}
barAnimation .bar.1{
    background-color:red;
    animation:ex1 1.9s linear infinite ;
    top:200px ;
    left:60px ;
}
barAnimation .bar.2{
    background-color:orange;
    animation:ex2 2.1s linear infinite;
    top:200px ;
    left:95px ;
}
barAnimation .bar.3{
    background-color:yellow;
    animation:ex3 2.3s linear infinite;
    top:200px ;
    left:130px ;
}
barAnimation .bar.4{
    background-color:limegreen;
    animation:ex4 1.4s linear infinite;
    top: 200px;
    left: 165px ;
}
barAnimation .bar.5{
    background-color:skyblue;
    animation:ex5 1.7s linear infinite ;
    top: 200px;
    left:200px ;
}
barAnimation .bar.6{
    background-color:blue;
    animation:ex6 2.0s linear infinite;
    top: 200px;
    left:235px ;
}
barAnimation.bar.7{
    background-color:purple;
    animation:ex7 1.8s linear infinite;
    top:200px ;
    left: 270px;
}
@keyframes ex1{
    50%{ background-color:purple; top:100px; height:160px;}
}
@keyframes ex2{
    50%{background-color:blue;top:50px;height:210px;}
}
@keyframes ex3{
    50%{background-color:skyblue; top:10px; height:250px;}
}
@keyframes ex4{
    50%{background-color:green; top:100px; height:160px;}
}
@keyframes ex5{
    50%{background-color:yellow; top:50px; height:210px;}
}
@keyframes ex6{
    50%{background-color:orange; top:150px; height:110px;}
}
@keyframes ex7{
    50%{background-color:red; top:50px; height:210px;}
}
*/
/*
 * OVERRIDE materialize Items
 *
 */
.datepicker-modal {
   height: 450px;
   width: 600px;
 }

.timepicker-modal {
  height: 450px;
  width: 600px;

}

.chip::before {
  content: ''
}

.chip.select::before {
  content: '•'
}

.chip:hover {
  background-color: #009ad1;
  color: white;
}

.chip:focus {
  background-color: #666;
}

.chip.selected {
  background-color: darksalmon;
  color: #fff;
}
.chip.selected:after {
  content:'';
}

.chip.answer {
    background-color: cadetblue;
    color: #fff;
}

.datepicker {
   font-family: Anaheim, sans-serif;
   font-size: 1.8rem;
 }

.datepicker-date-display .date-text  {
   font-size: 2rem;
   font-family: Rajdhani, sans-serif;
 }

#inviteVideoCalendar {
    border-color: rgba(0,0,0,.05);
    border-width: 1px;
    border-style: solid;
    padding-top: 24px;
    padding-bottom: 0px;
    background: rgba(200,200,200,0.2);
}

#inviteVideoAddGuest, #buzzLinkFindStreamsUser, #add-user-input, #add-product-input {
    border-color: rgba(0,0,0,.05);
    border-width: 1px;
    border-style: solid;
    background: rgba(200,200,200,0.2);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 20px 8px;
    margin: auto;
    padding: 20px 40px 12px 32px;
    display: none;
  }

.timepicker, #startTimePicker-cal, #endTimePicker-cal, #startTimePicker-video, #endTimePicker-video, #startTimePicker-sch, #endTimePicker-sch   {
  font-family: Anaheim, sans-serif;
  font-size: 1.5rem;
  }

.calendar-notes {
  border: none;
  border-radius: 4px;
  background-color: #f1f8f8;
  border-bottom: solid 1px #009ad1;
  margin-left: 0;
  min-height: 96px;
}

label {
  font-size: 0.8rem;
  font-family: Anaheim, sans-serif;
}

input[type="time" i] {
  font-size: 2rem;
}

.modal {
  max-height: 80%;
  width: 55%;
}

.modal.new {
    max-height: 90%;
    width: 65%;
}

.modal.max {
    max-height: 95%;
    width: 95%;
    /* background-color: black; */
    z-Index: 1000;
}

#about {
    min-width:600px;
    height:90%;
    margin: auto;
    z-index:1000003;
}

#about.mobile {
    min-width:90%;
    max-width: 800px;
    max-height: 800px;
}

/* */
#infoOrWarning {
  min-width:500px;
  height:90%;
  margin: auto;
  display: none;
  z-index:9999999;
}

.dialogInfoText {
    line-height: 2rem;
}

#infoOrWarning .hilite {
    color: #d91e43;
    font-family: "Barlow Semi Condensed";
}

#infoOrWarning.topRight .modal-footer, #infoOrWarning.topLeft .modal-footer, #infoOrWarning.bottomRight .modal-footer, #infoOrWarning.bottomLeft .modal-footer {
  height: 60px;
}

#infoOrWarning.topRight .dialogInfoText, #infoOrWarning.topLeft .dialogInfoText, #infoOrWarning.bottomLeft .dialogInfoText, #infoOrWarning.bottomRight .dialogInfoText {
  font-size: 1.1rem;
  overflow-y: scroll;
}

#infoOrWarning.topRight {
  height: 60%;
  max-height: 800px;
  top: 64px;
  right: 32px;
  margin-right: 32px;
  margin-top: 32px;
}

#infoOrWarning.topLeft {
  height: 60%;
  max-height: 800px;
  top: 64px;
  left: 32px;
  margin-left: 32px;
  margin-top: 32px;
}

#infoOrWarning.bottomRight {
  height: 60%;
  max-height: 800px;
  bottom: 64px;
  right: 32px;
  margin-right: 32px;
  margin-bottom: 32px;
}

#infoOrWarning.bottomLeft {
  height: 60%;
  max-height: 800px;
  bottom: 64px;
  left: 32px;
  margin-left: 32px;
  margin-bottom: 32px;
}
/* Ripple Buttons */
.ripple:before,
.ripple:after {
  content:'';
  display:flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  position:absolute;
  background-color: transparent; /* rgba(217,30,67,0.05);*/
  top:0; right:0; bottom:0; left:0;
  border-radius:50%;
  border:3px solid rgba(217,30,67,0.2);
  overflow: visible;
}

.ripple.ssblue:before,
.ripple.ssblue:after {
  border:3px solid #0099d180;
  background-color: transparent; /* rgba(217,30,67,0.05);*/
}

.ripple.ssonline:before,
.ripple.ssonline:after {
  border:3px solid #42d10080;
  background-color: transparent; /* rgba(217,30,67,0.05);*/
}

.ripple.idle:before,
.ripple.idle:after {
content:'';
  border:10px solid rgba(218,31,67,0.2);
  background-color: rgba(218,31,67,0.1); /* rgba(217,30,67,0.05);*/
}

.ripple.ssred:before,
.ripple.ssred:after {
  border:3px solid #d91e43;
  background-color: transparent; /* rgba(217,30,67,0.05);*/
}

.ripple {
  -webkit-animation: ripple 2s linear infinite;
  animation: ripple 2s linear infinite;
}

.ripple.idle {
    -webkit-animation: ripple 6s linear infinite;
    animation: ripple 6s linear infinite;
  }

.ripple:after {
  -webkit-animation: ripple 2s linear 1s infinite;
  animation: ripple 2s linear 1s infinite;
}

@-webkit-keyframes ripple {
  0% {-webkit-transform:scale(1); }
  75% {-webkit-transform:scale(1.75); opacity:1;}
  100% {-webkit-transform:scale(2); opacity:0;}
}

@keyframes ripple {
  0% {transform:scale(1); }
  75% {transform:scale(1.75); opacity:1;}
  100% {transform:scale(2); opacity:0;}
}

/*
 * Animate Button to highlight
 */
 .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.animated {
    -webkit-animation-duration: 1.25s;
    animation-duration: 1.25s;
}



.tada {
    animation-name: tada;
}

@keyframes tada {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}

@-webkit-keyframes tada {
  0%, 100% {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
}


/* Animations */

@keyframes bounce {
    20%,53%,80%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
        transform: translate3d(0,0,0)
    }

    40%,43% {
        animation-timing-function: cubic-bezier(.755,.050,.855,.060);
        transform: translate3d(0,-30px,0)
    }

    70% {
        animation-timing-function: cubic-bezier(.755,.050,.855,.060);
        transform: translate3d(0,-15px,0)
    }

    90% {
        transform: translate3d(0,-4px,0)
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom
}

@keyframes flash {
    50%,from,to {
        opacity: 1
    }

    25%,75% {
        opacity: 0
    }
}

.flash {
    animation-name: flash
}

@keyframes pulse {
    from,to {
        transform: scale3d(1,1,1)
    }

    50% {
        transform: scale3d(1.25,1.25,1.25)
    }
}

.pulse {
    animation-name: pulse
}

@keyframes rubberBand {
    from,to {
        transform: scale3d(1,1,1)
    }

    30% {
        transform: scale3d(1.25,.75,1)
    }

    40% {
        transform: scale3d(.75,1.25,1)
    }

    50% {
        transform: scale3d(1.15,.85,1)
    }

    65% {
        transform: scale3d(.95,1.05,1)
    }

    75% {
        transform: scale3d(1.05,.95,1)
    }
}

.rubberBand {
    animation-name: rubberBand
}

@keyframes shake {
    from,to {
        transform: translate3d(0,0,0)
    }

    10%,30%,50%,70%,90% {
        transform: translate3d(-10px,0,0)
    }

    20%,40%,60%,80% {
        transform: translate3d(10px,0,0)
    }
}

.shake {
    animation-name: shake
}

@keyframes headShake {
    0% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        transform: translateX(0)
    }
}

.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake
}

@keyframes swing {
    20% {
        transform: rotate3d(0,0,1,15deg)
    }

    40% {
        transform: rotate3d(0,0,1,-10deg)
    }

    60% {
        transform: rotate3d(0,0,1,5deg)
    }

    80% {
        transform: rotate3d(0,0,1,-5deg)
    }

    to {
        transform: rotate3d(0,0,1,0deg)
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes tada {
    from,to {
        transform: scale3d(1,1,1)
    }

    10%,20% {
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
    }

    30%,50%,70%,90% {
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
    }

    40%,60%,80% {
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
    }
}

.tada {
    animation-name: tada
}

@keyframes wobble {
    from,to {
        transform: none
    }

    15% {
        transform: translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
    }

    30% {
        transform: translate3d(20%,0,0) rotate3d(0,0,1,3deg)
    }

    45% {
        transform: translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
    }

    60% {
        transform: translate3d(10%,0,0) rotate3d(0,0,1,2deg)
    }

    75% {
        transform: translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
    }
}

.wobble {
    animation-name: wobble
}

@keyframes jello {
    11.1%,from,to {
        transform: none
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.jello {
    animation-name: jello;
    transform-origin: center
}

@keyframes bounceIn {
    20%,40%,60%,80%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    20% {
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}

.bounceIn {
    animation-name: bounceIn
}

@keyframes bounceInDown {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0,-3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,25px,0)
    }

    75% {
        transform: translate3d(0,-10px,0)
    }

    90% {
        transform: translate3d(0,5px,0)
    }

    to {
        transform: none
    }
}

.bounceInDown {
    animation-name: bounceInDown
}

@keyframes bounceInLeft {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px,0,0)
    }

    75% {
        transform: translate3d(-10px,0,0)
    }

    90% {
        transform: translate3d(5px,0,0)
    }

    to {
        transform: none
    }
}

.bounceInLeft {
    animation-name: bounceInLeft
}

@keyframes bounceInRight {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    from {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px,0,0)
    }

    75% {
        transform: translate3d(10px,0,0)
    }

    90% {
        transform: translate3d(-5px,0,0)
    }

    to {
        transform: none
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes bounceInUp {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(.215,.61,.355,1)
    }

    from {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0,-20px,0)
    }

    75% {
        transform: translate3d(0,10px,0)
    }

    90% {
        transform: translate3d(0,-5px,0)
    }

    to {
        transform: translate3d(0,0,0)
    }
}

.bounceInUp {
    animation-name: bounceInUp
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    animation-name: fadeIn
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes lightSpeedIn {
    from {
        transform: translate3d(100%,0,0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        transform: none;
        opacity: 1
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@keyframes rotateIn {
    from {
        transform-origin: center;
        transform: rotate3d(0,0,1,-200deg);
        opacity: 0
    }

    to {
        transform-origin: center;
        transform: none;
        opacity: 1
    }
}

.rotateIn {
    animation-name: rotateIn
}

@keyframes rotateInDownLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0,0,1,-45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft
}

@keyframes rotateInDownRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight
}

@keyframes rotateInUpLeft {
    from {
        transform-origin: left bottom;
        transform: rotate3d(0,0,1,45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft
}

@keyframes rotateInUpRight {
    from {
        transform-origin: right bottom;
        transform: rotate3d(0,0,1,-90deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: none;
        opacity: 1
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight
}

@keyframes rollIn {
    from {
        opacity: 0;
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rollIn {
    animation-name: rollIn
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    animation-name: zoomIn
}

@keyframes zoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInDown {
    animation-name: zoomInDown
}

@keyframes zoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInLeft {
    animation-name: zoomInLeft
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInRight {
    animation-name: zoomInRight
}

@keyframes zoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1)
    }
}

.zoomInUp {
    animation-name: zoomInUp
}

@keyframes slideInDown {
    from {
        transform: translate3d(0,-100%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

.slideInDown {
    animation-name: slideInDown
}

@keyframes slideInLeft {
    from {
        transform: translate3d(-100%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

.slideInLeft {
    animation-name: slideInLeft
}

@keyframes slideInRight {
    from {
        transform: translate3d(100%,0,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

.slideInRight {
    animation-name: slideInRight
}

@keyframes slideInUp {
    from {
        transform: translate3d(0,100%,0);
        visibility: visible
    }

    to {
        transform: translate3d(0,0,0)
    }
}

.slideInUp {
    animation-name: slideInUp
}
.elementor-animation-grow {
    transition-duration: .3s;
    transition-property: transform
}

.elementor-animation-grow:active,.elementor-animation-grow:focus,.elementor-animation-grow:hover {
    transform: scale(1.1)
}

.elementor-animation-shrink {
    transition-duration: .3s;
    transition-property: transform
}

.elementor-animation-shrink:active,.elementor-animation-shrink:focus,.elementor-animation-shrink:hover {
    transform: scale(0.9)
}

@keyframes elementor-animation-pulse {
    25% {
        transform: scale(1.1)
    }

    75% {
        transform: scale(0.9)
    }
}

.elementor-animation-pulse:active,.elementor-animation-pulse:focus,.elementor-animation-pulse:hover {
    animation-name: elementor-animation-pulse;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

@keyframes elementor-animation-pulse-grow {
    to {
        transform: scale(1.1)
    }
}

.elementor-animation-pulse-grow:active,.elementor-animation-pulse-grow:focus,.elementor-animation-pulse-grow:hover {
    animation-name: elementor-animation-pulse-grow;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes elementor-animation-pulse-shrink {
    to {
        transform: scale(0.9)
    }
}

.elementor-animation-pulse-shrink:active,.elementor-animation-pulse-shrink:focus,.elementor-animation-pulse-shrink:hover {
    animation-name: elementor-animation-pulse-shrink;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes elementor-animation-push {
    50% {
        transform: scale(0.8)
    }

    100% {
        transform: scale(1)
    }
}

.elementor-animation-push:active,.elementor-animation-push:focus,.elementor-animation-push:hover {
    animation-name: elementor-animation-push;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}

@keyframes elementor-animation-pop {
    50% {
        transform: scale(1.2)
    }
}

.elementor-animation-pop:active,.elementor-animation-pop:focus,.elementor-animation-pop:hover {
    animation-name: elementor-animation-pop;
    animation-duration: .3s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}

.elementor-animation-bounce-in {
    transition-duration: .5s
}

.elementor-animation-bounce-in:active,.elementor-animation-bounce-in:focus,.elementor-animation-bounce-in:hover {
    transform: scale(1.2);
    transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36)
}

.elementor-animation-bounce-out {
    transition-duration: .5s
}

.elementor-animation-bounce-out:active,.elementor-animation-bounce-out:focus,.elementor-animation-bounce-out:hover {
    transform: scale(0.8);
    transition-timing-function: cubic-bezier(0.47,2.02,.31,-.36)
}

.elementor-animation-rotate {
    transition-duration: .3s;
    transition-property: transform
}

.elementor-animation-rotate:active,.elementor-animation-rotate:focus,.elementor-animation-rotate:hover {
    transform: rotate(4deg)
}

.elementor-animation-grow-rotate {
    transition-duration: .3s;
    transition-property: transform
}

.elementor-animation-grow-rotate:active,.elementor-animation-grow-rotate:focus,.elementor-animation-grow-rotate:hover {
    transform: scale(1.1) rotate(4deg)
}

.elementor-animation-float {
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out
}

.elementor-animation-float:active,.elementor-animation-float:focus,.elementor-animation-float:hover {
    transform: translateY(-8px)
}

.elementor-animation-sink {
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out
}

.elementor-animation-sink:active,.elementor-animation-sink:focus,.elementor-animation-sink:hover {
    transform: translateY(8px)
}

@keyframes elementor-animation-bob {
    0% {
        transform: translateY(-8px)
    }

    50% {
        transform: translateY(-4px)
    }

    100% {
        transform: translateY(-8px)
    }
}

@keyframes elementor-animation-bob-float {
    100% {
        transform: translateY(-8px)
    }
}

.elementor-animation-bob:active,.elementor-animation-bob:focus,.elementor-animation-bob:hover {
    animation-name: elementor-animation-bob-float,elementor-animation-bob;
    animation-duration: .3s,1.5s;
    animation-delay: 0s,.3s;
    animation-timing-function: ease-out,ease-in-out;
    animation-iteration-count: 1,infinite;
    animation-fill-mode: forwards;
    animation-direction: normal,alternate
}

@keyframes elementor-animation-hang {
    0% {
        transform: translateY(8px)
    }

    50% {
        transform: translateY(4px)
    }

    100% {
        transform: translateY(8px)
    }
}

@keyframes elementor-animation-hang-sink {
    100% {
        transform: translateY(8px)
    }
}

.elementor-animation-hang:active,.elementor-animation-hang:focus,.elementor-animation-hang:hover {
    animation-name: elementor-animation-hang-sink,elementor-animation-hang;
    animation-duration: .3s,1.5s;
    animation-delay: 0s,.3s;
    animation-timing-function: ease-out,ease-in-out;
    animation-iteration-count: 1,infinite;
    animation-fill-mode: forwards;
    animation-direction: normal,alternate
}

.elementor-animation-skew {
    transition-duration: .3s;
    transition-property: transform
}

.elementor-animation-skew:active,.elementor-animation-skew:focus,.elementor-animation-skew:hover {
    transform: skew(-10deg)
}

.elementor-animation-skew-forward {
    transition-duration: .3s;
    transition-property: transform;
    transform-origin: 0 100%
}

.elementor-animation-skew-forward:active,.elementor-animation-skew-forward:focus,.elementor-animation-skew-forward:hover {
    transform: skew(-10deg)
}

.elementor-animation-skew-backward {
    transition-duration: .3s;
    transition-property: transform;
    transform-origin: 0 100%
}

.elementor-animation-skew-backward:active,.elementor-animation-skew-backward:focus,.elementor-animation-skew-backward:hover {
    transform: skew(10deg)
}

@keyframes elementor-animation-wobble-vertical {
    16.65% {
        transform: translateY(8px)
    }

    33.3% {
        transform: translateY(-6px)
    }

    49.95% {
        transform: translateY(4px)
    }

    66.6% {
        transform: translateY(-2px)
    }

    83.25% {
        transform: translateY(1px)
    }

    100% {
        transform: translateY(0)
    }
}

.elementor-animation-wobble-vertical:active,.elementor-animation-wobble-vertical:focus,.elementor-animation-wobble-vertical:hover {
    animation-name: elementor-animation-wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-wobble-horizontal {
    16.65% {
        transform: translateX(8px)
    }

    33.3% {
        transform: translateX(-6px)
    }

    49.95% {
        transform: translateX(4px)
    }

    66.6% {
        transform: translateX(-2px)
    }

    83.25% {
        transform: translateX(1px)
    }

    100% {
        transform: translateX(0)
    }
}

.elementor-animation-wobble-horizontal:active,.elementor-animation-wobble-horizontal:focus,.elementor-animation-wobble-horizontal:hover {
    animation-name: elementor-animation-wobble-horizontal;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-wobble-to-bottom-right {
    16.65% {
        transform: translate(8px,8px)
    }

    33.3% {
        transform: translate(-6px,-6px)
    }

    49.95% {
        transform: translate(4px,4px)
    }

    66.6% {
        transform: translate(-2px,-2px)
    }

    83.25% {
        transform: translate(1px,1px)
    }

    100% {
        transform: translate(0,0)
    }
}

.elementor-animation-wobble-to-bottom-right:active,.elementor-animation-wobble-to-bottom-right:focus,.elementor-animation-wobble-to-bottom-right:hover {
    animation-name: elementor-animation-wobble-to-bottom-right;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-wobble-to-top-right {
    16.65% {
        transform: translate(8px,-8px)
    }

    33.3% {
        transform: translate(-6px,6px)
    }

    49.95% {
        transform: translate(4px,-4px)
    }

    66.6% {
        transform: translate(-2px,2px)
    }

    83.25% {
        transform: translate(1px,-1px)
    }

    100% {
        transform: translate(0,0)
    }
}

.elementor-animation-wobble-to-top-right:active,.elementor-animation-wobble-to-top-right:focus,.elementor-animation-wobble-to-top-right:hover {
    animation-name: elementor-animation-wobble-to-top-right;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-wobble-top {
    16.65% {
        transform: skew(-12deg)
    }

    33.3% {
        transform: skew(10deg)
    }

    49.95% {
        transform: skew(-6deg)
    }

    66.6% {
        transform: skew(4deg)
    }

    83.25% {
        transform: skew(-2deg)
    }

    100% {
        transform: skew(0)
    }
}

.elementor-animation-wobble-top {
    transform-origin: 0 100%
}

.elementor-animation-wobble-top:active,.elementor-animation-wobble-top:focus,.elementor-animation-wobble-top:hover {
    animation-name: elementor-animation-wobble-top;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-wobble-bottom {
    16.65% {
        transform: skew(-12deg)
    }

    33.3% {
        transform: skew(10deg)
    }

    49.95% {
        transform: skew(-6deg)
    }

    66.6% {
        transform: skew(4deg)
    }

    83.25% {
        transform: skew(-2deg)
    }

    100% {
        transform: skew(0)
    }
}

.elementor-animation-wobble-bottom {
    transform-origin: 100% 0
}

.elementor-animation-wobble-bottom:active,.elementor-animation-wobble-bottom:focus,.elementor-animation-wobble-bottom:hover {
    animation-name: elementor-animation-wobble-bottom;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-wobble-skew {
    16.65% {
        transform: skew(-12deg)
    }

    33.3% {
        transform: skew(10deg)
    }

    49.95% {
        transform: skew(-6deg)
    }

    66.6% {
        transform: skew(4deg)
    }

    83.25% {
        transform: skew(-2deg)
    }

    100% {
        transform: skew(0)
    }
}

.elementor-animation-wobble-skew:active,.elementor-animation-wobble-skew:focus,.elementor-animation-wobble-skew:hover {
    animation-name: elementor-animation-wobble-skew;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

@keyframes elementor-animation-buzz {
    50% {
        transform: translateX(3px) rotate(2deg)
    }

    100% {
        transform: translateX(-3px) rotate(-2deg)
    }
}

.elementor-animation-buzz:active,.elementor-animation-buzz:focus,.elementor-animation-buzz:hover {
    animation-name: elementor-animation-buzz;
    animation-duration: .15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

@keyframes elementor-animation-buzz-out {
    10% {
        transform: translateX(3px) rotate(2deg)
    }

    20% {
        transform: translateX(-3px) rotate(-2deg)
    }

    30% {
        transform: translateX(3px) rotate(2deg)
    }

    40% {
        transform: translateX(-3px) rotate(-2deg)
    }

    50% {
        transform: translateX(2px) rotate(1deg)
    }

    60% {
        transform: translateX(-2px) rotate(-1deg)
    }

    70% {
        transform: translateX(2px) rotate(1deg)
    }

    80% {
        transform: translateX(-2px) rotate(-1deg)
    }

    90% {
        transform: translateX(1px) rotate(0)
    }

    100% {
        transform: translateX(-1px) rotate(0)
    }
}

.elementor-animation-buzz-out:active,.elementor-animation-buzz-out:focus,.elementor-animation-buzz-out:hover {
    animation-name: elementor-animation-buzz-out;
    animation-duration: .75s;
    animation-timing-function: linear;
    animation-iteration-count: 1
}

#buzz-link-message svg {
    width: 24px;
}

.input#event-caption {
  font-family: "Anaheim", sans-serif;
  font-size: 1.5rem;
}

/* Player - music-audio-player */
#audio-player-cover
{
    position: absolute;
    top: 50%;
    left: 50%;
    /* left: 0;
    bottom: 0;*/
    width: 500px;
    height: 100px;
    margin: -4px auto;
    display: none;
    z-index: 1000000001;
    transform: translate(-50%,-50%);
    
}

.audio-recorder-cover
{
    position: absolute;
    top: 50%;
    left: 50%;
    /* left: 0;
    bottom: 0;*/
    width: 640px;
    height: 600px;
    margin: -4px auto;
    display: none;
    z-index: 1000000000;
    transform: translate(-50%,-50%);
    border-radius: 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(160deg, #fdd975f5 0%, #d15600f7 100%);
}

.audio-recorder-inline-title {
    /* position: absolute; */
    font-size: 32px;
    margin-left: 20px;
    color: darkred;
    font-family: Rajdhani, sans-serif;
}

.audio-recorder-status-text {
    flex: 9 1;
    padding-left: 20px;
    font-family: 'Barlow Semi Condensed';
    font-size: 13px;
}

.audio-recorder-status {
    display: flex;
    position: absolute;
    bottom: 0;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    height: 44px;
    padding-left: 24px;
}

.audio-recorder-title {
    position: absolute;
    top: 48px;
    font-size: 24px;
    color: #fff;
    display: block;
    width: 100%;
    justify-content: center;
}

.audio-recorder-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 12px;
    width: 90%;
    position: absolute;
    bottom: 12px;
    height: 72px;
    margin:auto;
  }

.audio-recorder-actions .group {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 12px;
    width: max-content;
}

#bg-artwork
{
    position: fixed;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    background-image: url("../static/images/buzzAudioBG.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: 1;
}

.audio-main-canvas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
    gap: 18px;
}

.audio-recorder-label {
    height: 48px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#audio-recorder-label-text {
    color: #085555;
    font-size: 24px;
    font-family: Anaheim, sans-serif;
}

#audio-recorder-upload {
    color: #085555;
    font-size: 16px;
    font-family: Barlow Semi Condensed, sans-serif;
    cursor: pointer;
}

#bg-layer
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.51;
    z-index: 2;
}

#player, .audio-recorder
{
    position: relative;
    height: 100%;
    z-index: 3;
}

#player-track, #recorder-track
{
    position: absolute;
    top: -96px;
    right: 15px;
    left: 15px;
    padding: 13px 22px 10px 24px;
    background-color: #a0dfe6;
    border-radius: 15px 15px 0 0;
    transition: 0.3s ease top;
    z-index: 1;
}

#player-track.active
{
    top: -128px;
    height: 144px;
}

#title-wrapper, #recorder-title-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#album-name, #recorder-album-name
{
    color: #54576f;
    font-size: 17px;
    font-weight: bold;
    text-align: right;
}

#track-name, #recorder-track-name
{
    color: white;
    font-size: 13px;
    margin: 2px 0 0px 0;
    text-align: right;
}

#track-time, #recorder-track-time
{
    height: 28px;
    margin-bottom: 8px;
    overflow: hidden;
    padding-left: 144px;
}


#track-length, #recorder-track-length
{
    float: right;
}

#current-time, #recorder-current-time {
  float: left;
  font-size: 24px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
}

#track-length, #recorder-track-length {
  font-size: 13px;
  padding-top: 10px;
  color: #888;
}

#current-time, #track-length, #recorder-current-time, #recorder-track-length
{
    color: transparent;
    /* background-color: #ffe8ee; */
    border-radius: 10px;
    transition: 0.3s ease all;
}

#track-time.active #current-time, #track-time.active #track-length
{
    color: #009ad1;
    background-color: transparent;
}

#s-area, #seek-bar
{
    position: relative;
    height: 4px;
    border-radius: 4px;
}

#s-area
{
    background-color:#e3e8ee;
    cursor: pointer;
    margin-left: 144px;
}

#ins-time
{
    position: absolute;
    top: -29px;
    color: #fff;
    font-size: 12px;
    white-space: pre;
    padding: 5px 6px;
    border-radius: 4px;
	display:none;
}

#s-hover
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    z-index: 2;
}

#ins-time, #s-hover
{
    background-color: #3b3d50;
}

#seek-bar
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #009ad1;
    transition: 0.2s ease width;
    z-index: 1;
}

#player-content, #recorder-content
{
    position: relative;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 30px 80px #656565;
    border-radius: 15px;
    z-index: 2;
}

#album-art, #recorder-album-art
{
    position: absolute;
    top: -40px;
    width: 115px;
    height: 115px;
    margin-left: 40px;
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
    transition: 0.3s ease all;
    box-shadow: 0 0 0 10px #fff;
    border-radius: 50%;
    overflow: hidden;
}

#album-art.active, #recorder-album-art.active
{
    top: -60px;
    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before, #recorder-album-art:before
{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px auto 0 auto;
    background-color: #d6dee7;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    z-index: 2;
}

#album-art img, #recorder-album-art img
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

#album-art img.active, #recorder-album-art img.active
{
    opacity: 1;
    z-index: 1;
}

#album-art.active img.active, #recorder-album-art.active img.active
{
    z-index: 1;
    -webkit-animation: rotateAlbumArt 3s linear 0s infinite forwards;
            animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

/* Begin Steps */
.progressContainer {
    position: relative;
    /* width: 300px; */
    height: 90%;
    margin: 0 auto;
    overflow: hidden;
    padding: 0rem;
    color: #126666;
}

.progress {
    position: relative;
    padding: 0 1rem 0 3.5rem;
    margin: 0rem 0 0;
    list-style: none;
    height: 100%;
    overflow: scroll;
    background-color: transparent;
}

.progress-item {
    position: relative;
    min-height: 75px;
    counter-increment: list;
    padding-left: 1rem;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-item:before {
    content: "";
    position: absolute;
    left: -1.25rem;
    top: 33px;
    height: 60%;
    width: 1px;
    border-left: 1px solid #777;
}

.progress-item:after {
    content: counter(list);
    position: absolute;
    top: 0;
    left: -2.5rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    color: #0080808f;
    font-weight: 400;
    font-size: 1.45rem;
    line-height: 2rem;
    text-align: center;
    border: 1px solid teal;
    justify-content: center;
    display: flex;
    align-items: center;
    font-family: Montserrat;
}

.progress-item:last-child:before {
    border: none;
}

.progress-item.previewed,
.progress-item.downloaded,
.progress-item.forwarded,
.progress-item.sent,
.progress-item.buzzlink {
    opacity: 0.8;
    color: #126666;
}

.progress-item.previewed:after,
.progress-item.downloaded:after,
.progress-item.forwarded:after,
.progress-item.sent:after,
.progress-item.buzzlink:after {
    content: "\f56c";
    /* content: "◉f56c"; */
    font-weight: 400;
    background: #fff;
    color: teal;
    display: flex;
    align-items: center;
    font-family: 'Font Awesome 6 Pro';
    font-weight: 200;
    font-size: 1.2rem;
}

.progress-item.downloaded:after {
    content: "\f019";
    color: #d91e4380;
}

.progress-item.forwarded:after {
    content: "\f343";
    color: #009ad199;
}

.progress-item.sent:after {
    content: "\f08e";
    color: rgba(148, 75, 16, 0.64)
}

.progress-item.buzzlink:after {
    content: "\f0c1";
    color: steelgray;
}

.progress-item.active:after {
    background: #fff;
    color: #8023a99c;
}

.progress-title {
    padding: 0.4rem 0 0.5rem;
    margin: 0;
    font-size: 1.5rem;
    font-family: Rajdhani, Montserrat, sans-serif;
}

.progress-info {
    font-size: 1rem;
    font-family: 'Barlow Semi Condensed', Montserrat, sans-serif;
    text-transform: capitalize;
}

/* End Steps */
/* Begin Segmented */
.p-segmented-controls {
    --color-segmented: #009ad1;
    --color-too-segmented: rgb(177, 73, 62);
    --color-lighter-segment: #d2e3f9;
    --color-salmon-segment: #ffa07a6e;
    background: var(--p-segmented-bg);
    border: 1px solid var(--color-segmented);
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    font-family: -apple-system, "Inter", sans-serif;
    overflow: hidden;
    text-transform: uppercase;
    font-family: Anaheim, sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
  }

  .p-segmented-controls a {
    color: var(--color-segmented);
    flex: 1;
    padding: 4px 10px;
    text-align: center;
    text-decoration: none;
    transition: 0.5s color, 0.5s background, 0.5s border-color;
    -webkit-tap-highlight-color: transparent;
  }

  .p-segmented-controls a.active {
    background: var(--color-segmented);
    color: var(--p-segmented-bg);
  }
  .p-segmented-controls a:not(:first-child) {
    border-left: 1px solid currentColor;
  }
  
  .p-segmented-radius {
    border-radius: 30px;
  }
  
  .p-segmented-internal-radius a,
  .p-segmented-internal-radius a:not(:first-child) {
    border: 0;
    border-radius: 30px;
  }
  
  .p-segmented-controls-alt a:not(:first-child) {
    border: 0;
  }
  .p-segmented-controls-alt a.active {
    background: var(--color-lighter-segment);
    color: var(--color-segmented);
    font-weight: bold;
  }
  .p-segmented-controls-too {
    border: 1px solid var(--color-too-segmented);
  }

  .p-segmented-controls-too a:not(:first-child) {
    border: 0;
  }
  .p-segmented-controls-too a.active {
    background: var(--color-salmon-segment);
    color: var(--color-too-segmented);
    font-weight: bold;
  }
  .p-segmented-controls-too a {
    color: var(--color-too-segmented);
  }
  .p-segmented-controls-outline-too a.active {
    background: var(--p-segmented-bg);
    border-color: var(--color-salmon-segment);
    border-radius: 30px;
    color: var(--color-salmon-segment);
    font-weight: bold;
}
  .p-segmented-outline {
    border: 2px solid var(--color-segmented);
  }
  .p-segmented-outline a:not(:first-child) {
    border-left: 2px solid var(--color-segmented);
  }
  
  .p-segmented-controls-outline-alt a:not(:first-child) {
    border: 2px solid transparent;
  }
  
  .p-segmented-controls-outline-alt {
    border-radius: 30px;
  }
  .p-segmented-controls-outline-alt a {
    border: 2px solid transparent;
    border-radius: 30px;
  }
  .p-segmented-controls-outline-alt a.active {
    background: var(--p-segmented-bg);
    border-color: var(--color-segmented);
    border-radius: 30px;
    color: var(--color-segmented);
    font-weight: bold;
  }
  
  .p-segmented-grey {
    --color-segmented: #009ad1;
    --color-lighter-segment: #d4d4d4;
  }
/* End Segmented */  

/* Select Options */
.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
  }
  
  .select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 1.1rem;
    color: #009ad1;
    width: 220px;
    height: 40px;
  }
  
  .select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #caebf8;
    padding: 8px 15px;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
  .select-styled:after {
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 16px;
    right: 10px;
  }
  .select-styled:hover {
    background-color: #99d2e9;
  }
  .select-styled:active, .select-styled.active {
    background-color: #caebf8;
  }
  .select-styled:active:after, .select-styled.active:after {
    top: 9px;
    border-color: transparent transparent #fff transparent;
  }
  
  .select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #caebf8;
  }

  .select-options li {
    margin: 0;
    padding: 12px 0;
    text-indent: 15px;
    border-top: 1px dotted #009ad140;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
  }
  .select-options li:hover {
    color: #c0392b;
    background: #fff;
  }
  .select-options li[rel="hide"] {
    display: none;
  }

@-webkit-keyframes rotateAlbumArt
{
    0%{ -webkit-transform: rotateZ(0); transform: rotateZ(0); }
    100%{ -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

@keyframes rotateAlbumArt
{
    0%{ -webkit-transform: rotateZ(0); transform: rotateZ(0); }
    100%{ -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }
}

#buffer-box
{
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 13px;
    color: #1f1f1f;
    font-size: 13px;
    font-family: Helvetica;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    padding: 6px;
    margin: -12px auto 0 auto;
    background-color: rgba(255, 255, 255, 0.19);
    opacity: 0;
    z-index: 2;
}

#album-art img, #buffer-box
{
    transition: 0.1s linear all;
}

#album-art.buffering img
{
    opacity: 0.25;
}

#album-art.buffering img.active
{
    opacity: 0.8;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box
{
    opacity: 1;
}

#player-controls
{
    width: 320px;
    height: 100%;
    margin: 0 5px 0 141px;
    float: right;
    overflow: hidden;
}

.control
{
    width: 25%;
    float: left;
    padding: 12px 0;
}

.player-button
{
    width: 26px;
    height: 26px;
    padding: 25px;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.player-button i, .player-button svg
{
    display: block;
    color: #92c4c0;
    font-size: 26px;
    text-align: center;
    line-height: 1;
}

.player-button i.hilight, .player-button svg.hilight
{
    color: #579fb9;
}

.player-button, .player-button i, .player-button svg
{
    transition: 0.2s ease all;
    width: 76px;
    height: 76px;
}

.player-button:hover
{
    background-color: #d6d6de;
}

.player-button:hover i, , .player-button:hover svg
{
    color: #fff;
}

#register-artwork
{
    position: fixed;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    background-image: url('../static/images/registerBG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(8px);
    -webkit-filter: blur(8px);
    z-index: -1;
}

/* PDF Viewer */
#pdf-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  position: absolute;
  z-index: 100000;

}

#text-file {
    display: none;
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    top: 64px;
    border: 0;
    background: white;
    padding: 32px 48px 32px 54px;
    font-family: 'Barlow Semi Condensed', Rajdhani;
    background-color: #dcdcdc;
}

#text-file::before {
    content: '<pre>';
}

#text-file::after {
    content: '</pre>';
}



#text-file.show {
    display: block;
}

#pager {
  padding: 0.25em 0.5em;
}

#toolbar {
  display: flex;
  align-items: center;
  background-color: #555;
  color: #fff;
  padding: 0.5em;
}
#toolbar button,
#page-mode input {
  color: currentColor;
  background-color: transparent;
  font: inherit;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0.25em 0.5em;
}
#toolbar button:hover,
#toolbar button:focus,
#page-mode input:hover,
#page-mode input:focus {
  color: lightGreen;
}
#page-mode {
  display: flex;
  align-items: center;
  padding: 0.25em 0.5em;
}

#viewport-container {
  flex: 1;
  background: #eee;
  overflow: auto;
  display: flex;
}

#viewport {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#viewport > div {
  text-align: center;
  max-width: 100%;
}
#viewport canvas {
  width: 100%;
  box-shadow: 0 2px 5px gray;
}

/* End PDF Viewer */
/* Begin flashdrive drag-n-drop */


#flashdrive-drop-area, .flashdrive-drop-area {
    border: 2px dashed #ccc;
    border-radius: 10px;
    width: 80vw;
    /* max-width: 480px; */
    font-family: sans-serif;
    margin: auto;
    padding: 20px;
    background-color: #80D0C7;
  }
  
  #flashdrive-drop-area.highlight, .flashdrive-drop-area.highlight {
    background-color: rgb(201, 183, 201);
    border-color: #75cacb96;
    border-width: 6px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(120deg, #f6d365 0%, rgb(225, 125, 98) 100%);
  }
  
  .flashdrive-drop-area.highlight .ticker-container section,
  .flashdrive-drop-area.highlight:hover .ticker-container section {
      display: none;
  }

  .flashdrive-drop-area.input-active #gallery,
  .flashdrive-drop-area.input-active .anim-container {
      opacity: 0.2;
  }

  #media-filter-div.bottom-panel {
      bottom: 0;
  }

  #media-filter-div.bottom-panel:hover {
    transform: translateY(0);
}

  /* p {
    margin: 0;
  } */
  
  p.form {
    visibility: hidden;
    border-radius: 6px;
    color: #ffffff;
    text-align: center;
    padding: 8px 0;
    width: 80vw;
    max-width: 480px;
    margin: 1rem auto 0;
    font-family: 'Barlow Semi Condensed', sans-serif;
  }

  p.form.error {
    background-color: #cc0000;
  }

  p.form.status {
    background-color: teal;
  }

  p.form.status.warning {
    background-color: rgb(213, 118, 16);
  }
  
  .flashdrive-form {
    margin-bottom: 10px;
  }
  
  #flashdrive-progress-bar {
    display: block;
  margin: 1rem auto 0;
  width: 90%;
  }

  progress#flashdrive-progress-bar[value] {
    background-color: #e1dcdc;
    color:#009ad1;
  }

  #driveMessageInput {
    border: 0px;
    background-color: #ededed;
    /* padding-left: 12px; */
    padding-top: 10px;
    font-family: Montserrat, Rajdhani, sans-serif;
    font-size: 1.5rem;
    color: rgb(28, 80, 80);
    width: 90%;
    margin: auto;
    background-color: #00000026;
}

#gallery {
    margin-top: 10px;
    display: flex;
    overflow: scroll;
    width: 90%;
    margin: auto;
    height: 80px;
}


  
#gallery img,
#gallery svg {
    height: 90%;
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: middle;
    object-fit: cover;
    /* border: 1px solid black; */
    margin: 5px 12px;
}
#gallery svg {
    background: transparent;

}
  
/* End flashdrive drag-n-drop */


/* CHART */
.chart-container{
    width: 80%;
}

#pollMessageStatusChart {
   background-color: #efefef;
   padding: 24px 32px;
   width: 100%;
}

/* For Fan-out messages */
    #canned-messages-container, #canned-messages-container-main, .canned-messages-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: none;
    }
    #mentions-popup {
        height: calc(100% - 128px);
        bottom: 128px;
        background: #5f9ea0eb;
        z-index: 100000;
        
    }

    #mentions-popup .round-button {
        width: 36px;
        height: 36px;
    }
    
    #findUserList mark {
        padding-right: 0;
        margin-right: 0;
    }

        /* The float animation, excuse the odd numbers, mostly trial and error (Multiples for each browser) */
        /* @-webkit-keyframes item-1 { 100% { bottom: 67px; opacity: 1; -webkit-transform: rotate(1deg); } }
	@-webkit-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -webkit-transform: rotate(3deg); } }
	@-webkit-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -webkit-transform: rotate(5deg); } }
	@-webkit-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -webkit-transform: rotate(7deg); } }
	@-webkit-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -webkit-transform: rotate(9deg); } }
	@-webkit-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -webkit-transform: rotate(11deg); } } */

        @-webkit-keyframes item-1 {
            100% {
                bottom: 34px;
                left: 8px;
                opacity: 1;
                -webkit-transform: rotate(1deg);
            }
        }

        @-webkit-keyframes item-2 {
            100% {
                bottom: 79px;
                left: 9px;
                opacity: 1;
                -webkit-transform: rotate(3deg);
            }
        }

        @-webkit-keyframes item-3 {
            100% {
                bottom: 124px;
                left: 15px;
                opacity: 1;
                -webkit-transform: rotate(5deg);
            }
        }

        @-webkit-keyframes item-4 {
            100% {
                bottom: 174px;
                left: 22px;
                opacity: 1;
                -webkit-transform: rotate(7deg);
            }
        }

        @-webkit-keyframes item-5 {
            100% {
                bottom: 224px;
                left: 37px;
                opacity: 1;
                -webkit-transform: rotate(9deg);
            }
        }

        @-webkit-keyframes item-6 {
            100% {
                bottom: 284px;
                left: 42px;
                opacity: 1;
                -webkit-transform: rotate(6deg);
            }
        }

        @-webkit-keyframes item-7 {
            100% {
                bottom: 324px;
                left: 48px;
                opacity: 1;
                -webkit-transform: rotate(3deg);
            }
        }

        @-webkit-keyframes item-8 {
            100% {
                bottom: 374px;
                left: 48px;
                opacity: 1;
                -webkit-transform: rotate(0deg);
            }
        }

        @-webkit-keyframes item-9 {
            100% {
                bottom: 424px;
                left: 40px;
                opacity: 1;
                -webkit-transform: rotate(-2deg);
            }
        }

        @-webkit-keyframes item-10 {
            100% {
                bottom: 474px;
                left: 24px;
                opacity: 1;
                -webkit-transform: rotate(-5deg);
            }
        }

        /* Ugh, if only one property could be used! */
        /* @-ms-keyframes item-1 { 100% { bottom: 67px; left: 8px; opacity: 1; -ms-transform: rotate(1deg); } }
	@-ms-keyframes item-2 { 100% { bottom: 137px; left: 5px; opacity: 1; -ms-transform: rotate(3deg); } }
	@-ms-keyframes item-3 { 100% { bottom: 205px; left: 12px; opacity: 1; -ms-transform: rotate(5deg); } }
	@-ms-keyframes item-4 { 100% { bottom: 273px; left: 22px; opacity: 1; -ms-transform: rotate(7deg); } }
	@-ms-keyframes item-5 { 100% { bottom: 340px; left: 37px; opacity: 1; -ms-transform: rotate(9deg); } }
	@-ms-keyframes item-6 { 100% { bottom: 427px; left: 42px; opacity: 1; -ms-transform: rotate(11deg); } } */

        @-ms-keyframes item-1 {
            100% {
                bottom: 34px;
                left: 8px;
                opacity: 1;
                -ms-transform: rotate(1deg);
            }
        }

        @-ms-keyframes item-2 {
            100% {
                bottom: 84px;
                left: 9px;
                opacity: 1;
                -ms-transform: rotate(3deg);
            }
        }

        @-ms-keyframes item-3 {
            100% {
                bottom: 124px;
                left: 15px;
                opacity: 1;
                -ms-transform: rotate(5deg);
            }
        }

        @-ms-keyframes item-4 {
            100% {
                bottom: 174px;
                left: 22px;
                opacity: 1;
                -ms-transform: rotate(7deg);
            }
        }

        @-ms-keyframes item-5 {
            100% {
                bottom: 224px;
                left: 37px;
                opacity: 1;
                -ms-transform: rotate(9deg);
            }
        }

        @-ms-keyframes item-6 {
            100% {
                bottom: 274px;
                left: 42px;
                opacity: 1;
                -ms-transform: rotate(6deg);
            }
        }

        @-ms-keyframes item-7 {
            100% {
                bottom: 324px;
                left: 48px;
                opacity: 1;
                -ms-transform: rotate(3deg);
            }
        }

        @-ms-keyframes item-8 {
            100% {
                bottom: 374px;
                left: 48px;
                opacity: 1;
                -ms-transform: rotate(0deg);
            }
        }

        @-ms-keyframes item-9 {
            100% {
                bottom: 424px;
                left: 40px;
                opacity: 1;
                -ms-transform: rotate(-2deg);
            }
        }

        @-ms-keyframes item-10 {
            100% {
                bottom: 474px;
                left: 24px;
                opacity: 1;
                -ms-transform: rotate(-5deg);
            }
        }

        @-moz-keyframes item-1 {
            100% {
                bottom: 34px;
                left: 8px;
                opacity: 1;
                -moz-transform: rotate(1deg);
            }
        }

        @-moz-keyframes item-2 {
            100% {
                bottom: 84px;
                left: 9px;
                opacity: 1;
                -moz-transform: rotate(3deg);
            }
        }

        @-moz-keyframes item-3 {
            100% {
                bottom: 124px;
                left: 15px;
                opacity: 1;
                -moz-transform: rotate(5deg);
            }
        }

        @-moz-keyframes item-4 {
            100% {
                bottom: 174px;
                left: 22px;
                opacity: 1;
                -moz-transform: rotate(7deg);
            }
        }

        @-moz-keyframes item-5 {
            100% {
                bottom: 224px;
                left: 37px;
                opacity: 1;
                -moz-transform: rotate(9deg);
            }
        }

        @-moz-keyframes item-6 {
            100% {
                bottom: 274px;
                left: 42px;
                opacity: 1;
                -moz-transform: rotate(6deg);
            }
        }

        @-moz-keyframes item-7 {
            100% {
                bottom: 324px;
                left: 48px;
                opacity: 1;
                -moz-transform: rotate(3deg);
            }
        }

        @-moz-keyframes item-8 {
            100% {
                bottom: 374px;
                left: 48px;
                opacity: 1;
                -moz-transform: rotate(0deg);
            }
        }

        @-moz-keyframes item-9 {
            100% {
                bottom: 424px;
                left: 40px;
                opacity: 1;
                -moz-transform: rotate(-2deg);
            }
        }

        @-moz-keyframes item-10 {
            100% {
                bottom: 474px;
                left: 24px;
                opacity: 1;
                -moz-transform: rotate(-5deg);
            }
        }

        /* Initiate the animations */
        #fanholder.show>.item:nth-of-type(1) {
            -webkit-animation: item-1 0.5s forwards;
            -ms-animation: item-1 0.5s forwards;
            -moz-animation: item-1 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(2) {
            -webkit-animation: item-2 0.5s forwards;
            -ms-animation: item-2 0.5s forwards;
            -moz-animation: item-2 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(3) {
            -webkit-animation: item-3 0.5s forwards;
            -ms-animation: item-3 0.5s forwards;
            -moz-animation: item-3 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(4) {
            -webkit-animation: item-4 0.5s forwards;
            -ms-animation: item-4 0.5s forwards;
            -moz-animation: item-4 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(5) {
            -webkit-animation: item-5 0.5s forwards;
            -ms-animation: item-5 0.5s forwards;
            -moz-animation: item-5 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(6) {
            -webkit-animation: item-6 0.5s forwards;
            -ms-animation: item-6 0.5s forwards;
            -moz-animation: item-6 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(7) {
            -webkit-animation: item-7 0.5s forwards;
            -ms-animation: item-7 0.5s forwards;
            -moz-animation: item-7 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(8) {
            -webkit-animation: item-8 0.5s forwards;
            -ms-animation: item-8 0.5s forwards;
            -moz-animation: item-8 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(9) {
            -webkit-animation: item-9 0.5s forwards;
            -ms-animation: item-9 0.5s forwards;
            -moz-animation: item-9 0.5s forwards;
        }

        #fanholder.show>.item:nth-of-type(10) {
            -webkit-animation: item-10 0.5s forwards;
            -ms-animation: item-10 0.5s forwards;
            -moz-animation: item-10 0.5s forwards;
        }

        /* Some simple CSS */

        #fanholder.show a {
            opacity: 1;
        }

        #fanholder-root {
            position: relative;
            z-index: 5;
            padding: 0 0 0 0;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            justify-items: center;
        }

        #fanholder {
            display: inline-block;
            width: 100%;
            /* bottom: 48px; */
            position: absolute;
            justify-content: flex-end;
            flex-direction: column;
        }

        #fanholder .item,
        #fanholder #more {
            display: inline-block;
            position: absolute;
            bottom: 0;
            left: 0;
            /* height: 48px; */
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            justify-items: center;
            align-items: center;
        }

        #fanholder .item {
            padding: 10px 20px 10px 0px;
            /* background-color: white; */

        }

        #fanholder.show {
            height: 100%;
            background:linear-gradient(160deg, #37a4cce6 0%, #00d1adde 100%);
        }

        #fanholder.drive {
            background: linear-gradient(
                180deg
                 ,#d18f00e0 4.73%,#e6d8b8f8 100%);
        }

        #fanholder.show #fanholder-root {
            display: none;
        }

        /* Padding us used to overlap the elements to allow the hover to stay */
        #fanholder #more {
            padding: 0 0 45px 10px !important;
        }

        #fanholder a {
            text-decoration: none;
            opacity: 0;
            display: flex;
            justify-content: flex-start;
            justify-items: center;
            align-items: center;
        }

        /* This is to make the wording beside the icons nice */
        #fanholder div span {
            position: relative;
            /* bottom: 17px; */
            /* border: 2px solid rgba(0, 0, 0, 0); */
            /* left: 15px; */
            color: #fff;
            background: linear-gradient(160deg, #37a4cce6 0%, #00d1adde 100%);
            border-radius: 5px;
            padding: 4px 8px;
            font-family: 'Lekton', Helvetica, Arial, sans-serif;
            /* text-shadow: 0px 2px 2px rgba(0,0,0,0.1); */
            font-weight: 400;
            font-size: 1.4rem;
        }
        #fanholder.drive div span {
            background: linear-gradient(160deg, #cca537e6 0%, #d15600de 100%);
        }


        /* Just some tidying up and hover effects */
        a:hover>span {
            /* border: 2px solid #fff !important; */
            cursor: pointer;
        }

        #more span {
            /* bottom: 40px !important; */
            /* left: -5px !important; */
        }

        #fanholder-root span {
            opacity: 1 !important;
            bottom: 5px;
        }

        #fanholder a img {
            width: 42px;
            height: 42px;
        }

        #header {
            background: #000;
            padding: 20px;
            color: #fff;
        }

        #header a,
        #header h2 {
            opacity: 1 !important;
            color: #fff;
            font-family: 'PT Sans', Helvetica, Arial, sans-serif;
            font-size: 20px;
            font-weight: bold;
            text-decoration: none;
        }

        #header img {
            width: 150px;
            height: 33px;
        }

        #fanholder svg {
            margin-right: 6px;
            margin-left: 6px;
            color: rgba(0, 0, 0, 0.6);
        }
/*
 * Begin Url-Container
 */
.buzz-siteshots-wrapper {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 100vw
}

.buzz-siteshots-wrapper .buzz-siteshot-main {
    display: inline-block;
    position: relative;
    color: #2a2e2e;
    font-size: 14px;
    clear: both;
    width: 100%;
}

.buzz-siteshots-wrapper .buzz-siteshot-main:hover .scroll-btn {
    opacity: 1
}

.buzz-siteshots-wrapper .buzz-siteshot-main.no-meta .buzz-siteshot-content,.buzz-siteshots-wrapper .buzz-siteshot-main.no-meta .buzz-siteshot-top-comment-wrapper {
    max-height: calc(5.2em);
    padding-top: 2px
}

.buzz-siteshots-wrapper .buzz-siteshot-main.no-meta.has-preview-title .buzz-siteshot-content,.buzz-siteshots-wrapper .buzz-siteshot-main.no-meta.has-preview-title .buzz-siteshot-content .buzz-siteshot-title {
    max-height: calc(5em)
}

.buzz-siteshots-wrapper .buzz-siteshot-main .scroll-btn {
    position: absolute;
    background: rgba(255,255,255,.7);
    color: rgba(0,0,0,.55);
    font-size: 36px;
    line-height: .9;
    height: 50px;
    top: calc(50% - 25px);
    border: 1px solid #e7e9ee;
    border-radius: 3px;
    padding: 8px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: all 250ms ease-in-out;
    cursor: pointer;
    outline: 0;
    z-index: 99999
}

.buzz-siteshots-wrapper .buzz-siteshot-main .scroll-btn:hover {
    background: rgba(255,255,255,.8);
    color: rgba(0,0,0,.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1
}

.buzz-siteshots-wrapper .buzz-siteshot-main .scroll-btn.scroll-left {
    left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: 4px
}

.buzz-siteshots-wrapper .buzz-siteshot-main .scroll-btn.scroll-right {
    right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-right: 4px
}

.buzz-siteshot-col-header {
    margin-bottom: 12px
}

.buzz-siteshot-col-header .buzz-siteshots-unit-title {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(101,108,122,.65)
}

.buzz-siteshot-col-header .buzz-siteshots-unit-title .buzz-siteshots-forum {
    color: #3d424a
}

@media screen and (max-width: 480px) {
    .buzz-siteshot-col-header {
        margin-bottom:.4em
    }
}

.buzz-siteshot-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 4px 10px 10px;
    padding-top: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    max-width: 100%;
}

.buzz-siteshot-wrapper::-webkit-scrollbar {
    display: none
}

.message-clearview .buzz-siteshot-wrapper {
    flex-direction: column;
    width: 100%;
}

.message-clearview .buzz-siteshots {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 48px;
}


.message-clearview .buzz-siteshot {
    width: 100%;
    height: 50vh;
    border: 3px solid sandybrown;
}


.buzz-siteshots {
    white-space: nowrap;
    overflow: scroll;
    max-width: 100%;
}

.buzz-siteshot {
    position: relative;
    display: inline-block;
    background: #e7f2f4;
    width: 240px;
    height: 180px;
    border: 1px solid #e7e9ee;
    border-radius: 6px;
    -ms-flex-pack: justify;
    justify-content: space-between;
    vertical-align: middle;
    transform: translate3d(0,0,0);
    transition: all .2s ease-in-out;
    margin: 0 4px;
    cursor: pointer;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
    overflow-y: hidden;
    border: 2px solid #00808052;
}

.buzz-siteshot.small {
    width: 160px;
    height: 120px;
}

.buzz-siteshot.tiny {
    width: 120px;
    height: 90px;
}

/* .buzz-siteshot:hover {
    width: 360px;
} */

.buzz-siteshot:first-child {
    margin-left: 0
}

.buzz-siteshot:last-child {
    margin-right: 0
}

.buzz-siteshot:focus,.buzz-siteshot:hover {
    transform: translate3d(0,-2px,0)
}

.message-clearview .buzz-siteshot:hover {
    border: 5px solid rgb(53, 200, 223);
}

.buzz-siteshot:hover .content-preview-wrapper {
    opacity: 1;
}
.buzz-siteshot:focus {
    outline-offset: -3px
}

.buzz-siteshot:focus:not(:focus-visible) {
    border: 1px solid #e7e9ee
}

.buzz-siteshot:focus-visible {
    border: 2px solid #2E9FFF;
    border-radius: calc(4px)
}

.buzz-siteshot:focus-visible .siteshot-overlay,.buzz-siteshot:focus-visible .buzz-siteshot-image-wrapper {
    border-radius: calc(4px)
}

.buzz-siteshot .buzz-siteshot-header {
    position: relative;
    width: 100%;
    height: 60%;
    overflow: hidden;
    transition: all .2s linear;
    border-bottom: 3px solid #29bcc7;
}

.message-clearview .buzz-siteshot .buzz-siteshot-header {
    height: 100%;
}

.buzz-siteshot .buzz-siteshot-header:hover {
    height: 100%;
}

.message-clearview .buzz-siteshot .buzz-siteshot-header:hover {
    height: 100%;
}

.buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden;
    transition: all .2s ease-in-out;
    -webkit-mask-image: -webkit-radial-gradient(white,#000)
}

.buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: calc(100%);
    object-fit: cover;
    transform: translate(-50%,-50%);
    transition: all .2s linear
}

.buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper .siteshot-overlay {
    position: absolute;
    /* background: linear-gradient(to top,rgba(0,0,0,.35) 10%,rgba(0,0,0,.1) 60%,transparent 90%); */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
.buzz-siteshot:hover .siteshot-overlay {
    background: linear-gradient(to top,rgba(0,0,0,.35) 10%,rgba(0,0,0,.1) 60%,transparent 90%);
}
.message-clearview .buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper img {
    height: calc(100%);
}

.message-clearview .buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper .siteshot-overlay {
    background-color: transparent;
}
.buzz-siteshot .buzz-siteshot-top-comment-wrapper {
    display: block
}

.buzz-siteshot .buzz-siteshot-title {
    position: absolute;
    color: white;
    background-color: #003f4c8d;
    padding: 0 10px;
    font-size: 20px;
    font-family: 'DIN Web Condensed Bold', 'Barlow Semi Condensed', Anaheim, sans-serif;
    /* text-shadow: 0 .5px 2px rgba(0,0,0,.35); */
    width: 100%;
    left: 0%;
    bottom: 0;
    white-space: normal;
    margin: 0px auto;
    display: block;
    line-height: 1.25;
    max-height: calc(2.5em);
    overflow: hidden;
    text-shadow: 0 2.5px 6px rgb(116 106 106);
    transition: all 150ms ease-in-out,font-size 0s ease-in-out;
}

.buzz-siteshot:hover .buzz-siteshot-title {
    background-color: #0000006e;
    color: rgb(0, 242, 255);
    font-size: 22px;
    text-shadow: 0 2.5px 6px rgb(116 106 106);
}

.message-clearview .buzz-siteshot:hover .buzz-siteshot-title {
    background-color: #0000006e;
    color: rgb(0, 242, 255);
    font-size: 26px;
}

.buzz-siteshot .buzz-siteshot-header  .buzz-siteshot-quicklook {
    float: right;
    color: rgb(255, 255, 255);
    opacity: 0;
    margin: 6px 4px 0 8px;
}

.buzz-siteshot .buzz-siteshot-header  .buzz-siteshot-quicklook.download {
    color: rgb(37, 212, 215);
}

.message-clearview .buzz-siteshot .buzz-siteshot-header  .buzz-siteshot-quicklook {
    margin: 6px 8px 0 16px;
}

.message-clearview .buzz-siteshot .buzz-siteshot-header  .buzz-siteshot-quicklook.preview {
    display: none;
}

.buzz-siteshot .buzz-siteshot-header:hover  .buzz-siteshot-quicklook {
    opacity: 1;
}

.buzz-siteshot .buzz-siteshot-header  .overlay-icon-wrapper {
    opacity: 0.0;
}

.buzz-siteshot .buzz-siteshot-header:hover  .overlay-icon-wrapper {
    opacity: 1.0;
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    bottom: 18px;
    right: 0;
}
.message-clearview .buzz-siteshot .buzz-siteshot-header  .overlay-icon-wrapper {
    bottom: 32px;
}

#messageReadble .buzz-siteshot .buzz-siteshot-header:hover  .overlay-icon-wrapper {
    
        bottom: 36px;
    }

/* .buzz-siteshot:hover .buzz-siteshot-quicklook {
    opacity: 1.0;
} */

.buzz-siteshot a.title {
    font-size: 16px;
    font-weight: 700;
    word-wrap: break-word;
    line-height: 1.25
}

.buzz-siteshot .meta {
    color: #255356;
    font-size: 12.5px;
    width: 90%;
    margin: 8px 5% 0;
    padding: 0;
    padding-inline-start:0;text-overflow: ellipsis;
    overflow: hidden;
    transition: all 150ms linear 50ms
}

.buzz-siteshot.small .meta {
    font-size: 10px;
}

.buzz-siteshot.tiny .meta {
    font-size: 8px;
}
.buzz-siteshot .meta li, .buzz-siteshot .meta p {
    display: inline;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.buzz-siteshot .meta li:not(:first-child)::before {
    content: '\2022';
    position: relative;
    font-size: 10px;
    top: -1px;
    padding-right: 4px;
    opacity: .9
}

.buzz-siteshot .content-preview-wrapper,.buzz-siteshot .top-comment {
    color: #2a2e2e;
    display: inline-block;
    width: 90%;
    margin: 6px 5%;
    font-size: 12px;
    opacity: 0.4;
}
.buzz-siteshot.small .content-preview-wrapper,.buzz-siteshot.small .top-comment {
    font-size: 9px;
}
.buzz-siteshot.tiny .content-preview-wrapper,.buzz-siteshot.tiny .top-comment {
    font-size: 7px;
}

.buzz-siteshot .content-preview-wrapper .top-comment-header,.buzz-siteshot .top-comment .top-comment-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 30px;
    margin-bottom: 8px
}

.buzz-siteshot .content-preview-wrapper .top-comment-header .top-comment-avatar-wrapper,.buzz-siteshot .top-comment .top-comment-header .top-comment-avatar-wrapper {
    position: relative;
    min-width: 30px;
    min-height: 30px;
    border-radius: 50%;
    margin-right: 8px;
    overflow: hidden
}

.buzz-siteshot .content-preview-wrapper .top-comment-header .top-comment-avatar-wrapper img,.buzz-siteshot .top-comment .top-comment-header .top-comment-avatar-wrapper img {
    position: absolute;
    width: 30px;
    top: 50%;
    left: 50%;
    object-fit: cover;
    transform: translate(-50%,-50%)
}

.buzz-siteshot .content-preview-wrapper .top-comment-header .user,.buzz-siteshot .top-comment .top-comment-header .user {
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all .2s ease-in-out
}

.buzz-siteshot .content-preview-wrapper .buzz-siteshot-content,.buzz-siteshot .content-preview-wrapper .buzz-siteshot-top-comment-wrapper,.buzz-siteshot .top-comment .buzz-siteshot-content,.buzz-siteshot .top-comment .buzz-siteshot-top-comment-wrapper {
    line-height: 1.3;
    max-height: calc(3.9em);
    padding-top: 0;
    margin-top: 2px;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.buzz-siteshot .content-preview-wrapper .buzz-siteshot-content .buzz-siteshot-title,.buzz-siteshot .content-preview-wrapper .buzz-siteshot-top-comment-wrapper .buzz-siteshot-title,.buzz-siteshot .top-comment .buzz-siteshot-content .buzz-siteshot-title,.buzz-siteshot .top-comment .buzz-siteshot-top-comment-wrapper .buzz-siteshot-title {
    position: relative;
    color: #2a2e2e;
    font-weight: 500;
    text-shadow: none;
    width: 100%;
    left: 0;
    margin-top: 0;
    letter-spacing: -1px;
}

.buzz-siteshot .content-preview-wrapper p,.buzz-siteshot .top-comment p {
    display: block;
    color: #494e58;
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 0;
    white-space: pre-wrap
}

.buzz-siteshots-unit {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center
}

.buzz-siteshots-unit .recommendation-container {
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    width: 100%;
    min-width: 0
}

.buzz-siteshot-main.no-preview .buzz-siteshot {
    height: 200px
}

.buzz-siteshot-main.no-preview .buzz-siteshot .buzz-siteshot-header {
    height: 100%
}

.buzz-siteshot-main.no-preview .buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper {
    height: 100%;
    border-radius: calc(5px)
}

.buzz-siteshot-main.no-preview .buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper img {
    width: auto;
    min-width: 100%;
    min-height: 200px
}

.buzz-siteshot-main.no-preview .buzz-siteshot .buzz-siteshot-header .buzz-siteshot-image-wrapper .siteshot-overlay {
    background: linear-gradient(to top,rgba(0,0,0,.5) 20%,transparent);
    border-radius: calc(5px)
}

.buzz-siteshot-main.no-preview .buzz-siteshot .buzz-siteshot-header .buzz-siteshot-title {
    font-size: 22px;
    max-height: calc(3.75em);
    margin-bottom: 16px
}

.buzz-siteshot-main.no-preview .buzz-siteshot .meta {
    position: absolute;
    font-size: 13px;
    color: rgba(255,255,255,.95);
    bottom: 45%
}

.buzz-siteshot-main.no-preview .buzz-siteshot .content-preview-wrapper {
    display: none
}

.buzz-siteshots-layout .post-list {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.buzz-siteshots-layout .alert--error {
    line-height: 1.4;
    border-radius: 4px;
    margin: 16px;
    padding: 16px
}
 /*
  * End Url-Container
  */

  /*
   * Start Radar Animation
   */
   .radar {
    background: url("/static/icons/Radar1.png") no-repeat 50% 50%;
    width: 48px;
    height: 48px;
    position: relative;
    background-size: 48px 48px;
    /* position: absolute; */
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -64px;
    display: flex;
    justify-content: center;
  }

  .radar.inactive {
    background: url("/static/icons/Radar0.png") no-repeat 50% 50%;
    width: 48px;
    height: 48px;
    position: relative;
    background-size: 48px 48px;
    /* position: absolute; */
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -64px;
  }

  .radar.self {
    background: url("/static/icons/RadarSelf.png") no-repeat 50% 50%;
    width: 48px;
    height: 48px;
    position: relative;
    background-size: 48px 48px;
    /* position: absolute; */
    left: 50%;
    top: 50%;
    margin-left: -32px;
    margin-top: -64px;
  }

  .radar:hover {
    background: none;
  }
  
  .radar .radar-pointer {
    position: absolute;
    z-index: 1024;
    left: 10.5820106%;
    right: 10.5820106%;
    top: 10.5820106%;
    bottom: 50%;
    will-change: transform;
    transform-origin: 50% 100%;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    background-image: linear-gradient(135deg, rgba(5, 162, 185, 0.8) 0%, rgba(0, 0, 0, 0.02) 70%, rgba(0, 0, 0, 0) 100%);
    -webkit-clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
            clip-path: polygon(100% 0, 100% 10%, 50% 100%, 0 100%, 0 0);
    -webkit-animation: rotate360 12s infinite linear;
            animation: rotate360 12s infinite linear;
  }

  .radar .radar-counter {
    /* position: absolute;
    left: 11%;
    top: 11%;
    right: 11%;
    bottom: 11%; */
    color: #d91e43;
    font-size: 24px;
    font-weight: 700;
    font-family: Montserrat, Rajdhani, sans-serif;
    z-index: 1024;
    display: none;
    line-height: 48px;
  }

  .radar:hover .radar-counter {
    display: inline;
  }

  .radar.inactive .radar-pointer {
    background-image: linear-gradient(135deg, rgba(217, 31, 67, 0.8) 0%, rgba(0, 0, 0, 0.02) 70%, rgba(0, 0, 0, 0) 100%);
    display: none;
  }
  
  .radar .radar-pointer:after {
    content: "";
    position: absolute;
    width: 50%;
    bottom: -1px;
    border-top: 2px solid rgba(0, 231, 244, 0.8);
    box-shadow: 0 0 3px rgba(0, 231, 244, 0.6);
    border-radius: 9px;
  }
  
  .radar-shadow {
    position: absolute;
    left: 11%;
    top: 11%;
    right: 11%;
    bottom: 11%;
    margin: auto;
    border-radius: 9999px;
    box-shadow: 0 0 66px 6px #14a5a3;
    -webkit-animation: shadow 4s infinite ease;
            animation: shadow 4s infinite ease;
  }

  .radar.inactive .radar-shadow {
    box-shadow: 0 0 66px 6px #d91e43;
  }
  
  @-webkit-keyframes rotate360 {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
  
  @keyframes rotate360 {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
  @-webkit-keyframes radar-shadow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  @keyframes radar-shadow {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  /*
   * End Radar Animation
   */

/*
 * Hero and other Information
 */
 .hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero {
    position: relative;
    height: 40vh;
    min-height: 300px;
    color: #fff;
    display: flex;
}


.carousell {
    position: relative;
    z-index: 1;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    pointer-events: none;
}

.carousell-item {
    --items: 10;
    --width: clamp(150px, 30vw, 300px);
    --height: clamp(200px, 40vw, 400px);
    --x: calc(var(--active) * 3200%);
    --y: calc(var(--active) * 200%);
    --rot: calc(var(--active) * 120deg);
    --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
    overflow: hidden;
    position: absolute;
    z-index: var(--zIndex);
    width: var(--width);
    height: var(--height);
    margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
    border-radius: 10px;
    top: 50%;
    left: 50%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transform-origin: 0% 100%;
    box-shadow: 0 10px 50px 10px rgba(0, 0, 0, 0.5);
    background: black;
    pointer-events: all;
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
    transition: transform 0.8s cubic-bezier(0, 0.02, 0, 1);
}

.carousell-item .carousell-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
    font-family: "Orelo-sw-db", serif;
}

.carousell-item .carousell-box:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5));
}

.carousell-item .title {
    position: absolute;
    z-index: 1;
    color: #fff;
    bottom: 20px;
    left: 20px;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    font-family: Rajdhani, sans-serif;

}

.carousell-item .num {
    position: absolute;
    z-index: 1;
    color: #fff;
    top: 10px;
    left: 20px;
    transition: opacity 0.8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 80px);
    font-family: Anaheim, sans-serif;
}

.carousell-item actionbutton.mini {
    display: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    z-index: 100;
}

.carousell-item:hover actionbutton.mini {
    display: block;
}

.carousell-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    pointer-events: none;
}

.layout {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.layout:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 90px;
    width: 10px;
    height: 100%;
    border: 1px solid #fff;
    border-top: none;
    border-bottom: none;
    opacity: 0.15;
}

.layout .box {
    position: absolute;
    bottom: 0;
    left: 30px;
    color: #fff;
    transform-origin: 0% 10%;
    transform: rotate(-90deg);
    font-size: 9px;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: 0.4;
}

.logo {
    position: absolute;
    z-index: 2;
    top: 28px;
    right: 28px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Orelo-sw-db", serif;
    pointer-events: all;
    color: black;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    padding-bottom: 0.1em;
}

.social {
    position: absolute;
    z-index: 10;
    bottom: 20px;
    right: 25px;
    color: #fff;
    opacity: 0.4;
}

.social a {
    display: inline-block;
    margin-left: 3px;
}

.social svg {
    --fill: #fff;
    width: 35px;
    height: 35px;
}

.cursor {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    --size: 40px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.5);
    margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
    transition: transform 0.85s cubic-bezier(0, 0.02, 0, 1);
    display: none;
    pointer-events: none;
}

@media (pointer: fine) {
    .cursor {
        display: block;
    }
}

.cursor2 {
    --size: 2px;
    transition-duration: 0.7s;
}

@media only screen and (min-width: 600px) {
.modal.new {
    max-height: 90%;
    width: 80%;
    height: 90%;
    top: 5%;
    margin: auto;
}

}

@media only screen and (min-width: 768px) {
.modal.new {
    max-height: 90%;
    width: 75%;
    height: 90%;
    top: 5%;
    margin: auto;
}

}

@media only screen and (min-width: 992px) {
.modal.new {
    max-height: 90%;
    width: 70%;
    height: 90%;
    top: 5%;
    margin: auto;
}

}

@media only screen and (min-width: 1200px) {

.modal.new {
    max-height: 90%;
    width: 65%;
    height: 90%;
    top: 5%;
    margin: auto;
}

}

/* On screens that are 800px or less in height, adjust the properties */
@media screen and (max-height: 800px) {
    .modal.new {
        max-height: 100%;
        width: 65%;
        height: 100%;
        top: 0;
        margin: auto;
    }
}

/* Onboarding */

.ob-onboarding {
    --page-number: 1;
    zoom: 0.9;
  }

  
  .ob-onboarding {
    height: 640px;
    min-width: 360px;
    width: 500px;
    border-radius: 10px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .ob-onboarding .slider {
    width: 400%;
    height: 100%;
    display: flex;
    background-color: #fff;
    margin-left: calc(-500px * (var(--page-number) - 1));
    transition: margin-left 400ms;
  }
  .ob-onboarding .slider .slide {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ob-onboarding .slider .slide h1 {
    margin: 50px 0 0px 0;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 0.25em;
    color: #009ad1;
  }
  .ob-onboarding .slider .slide img, .ob-onboarding .slider .slide .img {
    /* transform: scale(0.7); */
    /* margin-bottom: 20px; */
  }
  .ob-onboarding .slider .slide .img {
    height: 240px;
    width: 320px;
    /* background-image: url("/static/images/onboarding-ai.png");
    background-repeat: no-repeat; */
    object-fit: cover;
  }
  /* .ob-onboarding .slider .slide .img.i2 {
    background-image: url("/static/images/onboarding-prompt.png");
  
  }
  .ob-onboarding .slider .slide .img.i3 {
    background-image: url("/static/images/onboarding-results.png");
  
  }
  .ob-onboarding .slider .slide .img.i4 {
    background-image: url("/static/images/onboarding-dispatch.png");
  
  }
  .ob-onboarding .slider .slide .img.i1 {
    background-image: url("/static/images/onboarding-ai.png");
  
  } */
  .ob-container {
    font-family: "Barlow Semi Condensed", Helvetica, Arial, sans-serif;
    background: #ededed;
    background-image: linear-gradient(160deg, #80D0C7 0%, #009ad1 100%);
    height: 100vh;
    width: 100vw;
    display: none;
    top: 0;
    left: 0;
    position: absolute;
  }
  .ob-container.show {
    display: block;
    z-index: 10000;
  }


  .ob-onboarding .slider .slide p {
    margin: 0px 0;
    max-width: 84%;
    font-size: 16px;
    font-size: 19px;
    line-height: 1.5em;
    text-align: center;
    color: #333;
  }
  .ob-onboarding .controls {
    --h: 167px;
    height: var(--h);
    margin-top: calc(var(--h) * -1);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    width: 100%;
  }
  .ob-onboarding .controls form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px;
    align-self: center;
  }
  .ob-onboarding .controls form input[type=radio] {
    outline: none;
    margin: 20px 5px;
    opacity: 0;
    position: relative;
  }
  .ob-onboarding .controls form input[type=radio] + label {
    position: relative;
    top: -1px;
    left: -17px;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    border: 1px solid #adb3be;
    transition: border 300ms, background 300ms;
  }
  .ob-onboarding .controls form input[type=radio]:checked + label {
    border: 1px solid #68e0e3;
    background-color: #68e0e3;
  }
  .ob-onboarding .controls a.btn-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    color: #02C1C5;
    background-color: white;
    font-family: Rajdhani, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
  }
  
  .ob-thumbnail {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("/static/images/Buzz-Cup-Icon.png.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: none;
  }
  
  @media screen and (max-width: 400px) {
    .ob-thumbnail {
      display: block;
    }
  }
  .img.bubbles {
    height: 200px;
  }
  
  .ob-toast {
    padding: 20px;
    background-color: #212121;
    color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
  }
  .ob-toast a {
    margin-left: 4px;
    text-decoration: none;
    color: #abcdef;
  }

/* --- The Table Structure Wrap in Preview tag --- */
.preview-table {
    margin: 12px 0;
}
.preview-table table {
    border-collapse: separate;
    border-spacing: 0;
    font-family: Lekton, 'Barlow Semi Condensed', Serif;
    font-size: 1rem;
    letter-spacing: 0.2;
    color: #09595c;
}

.readability-container.csv .preview-table table  {
    font-family: Montserrat, 'Barlow Semi Condensed', Serif;
    font-size: calc(1rem * (var(--readability-size) / 10
    ));
    letter-spacing: 0.2;
    color: #09595c;
}

.readability-container.csv pre.text {
    font-family: Monaco, monospace, Montserrat, 'Barlow Semi Condensed', Serif;
    font-size: calc(1rem * (var(--readability-size) / 10));
    letter-spacing: 0.2;
    color: #09595c;
    letter-spacing: 1.2;
    background-color: #0000000a;
    padding: 8px 10px;
}

/* Markdown content styling */
.readability-container .markdown-content {
    font-family: Montserrat, 'Barlow Semi Condensed', Serif;
    font-size: calc(1rem * (var(--readability-size) / 10));
    line-height: 1.6;
    color: #333;
}

.readability-container .markdown-content h1,
.readability-container .markdown-content h2,
.readability-container .markdown-content h3,
.readability-container .markdown-content h4 {
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #09595c;
}

.readability-container .markdown-content h1 {
    font-size: 1.8em;
    border-bottom: 2px solid #26a69a;
    padding-bottom: 0.3em;
}

.readability-container .markdown-content h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.3em;
}

.readability-container .markdown-content h3 {
    font-size: 1.3em;
}

.readability-container .markdown-content h4 {
    font-size: 1.1em;
}

.readability-container .markdown-content p {
    margin: 0.8em 0;
}

.readability-container .markdown-content ul,
.readability-container .markdown-content ol {
    margin: 1em 0;
    padding-left: 2em;
}

.readability-container .markdown-content li {
    margin: 0.4em 0;
}

.readability-container .markdown-content blockquote {
    border-left: 3px solid #26a69a;
    padding-left: 1em;
    margin: 1em 0;
    color: #666;
    font-style: italic;
}

.readability-container .markdown-content code {
    background-color: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: Monaco, monospace;
    font-size: 0.9em;
}

.readability-container .markdown-content pre {
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 12px 0;
    border-left: 3px solid #26a69a;
}

.readability-container .markdown-content pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.readability-container .markdown-content a {
    color: #26a69a;
    text-decoration: underline;
}

.readability-container .markdown-content a:hover {
    color: #09595c;
}

.readability-container .markdown-content strong {
    font-weight: bold;
}

.readability-container .markdown-content em {
    font-style: italic;
}

.preview-table table tr th,
.preview-table table tr td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-shadow: 2px 2px 1px #e5dfcc;
}

.preview-table table tr th:first-child,
.preview-table table tr td:first-child {
    border-left: 1px solid #bbb;
}

.preview-table table tr th {
    border-top: 1px solid #bbb;
}

/* top-left border-radius */
.preview-table table tr:first-child th:first-child {
    border-top-left-radius: 6px;
}

/* top-right border-radius */
.preview-table table tr:first-child th:last-child {
    border-top-right-radius: 6px;
}

/* bottom-left border-radius */
.preview-table table tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
.preview-table table tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}

/* -- The Styles -- */

.preview-table th,
.preview-table td {
    padding: 8px 20px;
}

.preview-table th {
    background: #E5E6EB;
    color: #111;
}

.preview-table td {
    background: #EFF1F6;
}

/* Highlighter for TextArea */
.readability-container mark {
    background-color: #ffff00;
    color: #000000;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
}
.readability-container mark.error {
    background-color: #fab0b0;
    margin-top: 1px;
    margin-bottom: 1px;
}

.hilite-container {
	display: inline-block;
	position: relative;
	/* overflow: hidden !important; Sandeep - test this */
	-webkit-text-size-adjust: none !important;
    font-family: 'Anaheim';
    font-size: 20px;
    line-height: 1.6;
    width: 90%;
}

.hilite-backdrop {
	position: absolute !important;
	top: 0 !important;
	right: -99px !important;
	bottom: 0 !important;
	left: 0 !important;
	margin-right: 99px !important;
	/* padding-right: 99px !important; sandeep */
	overflow-x: hidden !important;
	overflow-y: auto !important;
    font-family: 'Anaheim';
    font-size: 20px;
    line-height: 1.6;
    padding-left: 12px;
    background-color: #d8eceb99;

}

.hilite-highlights {
	width: auto !important;
	height: auto !important;
	border-color: transparent !important;
	white-space: pre-wrap !important;
	word-wrap: break-word !important;
	color: transparent !important;
	overflow: hidden !important;
}

.hilite-input {
	display: block !important;
	position: relative !important;
	margin: 0;
	padding: 0;
	border-radius: 0;
	font: inherit;
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.hilite-content {
	border: 1px solid;
	background: none transparent !important;
}

.hilite-content mark {
	padding: 0 !important;
	color: inherit;
}

/* Range Slider and sucn */
.range-slider {
    position: absolute;
    width: 200px;
    height: 64px;
    top: 64px;
    left: 64px;
}

.range-slider_input {
    width: 100%;
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    opacity: 0;
    margin: 0;
}

.range-slider_input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 100px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
}

.range-slider_input::-moz-range-thumb {
    width: 14vmin;
    height: 14vmin;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
}

.range-slider_thumb {
    width: 54px;
    height: 54px;
    border: 4px solid #303030;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 12px;
    color: #303030;
    z-index: 2;
    cursor: pointer;
}

.range-slider_line {
	height: 0.5vmin;
	width: 100%;
	background-color: #858585;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	position: absolute;
	z-index: 1;
}

.range-slider_line-fill {
	position: absolute;
	height: 0.5vmin;
	width: 0;
	background-color: #303030;
}

/********** Range Input Styles **********/
/*Range Reset*/
input[type="range"] {
    -webkit-appearance: none;
     appearance: none;
     background: transparent;
     cursor: pointer;
     width: 15rem;
 }
 
 /* Removes default focus */
 input[type="range"]:focus {
   outline: none;
 }
 
 /*****  *****/
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;  
 }
 
 /* slider thumb */
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -12px; /* Centers thumb on the track */
 
    /*custom styles*/
    background-color: #2ba5bb;
    height: 2rem;
    width: 2rem;
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {   
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
 /******** Firefox styles ********/
 /* slider track */
 input[type="range"]::-moz-range-track {
    background-color: #053a5f;
    border-radius: 0.5rem;
    height: 0.5rem;
 }
 
 /* slider thumb */
 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
 
    /*custom styles*/
    background-color: #5cd5eb;
    height: 2rem;
    width: 2rem;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
   border: 1px solid #053a5f;
   outline: 3px solid #053a5f;
   outline-offset: 0.125rem; 
 }
 
:root {
    --readability-size: 10;
  }
  
/* End of Range Slider */

/* Locomotion and Ticker based Listings */

.ticker-container {
    display: block;
    min-width: 320px;
    padding: 0 16px;
    max-width: unset;
    background-color: transparent;
}

.ticker-container section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        min-width: 900px;
        max-width: 1200px;
        margin: 0px auto 0;
        padding: 0 10px;
        flex-direction: column;
        background-color: transparent;
}

@media (min-width: 768px) {
    .ticker-container {
        margin-left:auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px
    }
}

@media (min-width: 1024px) {
    .ticker-container {
        max-width:1400px;
        padding-left: 32px;
        padding-right: 32px;
        width: 100%
    }
}

@media (min-width: 1200px) {
    .ticker-container {
        padding-left:72px;
        padding-right: 72px
    }
}

@media (min-width: 1440px) {
    .ticker-container {
        padding-left:96px;
        padding-right: 96px
    }
}

.ticker-button-group.group .ticker-button-counter__label {
    border: 2px solid #5d6b81;
}
.ticker-button-group.group .ticker-button-counter__count {
    background-color: #5d6b81;
}

.ticker-button-group.team .ticker-button-counter__label {
    border: 2px solid #6b9d9e;
}
.ticker-button-group.team .ticker-button-counter__count {
    background-color: #6b9d9e;
}

.ticker-button-counter {
    display: flex;
}

.ticker-button-counter__count {
    background-color: #1a2b49;
    padding: 4px 12px;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
}

.ticker-button-counter__label {
    font-size: .875rem;
    font-family: 'Barlow Semi Condensed';
    text-transform: uppercase;
    line-height: 1.25rem;
    border: 2px solid #1a2b49;
    padding: 4px 12px;
    color: #1a2b49;
    border-left: none;
    max-width: 304px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ticker-button-counter a {
    display: flex;
    text-decoration: none
}

.ticker-buttons-group {
    margin-bottom: 56px;
    overflow: scroll;
}

#media-filter-div .ticker-buttons-group, #media-filter-div .ticker-buttons-title-wrapper {
    display: none;
    -moz-transition: height 1s ease;
        -webkit-transition: height 1s ease;
        -o-transition: height 1s ease;
        transition: height 1s ease;
}

#media-filter-div:hover .ticker-buttons-group, #media-filter-div:hover .ticker-buttons-title-wrapper {
    display: flex;
}

.ticker-action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 24px;
    padding-left: 24px;
}

.flashdrive-drop-area.highlight .media-filter-overlay {
    display: none;
}

.media-filter-overlay {
    /* background: #a2acbd; */
    margin: auto;
    display: flex;
    letter-spacing: 5px;
    /* width: 100%; */
    height: 64px;
    font-size: 2rem;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
}

/*       ScrollBar Gray        */
        
.buzz-scrollbar-too::-webkit-scrollbar {
    width: 10px;
}

.buzz-scrollbar-too::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #d0d0d0;
    border: 1px solid #c0c0c0;
}

.buzz-scrollbar-too::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #d55959;
}

/*       Buzz Scrollbar 1       */

        
#slide-out.scroller-show::-webkit-scrollbar {
    width: 12px;
}

#slide-out.scroller-show::-webkit-scrollbar-track {
    /* border-radius: 8px; */
    background-color: #e0e0e0;
    /* border: 1px solid #c0c0c0; */
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */
}

#slide-out.scroller-show::-webkit-scrollbar-thumb {
    /* border-radius: 8px; */
    background-color: #d0d0d0;
    /* background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #ca209159), color-stop(1, #009ad163)); */
}

#slide-out.scroller-show:hover::-webkit-scrollbar {
    width: 12px;
}

#slide-out.scroller-show:hover::-webkit-scrollbar-track {
    /* border-radius: 8px; */
    background-color: #d0d0d0;
    border: 1px solid #c0c0c0;
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */
}

#slide-out.scroller-show:hover::-webkit-scrollbar-thumb {
    /* border-radius: 8px; */
    background-color: #a0a0a0;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #ca209159), color-stop(1, #009ad163));
}

/* For the Main Window */
#conversations-window.scroller-show .message-container::-webkit-scrollbar {
    width: 12px;
    transition: all 0.8s ease-in-out;
}
#conversations-window.scroller-show:hover .message-container::-webkit-scrollbar {
    width: 12px;
}
#conversations-window.scroller-show .message-container::-webkit-scrollbar-track {
    /* border-radius: 8px; */
    background-color: #e0e0e0;
    /* border: 1px solid #c0c0c0; */
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */
}

#conversations-window.scroller-show:hover .message-container::-webkit-scrollbar-track {
    /* border-radius: 8px; */
    background-color: #d0d0d0;
    border: 1px solid #c0c0c0;
    /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */
}

#conversations-window.scroller-show .message-container::-webkit-scrollbar-thumb {
    /* border-radius: 8px; */
    background-color: #a0a0a0;
    /* background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #ca2091a1), color-stop(1, #009ad1)); */
}

#conversations-window.scroller-show:hover .message-container::-webkit-scrollbar-thumb {
    /* border-radius: 8px; */
    /* background-color: #a0a0a0; */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.2, #ca209159), color-stop(1, #009ad163));
}


.media-filter-overlay::before {
    content: 'BUZZDRIVE™: DROP FILES HERE';
    text-align: center;
    color: rgba(0, 128, 128, 0.344);
  }

@media screen and (max-width: 576px) {
    .ticker-buttons-group {
        margin-bottom:48px
    }
}

.ticker-buttons .ticker-buttons-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0px;
    font-family: 'Anaheim';
    display:flex;
    align-items: center;
}

.ticker-buttons-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .ticker-buttons .ticker-buttons-title {
        font-size:1.75rem;
        line-height: 2.75rem
    }
}

.ticker-buttons .ticker-button-items {
    justify-content: flex-start;
    /* flex-flow:row wrap; */
    display: flex
}

.ticker-buttons .ticker-button-item {
    margin: 0 16px 16px 0;
    border-radius: 2px
}

.zigzag-separator,.stroke-separator,.dashed-separator {
    height: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center
}

.zigzag-separator.separator-p-none,.stroke-separator.separator-p-none,.dashed-separator.separator-p-none {
    padding: 0
}

.zigzag-separator.separator-p-top,.stroke-separator.separator-p-top,.dashed-separator.separator-p-top {
    padding: 24px 0 0
}

.zigzag-separator.separator-p-bottom,.stroke-separator.separator-p-bottom,.dashed-separator.separator-p-bottom {
    padding: 0 0 24px
}

.zigzag-separator.separator-p-both,.stroke-separator.separator-p-both,.dashed-separator.separator-p-both {
    padding: 24px 0
}

@media (min-width: 1024px) {
    .zigzag-separator.separator-p-top,.stroke-separator.separator-p-top,.dashed-separator.separator-p-top {
        padding:40px 0 0
    }

    .zigzag-separator.separator-p-bottom,.stroke-separator.separator-p-bottom,.dashed-separator.separator-p-bottom {
        padding: 0 0 40px
    }

    .zigzag-separator.separator-p-both,.stroke-separator.separator-p-both,.dashed-separator.separator-p-both {
        padding: 40px 0
    }
}


/* @charset "UTF-8";*,*:before,*:after {
    box-sizing: border-box
} */

ul.ticker-button-section {
    list-style-type: none
}

/* From bento */
bento-main {
    display: grid;
    grid-template-columns: 13% 87%;
    /* min-height: 100vh; */
    margin: 8px 40px 12px 40px;
    background: rgb(254, 254, 254);
    box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
        0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
    border-radius: 15px;
    height: calc(100vh - 244px);
    z-index: 10;
    flex: 9 1;

}

flashdrive bento-main {
    grid-template-columns: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    /* background-color: #00000010; 20240212 */
    backdrop-filter: blur(4px);
    height: calc(100% - 64px);
}

/* flashdrive .bento-header {
    display: none;
} */

.nav-icon {
    width: 60px;
    height: 20px;
    font-size: 20px;
    text-align: center;
}

.bento-menu {
    overflow: hidden;
    background: rgb(95 103 80 / 44%);
    padding-top: 10px;
    border-radius: 15px 0 0 15px;
    font-family: "Roboto", sans-serif;
}

flashdrive .bento-menu {
    display: none;
}


.bento-menu h1 {
    display: block;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    margin: 20px 0 30px;
    color: #fff;
    font-family: "Nunito", sans-serif;
}

.bento-media-item {
    position: relative;
    display: block;
}

.bento-media-item a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    padding: 15px 0;
    margin-left: 10px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.bento-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex: 1 0;
    width: 100%;
    max-height: 84px;
}

/* .bento-header.hidden {
    display: none;
} */

.bento-footer {
    height: 108px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* width: 100%; */
    margin: 0 32px 0 32px;
    flex: 1 0;

}
.bento-title {
    display: flex;
    flex-direction: row;
    flex: 1 0;
    align-items: center;
    max-height: 64px;
    justify-content: space-between;
    padding: 0 12px;
}

.bento-footer {
    display: flex;
    flex-direction: row;
    flex: 1 0;
    max-height: 64px;
    border-top: 8px solid rgba(0, 100, 20, 0.1);

}

.bento-title-input {
    flex: 1 0;
}

bento-canvas {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%
}
.bento-media-item b:nth-child(1) {
    position: absolute;
    top: -15px;
    height: 15px;
    width: 100%;
    background: #fff;
    display: none;
}

.bento-media-item b:nth-child(1)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 20px;
    background: rgb(95 103 80 / 44%);
}

.bento-media-item b:nth-child(2) {
    position: absolute;
    bottom: -15px;
    height: 15px;
    width: 100%;
    background: #fff;
    display: none;
}

.bento-media-item b:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top-right-radius: 20px;
    background: rgb(95 103 80 / 44%);
}

.bento-media-item.active b:nth-child(1),
.bento-media-item.active b:nth-child(2) {
    display: block;
}

.bento-media-item.active a {
    text-decoration: none;
    color: #000;
    background: rgb(254, 254, 254);
}
.bento-media-item a svg {
    flex: 1 9;
    margin: 0 10px;
    opacity: 0;
}
.bento-media-item a span {
    flex: 9 1;
    font-family: Montserrat, 'Barlow Semi Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 1.2px;
}

.animated-btn:hover,
.animated-btn:focus,
.animated-btn:active,
.animated-btn:visited {
  transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  animation: gelatine 0.5s 1;
}

bento-nav {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

bento-nav ul,
bento-nav ul li {
    outline: 0;
}

bento-nav ul li a {
    text-decoration: none;
}
.bento-logo {
    display: none;
}
.bento-logo-wide {
    display: block;
    width: 72px;
    margin: 20px auto;
  }
  
@media (max-width: 1500px) {
    bento-main {
        grid-template-columns: 6% 94%;
    }

    .bento-menu h1 {
        display: none;
    }

    .bento-logo {
      display: block;
      width: 36px;
      margin: 20px auto;
    }
    .bento-logo-wide {
        display: none;
    }

    .nav-text {
        display: none;
    }

    .bento-content {
        grid-template-columns: 70% 30%;
    }
}

@media (max-width: 1310px) {
    bento-main {
        grid-template-columns: 8% 92%;
        margin: 30px;
    }

    .bento-content {
        grid-template-columns: 65% 35%;
    }

    .day-and-activity {
        margin-bottom: 10px;
    }

    .activity-btn {
        padding: 8px 16px;
        margin: 10px 0;
        margin-right: 10px;
        font-size: 1rem;
    }

    .personal-bests-container {
        grid-template-rows: repeat(3, 98px);
        gap: 15px;
    }

    .box-one {
        flex-direction: row;
        justify-content: space-between;
        grid-area: 1 / 1 / 2 / 3;
        padding: 10px;
        font-size: 0.9rem;
    }

    .box-one img {
        max-width: 80px;
    }

    .box-two {
        flex-direction: row;
        justify-content: space-between;
        grid-area: 2 / 1 / 3 / 3;
    }

    .box-two img {
        max-width: 70px;
        align-self: center;
    }

    .box-three {
        flex-direction: row;
        justify-content: space-between;
        grid-area: 3 / 1 / 4 / 3;
    }

    .box-three img {
        max-width: 60px;
        align-self: center;
    }

    .bento-right-content {
        grid-template-rows: 4% 20% 76%;
        margin: 15px 15px 15px 0;
    }
}

@media (max-width: 1150px) {
    .bento-content {
        grid-template-columns: 60% 40%;
    }

    .bento-left-content {
        grid-template-rows: 50% 50%;
        margin: 15px;
        padding: 20px;
    }

    .activity-btn {
        padding: 8px 8px;
        font-size: 0.9rem;
    }

    .personal-bests-container {
        grid-template-rows: repeat(3, 70px);
        gap: 10px;
    }

    .bento-container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 150px);
    }

    .img-one {
        grid-area: 1 / 1 / 2 / 2;
    }

    .img-two {
        grid-area: 2 / 1 / 3 / 2;
    }

    .img-three {
        display: none;
    }

    .img-four {
        grid-area: 1 / 2 / 2 / 3;
    }

    .img-five {
        grid-area: 1 / 3 / 2 / 4;
    }

    .img-six {
        grid-area: 2 / 2 / 3 / 4;
    }

    .left-bottom {
        grid-template-columns: 100%;
        gap: 0;
    }

    .bento-right-content {
        grid-template-rows: 4% 19% 36% 41%;
    }

    .personal-bests {
        display: none;
    }

    .mobile-personal-bests {
        display: block;
        margin: 0 10px;
    }

    .mobile-personal-bests h1 {
        margin-top: 20px;
        font-size: 1.2rem;
    }

    .card-two {
        display: none;
    }

    .card-img {
        aspect-ratio: 16/9;
    }
}

@media (max-width: 1050px) {
    .bento-right-content {
        grid-template-rows: 5% 19% 36% 40%;
    }
}

@media (max-width: 910px) {
    bento-main {
        grid-template-columns: 10% 90%;
        margin: 20px;
    }

    .bento-content {
        grid-template-columns: 55% 45%;
    }

    .bento-left-content {
        grid-template-rows: 50% 50%;
        padding: 30px 20px 20px;
    }

    .bento-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 150px);
    }

    .img-one {
        grid-area: 1 / 1 / 2 / 2;
    }

    .img-two {
        grid-area: 2 / 1 / 3 / 2;
    }

    .img-three {
        display: none;
    }

    .img-four {
        grid-area: 1 / 2 / 2 / 3;
    }

    .img-five {
        grid-area: 2 / 2 / 3 / 3;
    }

    .img-six {
        display: none;
    }
}

@media (max-width: 800px) {
    .bento-content {
        grid-template-columns: 52% 48%;
    }
}

@media (max-width: 700px) {
    bento-main {
        grid-template-columns: 15% 85%;
    }

    .bento-content {
        grid-template-columns: 100%;
        grid-template-rows: 45% 55%;
        grid-template-areas:
            "bentoRightContent"
            "bentoLeftContent";
    }

    .bento-left-content {
        grid-area: bentoLeftContent;
        grid-template-rows: 45% 55%;
        padding: 10px 20px 10px;
    }

    .bento-right-content {
        grid-area: bentoRightContent;
        grid-template-rows: 5% 40% 50%;
        margin: 15px 15px 0 15px;
        padding: 10px 0 0;
        gap: 15px;
    }

    .activities,
    .weekly-schedule {
        margin-top: 10px;
    }

    .active-calories-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .friends-activity {
        display: none;
    }
}
@keyframes gelatine {
    0%,
    100% {
      transform: scale(1, 1);
    }
    25% {
      transform: scale(0.9, 1.1);
    }
    50% {
      transform: scale(1.1, 0.9);
    }
    75% {
      transform: scale(0.95, 1.05);
    }
  }
/* end of bento */

/* Box Animation */
.anim-container {
    -webkit-animation: hCClNo 0.3s ease-in;
    animation: hCClNo 0.3s ease-in;
    transform: scale3d(0.6, 0.5, 0.6);
  }
  .anim-container div {
    box-sizing: border-box;
  }
  
  .main-anim {
    width: 300px;
    height: 300px;
    margin: 100px auto 10px auto;
    -ms-perspective: 1500px;
    perspective: 1500px;
    -webkit-animation: cRMhPG 0.7s;
    animation: cRMhPG 0.7s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  
  .box-rotate-transform {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotate3d(1, 0, 0, -23deg) rotate3d(0, 1, 0, 50deg)
      translate3D(150px, 100px, -150px);
  }
  
  /* Buzz branding */
  .box-right-front {
    position: absolute;
    font-size: 30px;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to left, #f1e767 0%, #feb645 100%); */
    background: url(/static/images/flashdrive_folder.jpg), linear-gradient(to left, #9eced4 0%, #bce9ef 100%);
    background-repeat: repeat;
    background-size: 100%, auto;
    
    transform: translate3d(0, 0, 150px);
  }
  
  .box-left-front {
    position: absolute;
    font-size: 30px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left,#9eced4 0%, #bce9ef 100%);
  
    background: url(/static/images/Medpresso-buzzlogo-2880x1024-Blue.png), linear-gradient(to left, #9eced4 0%, #bce9ef 100%);
    background-repeat: no-repeat;
    background-size: 192px, auto;
    background-position: 20% 80%;
    transform: rotate3d(0, 1, 0, -90deg) translate3d(0, 0, 150px);
  }
  
  .box-left-back {
    position: absolute;
    font-size: 30px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #67f17e 0%, #57d3c3 100%);
    background: linear-gradient(
      45deg,
      #273034 0%,
      #69979d 50%,
      #6d9fa5 51%,
      #a3d1d7 100%
    );
    transform: rotate3d(0, 1, 0, 180deg) translate3d(0, 0, 150px);
  }
  
  .box-right-back {
    position: absolute;
    font-size: 30px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #9eced4 0%, #bce9ef 100%);
    transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, 150px);
    background: url(/static/images/flashdrive_folders_header.jpg), linear-gradient(to left, #273034 0%, #69979d 1%, #a3d1d7 100%);
  }
  
  .box-bottom-panel {
    position: absolute;
    font-size: 30px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #9eced4 0%, #bce9ef 100%);
    transform: rotate3d(1, 0, 0, -90deg) translate3d(0, 0, 150px);
  }
  
  .box-top-flaps {
    position: absolute;
    font-size: 30px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #9eced4 0%, #bce9ef 100%);
    transform-style: preserve-3d;
    background: transparent;
    border: none;
    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, 150px);
  }
  
  .box-top-left-front-flap {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #f1e767;
    border: 1px solid #888;
    background: linear-gradient(to bottom, #9eced4 0%, #bce9ef 100%);
    -webkit-animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    transform-origin: left center;
  }
  
  .box-top-right-back-flap {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #f1e767;
    border: 1px solid #888;
    background: linear-gradient(to bottom, #9eced4 0%, #bce9ef 100%);
    -webkit-animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    right: 0;
    -webkit-animation-name: iusdTg;
    animation-name: iusdTg;
    transform-origin: right center;
  }
  
  .box-top-left-back-flap {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #f1e767;
    border: 1px solid #888;
    background: linear-gradient(to bottom, #9eced4 0%, #bce9ef 100%);
    -webkit-animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    width: 100%;
    height: 50%;
    -webkit-animation-name: leamKW;
    animation-name: leamKW;
    transform-origin: center top;
  }
  /* sc-component-id: sc-VigVT */
  .box-top-right-front-flap {
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #f1e767;
    border: 1px solid #888;
    background: linear-gradient(to bottom, #9eced4 0%, #bce9ef 100%);
    -webkit-animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    animation: htGdjh 1s ease-in-out 0.5s 1 normal forwards;
    bottom: 0;
    width: 100%;
    height: 50%;
    -webkit-animation-name: diPYIz;
    animation-name: diPYIz;
    transform-origin: center bottom;
  }
  
  @-webkit-keyframes hCClNo {
    0% {
      transform: translate3d(0, -195px, 0) scale3d(0.5, 0.5, 0.5);
    }
    100% {
      transform: translate3d(0) scale3d(0.6, 0.5, 0.6);
    }
  }
  @keyframes hCClNo {
    0% {
      transform: translate3d(0, -195px, 0) scale3d(0.5, 0.5, 0.5);
    }
    100% {
      transform: translate3d(0) scale3d(0.6, 0.5, 0.6);
    }
  }
  
  @-webkit-keyframes cRMhPG {
    0% {
      transform: scale3d(1, 1, 1);
    }
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes cRMhPG {
    0% {
      transform: scale3d(1, 1, 1);
    }
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      transform: scale3d(1, 1, 1);
    }
  }
  
  @-webkit-keyframes htGdjh {
    from {
      transform: rotate3d(0, 1, 0, 0deg);
    }
    50% {
      transform: rotate3d(0, 1, 0, -190deg);
    }
    70% {
      transform: rotate3d(0, 1, 0, -150deg);
    }
    to {
      transform: rotate3d(0, 1, 0, -190deg);
    }
  }
  @keyframes htGdjh {
    from {
      transform: rotate3d(0, 1, 0, 0deg);
    }
    50% {
      transform: rotate3d(0, 1, 0, -190deg);
    }
    70% {
      transform: rotate3d(0, 1, 0, -150deg);
    }
    to {
      transform: rotate3d(0, 1, 0, -190deg);
    }
  }
  
  @-webkit-keyframes iusdTg {
    from {
      transform: rotate3d(0, 1, 0, 0deg);
    }
    50% {
      transform: rotate3d(0, 1, 0, 170deg);
    }
    70% {
      transform: rotate3d(0, 1, 0, 100deg);
    }
    to {
      transform: rotate3d(0, 1, 0, 140deg);
    }
  }
  @keyframes iusdTg {
    from {
      transform: rotate3d(0, 1, 0, 0deg);
    }
    50% {
      transform: rotate3d(0, 1, 0, 170deg);
    }
    70% {
      transform: rotate3d(0, 1, 0, 100deg);
    }
    to {
      transform: rotate3d(0, 1, 0, 140deg);
    }
  }
  /* sc-component-id: sc-keyframes-leamKW */
  @-webkit-keyframes leamKW {
    from {
      transform: rotate3d(1, 0, 0, 0deg);
    }
    50% {
      transform: rotate3d(1, 0, 0, 190deg);
    }
    70% {
      transform: rotate3d(1, 0, 0, 130deg);
    }
    to {
      transform: rotate3d(1, 0, 0, 140deg);
    }
  }
  @keyframes leamKW {
    from {
      transform: rotate3d(1, 0, 0, 0deg);
    }
    50% {
      transform: rotate3d(1, 0, 0, 190deg);
    }
    70% {
      transform: rotate3d(1, 0, 0, 130deg);
    }
    to {
      transform: rotate3d(1, 0, 0, 140deg);
    }
  }
  /* sc-component-id: sc-keyframes-diPYIz */
  @-webkit-keyframes diPYIz {
    from {
      transform: rotate3d(1, 0, 0, 0deg);
    }
    50% {
      transform: rotate3d(1, 0, 0, -190deg);
    }
    70% {
      transform: rotate3d(1, 0, 0, -150deg);
    }
    to {
      transform: rotate3d(1, 0, 0, -190deg);
    }
  }
  @keyframes diPYIz {
    from {
      transform: rotate3d(1, 0, 0, 0deg);
    }
    50% {
      transform: rotate3d(1, 0, 0, -190deg);
    }
    70% {
      transform: rotate3d(1, 0, 0, -150deg);
    }
    to {
      transform: rotate3d(1, 0, 0, -190deg);
    }
  }
/* End of Box Animation */

/* Audio Recorder */
.audio-recorder {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 42px;
    background: #38383d;
    border: 1px solid #f9f9fa33;
    cursor: pointer;
    box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease-in-out;
  }

  .starbutton {
    transition: all .3s ease-in-out;
  }

  .audio-recorder .audio-record {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    position: absolute;
    transition: inherit;
    background: #38383d;
  }

  .audio-recorder:hover .audio-record {
    background: transparent;
  }

  .audio-recorder .audio-arrow {
    width: 50%;
    height: 50%;
    top: 30%;
    left: 25%;
    position: absolute;
    transition: inherit;
    opacity: 0;
  }

  .audio-recorder:active {
    border-color: transparent;
  }

  .audio-recorder:active #audio-record {
    width: 55%;
    height: 55%;
    top: 23%;
    left: 23%;
    background: transparent;
  }

audio {
    height: 72px;
}

audio::-webkit-media-controls-enclosure {
    border-radius: 6px;
    /* padding-top: 24px;
    padding-bottom: 24px;
    height: 64px; */
    /* min-height: 128px; */
}

/* audio::-webkit-media-controls-timeline {
    color: teal;
}
audio::-webkit-media-controls-volume-slider-container {
    color: orange;
    background-color: green;

}
audio::-webkit-media-controls-volume-slider {
    color: purple;
    background-color: rgb(96, 152, 201);

} */
    /*
audio::-webkit-media-controls-volume-control-container {}
audio::-webkit-media-controls-volume-control-container.closed {}
audio::-webkit-media-controls-seek-back-button {}
audio::-webkit-media-controls-seek-forward-button {}
audio::-webkit-media-controls-fullscreen-button {}
audio::-webkit-media-controls-rewind-button {}
audio::-webkit-media-controls-return-to-realtime-button {}
audio::-webkit-media-controls-toggle-closed-captions-button {} */


.message-container-me audio::-webkit-media-controls-enclosure {
    background-color: #e0cb60;
    margin-right: 40px;
    margin-left: 20px;

}

.message-container-other audio::-webkit-media-controls-enclosure {
    background-color: #6caac9e4;
    margin-left: 40px;
}

  #audio-recorder.recording {
    box-shadow: 0 0 0 1px #45a1ff, 0 0 0 4px rgba(69, 161, 255, 0.3);
    width: 96px;
    height: 96px;
    border-radius: 48px;
    background: rgb(209, 45, 45);
  }

  #audio-recorder.recording #audio-record {
    animation: recording 0.7s ease infinite;
    background-color: transparent;
  }

  /* Add the Uploaded File Decorator */
  #audio-recorder.audio-file #audio-record,  #audio-recorder.audio-file #audio-upload-icon {
    display: none;
  }

  #audio-recorder.audio-file #audio-recorder-label {
      display: flex;
      flex-direction: column;
      height: max-content;
  }

  #audio-recorder.audio-file #audio-recorder-label-text {
  }

#audio-recorder #audio-file-icon, #audio-recorder #audio-transcribe-icon {
    display: none;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    position: absolute;
    transition: inherit;
    background: #38383d;
}
  
  #audio-recorder.audio-file #audio-file-icon {
    display: flex;
  }
   #audio-recorder.audio-transcribe #audio-transcribe-icon {
    display: flex;
  }

  #audio-recorder.download #audio-record {
    height: 40%;
    width: 40%;
    top: 15%;
    left: 30%;
    animation: none;
  }
  #audio-recorder.download #audio-arrow {
    animation: download 0.5s ease infinite;
  }
  #audio-recorder.out #audio-record {
    animation: out 0.8s ease, in 0.2s 0.8s ease;
  }
  
  @keyframes in {
    from {
      height: 0%;
      top: 60%;
    }
  }
  @keyframes recording {
    from, to {
      transform: rotate(10deg);
    }
    50% {
      transform: rotate(-10deg);
    }
  }
  @keyframes download {
    0% {
      top: 30%;
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      top: 55%;
      opacity: 0;
    }
  }
  @keyframes out {
    0% {
      top: 15%;
      height: 40%;
    }
    20% {
      top: 8%;
    }
    75%, 100% {
      top: 100%;
      opacity: 0;
      height: 0px;
    }
  }

  .star-1 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
  }
  
  .star-2 {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-3 {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-4 {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-5 {
    position: absolute;
    top: 25%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
  }
  
  .star-6 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 #fffdef);
    z-index: -5;
    transition: all .8s ease;
  }
  
  .starbutton:hover {
    background: #0e3a3a;
    color: #FFFFFF;
    box-shadow: 0 0 25px #0e3a3a;
      border: 3px solid #FFF;
  }
  
  .starbutton:hover .star-1,  .starbutton.active .star-1,  .starbutton.recording:hover .star-1  {
    position: absolute;
    top: -80%;
    left: -30%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  .starbutton:hover .star-2,  .starbutton.active .star-2, .starbutton.recording:hover .star-2 {
    position: absolute;
    top: -25%;
    left: 10%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  .starbutton:hover .star-3,  .starbutton.active .star-3, .starbutton.recording:hover .star-3 {
    position: absolute;
    top: 55%;
    left: 25%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  .starbutton:hover .star-4,  .starbutton.active .star-4, .starbutton.recording:hover .star-4 {
    position: absolute;
    top: 30%;
    left: 80%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  .starbutton:hover .star-5,  .starbutton.active .star-5, .starbutton.recording:hover .star-5 {
    position: absolute;
    top: 25%;
    left: 115%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  
  .starbutton:hover .star-6,  .starbutton.active .star-6, .starbutton.recording:hover .star-6 {
    position: absolute;
    top: 5%;
    left: 60%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }
  .starbutton.recording .star-1,  .starbutton.recording .star-2,  .starbutton.recording .star-3,  .starbutton.recording .star-4,  .starbutton.recording .star-5,  .starbutton.recording .star-6 {
    position: absolute;
    height: auto;
    filter: drop-shadow(0 0 10px #fffdef);
    z-index: 2;
  }

  .starbutton.recording .star-1 {
      top: -30%;
      left: -46%;
      width: 22px;
  }

  .starbutton.recording .star-2 {
    top: -35%;
    left: 18%;
    width: 12px;
  }

  .starbutton.recording .star-3 {
    top: 42%;
    left: 20%;
    width: 8px;
  }

  .starbutton.recording .star-4 {
    top: 35%;
    left: 60%;
    width: 10px;
  }

  .starbutton.recording .star-5 {
    top: 15%;
    left: 100%;
    width: 11px;
  }

  .starbutton.recording .star-6 {
    top: 10%;
    left: 40%;
    width: 6px;
  }

  .starbutton.active fil0 {
    fill: yellow;
  }

  .fil0 {
    fill: #FFFDEF
  }
  /* End of Audio Recorder */