@charset "UTF-8";

:root {
	--widthMainMenu:300px;
	--widthShadowMainMenu:15px;
	--heightMainNavBar: 56px;
	--heightFooter: 20px;
	--gray: #939393;
	--darkGray: #5c5c5c;
	--red: #f00;
}

* {  box-sizing: border-box; }
html { font-size: 16px; font-family: Roboto, Arial, sans-serif; height:100%; background-color: #f9f9f9; } 
input, button { font-family: Roboto, Arial, sans-serif; } 
body { padding: 0; margin: 0; overflow-y: scroll; height:100%; }
	
#mainNavBar { 
	display:flex;
	align-items: center;
	background-color:#fff;
	height: var(--heightMainNavBar);
	position:fixed;
	width:100%;
	justify-content: space-between;
	padding: 0 16px;
	border-bottom: 1px solid #e7e7e7;
	z-index:1000;
}

#mainNavBar .search { 
	flex: 1;
	margin: 0 40px;
}

.search-content {
	display:flex;
	justify-content: center;
	font-size: 16px;
}

.search-content .search-input { 
	width:75%;

}
.search-content .search-input input[type=text], input[type=number] { 
	width:100%;
	border:none; 
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: none;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	padding: 6px 6px 7px 6px;
	box-shadow: inset 0px 1px 1px rgba(0,0,0,.075);
}

.search-content .search-button button {
	border: 1px solid #ccc;
	padding: 6px 15px;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
	color:#868686;
	cursor: pointer;
	height: 34px;
}
.search-content .search-button button:hover {
	background-color:#e3e3e3;
}

.header-right {
	display:flex;
	justify-content: right;
}

.header-right > div {
	position:relative;

}


	
#mainContent {
	background-color:#f9f9f9;
	display: flex;
	min-height: calc(100% - var(--heightFooter) );
}

#mainContent > div {
	margin-top:var(--heightMainNavBar); 
	width:100%;
}

#footer {
	height: var(--heightFooter);
	border-top: 1px solid #e7e7e7;
	text-align: right;
	font-size: 10px;
	padding-top: 4px;
	padding-right: 15px;
	color: #aaa;
	background-color: #fff;
}

#footer a { color: inherit; text-decoration:none; font-weight:bold; }

