html {
   background: #007cc3;
   background: radial-gradient(circle farthest-corner at center center, #007cc3 0%, #165394 80%);
   background: -webkit-radial-gradient(circle farthest-corner at center center, #007cc3 0%, #165394 80%);
   background: -moz-radial-gradient(circle farthest-corner at center center, #007cc3 0%, #165394 80%);
   height: 100% !important;
}

body {
   background-color: transparent !important;
}

.animate-view.ng-enter {
   transition: .3s;
   opacity: 0;
}

.animate-view.ng-enter-active {
   opacity: 1;
}

.card-live {
   box-shadow: 0px 2px 15px 1px rgba(80, 80, 80, 0.75);
   -webkit-box-shadow: 0px 2px 15px 1px rgba(80, 80, 80, 0.75);
   -moz-box-shadow: 0px 2px 15px 1px rgba(80, 80, 80, 0.75);
}

.navbar-live {
   background-color: white !important;
}

.text-dakota {
   color: #006faf;
}

videogular vg-mute-button .mute:before,
[videogular] vg-mute-button .mute:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f6a9" !important;
   font-weight: 900 !important;
}

videogular vg-mute-button .mute:before,
[videogular] vg-mute-button .mute:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f6a9" !important;
   font-weight: 900 !important;
}

videogular vg-mute-button .level3:before,
[videogular] vg-mute-button .level3:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f028" !important;
   font-weight: 900 !important;
}

videogular vg-mute-button .level2:before,
[videogular] vg-mute-button .level2:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f028" !important;
   font-weight: 900 !important;
}

videogular vg-mute-button .level1:before,
[videogular] vg-mute-button .level1:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f027" !important;
   font-weight: 900 !important;
}

videogular vg-mute-button .level0:before,
[videogular] vg-mute-button .level0:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f027" !important;
   font-weight: 900 !important;
}

videogular vg-play-pause-button .play:before,
[videogular] vg-play-pause-button .play:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f04b" !important;
   font-weight: 900 !important;
}

videogular vg-play-pause-button .pause:before,
[videogular] vg-play-pause-button .pause:before {
   font-family: 'Font Awesome\ 5 Free' !important;
   content: "\f04c" !important;
   font-weight: 900 !important;
}

.container-produto-video {
   position: absolute;
   display: block;
   z-index: 4;
   top: 10px;
   /* bottom: 60px; */
   right: 10px;
   background-color: #efefef;
   cursor: pointer;
   width: 10em;
   padding: 3px;
   border-radius: 4px;
}

.container-footer-produto {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 30px;
   margin-left: 5px;
   margin-right: 3px;
}

.container-relogio-video {
   position: absolute;
   display: block;
   z-index: 4;
   top: 10px;
   /* bottom: 60px; */
   right: 10px;
   background-color: transparent;
   width: 13em;
   padding: 3px;
   border-radius: 4px;
}

.container-relogio-texto {
   position: relative;
   float: right;
   /* margin-top: 30px; */
   height: 30px;
   margin-left: 5px;
   margin-right: 3px;
   color: white;
   font-family: Arial, Helvetica, sans-serif;
}

.overlay-video {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background-color: transparent;
}

.overlay-video > div {
   background-color: white;
   padding: 22px 14px;
   border-radius: 5px;
   z-index: 10;
}

.titulo-chat {
   border-bottom: 1px solid lightgray;
}

.mensagem {
   border-radius: 4px;
   margin-top: 7px;
   min-width: 20%;
   max-width: 45%;
   font-size: 14px;
   text-align: left;
   padding: 2px 7px;
   color: white;
   border: 1px solid #00993b;
   background-color: #008834;
}

.outro > .mensagem {
   border: 1px solid #007bc2;
   background-color: #0082ce;
}

.linha-msg {
   display: flex;
   justify-content: flex-end;
}

.linha-msg.outro {
   justify-content: flex-start !important;
}

.mensagem > .hora-usuario {
   font-size: 11px;
}

.titulo-live {
   font-size: 20px;
   text-align: center;
}

.item-conversa {
   border-bottom: 1px solid lightgray;
}

.item-conversa:hover {
   background-color: lightgray;
   cursor: pointer;
   transition: .2s ease;
}

.mensagem .texto {
   padding-bottom: 4px;
}

.desconto {
   position: absolute;
   left: 7px;
   top: 7px;
   background-color: red;
   color: white;
   padding: 5px 10px;
   border-radius: 50%;
}

.player-btn {
   color: white;
   width: 30px;
   display: table-cell;
   vertical-align: middle;
   text-align: center;
}

.nova-mensagem {
   font-size: 11px;
   /* display: inline-block; */
   border: 1px solid lightgreen;
   background-color: rgb(0, 185, 0);
   color: white;
   padding: 2px 4px;
   font-weight: bold;
   border-radius: 4px;
}

#toast-container > div {
   opacity:1;
}

/* Até 435px */
@media (max-width: 435px) {

   .login-title {
      font-size: 25px;
      padding-top: 10px !important;
   }

   .navbar-live {
      font-size: .8rem !important;
   }

}



/* Até 550px */
@media only screen and (max-width: 650px) {
   .container-produto-video {
      width: 11em !important;
      font-size: 9px;
      top: 5px !important;
      right: 5px !important;
   }

   .overlay-video > div {
      padding: 7px 3px !important;
   }
}

@media only screen and (min-width: 651px) and (max-width: 700px) {
   .container-produto-video {
      width: 10em !important;
      font-size: 9px;
   }
}


@media only screen and (min-width: 701px) and (max-width: 768px) {
   .container-produto-video {
      width: 10em !important;
      font-size: 9px;
   }
}

@media only screen and (min-width: 768px) and (max-width: 950px) {
   .container-produto-video {
      width: 10em !important;
      font-size: 12px;
   }
}

@media only screen and (min-width: 951px) and (max-width: 1300px) {
   .container-produto-video {
      width: 10em !important;
      font-size: 12px;
   }
}

/* 
@media only screen and (min-width: 551px) and (max-width: 1000px) {
   .container-produto-video {
      width: 14em !important;
      font-size: 12px;
   }
}

@media only screen and (min-width: 1000px) and (max-width: 1399px) {
   .container-produto-video {
      width: 12em !important;
      font-size: 12px;
   }
}

@media only screen and (min-width: 1400px) {
   .container-produto-video {
      width: 16em !important;
   }
}
@media only screen and (min-width: 1600px) {
   .container-produto-video {
      width: 17em !important;
   }
} */