/* ********************************** */
/* STREAMSHOW MASTER.css - 22/09/2023 */
/* ********************************** */

html, body {
	position: relative;
	margin: 0; padding: 0;
	width: 100%; min-height: 100%;
}
/* CLEAR / RESET */
  * {
	    transition: all .2s linear;
	    -webkit-transition: all .2s linear;
	    -moz-transition: all .2s linear;
	    -o-transition: all .2s linear;
	}
	.clear {
		position: relative; overflow: hidden;
		clear: both;
		visibility: hidden; 
		width: 100%; height: 0;
		content: ' ';
		font-size: 0; line-height: 0;
	}
	.spacer {
		position: relative; overflow: hidden;
		clear: both;
		visibility: hidden; 
		width: 100%; height: 1rem;
		content: ' ';
	}
	.spacer-half {
		position: relative; overflow: hidden;
		clear: both;
		visibility: hidden; 
		width: 100%; height: .5rem;
		content: ' ';
	}
	.margin-top { margin-top: 80px!important; }
	.margin-low	{ margin-top: 15px!important; }
	.reset-margin-l-r { margin-left: 0!important; margin-right: 0!important; }

/* BASE */
  a {
	color: #BEBEBE; font-weight: bold; 
  }

  .grey {
  	color: #BEBEBE;
  	font-weight: bold;
  }

  .float-left { float: left; }
  .float-right { float: right; }

/* BACKGROUND PAGES */
	.bg-page {
		background: rgb(56,58,61);
		background: -moz-linear-gradient(top, rgba(56,58,61,1) 0%, rgba(150,150,150,1) 100%);
		background: -webkit-linear-gradient(top, rgba(56,58,61,1) 0%, rgba(150,150,150,1) 100%);
		background: linear-gradient(to bottom, rgba(56,58,61,1) 0%, rgba(150,150,150,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=0 );
	}	 

/* CUSTOM */
	.navbar {
		font-weight: bold; font-style: italic; text-transform: uppercase;
		background-color: rgba(255, 255, 255, 1);
		border-bottom: 1px solid #BEBEBE;
	}
	.navbar-brand {
		overflow: hidden;
		margin: 0; padding: 5px; 
	}
	.navbar-brand img {
		display: block;
		margin-top: 5px;
		max-width: 220px; width: 100%; height: auto;
	}
	.navbar ul li a {
		display: inline-block;
		margin-top: 5px; /* padding-right: 2px; padding-left: 2px; */ 
		text-align: center;
	}
	
/* CUSTOM NAV */
	.nav-pills > li > a > img {
		display: inline-block;
		width: auto; height: 15px;
		}
	.nav-pills > li > a, .nav-pills > li > a:focus, .nav-pills > li > a:hover {
		color: #BEBEBE!important; font-style: italic;
		border-radius: 0!important;
		}
	.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
		background-color: #f9ea42!important;
		}
	.navbar-toggle .icon-bar {
		background: #BEBEBE!important;
		}
	iframe {
		position: relative;
		overflow: hidden; 
		display: inline-block;
		margin: 0 auto;
		padding: 0;
		border-radius: 1px;
	}
	.cont-iframe { text-align: center; }
	.box-iframe {
		display: inline-block;
		overflow: hidden;
		margin: 0 auto;
		padding: 1em; 
		position: relative;
		max-width: 1024px; width: 100%; height: auto;
		text-align: center;
		background-color: rgba(255, 255, 255, 1);
		border: 1px solid #dedede; border-radius: 1px;
		-webkit-box-shadow: 0 8px 6px -6px #333;
		-moz-box-shadow: 0 8px 6px -6px #333;
		box-shadow: 0 8px 6px -6px #333; 
	}
	.box-iframe a {
		cursor: default!important;
		display: block; 
		margin: 0 auto 0 auto;
		padding: 0.5em;
		max-width: 1024px; width: 100%;
		color: #fff; text-align: center; text-decoration: none!important;
		background-color: #0190c9; 
		border-radius: 1px; 
	}
	
	.txt-right	{ text-align: right; }
	.txt-left	{ text-align: left; }
	.ellipsis {
		display: inline-block;
		padding: 0;
		min-width: 25%; min-width: calc(35% - 90px);
		max-width: 620px;
		white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		line-height: 1;
	}
	/* TABEL VIEW */
	.table-v {
		margin: 0 auto;
		display: table;
		max-width: 1024px; width: 100%;
	}
		.table-v-row {
			padding: .1rem 0;
			display: table-row;
		}
		.table-v-cell {
			padding: .2rem .5rem;
			display: table-cell;
		}
    @media screen and (max-width: 1024px) {
		.ellipsis {
			min-width: 25%; min-width: calc(40% - 90px);
			max-width: 500px;
		}
	}
    @media screen and (max-width: 768px) {
		.navbar-brand img {
			display: block;
			margin-top: 3px;
			max-width: 212px;
			height: auto;
		}
		.ellipsis {
			width: 45vw; width: calc(60vw - 90px);
		}
	}