body { /*background: #303540; font-family: Roboto, Arial; color: white; font-weight: 300; padding: 10px; */ }
.live_box { background-color: #fff; border: 0px solid #000; border-radius: 2px; width: 100%; box-sizing: border-box; padding: 20px; box-shadow: 0px 1px 3px rgba(0,0,0,0.2); margin-bottom: 20px; min-height: 200px; position: relative; }
.live_box h2 { color: #000; font-size: 16px; margin: 0; margin-bottom: 10px; font-weight: 500; line-height: 1.1; }

#top_countries_data:before,
#history_livestream_top_countries_data:before,
#history_livestream_top_domains_data:before,
#history_daily_livestream_top_countries_data:before,
#history_daily_livestream_top_domains_data:before,
#top_content_data:before,
#top_domains_data:before,
#top_countries_data_ads:before,
#top_devices_ads:before { content: ' '; height: 15px; display: block; }

.top_countries_data { width: 100%; }
.top_countries_data td { color: #000; font-size: 12px; }
.top_countries_data tr td:nth-child(1) { width: 20px; }
.top_countries_data tr td:nth-child(3) { text-align: center; }
.top_countries_data tr td:nth-child(4) { text-align: right; }
.top_countries_data .country_fill { height: 22px; width: 130px; background-color: transparent; border-radius: 3px; display: inline-block; /*transition: background-color 0.5s ease;*/ }
.top_countries_data .country_fill>div { background-color: transparent; height: 100%; border-radius: 3px; /*transition: background-color 0.5s ease; */}

#top_domains_data > div { height: 25px; margin-bottom: 10px; background: #eee; color: #000; font-size: 12px; position: relative; border-radius: 3px; }
#top_domains_data > div span { float: right; }
#top_domains_data .domain_fill { width: 40%; height: 100%; position: absolute; background-color: #aaa; border-radius: 3px; }
#top_domains_data .domain_data { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 6px; }

#history_livestream_top_domains_data > div { height: 25px; margin-bottom: 10px; background: #eee; color: #000; font-size: 12px; position: relative; border-radius: 3px; }
#history_livestream_top_domains_data > div span { float: right; }
#history_livestream_top_domains_data .domain_fill { width: 40%; height: 100%; position: absolute; background-color: #aaa; border-radius: 3px; }
#history_livestream_top_domains_data .domain_data { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 6px; }

#history_daily_livestream_top_domains_data > div { height: 25px; margin-bottom: 10px; background: #eee; color: #000; font-size: 12px; position: relative; border-radius: 3px; }
#history_daily_livestream_top_domains_data > div span { float: right; }
#history_daily_livestream_top_domains_data .domain_fill { width: 40%; height: 100%; position: absolute; background-color: #aaa; border-radius: 3px; }
#history_daily_livestream_top_domains_data .domain_data { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 6px; }

#top_content_data { width: 400px; }
#top_content_data > div { display: flex; font-size: 13px; /*border-bottom: 1px solid black;*/ margin-bottom: 10px; padding-bottom: 2px; }
#top_content_data .content_image { margin-right: 7px; }
#top_content_data .content_image img { width: 100px; height: 60px; max-width: initial; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.3); }
#top_content_data .content_image img.thumb-vertical { object-fit: contain; }
#top_content_data .content_title { margin-bottom: 6px; font-weight: 500; font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
#top_content_data .content_title.disabled { pointer-events: none; }
#top_content_data .content_desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.15; font-size: 11px; }

#live_videos_active_now { text-align: center; font-size: 14px; color: #666; margin-bottom: 20px; padding-top: 10px; }
#live_videos_active_now b { font-size: 26px; font-weight: 800; color: #000; line-height: 1; }
#live_videos_chart_holder { position: relative; margin-bottom: 15px; }

#live_ads { width: 1300px; max-width: 100%; }
#live_ads_loader,
#history_livestream_loader,
#history_daily_livestream_loader,
#live_videos_loader { text-align: center; padding: 20px; }

#live_videos_viewers {height: calc(100% - 20px);}

.top_os { display: flex; justify-content: space-around; align-items: center; }
.top_os_data { width: 220px; font-size: 12px; margin-bottom: 15px; }
.top_os_data > div { border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; padding: 5px 0; }
.top_os_data .os_dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.r_dot_0 { background-color: #36a2eb; }
.r_dot_1 { background-color: #ff6384; }
.r_dot_2 { background-color: #ffcd56; }
.r_dot_3 { background-color: #373a43; }
.r_dot_4 { background-color: #3cd753; }
.r_dot_5 { background-color: #ab1263; }
.r_dot_6 { background-color: #2412ab; }
.r_dot_7 { background-color: #0ddad0; }
.r_dot_8 { background-color: #ec0c08; }
.top_os_data .os_num { display: inline-block; margin-left: auto; }

.os_chart_holder { position: relative; z-index: 2; width: 200px; height: 200px; }
.os_chart_overlay { position: absolute; z-index: -1; color: #666; text-align: center; font-size: 12px; line-height: 1.2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.os_chart_overlay b { font-size: 16px; color: #000; }


.top_browser { display: flex; justify-content: space-around; align-items: center; }
.top_browser_data { width: 220px; font-size: 12px; margin-bottom: 15px; }
.top_browser_data > div { border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; padding: 5px 0; }
.top_browser_data .browser_dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.top_browser_data .browser_num { display: inline-block; margin-left: auto; }

.browser_chart_holder { position: relative; z-index: 2; width: 200px; height: 200px; }
.browser_chart_overlay { position: absolute; z-index: -1; color: #666; text-align: center; font-size: 12px; line-height: 1.2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.browser_chart_overlay b { font-size: 16px; color: #000; }

.top_devices { display: flex; justify-content: space-around; align-items: center; }
.top_devices_data { width: 220px; font-size: 12px; margin-bottom: 15px; }
.top_devices_data > div { border-bottom: 1px solid rgba(0,0,0,0.1); display: flex; align-items: center; padding: 5px 0; }
.top_devices_data .device_dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.top_devices_data .device_dot_mobile { background-color: #ff6384; }
.top_devices_data .device_dot_desktop { background-color: #36a2eb; }
.top_devices_data .device_dot_tablet { background-color: #ffcd56; }
.top_devices_data .device_dot_other { background-color: #373a43; }
.top_devices_data .device_dot_smart_tv { background-color: #373a43; }
.top_devices_data .device_num { display: inline-block; margin-left: auto; }

.device_chart_holder { position: relative; z-index: 2; width: 200px; height: 200px; }
.device_chart_overlay { position: absolute; z-index: -1; color: #666; text-align: center; font-size: 12px; line-height: 1.2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.device_chart_overlay b { font-size: 16px; color: #000; }

#top_devices_ads .top_devices_data { width: 140px; }
#top_devices_ads .device_chart_holder { width: 150px; height: 150px;  }


.live_holder { width: 100%; display: flex; margin-bottom: 20px; }
#live_videos_left, #history_livestream_left { width: 800px; margin-right: 20px; }
#live_videos_left_top { display: flex; width: 100%; justify-content: space-between; }
#live_videos_left_viewers,
#live_videos_left_countries_domains { width: calc(50% - 10px); }
#live_videos_left_countries_domains > div { height: calc(50% - 20px); }

#history_livestream_left_countries_domains { display: flex; width: 100%; justify-content: space-between;  }
#history_livestream_left_countries_domains > .live_box { width: calc(50% - 10px) !important; }
#history_livestream_left_top { display: flex; width: 100%; justify-content: space-between; }
#history_livestream_left_viewers { width: 100% !important; }
#livestream-view-by .bselect-disabled .bselect-remove {display: none;}

#history_daily_livestream_left_top { display: flex; width: 100%; justify-content: space-between; }
#history_daily_livestream_left_viewers,
#history_daily_livestream_left_countries_domains { width: calc(50% - 10px) !important; }

#live_videos_bottom {
  display: flex;
  justify-content: space-between;
}
#live_videos_bottom .live_box {
  width: calc(50% - 20px);
}

.live_holder.small #live_videos_left { width: calc(50% - 20px); }
.live_holder.small #live_videos_right { width: 50%; }
.live_holder.small #live_videos_left_top { flex-direction: column; }
.live_holder.small #live_videos_left_viewers,
.live_holder.small #live_videos_left_countries_domains { width: 100%; }
.live_holder.small .top_devices { flex-direction: column; }
.live_holder.small .top_os { flex-direction: column; }
.live_holder.small .top_browser { flex-direction: column; }
.live_holder.small .top_devices_data { margin-top: 20px; }
.live_holder.small .top_content_data { width: 100%; }
.live_holder.small .top_countries_data .country_fill { width: 100px; }

.live_holder.smaller { flex-direction: column; }
.live_holder.smaller #live_videos_left { width: 100%; margin-right: 0; }
.live_holder.smaller #live_videos_right { width: 100%; }


.live_holder.small #history_livestream_left { width: calc(50% - 20px); }
.live_holder.small #history_livestream_right { width: 50%; }
.live_holder.small #history_livestream_left_top { flex-direction: column; }
.live_holder.small #history_livestream_left_viewers,
.live_holder.small #history_livestream_left_countries_domains { width: 100%; }

.live_holder.small #history_daily_livestream_left { width: calc(50% - 20px); }
.live_holder.small #history_daily_livestream_right { width: 50%; }
.live_holder.small #history_daily_livestream_left_top { flex-direction: column; }
.live_holder.small #history_daily_livestream_left_viewers,
.live_holder.small #history_daily_livestream_left_countries_domains { width: 100%; }

.live_holder.smaller #history_livestream_left { width: 100%; margin-right: 0; }
.live_holder.smaller #history_livestream_right { width: 100%; }

.live_holder.smaller #history_daily_livestream_left { width: 100%; margin-right: 0; }
.live_holder.smaller #history_daily_livestream_right { width: 100%; }


#live_ads_top { display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; /*margin-bottom: 20px;*/ width: 100%; }
#live_ads_top>div { /*width: calc(33% - 10px);*/ /*margin: 0 10px;*/ /*max-width: 48%; */}
#live_ads_top>div:nth-child(1),
#live_ads_top>div:nth-child(3) { width: calc(36% - 10px); }
#live_ads_top>div:nth-child(2) { width: calc(28% - 10px); }
#live_ads_active_now,
#live_ads_active_now_backfill { font-size: 45px; width: 100%; line-height: 1.7; text-align: center; }

#live_bar_holder { display: flex; flex-direction: column; }
#live_bar_holder>div { min-height: auto; height: calc(50% - 20px); }
#live_bar_holder>div canvas { margin-top: 30px; }

#live_ads_right>div { min-height: auto; height: calc(50% - 20px); }

#live_ads_fillrate,
#live_ads_fillrate_backfill { font-weight: bold; text-align: center; font-size: 13px; margin-top: 18px; }

#top_performing_sites,
#top_performing_schedules { position: relative; min-height: 200px; margin-bottom: 30px; }
#top_performing_sites > div, 
#top_performing_schedules > div { /*width: 1024px; */max-width: 100%; }
#from-to-time {float: left;}
.horizontal-timepick div.input { display: flex;}
.horizontal-timepick div.input input { height: 30px !important;}
.horizontal-timepick div.input { display: flex; }
.horizontal-timepick div.input label { width: 30%; display: flex; align-items: center; justify-content: center; font-weight: normal;}

.live_img { width: 39px; position: absolute; margin-top: -9px; animation: live_img_pulse 3s infinite ease-in-out; }
@keyframes live_img_pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.select_range_holder { display: inline-flex; float: right; align-items: center; justify-content: center; }
.select_range_holder .select_range { float: none; margin-left: 5px; }
.select_range_holder .refresh_timer { display: inline; }
.select_range_holder .refresh_timer svg { transform: scaleX(-1) rotate(-90deg); }
.rta-loader-holder { display: none; align-items: center; justify-content: center; position: absolute!important; top: 4px!important; left: 0px!important; width: 100%!important; height: 100%!important; background: white!important; z-index: 20; }
.rta-loading { position: relative; }
.rta-loading .rta-loader-holder { display: flex; }
.rta-loading canvas,
.rta-loading #live_videos_active_now,
.rta-loading #live_ads_active_now { visibility: hidden; }
.rta-loader {
  width: 30px!important;
  height: 30px!important;
  padding: 4px!important;
  margin: 0!important;
  display: inline-block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #37a2eb;
  --_m: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m); mask: var(--_m);
  -webkit-mask-composite: source-out; mask-composite: subtract;
  animation: l3 1s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


#live_ads .live_holder.small #live_ads_top { flex-flow: row wrap; }
#live_ads .live_holder.small #live_ads_top>div:nth-child(1),
#live_ads .live_holder.small #live_ads_top>div:nth-child(2) { width: calc(50% - 10px); }
#live_ads .live_holder.small #live_ads_right { width: 100%; display: flex; justify-content: space-between; }
#live_ads .live_holder.small #live_ads_right>div { width: calc(50% - 10px); height: auto; }

.no_rta_data { width: 280px; height: 130px; max-width: 80%; background: url(/img/no_data_retina.png); background-repeat: no-repeat; background-position: center; background-size: contain; margin: 15px auto 10px; }
.no_rta_data_ls { width: 200px; height: 93px; max-width: 80%; background: url(/img/no_data_retina.png); background-repeat: no-repeat; background-position: center; background-size: contain; margin: 15px auto 10px; }
.live_holder .select_range { width: 87px; float: right; height: 1.9rem; margin-bottom: 0; margin-top: -3px; line-height: 1; }
.top_performing_select_holder { width: 200px; float: right; margin-top: -6px; }

table.listing-table-new { border-collapse: collapse; border-spacing: 0; width: 100%; border-bottom: 3px solid #e1e1e1; margin-bottom: 30px; }
table.listing-table-new td { border-bottom: 1px solid #e1e1e1; padding: 7px 12px; font-size: 12px; line-height: 1.4; position: relative; height: 25px; }
table.listing-table-new td.thName { text-align: left; font-weight: bold; text-transform: uppercase; border-bottom: 3px solid #a9a9a9; font-size: 14px; }
table.listing-table-new td.adschedule_list { line-height: 1.2; }
table.listing-table-new tbody tr:nth-child(even) { background-color: #f8f8f8; }
table.listing-table-new tbody td:not(:first-child):before{ content: ''; width: 1px; position: absolute; background: #ddd; left: 0px; top: 6px; bottom: 6px; }
table.listing-table-new a { font-family: Arial; font-size: 12px; font-weight: normal; }
table.listing-table-new a.grayed { color: #999; }
table.listing-table-new td.w50 { width: 50px; }
table.listing-table-new td.w150 { width: 150px; }
table.listing-table-new .trending { font-size: 12px; color: #666; }
table.listing-table-new .trending.down { color: red; }
table.listing-table-new .trending.up { color: green; }

.mini_chart_holder { width: 150px; height: 50px; position: relative; margin: -3px 0; background: none; display: inline-block; }
.live_box_refresh_line { height: 2px; background: #37a2eb; position: absolute; top: 0px; /*z-index: 99999999;*/ width: 100%; left: 0px; border-radius: 2px 2px 0px 0px; /*transform: scaleX(0.5); */transform-origin: left; }
.live_box_refresh_line.animate { animation-name: live_progress; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: linear; }
@keyframes live_progress {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0.01); }
}

@media screen and (max-width: 1375px) {
  .live_holder.small #live_videos_left {
    width: calc(100% - 20px);
  }
}