/*
===============================================================
Plik: common_mobile.css
===============================================================
*/

.divBrakPostowWspolna {
    font-size: 24px;
    height: 100%;
}

.ImgDynamicznyPodglad {
	max-width: 160px;
}

/*	dla formatowania ikonek "kolorów" w treści	*/
.imgPostKolory{
	margin-bottom: 4px;
	height: 16px;
    width: 16px;
	border: 0px solid red;
}

hr.red100, hr.red98, hr.red95, hr.red90, hr.red85, hr.red80, hr.red75, hr.red70, hr.red60, hr.red50{
	border: 1px solid red;
	border-radius: 5px;
	margin-top: 6px;
	margin-bottom: 6px;
}

hr.red100 {width: 100%;}
hr.red98 {width: 98%;}
hr.red95 {width: 95%;}
hr.red90 {width: 90%;}
hr.red85 {width: 85%;}
hr.red80 {width: 80%;}
hr.red75 {width: 75%;}
hr.red70 {width: 70%;}
hr.red60 {width: 60%;}
hr.red50 {width: 50%;}


/* Połączone style dla input[type=submit], input[type=file] i button */

input[type=submit], input[type=file], button {
    letter-spacing: 1px;
    background-color: #202020;
    border-radius: 3px;
    border: 1px solid grey;
    color: grey;
    padding: 3px 7px;
    margin: 4px 2px;
}

/* Hover efekt dla wszystkich */
input[type=submit]:hover, input[type=file]:hover, button:hover {
    background-color: transparent;
    border: 1px solid red;
}

input[type=checkbox]
{
	cursor: pointer;
}

input,
button
{
	font-size: 12px;       /* zgodnie z UX i iOS */
	line-height: 1.4;
	font-family: inherit;  /* dziedzicz po body, by mieć spójność */
}


/* ===================================================== ROZWIJANIE - KOLAPSY =================================================================
*/
/* Wspólne style dla przycisków kolapsów */

.btnKolapsKomentarze,
.BTNkolapsPostEdycjaEdycja,
.BTNkolapsPostEdycjaPodglad,
.BTNkolapsPostEdycjaKategoria,
.BTNkolapsPostEdycjaKategorie {
	width: 90%;				/* ustawiać tyle samo co w kolapsie DIV pod buttonem */
	background-color: black;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	text-align: center;
	outline: none;
	padding: 5px 0px;
	margin: auto;
}

/* Przycisk Trybu Publikacji (wspólne style) */
.BTNkolapsPostEdycjaEdycja,
.BTNkolapsPostEdycjaPodglad,
.BTNkolapsPostEdycjaKategoria,
.BTNkolapsPostEdycjaKategorie {
}

/* Specyfika przycisku komentarzy */
.btnKolapsKomentarze {
	width: 90%;				/* ustawiać tyle samo co w kolapsie DIV pod buttonem */
	margin-top: 7px;
	margin-bottom: 0px;
}

.btnKolapsKomentarze:hover,
.BTNkolapsPostEdycjaEdycja:hover,
.BTNkolapsPostEdycjaPodglad:hover,
.BTNkolapsPostEdycjaKategoria:hover,
.BTNkolapsPostEdycjaKategorie:hover {
	background-color: #101010;
	border: 2px solid #353535;
}

/* ---------------------------------------------------- */
/* Kontenery treści kolapsów */

/* Domyślnie ukryte (zwinięte): display none, max-height 0, overflow hidden */
.kolapsPostEdycjaPodgladTresc {
	padding: 10px 15px;
	max-height: 0;
	overflow: hidden;
	display: none; /* zwinięty na start */
	transition: max-height 0.5s ease-out;
	border: 0 solid grey;
	background-color: black;
}

/* Domyślnie rozwinięte: display block, max-height none (dynamicznie ustawiane w JS) */
.divKolapsKomentarze,
.kolapsPostEdycjaEdycjaTresc,
.kolapsPostEdycjaKategoriaTresc,
.kolapsPostEdycjaKategorieTresc {
	width: 100%;
	overflow: hidden; /* w trakcie animacji ważne */
	transition: max-height 0.5s ease-out;
	background-color: transparent;
	padding: 115px 15px 0 15px; /* zgodnie z poprzednim .divKolapsKomentarze */
	display: block; /* rozwinięte na start */
	border: 0 solid transparent;
	max-height: none; /* brak ograniczenia wysokości na start */
}

/* Specjalne style dla edycji i podglądu: lista autocomplete może wychodzić poza kontener */
.kolapsPostEdycjaEdycjaTresc,
.kolapsPostEdycjaPodgladTresc {
	overflow: visible !important;
	position: relative;
	z-index: 1;
	transition: max-height 0.5s ease-out;
	background-color: black;
}

/* Padding dla poszczególnych typów */
.kolapsPostEdycjaEdycjaTresc {
	padding: 10px 15px;
	border-color: #303030;
}

.kolapsPostEdycjaKategoriaTresc,
.kolapsPostEdycjaKategorieTresc {
	padding: 10px 15px;
	border-color: grey;
}

