heartbeat.css in Heartbeat 8

.token-tree {
  display: block;
}


.heartbeat-message {
  border: 1px solid #dfdfdf;
  padding: 16px;
}

.heartbeat-message img {
  display: block;
  padding: 4px;
}


.heartbeat-message img:first-of-type ~ img {
  display: inline-block;
  max-width: 25%;
}

.heartbeat-message img:last-of-type {
  max-width: 100%;
}

.heartbeat-comments {
  display: none;
}

.heartbeat-comments > div {
  margin-top: 4em;
}

.heartbeat-comments-visible {
  display: block!important;
}

/*Imgs displayed in colorbox*/

.cboxPhoto {
  max-height: 854px;
  width: auto!important;
  height: auto!important;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#colorbox {
  text-align: center!important;
  position: fixed!important;
  top: 0!important;
  left: 0!important;
  background: rgba(28, 28, 28, 0.75)!important;
  height: 100%!important;
  width: 100%!important;
}

#cboxContent,
#cboxLoadedContent,
#cboxWrapper {
  width: 100%!important;
  height: 100%!important;
}

#cboxNext {
  position: absolute;
  right: 5px;
  top: 45%;
  color: transparent;
  background: rgba(45, 45, 45, 0.5) url(/modules/heartbeat/images/forward.png) no-repeat 10px 10px;
  background-size: 30px;
  width: 10px;
  height: 50px;
}

#cboxPrevious {
  position: absolute;
  left: 5px;
  top: 45%;
  color: transparent;
  background: rgba(45, 45, 45, 0.5) url(/modules/heartbeat/images/backward.png) no-repeat 10px 10px;
  background-size: 30px;
  width: 10px;
  height: 50px;
}

#cboxClose {
  position: absolute;
  top: 16%;
  right: 10%;
  width: 65px;
  height: 67px;
  background: url(/modules/heartbeat/images/cross-circular-button-outline.png) no-repeat center center;
  color: transparent;
}

#cboxPrev:hover, #cboxNext:hover, #cboxClose:hover {
  opacity: 0.5;
}

/*Main Feed Form*/
#heartbeat-feed-form input[type="radio"] {
    -webkit-appearance: none;
    display: inline-block;
}

#heartbeat-feed-form .form-type-radio {
    display: inline-block;
    position: relative;
    border-right: 1px solid white;
}
#heartbeat-feed-form input.form-radio {
    background: #12ff00;
    min-width: 100%;
    margin-bottom:0;
    padding: 0em 22em 2.5em 0em;
    font-weight: 700;
    display: inline-block;
}

#heartbeat-feed-form input.form-radio:hover {
   background: #1E6100;
 }


#heartbeat-feed-form input[type="radio"]:checked {
   background: #003b00;
 }

#heartbeat-feed-form label {
    font-size:1rem;
    font-weight: 700;
    color: white;
    position:absolute;
    /*top:50%;;*/
    /*left:50%;*/
    display:inline-block;
    width:auto;
    transform:translate(5%, -150%);
}

#heartbeat-feed-form .form-item-feedtabs {
    display: inline-block;
}

#heartbeat-feed-form .form-item-feedsearch,
#heartbeat-feed-form #edit-submit {
  display: none;
}

/*Heartbeat feed re-render block
Temporarily hiding all irrelevant content */

#block-heartbeatblock a.visually-hidden,
#block-heartbeatblock #toolbar-administration,
#block-heartbeatblock header,
#block-heartbeatblock footer,
#block-heartbeatblock .highlighted,
#block-heartbeatblock .region-breadcrumb,
#block-heartbeatblock #sidebar-first,
#block-heartbeatblock .block-page-title-block,
#block-heartbeatblock .contextual-region { display: none}


#block-heartbeatblock #content {
  margin-left: 0!important;
  width: 100%!important;
}


#heartbeat-loader {
  display: none;
  position: fixed;
  bottom: 48px;
  left: 62.5%;
  width: 96px;
  height: 96px;
  background: url('../images/drupal-loader.gif') no-repeat;
  background-size: contain;
}


/*heartbeat-stream section.section {*/
  /*padding: 0;*/
/*}*/

.heartbeat-youtube {
  display: block;
}

/*@media (min-width: 532px)*/
/*and (max-width: 767px) {*/
/*}*/

/*@media (min-width: 300px) and (max-width: 420px)*/
/*and (min-height: 640px) and (max-height: 768px) {*/

/*}*/

/*@media (min-width: 532px) and (max-height: 370px) and (max-width: 767px) {*/
/*}*/

/*@media all and (min-width: 768px) and (max-width: 960px) {*/
/*}*/

/*@media (min-height: 320px) and (max-height: 420px) and (max-width: 768px) {*/

/*}*/

/*@media (min-height: 420px) and (max-width: 768px) {*/
/*}*/

/*@media (min-width: 960px) {*/
/*}*/

/*@media all and (max-width: 767px) {*/

/*}*/

/*@media all and (min-width: 300px) {*/
/*}*/



/*TODO

  //add responsiveness for colorbox on mobile using something like the following:

    max-width: 400px;
height: auto!important;
*/