.omg-viewer-canvas {
   width:100%;
}
.omg-viewer {
   font-family: Arial, Helvetica, sans-serif;
   padding: 0px;
   border:1px solid #808080;
   font-size:90%;
   color:black;
   margin-top:9px;
   margin-bottom:9px;
}

.omg-viewer-thing {
   background: rgba(0, 0, 0, 0) linear-gradient(135deg, rgb(249, 241, 232) 0%, rgb(205, 214, 227) 100%) repeat scroll 0% 0%;
}

.omg-music-controls-button {
   display:inline-block;
   margin-right: 0 5px;
   text-decoration: none;
   color:darkblue;
   cursor: pointer;
   border:1px solid transparent;
   padding:0.4em;
}
.omg-thing-right-data {
   float: right;
   padding:5px;
}

.omg-viewer-bottom-row {
   border-top: 1px solid #bbbbbb;
}

.omg-music-controls-play-button, .omg-thing-title, .omg-thing-user {
   display:inline-block;
}
.omg-music-controls-play-button {  
   text-align:center;
   position:relative;
   display:inline-block;
   height:38px;
   width:38px;
   border:2px solid #888888;
   border-radius:100%;
   font-size:1.7em;
   font-style:bold;
   cursor:pointer;
   margin:3px 6px;
   line-height: 32px;
}

.omg-music-controls-play-button:hover {
   border:2px solid black;
}

.beat-marker {
   position:absolute;
   background-color:#4fa5d5;
   top:0px;
   left:0px;
   bottom:0px;
   width:0px;
   opacity:0.6;
}
.omg-thing-title {
   margin:5px;
}
.omg-thing-votes {
   margin:0 5px;
}
.omg-thing-user {
   font-size:0.7em;
   font-style:italic;
   /*top:27px;
   left:55px;
   position:absolute;*/
}

.omg-thing-type {
   opacity: 0.5;
}

.omg-thing-p {
   padding-left:8px;
   padding-right:8px;
   position: relative;
}


.omg-music-controls-button:active {
   border:1px solid white;
   color:white;
   background:black;
}

.omg-music-controls-play-button:active {
   border:2px solid white;
   color:white;
   background:black;
}

.omg-thing-playcount {
   padding:0.4em;
   font-family: Helvetica;
   font-size: 0.8em;
   border:1px solid transparent;
   margin:0 5px;
   float:right;
}

.omg-thing-vote {
   padding:0.6em 0.4em;
   font-size: 0.8em;
   font-family: Helvetica;
   border:1px solid transparent;
   float:right;
   cursor: pointer;
}

.omg-thing-comment-vote {
   margin-right:0.4em;
   font-size: 0.8em;
   font-family: Helvetica;
   border:1px solid transparent;
   cursor: pointer;
}

.omg-music-controls-button:hover, .omg-thing-vote:hover, .omg-thing-comment-vote:hover {
   border:1px solid #808080;
}


.omg-thing-created-at {
   position:relative;
   width:90px;
   font-family: Helvetica;
   font-style:italic;
   opacity:0.7;
   font-size:0.9em;
}
.site-tools {
   text-align: center;
}
.site-tools a {
   text-decoration: none;
   color:white;
   padding:5px;
   font-size:110%;
}
.site-tools a:hover {
   text-decoration: underline;
}
.tools-separator {
   color: #808080;
}

.loader {
   animation: spin 1s linear infinite;
   /*
   -webkit-animation: spin 1s linear infinite;
   border: 2px solid #ddd;
   border-top: 2px solid #42a5f5;
   border-radius: 50%;*/
}
  
@keyframes spin {
   to {
       border-top-color: #FFFF88;
       -webkit-transform: rotate(360deg);
       transform: rotate(360deg);
   }
}

.tip-jar {
   background-color: white;
   color:black;
   text-align: center;
   padding:12px;
}
.tip-jar-canvas {
    width:100px;
    margin: 20px auto;
    height:100px;
}


.omg-viewer-comment-box {
   border-top: 1px solid #bbbbbb;
   display: flex;
   align-items: center;
   padding:3px;
   padding-top: 6px;
   width:100%;
   box-sizing: border-box;   
}
.omg-viewer-comment-input {
   box-sizing: border-box;
   padding:1px;
   flex-grow: 1;
   margin-left: 3px;
}

.omg-viewer-comments {
   padding-right:6px;
}
.omg-viewer-comment {
   margin: 3px;
   margin-right: 0px;
   margin-left: 9px;
}

.omg-viewer-comment-text {
   padding: 7px;
   border-radius: 4px;
   background-color: #cccccc;
}

.omg-viewer-comment-section a {
   color:darkblue;
}

.omg-viewer-comment-button {
   padding-left: 0px;
   padding-right: 0px;
   font-size: 10px;
}

.omg-viewer-comment-tools {
   color:darkblue;
   padding:3px;
   text-align: right;
   padding-right:0px;
   margin-right:0px;
}

.omg-viewer-comment-reply-to {
   cursor: pointer;
}

.omg-viewer-comment-section {
   background-color: #b1b1b1;
}

.omg-viewer-comment-reply-box {
   display: flex;
   flex-direction: row;
   width:100%;
   box-sizing: border-box;   
}

.omg-viewer-attachment {
   border:1px solid #808080;
   padding:4px;
   margin:3px;
   cursor: pointer;
   display: block;
}

.omg-viewer-attachment:hover {
   background-color: #aaaaaa;
}

.omg-viewer-attachment-audio, .omg-viewer-attachment-video {
   width: 100%;
}

.omg-viewer-attachment-image {
   margin:auto;
   display: block;
   max-width: 100%;
}

.omg-viewer-imageset-image {
   padding: 2x;
   border: 1px solid gray;
   box-sizing: border-box;
}

.omg-viewer-embed {
   position:relative;
   width: 100%;
   overflow: hidden;
   box-sizing: border-box;
}

.omg-viewer-play-button {
   position: absolute;
   top: 0;
   left: 0;
   width:100%;
   height:100%;
}

.omg-thing-comment-datetime {
   font-size: 0.8em;
   color: #444444;
   margin-right:0.4em;
   font-style: italic;
}

.omg-thing-top-row-overlay {
   position:absolute;
   width: 100%;
}