:root {
--event-width: 310px;
--event-height: 240px;
--event-padding-top: 10px;
--event-spacing: 45px;
--event-title-padding: 10px;
}
#sgl-livestream-card-container{
padding-top: var(--event-padding-top);
}
#sgl-livestream-card-container .sgl-archive-event {
width: var(--event-width) !important;
height: var(--event-height) !important;
display: inline-block;
position: relative;
color: white;
margin: 0 var(--event-spacing) var(--event-spacing) 0;
padding: 0px;
font-size: 0.8rem;
transition: all 0.2s ease-in-out;
cursor:pointer;
-webkit-box-shadow: 0 1px 3px -2px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
box-shadow: 0 1px 3px -2px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
}
#sgl-livestream-card-container .sgl-archive-event:hover {
-webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);
box-shadow: 0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);
z-index: 2;
transition: background-color .3s, color .3s, opacity .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
webkit-transition: background-color .3s, color .3s, opacity .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
-o-transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s;
transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s;
transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s, -webkit-transform .3s, -webkit-box-shadow .3s;
transform: scale(1.05);
}
#sgl-livestream-card-container .sgl-archive-event img {
object-fit: cover;
height: 100%;
width: 100%;
max-height:175px;
border-bottom:1px solid #f1f1f1;
}
#sgl-livestream-card-container .sgl-description .sgl-text{
text-overflow: ellipsis;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 140%;
font-weight: bold;
padding: var(--event-title-padding) var(--event-title-padding) 0px var(--event-title-padding);
position:relative;
z-index:1;
font-size:15.4px;
text-align:center;
}
#sgl-livestream-card-container .sgl-badge{
top: 7%;
left: 0;
margin-left: -25px;
position: absolute !important;
display: table;
z-index: 20;
pointer-events: none;
height: 52px;
width: 44px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#sgl-livestream-card-container .sgl-badge .sgl-badge-inner{
padding:0px;
background-color: #fff;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 100%;
height: 100%;
line-height: .85;
white-space: nowrap;
-webkit-transition: background-color .3s, color .3s, border .3s;
-o-transition: background-color .3s, color .3s, border .3s;
transition: background-color .3s, color .3s, border .3s;
font-weight:bold;
}
#sgl-livestream-card-container .sgl-archive-event:hover .sgl-badge .sgl-badge-inner{
color: #fff;
}
#sgl-livestream-card-container .sgl-badge .sgl-badge-inner span{
display:block;
}
#sgl-livestream-card-container .sgl-badge .sgl-badge-inner .sgl-day{
font-size: 16px;
margin-bottom: 3px;
padding: 3px 0px 0px 0px;
}
#sgl-livestream-card-container .sgl-badge .sgl-badge-inner .sgl-month{
font-size:12px;
margin-bottom:5px;
}
#sgl-livestream-card-container .sgl-badge .sgl-badge-inner .sgl-year{
color: #fff;
padding: 3px 7px;
}
.sgl-plugin-page .sub-main-div{
margin: 20px;
}
.sgl-plugin-page .float-left {
float: left;
}
.sgl-plugin-page .close-right {
float: right;
margin: 1rem;
}
.sgl-plugin-page .sub_button{
margin: 1.2em !important;
}
.sgl-plugin-page .font-13{
font-size: 13px;
}
.sgl-plugin-page .font-16{
font-size: 16px;
}
.sgl-plugin-page .download_image {
width: 14px;
}
.sgl-plugin-page .cursor-pointer{
cursor: pointer;
}
.sgl-plugin-page .table-scroll {
max-height: 300px;
overflow-y: scroll;
width: 100%;
display: block;
overflow-x: hidden;
}
.sgl-plugin-page .scroll_table tbody>tr, .sgl-plugin-page .scroll_table thead>tr {
display: table;
width: 100%;
table-layout: fixed;
}
.sgl-plugin-page .terms_div{
background: #f2f2f2 none repeat scroll 0 0;
border: 1px solid #ccc;
max-height: 100px;
overflow: auto;
padding: 6px;
}
.sgl-plugin-page .trash-icon{float: right !important; cursor: pointer;}
.sgl-plugin-page .success_msg{color:green;}
.sgl-plugin-page .view-count{
margin: 10px 0px;
color: rgb(184, 82, 0);
font-family: Lato, sans-serif;
font-size: 16px;
}
.sgl-plugin-page .view-more{
text-align: center;
}
.sgl-plugin-page #live_stream_iframe{
border:0px;
width:100%;
max-height:435px;
height:435px;
}
.sgl-plugin-page .livestream_container { padding: 2px;
background-color: #fafafa;
font-size: 0.9em;
border: 1px solid #e6e6e6;
list-style-type: none;
margin: 4px 12px 10px 0px;
padding-bottom: 5px;
overflow: hidden;
}
.sgl-plugin-page .livestream-content {
cursor: pointer !important;
}
.sgl-plugin-page .flex-livestream-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 20px;
}
.sgl-plugin-page .grid .livestream_container{
float: left !important;
width: 30%;
min-width: 280px;
}
.sgl-plugin-page .list .livestream_container{
width: 100%;
}
.sgl-plugin-page .thumb-image {
position: relative;
min-width: 280px;
max-width: 300px;
float: left;
}
.sgl-plugin-page .thumb-image > img {
height: 10.5rem;
}
.sgl-plugin-page .orange {
background: #F88017;
color: white;
}
.sgl-plugin-page .green {
background: #046240;
color: white;
}
.sgl-plugin-page .play-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
}
.sgl-plugin-page .play-button {
cursor: pointer;
height: 50px;
left: 50%;
margin-left: -25px;
margin-top: -30px;
position: absolute;
top: 50%;
opacity: 0.5;
transition: opacity 0.5s;
transition-timing-function: ease;
transition-timing-function: ease;
width: 50px;
z-index: 1;
display: block;
}
.sgl-plugin-page .play-icon {
color: #fff;
display: block;
font-size: 24px;
height: 100%;
line-height: 48px;
position: absolute;
text-align: center;
width: 100%;
text-decoration: none;
text-indent: 3px; }
.sgl-plugin-page .genericon {
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
}
.sgl-plugin-page .genericon-play::before {
content: url(//demo.showgroundslive.com/wp-content/plugins/ShowgroundsLive/images/play-video.png);
}
.sgl-plugin-page .livestream_details {
padding: 8px !important;
font-size: 14px;
float: left;
}
.sgl-plugin-page .list .livestream_details{
width: -webkit-calc(100% - 300px);
width:    -moz-calc(100% - 300px);
width:         calc(100% - 300px);
}
.sgl-plugin-page .grid, .sgl-plugin-page .grid .livestream_details{
width: 100%;
}
.sgl-plugin-page .placing {
float: right;
font-weight: bold;
font-size: 17px;
}
.sgl-plugin-page .grey_text{color:grey;}
.sgl-plugin-page .formDiv { padding: 20px;
}
.sgl-plugin-page .formDiv > .flex-container {
display: flex;
flex-direction: column;
}
.sgl-plugin-page .column {
display: flex;
flex-direction: column;
padding: 1em;
}
.sgl-plugin-page .as-input-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: smaller;
margin: 0.3rem;
}
.sgl-plugin-page .as-input-group > label {
margin: 0.5rem;
font-size: small;
}
.sgl-plugin-page .break {
flex-basis: 100%;
height: 0;
}
.sgl-plugin-page .my-row {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.sgl-plugin-page .fault-placing-style {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
.sgl-plugin-page .input-group {
align-items: center;
width: 50%;
margin: 0.5rem;
}
.sgl-plugin-page .pad-top-ig{
padding-top: 1rem;
}
.sgl-plugin-page .select2-container .selection .select2-selection--multiple {
padding: 0px;
line-height: 1rem; 
width: 100%;
}
.sgl-plugin-page .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
padding: 0 4px 6px;
}
.sgl-plugin-page .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
padding-left: 1rem;
padding-right: 0px;
} .sgl-plugin-page .ui-datepicker select.ui-datepicker-month, .sgl-plugin-page .ui-datepicker select.ui-datepicker-year {
width: 45%;
float: right;
margin-right:3%;
}
.sgl-plugin-page .playlist-div {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem;
width: 70%;
}
.sgl-plugin-page .set-width {
width: 50%;
}
.sgl-plugin-page .set-width-list-grid {
width: 54%;
}
.sgl-plugin-page .list-grid{
padding-top: 1.3rem;
margin-left: 1rem;
text-align: center;
}
.sgl-plugin-page .display_none{
display: none;
}
.sgl-plugin-page #search-wait{
margin-top: 0.6rem;
}
.sgl-plugin-page #price_usd{
margin-top: 0.5rem;
}
.sgl-plugin-page .top-margin-15{
margin-top: 15px;
}
.sgl-plugin-page #report_problem-wait{
margin-top: 0.3rem;
margin-right: 1rem;
}
.sgl-plugin-page .grid-btn{
opacity: 0.4;
}
.sgl-plugin-page .list-grid-img{
width: 12px;
height: 12px;
}
.sgl-plugin-page .my-row-end {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 1rem;
}
.sgl-plugin-page .my-row-end > input {
margin: 0.5rem;
}
.sgl-plugin-page .my-column {
display: flex;
flex-direction: column;
}
.sgl-plugin-page .margin-style {
margin-left: 5px !important;
}
.sgl-plugin-page .style-checkbox {
margin-left: 1rem;
}
.sgl-plugin-page .set-width-as-4 {
width: 4.1rem;
}
.sgl-plugin-page .set-width-80p {
width: 91%;
}
.sgl-plugin-page .set-width-100p{
width: 100%;
}
.sgl-plugin-page .set-width-10p {
width: 10% !important;
}
.sgl-plugin-page .expand-style {
padding-top: 1rem;
width: 7rem;
font-size: smaller !important;
text-decoration: underline;
}
.sgl-plugin-page .subscription-modal {
width: 60% !important;
max-width: 750px;
}
.sgl-plugin-page .subscription_radios {
float: left !important;
width: 148px !important;
margin: 2px !important;
padding: 2px;
background-color: #fafafa;
border: 1px solid #BBAFA0;
}
.sgl-plugin-page .subscription_radio_option{
color: #636363; }
.sgl-plugin-page .ios-hr, .sgl-plugin-page .desc_span > hr{
color: #D7D7D7;
border: 3px;
margin: 3px !important;
padding: 0 !important;
display: block;
height: 1px;
background: #D7D7D7;
width: 93%;
opacity: 1;
}
.sgl-plugin-page .free_sub{
color:green;font-weight:bold;font-style: italic;
}
.sgl-plugin-page .select-width{
width:90%;
max-width:300px;
}
.sgl-plugin-page .input-width{
width:90% !important;
max-width:300px !important;
margin-bottom: 10px !important;
}
.sgl-plugin-page .close_player{
position: fixed;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 99;
display: block;
}
.sgl-plugin-page .player_options{
position: absolute;
top: 0px;
z-index: 11;
width:100%;
padding-right: 6px;
}
.sgl-plugin-page .set-inline{
padding-top: 8px;
}
.sgl-plugin-page .cross-btn-img{
max-width: unset;
width: 30px;
}
.sgl-plugin-page .align-center{
text-align: center;
}
.sgl-plugin-page .clipBoardButton{
font-weight: bold;
cursor: pointer;
margin-left: 5px;
border: 1px solid black;
color: white;
font-size: 14px;
padding: 5px;
background: rgba(51, 51, 51, 0.8);
border-radius: 2px;
background: rgba(4, 98, 64, 0.8);
height: 2rem;
}
.sgl-plugin-page .social-media-icons{
padding-left: 0.5rem;
}
.sgl-plugin-page .social-media-icons:hover{
cursor: pointer;
}
.sgl-plugin-page .myimg{
width: 28px;
height: 28px;
}
.sgl-plugin-page .flex-container-row{ 
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.7rem;
}
.sgl-plugin-page .flex-container-column{
display: flex;
flex-direction: column;
margin-left: auto;
}
.sgl-plugin-page .purchase-download-button{
display: flex;
align-items: center;
justify-content: center;
background: #F88017;
padding: 0.25rem;
}
.sgl-plugin-page .download-button{
display: flex;
align-items: center;
justify-content: center;
background: #046240;
padding: 0.25rem;
}
.sgl-plugin-page .cross-button{
align-self: center;
margin-right: 0.3rem;
margin-right: 0px !important;
align-self: flex-start;
padding: 0.2rem;
}
.sgl-plugin-page .cross-button_previews{
padding: 0.2rem;
position: fixed;
right: 0;
top: 0;
}
.sgl-plugin-page .top-div, .sgl-plugin-page .top-div-detail, .sgl-plugin-page .top-div_previews {
text-align: center;
padding-top: 8px;
}
.sgl-plugin-page .sw-30{
width: 50%;
}
.sgl-plugin-page .mymodal h2{
border-bottom: 1px solid #555;
padding-bottom: 5px;
margin-top: 0.4em;
font-size: 18px !important;
text-align:center;
}
.sgl-plugin-page .align-buttons{
display: flex;
justify-content: space-between;
}
.sgl-plugin-page li {
margin-bottom: 0.5rem;
}
.sgl-plugin-page .checkbox-class{
margin: 0;
vertical-align: middle;
}
.sgl-plugin-page .no-margin{
margin: 0;
}
.sgl-plugin-page .green-text{
color: green;
}
.sgl-plugin-page #subscribe_warning{
text-align: right;
}
.sgl-plugin-page .mr-btm-5{
margin-bottom:5px;
}
.sgl-plugin-page .subscription_div_overflow{
overflow: auto;
max-height: 60vh;
}
.sgl-plugin-page .display_on_mobile{display: none;}
#sgl-livestream-card-container .sgl-archive-event:nth-child(even){
margin:0 0 var(--event-spacing) 0 ;
}
@media all and (max-width: 1050px) {
#sgl-livestream-card-container .sgl-archive-event {
width: 46% !important;
margin-right: 8%;
}
}
@media all and (max-width: 630px) {
.sgl-plugin-page .flex-livestream-container{
justify-content: center;
padding-left: 0px;
}
#sgl-livestream-card-container .sgl-archive-event {
width: 47% !important;
margin-right: 4%;
}
.sgl-plugin-page .display_on_desktop{
display: none;
}
.sgl-plugin-page .display_on_mobile{
display: block;
}
.sgl-plugin-page td.display_on_mobile{
display:table-cell;
}
.sgl-plugin-page .list-grid{
display: none;      
}
.sgl-plugin-page .sgl-content-wrapper .tab.display_on_desktop {
display:none;
}
.sgl-plugin-page .sgl-content-wrapper .tab.display_on_mobile {
display:block;
}
}
@media all and (max-width: 710px) {
.sgl-plugin-page .display_on_desktop{
display: none;
}
.sgl-plugin-page .display_on_mobile{
display: block;
}
.sgl-plugin-page td.display_on_mobile{
display:table-cell;
}
.sgl-plugin-page .list-grid > button > span{
display: none;      
}
}
@media all and (max-width: 875px) {
.sgl-plugin-page .display_on_desktop{
display: none;
}
.sgl-plugin-page .display_on_mobile{
display: block;
}
.sgl-plugin-page td.display_on_mobile{
display:table-cell;
}
.sgl-plugin-page .set-inline{
width: 42%;
}
.sgl-plugin-page .set-width {
width: 45%;
}
.sgl-plugin-page .sw-30 {
width: 30%;
}
.sgl-plugin-page .details-table-head {
width: 100px !important;
}
}
@media all and (max-width: 768px){
#sgl-livestream-card-container .sgl-archive-event {
height: 240px !important;
width: 265px !important;
margin-right: 35px;
}
#sgl-livestream-card-container .sgl-archive-event img {
max-height:175px;
}
.sgl-plugin-page .flex-livestream-container{
padding-left: 30px;
}
}
@media all and (max-width: 650px){
#sgl-livestream-card-container .sgl-archive-event {
height: 208px !important;
width: 46% !important;
margin-right: 8%;
}
#sgl-livestream-card-container .sgl-archive-event img {
max-height:145px;
}
}
@media all and (max-width: 550px){
#sgl-livestream-card-container .sgl-archive-event {
height: 183px !important;
width: 42% !important;
}
#sgl-livestream-card-container .sgl-archive-event img {
max-height:120px;
}
}
@media all and (max-width: 480px){
.sgl-plugin-page .flex-livestream-container{
justify-content: center;
}
#sgl-livestream-card-container .sgl-archive-event{
height: 268px !important;
width: 90% !important;
margin: 0 0 var(--event-spacing) 0 !important;
}
#sgl-livestream-card-container .sgl-archive-event img {
max-height: 205px;
}
.sgl-plugin-page .flex-livestream-container {
padding-left: 10px;
}
}
@media all and (max-width: 400px){
.sgl-plugin-page .flex-livestream-container{
justify-content: center;
}
#sgl-livestream-card-container .sgl-archive-event{
height: 247px !important;
}
#sgl-livestream-card-container .sgl-archive-event img {
max-height: 180px;
}
}
@media all and (max-width: 600px) {
.sgl-plugin-page .display_on_desktop{
display: none;
}
.sgl-plugin-page .display_on_mobile{
display: block;
}
.sgl-plugin-page td.display_on_mobile{
display:table-cell;
}
.sgl-plugin-page .set-width {
width: 77% !important;
}
.sgl-plugin-page .list-grid{
display: none;      
}
.sgl-plugin-page .my-row {
flex-direction: column;
}
.sgl-plugin-page .as-input-group {
flex-direction: column;
align-items: unset;
}
.sgl-plugin-page .playlist-div {
flex-direction: column;
width: 129%;
}
.sgl-plugin-page .input-group {
width: 100%;
}
.sgl-plugin-page .expand-style {
margin-left: 0rem !important;
}
.sgl-plugin-page .list .livestream_container{
float: left !important;
}
.sgl-plugin-page .list .livestream_details{
width: 100%;
}
.sgl-plugin-page .clipBoardButton{
visibility: hidden;
}
.sgl-plugin-page .display_it{
display: none;
}
.sgl-plugin-page .display_now{
display: block !important;
}
.sgl-plugin-page #myElement{
height: 75% !important;
}
.sgl-plugin-page  .bottm-div{
color:white;
padding-top: 1rem;
}
.sgl-plugin-page .set-inline{
display: none;
}
.sgl-plugin-page .thePlayer_infobox{
align-items: center;
padding-left: 1rem;
background: unset;
}
.sgl-plugin-page .top-div{
visibility: hidden;
}
.sgl-plugin-page .top-div_previews{
display: none;
}
.sgl-plugin-page .mbtn{
background: rgba(63,81,181,255);
}
.sgl-plugin-page .mbtn1{
background: #1DA1F2;
}
.sgl-plugin-page .mbtn2{
background: #a0a0a0;
}
.sgl-plugin-page .btn-class{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 1rem;
}
.sgl-plugin-page .social-media-icons {
padding-left: 0rem;
}
}