.divKolapsKomentarze {
	margin: 0px 0px;
	padding: 0px 0px;
}

.imgSzczaukiKolaps{
	vertical-align: middle;
    border: 0px solid red;
	margin-left: 5px;
	margin-right: 5px;
	height: 12px;
    width: 10px;
}

/* =================================================== ROZWIJANIE - koniec - KOLAPSY ============================================================

*/
/* ===================================================== AUTOUZUPEŁNIANIE INPUTÓW ===============================================================
 */
/* =========================== */
/* Style dla inputów trzech form  */
/* =========================== */
.autoUzupelnianieWyszukiwarka,
.autoUzupelnianiePublikowanieTytul,
.autoUzupelnianiePublikowanieImg {
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	width: 100%;
	position: relative;		/* nie zmieniać */
	display: inline-block;
	border: 0px solid yellow;
}
.autoUzupelnianieWyszukiwarka {
	width: 78%;
	position: relative; 	/* WAŻNE: to tutaj musi być */
	display: inline-block;
	border: 0px solid yellow;}

/* ================================== */
/* Kontenery LIST podpowiedzi (wspólne) */
/* ================================== */
.autoUzupelnianieWyszukiwarka-items,
.autoUzupelnianiePublikowanieTytul-items,
.autoUzupelnianiePublikowanieImg-items {
    z-index: 900 !important;
    position: absolute !important;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 0px;
    border: 0px solid green;
    border-bottom: none;
    border-top: none;
	border-radius: 2px;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;      /* opcjonalnie limit wysokości listy, żeby scroll działał */
}
.autoUzupelnianieWyszukiwarka-items {
	align-items: flex-end;         /* wyrównanie zawartości do prawej */
	right: 0;           		   /* przyklej do PRAWEJ */
	left: auto;  
}

/* ======================= */
/* LISTA elementów podpowiedzi (pojedyncze elementy LISTY) */
/* ======================= */
.autoUzupelnianieWyszukiwarka-item,
.autoUzupelnianiePublikowanieTytul-item,
.autoUzupelnianiePublikowanieImg-item {
	color: grey;
	padding: 3px;
	cursor: pointer;
	z-index: 1001;
	background-color: #303030;
	border-bottom: 1px solid #d4d4d4;
}

/* ============================ */
/* Hover efekt dla elementów LISTY */
/* ============================ */
.autoUzupelnianieWyszukiwarka-item:hover,
.autoUzupelnianiePublikowanieTytul-item:hover,
.autoUzupelnianiePublikowanieImg-item:hover {
	background-color: #555555;
	color: white;
}

/* =========================================== */
/* Hover na ostatnim elemencie, gdy nie aktywny */
/* UWAGA: poprawiono brak przecinka pomiędzy selektorami! */
/* =========================================== */
.autoUzupelnianieWyszukiwarka-item:last-child:not(.autoUzupelnianieWyszukiwarka-active):hover,
.autoUzupelnianiePublikowanieTytul-item:last-child:not(.autoUzupelnianiePublikowanieTytul-active):hover,
.autoUzupelnianiePublikowanieImg-item:last-child:not(.autoUzupelnianiePublikowanieImg-active):hover {
	background-color: #777777;
	color: white;
}

/* ================================= */
/* Aktywna klasa (podświetlenie wybranego elementu) */
/* ================================= */
.autoUzupelnianieWyszukiwarka-active,
.autoUzupelnianiePublikowanieTytul-active,
.autoUzupelnianiePublikowanieImg-active {
	background-color: #555555 !important;
	color: white; /* kontrast */
}
/* ================================================= AUTOUZUPEŁNIANIE koniec INPUTÓW =========================================================
 */
 
/* ==================================================== AVATARY W KOMENTARZACH =====================================================
 */
/*  inc/post_koment_widok.asp dla avarata usera */
.imgAvatarZoom {
    border-radius:50%;
	vertical-align: middle;
    cursor: pointer;
    transition: transform .3s;
	border: 2px solid #202020;
	float: left;
	margin-left:0px;
	margin-right:10px;
	margin-top:-5px;
	height: 25px; /* oryginalnie ma 600x600 */
	width: 25px;
}
/*  inc/post_koment_widok.asp dla avarata usera */
.imgAvatarZoom:hover {
	-ms-transform: scale(1.7); /* IE 9 */
	-webkit-transform: scale(1.7); /* Safari 3-8 */
	transform: scale(1.7); 
}
/*  inc/post_koment_widok.asp dla avarata difultowego */
.imgAvatarDefault {
	vertical-align: middle;
    cursor: pointer;
	border: 0px solid red;
	float: left;
	margin-left:0px;
	margin-right:10px;
	margin-top:-5px;
	height: 25px; /* oryginalnie ma 600x600 */
	width: 25px;
}
/* ================================================== AVATARY - koniec -  W KOMENTARZACH ============================================

/* ?????????????????????????????? */
.imgPostPodgladIkony111111 {
    cursor: pointer;
	border: 2px solid pink;
	float: right;
	margin-right:15px;
	margin-top:10px;
	max-width: 350px;
}