.bold { font-weight:bold; }
.t_center { text-align: center; }
.green { color: #08b602; }
.red { color: var(--red); }
.gray { color: var(--gray); }
.margin-top { margin-top:20px; }
.margin-bottom { margin-bottom:20px; }
.margin-bottom-10 { margin-bottom:10px; }
.mb-2, .my-2 { margin-bottom: .5rem !important; }
.mt-2, .my-2 { margin-top: .5rem !important; }

.mySnackBar { font-size:0.7rem; }

a { color:#000; text-decoration:none; }
hr { border: none; border-top: 1px solid #e7e7e7; }


.menuUsername { display:flex; display: flex; margin: 10px; }
.menuUsername .photoUsername { border-radius: 50%; width: 72px; height: 72px; object-fit: contain; }
.menuUsername .infoUsername { overflow: hidden; margin-left:10px; }
.menuUsername .infoUsername .nameChannel  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight:bold; padding-bottom:10px; font-size:1.1rem; }
.menuUsername .infoUsername .email  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.liveStreamMenuItem { display:flex; margin: 2px; width: 400px; overflow: hidden; text-decoration: none; color:#000;  }
.liveStreamMenuItem:hover { background-color: #f4f4f4; }
.liveStreamMenuItem > img { padding:5px; height: 50px; max-weight:81px; width: 81px; object-fit: cover; margin-right:5px; flex-basis: 81x; }
.liveStreamMenuItem > div { padding-top:5px;   }
.liveStreamMenuItem > div > strong { display: block; height: 24px; overflow: hidden; font-size: 0.9rem; white-space: nowrap; }
.liveStreamMenuItem > div > span { color: var(--gray); font-size: 0.8rem; }

.label-input { line-height: 1.6;
	color: var(--darkGray);
	display: block;
	margin-bottom: 8px; 
}
/* dodwanie miniaturek do wideo i streamu */
.removeThumb { text-align: right; }
.removeThumb > i { cursor: pointer; color: #f00; text-shadow: 0px 0px 1px #000; }

.caret {
	display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

.badge {
	display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #f00;
border-radius: 10px;
}

.border {
	background-color: #fff;
	border: 1px solid #e7e7e7;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100px;
	margin-left: auto;
	margin-right: auto;
}

.border h1 {
	margin: 0px 0px 15px 0px;
	border-bottom: 1px solid #e7e7e7;
	font-size: 1.7rem;
	padding-bottom: 5px;
}

.border h2 {
	margin: 0px 0px 15px 0px;
	border-bottom: 1px solid #e7e7e7;
	font-size: 1.3rem;
	padding-bottom: 5px;
}

.contentWidth {
	max-width: 1241px;
	width:100%;
	margin-left: auto;
	margin-right: auto;
}

/* ======================================================================================================
   ================================= stronicowanie ===================================================
   ====================================================================================================== */

nav.pagination { display:flex; align-items: center; justify-content: right; margin:10px 0;  }
nav.pagination > .pagination_left { font-size: 30px; width:30px; color: var(--gray); cursor:pointer; }
nav.pagination > div:nth-child(2) {  }
nav.pagination > div:nth-child(2) > input { width:40px; text-align:center; }
nav.pagination > div:nth-child(3) { width:30px; text-align:center; }
nav.pagination > div.pagination_totalPages { margin: 0 8px 0 0px; }
nav.pagination > .pagination_right { font-size: 30px; width:30px; color: var(--gray); cursor:pointer; }
nav.pagination > .pagination_hide { visibility:hidden; }

/* ======================================================================================================
   ================================= strona wideo ===================================================
   ====================================================================================================== */
   
.video-view-main { display:flex; }
.video-view { margin-right:10px; flex-grow: 1 }
.video-view .video-view-flex { display: flex; }
.video-view .video-view-flex > div:first-child { width:50px; margin-right: 10px; }
.video-view .video-view-flex > div:first-child img { border-radius:50%; width: 50px; height: 50px; object-fit: cover;  }
.video-view .video-view-flex > div:last-child { flex-grow:1 }
.video-view-right { width:350px; }

.mainVideo { background-color: #000; width:100%;   }
.mainVideo > .video { width:900px; position:relative; padding-bottom:56.25%; }

/* ======================================================================================================
   ================================= Lista video pozioma ===================================================
   ====================================================================================================== */

.video-horizontal-list { 
	--video-horizontal-item-count: 4;
	--video-horizontal-item-margin: 10px;
	display:flex; width:25em; width:100%; flex-wrap: wrap; 
}
  
.video-horizontal-list > .video-horizontal-item { margin: var(--video-horizontal-item-margin); width:calc( 100% / var(--video-horizontal-item-count) - var(--video-horizontal-item-margin) * 2 );  }
.video-horizontal-list a.video-horizontal-main-image { width:100%; display:block; padding-bottom:56.25%; background-size: cover; background-position: center; margin-bottom:10px; position:relative; border-radius:5px; overflow:hidden; }
.video-horizontal-list a.video-horizontal-main-image > img.image { position:absolute; top:0px; left:0px; bottom:10px; right:0px; width:100%; height: 100%; object-fit: cover; }
.video-horizontal-list a.video-horizontal-main-image > img.animation { position:absolute; top:0px; left:0px; bottom:10px; right:0px; width:100%; height: 100%; object-fit: cover; transition: opacity 0.1s linear; }

.video-horizontal-list .video-horizontal-duration { background-color: #000; border-radius:5px; color: #fff; position: absolute; right: 5px; bottom: 5px; opacity: 0.8; padding: 1px 4px; font-size: 0.8em; }
.video-horizontal-list .video-horizontal-stream { background-color: #f00; border-radius:5px; color: #fff; position: absolute; right: 5px; bottom: 5px; opacity: 0.9; padding: 1px 4px; font-size: 0.7em; text-align:center; }

.video-horizontal-list div.video-horizontal-resume-playback { position: absolute; bottom: 0; left: 0; right: 0; background-color: #e3e3e3; height: 4px; }
.video-horizontal-list div.video-horizontal-resume-playback > div { background-color:#ff4f4f; height:100%; }

.video-horizontal-list .video-horizontal-owner > a { font-size:0.75rem; color: var(--darkGray); font-weight:bold; margin-top:5px;  }
.video-horizontal-list .video-horizontal-data-public { font-size:0.75rem; color: var(--darkGray); font-weight:bold }

.video-horizontal-list .video-horizontal-flex { display: flex; }
.video-horizontal-list .video-horizontal-flex > div:first-child { width:35px; margin-right: 5px; }
.video-horizontal-list .video-horizontal-flex > div:first-child img { border-radius:50%; width: 35px; height: 35px; object-fit: cover;  }
.video-horizontal-list .video-horizontal-flex > div:last-child { flex-grow:1; font-size:0.9rem; }
.video-horizontal-list .video-horizontal-flex > div:last-child h2 { font-size:0.9rem; font-weight:bold; margin:0px; padding:0px; border:none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }


/* ======================================================================================================
   ================================= Lista video pionowa ===================================================
   ====================================================================================================== */

.video-vertical-small-list { display: flex; margin-bottom: 10px; }
.video-vertical-small-list h3 { font-weight:bold; overflow: hidden; margin: 0px; font-size: 14px; height: 37px; }
.video-vertical-small-list .video-owner { font-size: 0.8em; }
.video-vertical-small-list .video-owner a { color: var(--darkGray) }
.video-vertical-small-list .video-data-public { color: var(--darkGray); font-size: 0.8em; }
.video-vertical-small-list > div:first-child { flex: 0 0 140px; width:140px; margin-right:5px; }
.video-vertical-small-list > div:first-child img { width:100%; border-radius:2px; object-fit: cover; }
.video-vertical-small-list > div:last-child { width:100%; overflow:hidden; }
/* pasek postepu ogladania */
.video-vertical-small-image div.vvsi-resume-playback { position: absolute; bottom: 4px; left: 0; right: 0; background-color: #e3e3e3; height: 2px; }
.video-vertical-small-image div.vvsi-resume-playback > div { background-color:#ff4f4f; height:100%; }
/* uruchamianie animacji */
.video-vertical-small-image { position: relative; overflow:hidden; }
.video-vertical-small-image > span.vvsi-animation  { position:absolute; bottom:0px; left:0px; opacity:0; }
.video-vertical-small-image > span.vvsi-animati2on { position:absolute; top:0px; left:0px;  }
.video-vertical-small-image:hover > span.vvsi-animation  { opacity:1; transition:opacity 0.3s linear; }

	
	
	
/* ======================================================================================================
   ================================= Ładowanie strony ===================================================
   ====================================================================================================== */

div.loaderPage { position:absolute; background-color:#fff; top:0; left:0; bottom:0; right:0; display: flex; justify-content: center; align-items: center; opacity:0; transition: opacity 0.5s; }
div.loaderPage > div {
	width: 25px;
	height: 25px;
	border-radius: 100%;
	margin: 10px;
	background-image: linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(0,0,0,0) 100%);
	animation: bounceLoading 1.5s 0.5s linear infinite;
	background-color: #00dbf9;
}
div.loaderPage.smallLoader > div {
	width: 10px;
	height: 10px;
}
div.loaderPage > div:nth-child(1) { animation-delay: 0.1s; }
div.loaderPage > div:nth-child(2) { animation-delay: 0.3s; }
div.loaderPage > div:nth-child(3) { animation-delay: 0.6s; }
@keyframes bounceLoading { 
	0%, 50%, 100% { transform: scale(1); }
	25% { transform: scale(0.3); }
	75% { transform: scale(1.4); }
}

/* ======================================================================================================
   =================================  Forms  ===================================================
   ====================================================================================================== */
   
input.noborder[type=text] { border: none; background-color: inherit; color: inherit; font-size: inherit; }
input:not(.noborder)[type=text],
input[type=password],
input[type=number],
textarea,
select {
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input:not(.noborder)[type=text]:read-only { background-color: #e8e8e8; }
input:not(.noborder)[type=text]:-moz-read-only { background-color: #e8e8e8; }
input:not(.noborder)[type=number]:read-only { background-color: #e8e8e8; }


textarea {
	font-family: Roboto, Arial, sans-serif;
	height: 100px;
}

input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
textarea:focus {
	border-color: #66afe9;
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.input-group {
	display: flex;
	margin: 5px 0px;
}

.input-group .input-group-left {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-right:none;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.input-group .input-group-right {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-left:none;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.input-group input[type=text].input-radius-right,
.input-group input[type=password].input-radius-right {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.input-group input[type=text].input-radius-left,
.input-group input[type=password].input-radius-left {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* <input type='file' /> */
.custom-file { display:flex; }
.custom-file > span:first-child {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	color: #555;
	text-align: center;
	background-color: #eee;
	border: 1px solid #ccc;
	border-right: none;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	white-space: nowrap;
	cursor: pointer;
}
.custom-file > span:nth-child(2) {
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	overflow: hidden;
    white-space:nowrap; 
    text-overflow: ellipsis;
}
.custom-file input[type=file] { z-index:-1; opacity:0; width:0px; height:1px; }

/* =================== new checkbox ========================================== */
label.checkbox {
  display: inline-block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
  cursor: pointer;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label.checkbox > input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  display: none;
}

label.checkbox > span {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 1px solid #adb5bd;
  border-radius: 2px;
}

label.checkbox span:after {
  left: 4px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

label.checkbox input ~ span {
  background-color: #fff;
}

label.checkbox input:checked ~ span {
  background-color: #2196F3;
  border: none;
}

label.checkbox > span:after {
  content: "";
  position: absolute;
  display: none;
}

label.checkbox input:disabled ~ span {
  background-color: #ccc;
}

label.checkbox input:checked ~ span:after {
  display: block;
}

label.checkbox.x2 {
  padding-left: 25px;
  margin-bottom: 15px;
}

label.checkbox.x2 > span {
  height: 20px;
  width: 20px;
}

label.checkbox.x2 span:after {
  left: 6px;
  top: 1px;
  width: 5px;
  height: 12px;
}
/* =================== end checkbox ========================================== */


/* ======================================================================================================
   =================================  buttons  ===================================================
   ====================================================================================================== */
   
.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	text-decoration: none;
}

.btn:disabled { opacity: .65; }

.btn-block {
    display: block;
    width: 100%;
}

.btn:active:not(input),
input.btn:active:enabled {
	outline: 0;
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-success:active:not(input), input.btn-success:active:enabled {
	color: #fff;
	background-color: #449d44;
	border-color: #398439;
}

.btn-success:hover:not(input), .btn-success:focus:not(input), 
input.btn-success:hover:enabled,
input.btn-success:focus:enabled {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:active:not(input), input.btn-primary:active:enabled {
	color: #fff;
	background-color: #0069d9;
	border-color: #0062cc;
}

.btn-primary:hover:not(input), .btn-primary:focus:not(input), 
input.btn-primary:hover:enabled,
input.btn-primary:focus:enabled {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:active:not(input), input.btn-danger:active:enabled {
	color: #fff;
	background-color: #c82333;
	border-color: #bd2130;
}

.btn-danger:hover:not(input), .btn-danger:focus:not(input), 
input.btn-danger:hover:enabled,
input.btn-danger:focus:enabled {
    color: #fff;
    background-color: #c82333;
	border-color: #bd2130;
}

/* ========================== button icons ================================== */
.btn-icon {
	display: inline-block;
	padding: 0px 4px 0px 4px;
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	text-decoration: none;
	background-color: #d7d7d7;
	text-shadow: 1px 1px 1px rgba(100,100,100,0.5);
	transition: all .2s;
}

.btn-icon:active:enabled {
	outline: 0;
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.btn-icon:hover {
	color:#2f2f2f;
	box-shadow: 0px 0px 3px rgba(50,50,50,0.5);
}

/* ======================================================================================================
   ========================================== FILEDSET ===================================================
   ====================================================================================================== */
   
   
fieldset { background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; }
fieldset > legend { background-color: #85a7cc; color: white; padding: 2px 10px; border-radius: 4px; font-size: 14px; }
			
			
/* ======================================================================================================
   ========================================== SLIDER ===================================================
   ====================================================================================================== */

input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	height: 5px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	background: #4CAF50;
	cursor: pointer;
}

input[type=range]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: #4CAF50;
	cursor: pointer;
}

/* ======================================================================================================
   ==========================================  SWITCH ===================================================
   ====================================================================================================== */

.switch {
  position: relative;
  display: inline-block;
width:36px;
height: 15px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e0e0e0;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 9px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 19px;
  width: 19px;
  left: 0px;
  bottom: -2px;
  background-color: #aeadad;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider:before {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(19px);
  -ms-transform: translateX(19px);
  transform: translateX(19px);
}

/* ======================================================================================================
   ========================================== float labels ===================================================
   ====================================================================================================== */

label.floatLabel {
	display:inline-block;
    margin-top:9px;
    position:relative;
}
label.floatLabel > input{ padding-bottom:0px; }
label.floatLabel > input::placeholder{
    opacity:0;
}
label.floatLabel > span{
    position:absolute;
    top:6px;
    left:2px;
	padding:3px 5px;
    font-size:0.825em;
    transition-duration:300ms;
	background-color:transparent;
	cursor:text;
	border-radius:3px;
	transition: all 0.3s;
	color:#999;
}

label.floatLabel:focus-within > span,
label.floatLabel > input:not(:placeholder-shown) + span{
    top:-7px;
	color:#505050;
	line-height:115%;
	overflow:hidden;
	background-color:#ddd;
	padding: 0px 5px;
}


/* ======================================================================================================
   =================================  Progress bar   ===================================================
   ====================================================================================================== */

.progressBox {
	display: flex;
	height: 20px;
	overflow: hidden;
	font-size: .75rem;
	background-color: #e9ecef;
	border-radius: .25rem;
}
.progressBox > .progressBar {
	background-color: #46ad21;
	background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
	background-size: 1rem 1rem;
	animation: progressBar 1s linear infinite;
	transition: width 0.2s;
}

.progressLabel { font-size: 0.7em; color: var(--gray); margin-bottom: 2px; display: inline-block; }

@keyframes progressBar {
	from { background-position: 1rem 0; }
	to { background-position: 0 0; }
}


/* ======================================================================================================
   =================================  Menu Drop Down  ===================================================
   ====================================================================================================== */


div.menuDropDown > div.menuDropDown-content { 
	position:absolute; 
	background-color: #fff;
	box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	
	border: 1px solid #ccc;
	border-radius: 3px;
	
	right: 0px;
	margin: 9px 0 0 0;
	display:none;
	font-size:0.9rem;
}

div.menuDropDown > div.menuDropDown-content.show { 
	display:block;
}
div.menuDropDown > div.menuDropDown-content > hr { 
	border:none;
	margin:15px 0px;
	border-top:1px solid #ccc;
}

div.menuDropDown > .buttonMenuDropDown.focus {
	box-shadow: inset 0px 0px 4px #0003;
	background-color: #f8f8f8;
}

div.menuDropDown > div.menuDropDown-content > ul { 
	margin: 0px;
	list-style-type: none;
	padding: 5px ;
}

div.menuDropDown > div.menuDropDown-content > ul > li { 
	
}

div.menuDropDown > div.menuDropDown-content > ul > li > a { 
	text-decoration:none;
	color: inherit;
	white-space: nowrap;
	padding: 5px 5px 5px 15px; 
	display:block;
}

div.menuDropDown > div.menuDropDown-content > ul > li span { 
	margin-right: 5px;
}

div.menuDropDown > div.menuDropDown-content >  ul > li > a:hover { 
	background-color: #f4f4f4;
	cursor: pointer;
}

div.menuDropDown a.buttonMenuDropDown {
	border-radius:5px;
	border:1px solid #ccc;
	text-decoration:none;
	color:#000;
	padding:5px 10px;
	margin-left: 5px;
	height:37px;
	min-width:50px;
	display: inline-block;
	overflow: hidden;
}


div.menuDropDown a.buttonMenuDropDown.profil {
	padding:1px 8px;
	border: none;
}

div.menuDropDown a.buttonMenuDropDown:hover {
	background-color:#e3e3e3;
}

/* ======================================================================================================
   =================================  Menu Drop Down 2 ===================================================
   ====================================================================================================== */
  
.menuDropDown2 { position: absolute; background-color:#fff; display:none; z-index:999; box-shadow: 0px 0px 5px rgba(0,0,0,.3); border: 1px solid #ccc; border-radius: 3px; margin: 9px 0 0 0; font-size:0.9rem;}
.menuDropDown2.show { display:block; }
.menuDropDown2 ul { margin: 0px; list-style-type: none; padding: 5px ; }
.menuDropDown2 ul a {text-decoration:none; color: inherit; white-space: nowrap; padding: 5px 5px 5px 10px; display:block; }
.menuDropDown2 ul > li > a:hover { background-color: #f4f4f4; cursor: pointer; }
   
/* ======================================================================================================
   ================================= Main Menu=====================================================================
   ====================================================================================================== */
   
#mainMenu {
	margin: 0 16px 0 0;	
	
}

#mainMenu .mainMenu-button {
	cursor: pointer;
}

#mainMenu .mainMenu-content {
	padding:10px;
	background-color:#fff;
	width: var(--widthMainMenu);
	position: absolute;
	box-shadow: 3px var(--widthShadowMainMenu) 19px #0002;
	top: 0;
	height: 100vh;
	margin-top: var(--heightMainNavBar); 
	left: calc( var(--widthMainMenu) - var(--widthShadowMainMenu) - var(--widthMainMenu) * 2);
	display:block;
	overflow-x: hidden;
	overflow-y: auto;
	transition: 0.3s;
}

#mainMenu .mainMenu-content.show {
	transition: 0.3s;
	left:0;
}

#mainMenu nav.menu_list { }
#mainMenu nav.menu_list a { display:block; padding: 6px 10px; border-radius: 3px; transition: background-color 0.2s; }
#mainMenu nav.menu_list a:hover { display:block; background-color:rgba(0,0,0,0.1); }
#mainMenu nav.menu_list a:active { display:block; background-color:rgba(0,0,0,0.2); }

/* ======================================================================================================
   =================================  LABEL  =============================================================
   ====================================================================================================== */
.label {
	border-radius: 5px;
	padding: 5px;
	font-size: 0.7rem;
	display: inline-block;
	color:#fff;
	text-align: center;
}

.label.label-warning { background-color: #f0ad4e; }
.label.label-danger { background-color: #d9534f; }
.label.label-default { background-color: #777; }
.label.label-info { background-color: #5bc0de; }



/* ======================================================================================================
   =================================  TABLE MANAGMENT  ===================================================
   ====================================================================================================== */

.table { width:100%; table-layout: fixed; margin-bottom: 20px; background-color: transparent; border-collapse: collapse; border-spacing: 0; font-size:14px; position:relative; }		
.table > thead > tr { border-bottom: 2px solid #e1e1e1; text-align:left; }		
.table > tbody > tr:nth-child(odd) { background-color: #f7f7f7; border-bottom: 1px solid #e1e1e1; }
.table > tbody > tr:nth-child(even) { background-color: #fff; border-bottom: 1px solid #e1e1e1; }
.table > tbody > tr:hover { background-color: #eaeaea; border-bottom: 1px solid #b3b3b3; }
.table > tbody > tr > td { vertical-align: top; padding: 5px 5px; }
.table.v-middle > tbody > tr > td { vertical-align: middle; }

.table .attribute { display:flex; width:100%; background-color: #337ab7; border-radius:4px; font-size:0.8em; color: #fff; margin-bottom:2px; font-weight: bold; overflow:hidden; white-space:nowrap;  }
.table .attribute > div { padding:2px; width:50%; }
.table .attribute > div:first-child { text-align:right; padding-right:5px; }
.table .attribute > div:last-child { padding-left:5px; }
.table .attribute-success { background-color:#5cb85c; }
.table .attribute-warning { color: #212529; background-color: #ffc107; }
.table .attribute-inactive { background-color: #959595; }
.table .attribute-error { background-color: #dc3545; }

.table .myv_col_title {  }
.table .myv_video > img { width:150px; max-height:90px;  border-radius: 4px; object-fit: cover; height: 150px; box-shadow: 0px 0px 5px #00000040; }
/* pasek postepu ogladania */
.table .myv_video div.video-resume-playback { position: absolute; bottom: 3px; left: 0; right: 0; background-color: #e3e3e3; height: 2px; }
.table .myv_video div.video-resume-playback > div { background-color:#ff4f4f; height:100%; }

.table .myv_title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table .myv_video { display: inline-block; position:relative; margin: 4px 10px 4px 4px; float:left; }
.table .myv_editBox { display: none; margin-top:10px; }
.table .myv_editBox a { font-size:24px; color: var(--darkGray); text-decoration: none; margin-left:5px; cursor:pointer; }
.table .myv_editBox a:hover { color: #000; }
.table > tbody > tr:hover .myv_editBox { display: block; }
		
.table .video-label { background-color: #000; color:#fff; opacity:0.8; border-radius:4px; padding:2px; position:absolute; bottom:6px; right:4px; font-size:0.7em; }
.table .label-format { background-color: #aeadad; color:#fff; border-radius:4px; padding: 2px 3px; font-size: 0.8em; margin-right: 5px; cursor: default; }
.table .video-visibility { border: 1px solid #bdbdbd; padding: 2px 5px; display: inline-block; border-radius: 3px; background-color: #eaeaea; }
.table .video-visibility:hover { cursor:pointer; background-color: #fff; }
/* element ładowania */
.table_loading { background-color:#ffffffb5; z-index:10; position:absolute; }
.table_loading > .loader {
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid blue;
  border-bottom: 8px solid blue;
  -webkit-animation: loader-spin 2s linear infinite;
  animation: loader-spin 2s linear infinite;
}

@-webkit-keyframes loader-spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
   
/* ========================================================================================================== 
   ============================================== MESSAGEBOX ==================================================== 
   ========================================================================================================== */
   
#messagesOnTop { margin:auto; width:600px; font-size: 1rem; }
.messageGOOD {
	background-color: #d0e9b7;
	border-radius: 7px;
	padding-left: 40px;
	padding-top: 10px;
	background-image: url(../img/ikona_ok.png);
	background-size: 20px;
	background-repeat: no-repeat;
	min-height: 20px;
	background-position: 10px 10px;
	margin: 15px 30px 15px 30px;
	font-size:0.9rem;
	padding-bottom: 15px;
}

.messageERROR {
	background-color: #edadad;
	border-radius: 7px;
	padding-left: 40px;
	padding-top: 10px;
	background-image: url(../img/ikona_blad.png);
	background-size: 20px;
	background-repeat: no-repeat;
	min-height: 20px;
	background-position: 10px 10px;
	margin: 15px 30px 15px 30px;
	font-size:0.9rem;
	padding-bottom: 15px;
}

.messageINFO {
	background-color: #cad4ef;
	border-radius: 7px;
	padding-left: 40px;
	padding-top: 10px;
	background-image: url(../img/ikona_info.png);
	background-size: 20px;
	background-repeat: no-repeat;
	min-height: 20px;
	background-position: 10px 10px;
	margin: 15px 30px 15px 30px;
	font-size:0.9rem;
	padding-bottom: 15px;
}

.messageWARNING {
	background-color: #ecedad;
	border-radius: 7px;
	padding-left: 40px;
	padding-top: 10px;
	background-image: url(../img/ikona_ostrzezenie.png);
	background-size: 20px;
	background-repeat: no-repeat;
	min-height: 20px;
	background-position: 10px 10px;
	margin: 15px 30px 15px 30px;
	font-size:0.9rem;
	padding-bottom: 15px;
}

.messageERROR > div, .messageGOOD > div, .messageINFO > div, .messageWARNING > div { padding-bottom: 5px; }

.messageERROR > ul, .messageGOOD > ul, .messageINFO > div, .messageWARNING > div {
	margin: 0px;
	padding-left: 10px;
}


#dhtmltooltip {
  text-decoration: none;
  position: absolute;
  border: 2px solid #d2d2d2;
  border-radius: 5px;
  padding: 5px;
  background-color: #fff;
  z-index: 100;
  box-shadow: 0 0 5px #aaa;
  font-size: 13px;
}

/*  ===================================================================================================================================== */
/*  ===================================================================== większa SZEROKOSC 600 ========================================= */
/*  ===================================================================================================================================== */
@media (min-width: 601px) {
	.search-content-mobile { display:none; }
	.img_logo_small { display:none; }
	.img_logo_big { display:inline-block; }
}



/*  ===================================================================================================================================== */
/*  ===================================================================== SZEROKOSC 900 ================================================= */
/*  ===================================================================================================================================== */
@media (max-width: 900px) {
	.video-horizontal-list {
		--video-horizontal-item-count: 3;
	}
	
	.video-vertical-small-list { flex-direction: column; }
	.video-vertical-small-list > div:first-child { width:100%; }
	
}


/*  ===================================================================================================================================== */
/*  ===================================================================== SZEROKOSC 750 ================================================= */
/*  ===================================================================================================================================== */
@media (max-width:750px) {
	.video-view { width:100%; }
	.video-view-main { flex-direction: column; }
}

/*  ===================================================================================================================================== */
/*  ===================================================================== SZEROKOSC 600 ================================================= */
/*  ===================================================================================================================================== */
@media (max-width:600px) {
	html { font-size: 14px; }
	.video-horizontal-list {
		--video-horizontal-item-count: 2;
	}
	#messagesOnTop { margin:auto; width:350px; }
	
	.search-content.desktop { display:none; }
	.search-content-mobile { display:display; }
	
	.img_logo_small { display:inline-block; }
	.img_logo_big { display:none; }
}

/*  ===================================================================================================================================== */
/*  ===================================================================== SZEROKOSC 490 ================================================= */
/*  ===================================================================================================================================== */
@media (max-width:490px) {
	html { font-size: 14px; }
	.search-content { display:none; }
	.video-horizontal-list {
		--video-horizontal-item-count: 1;
	}
}