:root {
  --colour1: #f1c40f;
  --colour2: #2c3e50;
  --speed: 4s;
}
@keyframes slide {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: 113px;
  }
}

.container_foto_loading {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .bar {
    min-height: 100px;
    border-radius: 10px;
    width: calc(113px * 4);
    @media only screen and (max-width: 450px) {
      width: calc(113px * 3);
    }
    @media only screen and (max-width: 350px) {
      width: calc(113px * 2);
    }
    box-shadow: 0px 10px 13px -6px rgba(44, 62, 80, 1);
    background-color: var(--colour2);
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 40px,
      var(--colour1) 40px,
      var(--colour1) 80px
    );

    animation: slide var(--speed) linear infinite;
    will-change: background-position;
  }
}
/*Potvrzovací dialogy*/
.confirm-box		{position:absolute;width:300px;padding:20px;border:2px solid red;border-radius:15px;text-align:center;background:white;z-index:20;}
.close				{cursor:pointer;}

*					{padding:0px;margin:0px;}
html, body {
    overflow-anchor: none;
}

body{
	font-family:'moon_flower_boldregular', Arial, sans-serif;
	width:100%;
	/*background:#5837cb;*/
}
/*zoom: 0.95;-moz-transform: scale(0.95);*/
a:link				{color:#fff;text-decoration:none;}
a:visited			{color:#fff;text-decoration:none;}
a:hover				{color:#e71a62;text-decoration:underline;}

a.normal:link		{color:#000000;text-decoration:underline;}
a.normal:visited	{color:#000000;text-decoration:underline;}
a.normal:hover		{color:#e71a62;text-decoration:underline;}

a.clen_proklik:link		{color:#000000;text-decoration:none;}
a.clen_proklik:visited	{color:#000000;text-decoration:none;}
a.clen_proklik:hover	{color:#e71a62;background-color:#000111;text-decoration:underline;}

.box_1110			{width:1110px;margin: 0 auto;}
.tlacitko			{cursor:pointer;height:33px;border-radius:30px;border:0px;background-image:linear-gradient(to right,#a22cca,#e22987);color:#fff;box-shadow:0px 8px 13px #c9d7eb;font-size:12pt;text-align:center;}/*todelete*/
.tlacitko_jinak		{padding: 0 20px 0 20px;width:auto;margin:0 auto;height:33px;display:grid;place-items:center;cursor:pointer;height:33px;border-radius:30px;border:0px;text-decoration:none;background-image:linear-gradient(to right,#a22cca,#e22987);color:#fff;box-shadow:0px 8px 13px #c9d7eb;font-size:14pt;text-align:center;}
.tlacitko_jinak:hover		{color:#cdd;text-decoration:none;border:2px solid #ccc;}
.tlacitko_jinak:visited		{color:#fff;text-decoration:none;}
.width-50			{width:50%;margin: 0 auto;}

.tlacitko_zpet_na_profil		{margin:0 auto;height:auto;width:170px;margin-top:20px;padding:15px;clear:both;}

.part_uvod			{background-color: #5837cb;height:880px;padding-top:30px;}
.header				{width:100%;height:80px;position:relative;margin-bottom:140px;}
.header_fixed		{position:fixed;top:0px;height:60px;z-index:100;background-color:#4426ac;padding-top:25px;border-bottom-left-radius:25px;border-bottom-right-radius:25px;opacity:0.9;}
.logo				{margin-left:50px;float:left;width:150px;height:56px;background:url("jinakk-logo.png");}
.prihlaseny_uzivatel{text-align:left;width:100%;clear:both;color:white;font-size:14pt;}
.navbat				{}
.nav_bar			{width:auto;float:right;text-align:right;text-transform:uppercase;font-size:16pt;color:#fff;padding-right:45px}
.nav_bar>ul			{list-style-type:none;margin:0;padding:0;}
.nav_bar>ul>li		{display:inline;margin-left:40px;}
.nav_bar>ul>li>a	{text-decoration:none;}
.navbar_static		{width:100%;height:60px;position:fixed;background-color:#4426ac;top:0px;z-index:100;display:none;}

/*Najdi*/
.najdi				{}
.najdi_header		{text-transform:uppercase;color:#fff;font-size:20pt;font-weight:bold;}
.najdi_form			{background-color:#fff;border-radius:25px;font-size:14pt;}
.najdi_form_jsem	{padding: 20px 30px 10px 30px;border-bottom:2px solid #cccccc;}
.najdi_form_hledam	{padding: 15px 30px 10px 30px;border-bottom:2px solid #cccccc;}
.najdi_form_vek		{padding: 15px 30px 10px 30px;border-bottom:2px solid #cccccc;}
.najdi_form_mesto	{padding: 15px 30px 10px 30px;}
.najdi_form_submit	{padding: 5px 0 20px 0;width:100%;text-align:center;}
.form_radio			{margin:0 6px 0 10px;}
.form_select_vek_od	{margin: 0 6px 0 10x;height:30px;width:80px;border-radius:15px;background-color:#fff;text-align:center;font-size:12pt;}
.form_select_vek_do	{margin:0;height:30px;width:80px;border-radius:15px;background-color:#fff;text-align:center;font-size:12pt;}
.form_select_mesto	{margin: 0 35px 0 6px;height:40px;width:170px;border-radius:15px;background-color:#fff;text-align:center;font-size:12pt;}

.tlacitko_najit_lasku		{width:200px;height:60px;}
.shoda 				{height:711px;background:url("shoda.png") no-repeat center center;background-size:contain;}

/*3 kroky*/
.kroky_3			{background-color:#fff;border-radius:25px;padding:30px 0 30px 0;}
.tri_kroky_jak		{text-align:center;}
.tri_kroky			{font-size:25pt;font-weight:bold;text-transform:uppercase;}
.jak_se_seznamit	{width:90%;font-size:14pt;}
.svisla_cara		{width:2px;height:90px;border-right:2px solid #cccccc;}
.tri_kolecka		{background:url("3kroky.png") no-repeat center center;background-size:contain;min-height:118px;}
.tlacitko_jdeme_na_to {display:flex;justify-content:center;align-items:center;height:100%;}

.part_zacnete		{background-color: #fff;width:100%;height:670px;margin-top:25px;}
.seznamte_se		{float:left;margin-left:404px;padding-top:130px;width:540px;color:#000000;font-size:14pt;}
.seznamte_se>p		{margin-top:30px;}
.seznamte_se_kruh	{float:left;margin: 85px 0 0 100px;width:535px;height:514px;background:url("zacnete-kruh.png");}
.popisek_prezdivka	{text-align:center;clear:both;width:100%;height:50px;color:#000;}
.part_clenove		{background-color: #e1e6ff;width:100%;height:500px;padding-top:155px;}
.clenove_a			{width:985px;height:330px;float:left;}
.clen_ramecek		{background-color:#fff;border-radius:15px;position:absolute;float:left;}
.clen_ramecek1		{width:255px;height:322px;position:relative;margin-top:0px;left:710px;z-index:4;}
.clen_ramecek2		{width:215px;height:282px;position:relative;margin-top:22px;left:350px;z-index:3;}
.clen_ramecek3		{width:215px;height:242px;position:relative;margin-top:42px;left:35px;z-index:2;}
.clen_ramecek4		{width:175px;height:202px;position:relative;margin-top:62px;left:-268px;z-index:1;}
.clen_ramecek1>.profilovka {margin:0 auto;width:120px;height:120px;margin-top:50px;}
.clen_ramecek1>.profilovka>.cont{background:-webkit-linear-gradient(270deg,#972dd6,#e52984 100%);width:120px;height:120px;border-radius:1000px;padding:10px;}
.clen_ramecek1>.profilovka>.cont>.box{background:url("../img/profile_pics/kocour.jpg");background-size:cover;width:120px;height:120px;border-radius: 1000px;}
.clen_ramecek1>.prezdivka	{text-transform:uppercase;font-size:18px;font-weight:bold;width:100%;text-align:center;margin-top:55px;}
.clen_ramecek1>.vek	{text-transform:uppercase;font-size:12px;width:100%;float:clear;text-align:center;margin-top:12px;}
.clen_ramecek2>.profilovka {margin:0 auto;width:120px;height:120px;margin-top:50px;}
.clen_ramecek2>.profilovka>.cont{background:-webkit-linear-gradient(270deg,#972dd6,#e52984 100%);width:120px;height:120px;border-radius:1000px;padding:10px;}
.clen_ramecek2>.profilovka>.cont>.box{background:url("../img/profile_pics/kocanda.jpg");background-size:cover;width:120px;height:120px;border-radius: 1000px;}
.clen_ramecek3>.profilovka {margin:0 auto;width:120px;height:120px;margin-top:50px;}
.clen_ramecek3>.profilovka>.cont{background:-webkit-linear-gradient(270deg,#972dd6,#e52984 100%);width:120px;height:120px;border-radius:1000px;padding:10px;}
.clen_ramecek3>.profilovka>.cont>.box{background:url("../img/profile_pics/kocanda.jpg");background-size:cover;width:120px;height:120px;border-radius: 1000px;}
.clen_ramecek4>.profilovka {margin:0 auto;width:120px;height:120px;margin-top:50px;}
.clen_ramecek4>.profilovka>.cont{background:-webkit-linear-gradient(270deg,#972dd6,#e52984 100%);width:120px;height:120px;border-radius:1000px;padding:10px;}
.clen_ramecek4>.profilovka>.cont>.box{background:url("../img/profile_pics/kocanda.jpg");background-size:cover;width:120px;height:120px;border-radius: 1000px;}
.clenove_b			{float:left;height:330px;padding:17px 0 0 115px;width:500px;}
.tlacitko_prohlednout_vse	{width:200px;height:60px;}
.clenove_ovladani	{clear:both;width:120px;float:right;height:auto;padding-top:24px;text-align:center;padding-right:20px;}
.arrow_left			{width:52px;height:52px;background:url("arrow-left-inactive.png");float:left;}
.arrow_right		{width:52px;height:52px;background:url("arrow-right-active.png");float:right;}

.part_cesta		{background-color: #5736cb;background:url("chci-te-najit.png");width:100%;height:460px;}
.part_cesta>.content		{padding-top:120px;padding-left:430px;}
.tlacitko_chci_te	{width:200px;height:60px;}


.part_skupiny	{text-align:center;height:200px;padding-top:200px;width:100%;}

.part_footer	{background-color: #3b2196;background:url("footer-background.png");width:100%;height:920px;}

.font_size_50	{font-size:50pt;}
.font_size_35	{font-size:35pt;}
.font_size_20	{font-size:20pt;}

.color_blue		{color:#5650ce;}
.color_black	{color:#000000;}
.color_red		{color:#e71a62;}
.color_white	{color:#fff;}

.stin			{box-shadow:0px 8px 13px #c9d7eb;}
.vycentrovat	{text-align:center;}
.w100			{width:100%;}
.w60			{width:60%;}
h1				{margin-top:20px;}

.message			{width:100%;text-align:center;padding:20px;margin:0 0 20px 0;border-radius:15px;}
.red				{border:solid 1px #F56400;background-color:#e71a62;color:#fff;}
.green				{border:solid 1px #007A00;background-color:#009ea7;color:#fff;}
.blue				{border:solid 1px #4325AA;background-color:#7965C2;color:#fff;}

/* PROFIL */
.header2{
	background-color:#5837cb;
	width:100%;
	height:220px;
	background:url("pozadi.png");
	background-repeat:no-repeat;
	background-size:110%;
	padding-top:35px;}
.box_1110_uzivatel	{width:1110px;height:auto;margin: 0 auto;margin-top:-450px;}
.nadpis				{color:#000;font-size:50pt;}
.drobeckovka		{color:#000;font-size:12pt;padding-top:15px;}

.tricols			{clear:both;width:100%;padding-top:270px;}
.col_a				{float:left;width:310px;height:auto;margin-right:60px;}
.col_b				{float:left;width:405px;height:auto;margin-right:60px;}
.col_c				{float:left;width:215px;height:auto;}
.col_del			{clear:both;width:100%;height:2px;}
.clearboth			{clear:both;width:100%;}
.boxik				{width:100%;margin:10px;height:auto;padding:10px;background-color:#fff;}
.boxik_foto{margin:10px;height:auto;padding:10px;background-color:#fff;}

.profil_box			{background-color:#fff;background:url("profil-foto-bg.png");width:100%;background-repeat:no-repeat;padding-bottom:35px;background-size:cover;background-position:center;}
.profil_box>.profilovka{background-size:120px 120px;background-repeat:no-repeat;width:120px;height:120px;border-radius: 1000px;margin:0 auto;margin-top:70px;}
.profil_box>.prezdivka	{width:100%;text-align:center;margin-top:40px;font-size:25pt;font-weight:bold;}	
.profil_box>.informace	{width:100%;text-align:center;margin-top:10px;font-size:13pt;font-weight:bold;}

.buttony			{width:100%;text-align:center;margin:0 auto;}
.button				{width:auto;height:50px;padding:0 30px;cursor:pointer;border-radius:30px;border:0px;background-image:linear-gradient(to right,#a22cca,#e22987);color:#fff;box-shadow:0px 8px 13px #c9d7eb;font-size:12pt;text-align:center;}
.button_message		{background:url("btn_message.png");}
.button_edit		{background:url("btn_edit.png");background-repeat:no-repeat;}
.button_settings	{background:url("btn_settings.png");}
.tlacitko_ulozit_profil{width:200px;margin-left:120px;}
.nahrat_profilovku	{width:280px;margin-top:25px;}
.inputWrapper 		{overflow:hidden;position:relative;cursor:pointer;width:250px;}
.fileInput {cursor:pointer;height:100%;position:absolute;top:0;right:0;z-index:99;font-size:50px;opacity:0;-moz-opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)}

.nadpis_nahrane_fotky	{width:200px;text-align:center;height:45px;margin:0 auto;}
.nadpis_nahrane_fotky_ico{background:url("ico_nahranych_fotek.png");width:32px;height:30px;float:left;}
.nadpis_nahrane_fotky_text{float:left;width:150px;font-weight:bold;margin:3px 0 0 7px;}
.nadpis_spravovat_fotky	{margin:0 auto;margin-top:10px;margin-bottom:10px;text-align:center;background-color:#7257d0;border-radius:15px;width:200px;padding:20px;}
.nadpis_spravovat_fotky a.normal{color:#fff;}
.profil_fotecka		{float:left;width:83px;height:97px;margin:5px;background-color:#7257d0;border-radius:15px;background-repeat:no-repeat;}
.profil_fotecka_fotky		{float:left;width:200px;height:200px;margin:10px 10px 0 10px;background-color:#7257d0;border-radius:15px;background-repeat:no-repeat;}
.plusko				{background:url('fotky_plusko.png');width:24px;height:24px;margin:35px 30px 30px 30px;background-repeat:no-repeat;}
#foto_loading		{display:none;width:100%;margin: 10px 0 5px 0;padding:15px 0 15px 0;background-color:#e71a62;color:#fff;border-radius:15px;text-align:center;}
#foto_loading_priprava		{display:none;width:100%;margin: 10px 0 5px 0;padding:15px 0 15px 0;background-color:#e71a62;color:#fff;border-radius:15px;text-align:center;}
.profil_menu		{width:100%;height:60px;}
.profil_nadpis_sekce{width:100%;font-size:20pt;font-weight:bold;padding-bottom:15px;margin-bottom:25px;border-bottom:1px dotted #d7dae5;}
.profil_radek		{width:100%;clear:both;border-bottom:1px dotted #d7dae5;padding:15px 0 35px 0;}
.profil_parametr	{float:left;height:100%;font-style:italic;}
.profil_hodnota		{float:right;height:100%;font-weight:bold;}
.textarea_jaky_jsem	{width:calc(100% - 24px);height:120px;border-radius:15px;border:1px solid #dddddd;z-index:5;font-size:10pt;padding:12px;}
.jaky_jsem			{font-weight:bold;}
.navrhy_fotecky		{width:100%;}
.navrhy_fotecka		{float:left;width:100px;height:120px;margin:3px;background-color:blue;border-radius:15px;}
.clenove_vpravo		{float:left;width:100px;height:120px;background-color:blue;border-radius:15px;background-repeat:no-repeat;background-size:cover;background-position:center;}
.navrhy_sipky		{clear:both;text-align:center;width:100%;margin:20px 0 10px 0;}
.image-container {
            width: 90px;
            height: 120px; /* Pevná výška okénka */
            overflow: hidden; /* Skrytí přebytečné části obrázku */
            position: relative;
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Umožní zarovnání obrázku bez deformace */
            position: absolute;
            top: 0;
            left: 0;
        }
		
input[type=text], input[type=password]		{height:40px;border-radius:10px;border:1px solid #dddddd;padding:0 15px 0 15px;}
.text_profil		{margin-top:-10px;width:240px;float:right;text-align:right;}
select{width:100%;height:32px;border-radius:10px;border:1px solid #dddddd;background-color:#fff;padding:0 10px 0 10px;}
.input_den			{width:60px;float:left;}
.input_mesic		{width:60px;float:left;}
.input_rok			{width:80px;float:left;}
.profil_hodnota>select{margin-top:-10px;float:right;text-align:right;background-color:#fff;}
.profil_chatovat{width:auto;height:55px;}

/*FOTKY EDITACE*/
.okenko_fotka		{float:left;width:220px;text-align:center;margin:15px;}
.ikona_vymazat		{width:25px;height:30px;background:url("photo-delete.png");float:right;margin:15px;}
.ikona_vychozi		{width:30px;height:30px;background:url("photo-vychozi.png");float:right;margin:15px 0 15px 15px;}
.ikona_vychozi.set	{background:url("photo-vychozi-set.png");}

/* ČLENOVÉ */
.vnitrni_obsah		{padding-top:270px;margin:0 auto;}
.clenove-filtry{
	
}
.filtr_clenu{
	padding:0 22px;
	margin-top:20px;
}
.vymazat_filtry		{margin-top:24px;margin-left:30px;padding-top:7px;font-size:10pt;}
.select_pohlavi		{width:100%;text-align:left;}
.select_mesto		{text-align:left;}
.select_vek			{text-align:left;}
.okenko_clen		{height:auto;background-color:#fff;border:1px solid #dfe9f9;border-radius:15px;margin:10px;}
.clen_fotecka		{float:left;width:83px;height:97px;margin:20px;background-color:blue;border-radius:15px;}
.stitek				{float:left;}
.clen_popisek		{width:225px;height:auto;margin:20px;}
.clen_jmeno			{width:100%;height:30px;margin-top:20px;font-size:15pt;font-weight:bold;}
.clen_naposledy		{width:auto;padding:5px;border-radius:10px;margin-top:0;font-size:12pt;text-align:left;}
.clen_naposledy.zelena {color:green;font-weight:bold;}

.clen_oslovit		{margin:10px;border-radius:30px;border:0px;background-image:linear-gradient(to right,#a22cca,#e22987);color:#fff;box-shadow:0px 8px 13px #c9d7eb;font-size:14pt;text-align:center;}
.clen_chatovat		{margin:10px;border-radius:30px;border:0px;background-image:linear-gradient(to right,#a22cca,#e22987);color:#fff;box-shadow:0px 8px 13px #c9d7eb;font-size:14pt;text-align:center;}
.clen_chatovat_s_userem		{width:250px;margin-top:5px;margin:0 auto;padding:10px 0;border-radius:30px;border:0px;background-image:linear-gradient(to right,#a22cca,#e22987);color:#fff;box-shadow:0px 8px 13px #c9d7eb;font-size:14pt;text-align:center;}
.clen_oslovit a:hover{text-decoration:none;color:#fff;font-weight:bold;}


/* LOGIN */
.registrace_leva	{float:left;background-color:#fff;width:50%;height:1256px;}
.destnik-ruzova-pozadi{background-color:#e71a62;}
.pod_destnikem {
	height: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top:10%;
}
.pod_destnikem img {
    max-width: 100%;
    height: auto;
}
.login_form{
	width:90%;
	margin:0 auto;
}

.obrazek_registrace	{background:url('registrace.png');width:500px;height:506px;margin:0 auto;margin-top:257px;}
.logo2{
	background:url('jinakk-logo2.png');
	background-repeat:no-repeat;
	width:204px;
	height:76px;
	margin-top:75px;
	float:right;
}
.vitejte			{color:#3f3a8f;margin-top:320px;text-align:center;}
.pojdme{
	color:#3f3a8f;
	margin:30px 0 30px 0;
	padding:0 12%;
}
.zarvlevo			{text-align:left;}
.login_form			{margin:0 auto;}
.login_text			{margin-bottom:30px;}
.login_fields		{color:#3f3a8f;margin-bottom:12px;font-weight:bold;}
.tlacitko_prihlasit	{margin-left:300px;margin-top:35px;width:160px;text-align:center;}

/* DRAG & DROP PHOTO UPLOADER */
#drop-region-plus{
	cursor:pointer;
	transition:.3s;
}
#drop-region-plus:hover{
	box-shadow:0 0 45px rgba(0,0,0,0.1);
	background-color: #e71a62;
}
#drop-region {
	background-color: #eee;
	border-radius:20px;
	box-shadow:0 0 35px rgba(0,0,0,0.05);
	width:400px;
	padding:60px 40px;
	text-align: center;
	cursor:pointer;
	transition:.3s;
	float:left;
}
#drop-region:hover {
	box-shadow:0 0 45px rgba(0,0,0,0.1);
	background-color: #ddd;
}

#image-preview {
	margin-top:20px;
}
#image-preview .image-view {
    display: inline-block;
	position:relative;
	margin-right: 13px;
	margin-bottom: 13px;
}
#image-preview .image-view img {
    max-width: 100px;
    max-height: 100px;
}
#image-preview .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
    background: rgba(255,255,255,0.5);
}
.vypis_fotky			{float:left;width:100%;}


/* Menu */
.mobilemenu {display:none;background:#fff;width:65%;margin:0 auto;border:solid 1px #eefefe;border-radius:10px;top:5%;left:10%;position:fixed;z-index:50;}
.mobilemenu ul {list-style:none;margin:0;padding:0;}
.mobilemenu li {margin-bottom:0;padding:5px;border-bottom:solid 1px #eeee;}
.mobilemenu a {display:block;padding:10px;background-color:#fff;font-size:18pt;color:#e41c63;}

/* Hamburger ikona */
#hamburger {display:none;position:absolute;top:40px;right: 40px; width: 40px;
  height: 30px;
  cursor: pointer;
  z-index:100;
}

#hamburger div {
  width: 100%;
  height: 7px;
  background-color: #e41c63;
  margin-bottom: 5px;
}

@media screen and (min-width: 990px) {
	.vitejte{
		margin-top:0;
	}
	.tlacitko_prihlasit{
		margin-left:0;
	}
	.registrace_leva {
		margin-right:50px;
	}
}
@media screen and (max-width: 990px) {
#hamburger {display:block;}
.mobilemenu {display:none;}
.part_zacnete, .part_cesta, .part_skupiny, .part_footer {display:none;}                                 /*  temp none*/
.nav_bar {display:none;}
.container, .box_1110 {width:100%}
.logo {margin-left:0;left:10px;position:relative;background:url("jinakk-logo2.png?v=1")}
.page-uvod .logo{
	background:url("jinakk-logo.png?v=1");
}
.header{margin-bottom:0;background:#fff;padding-top:35px;height:90px;border-bottom:7px solid #e41c63;}
.obalka{
	width: 59px;
    height: 41px;
    right: 100px;
    top: 32px;
    position: absolute;
    background: url("obalka.png?v=2");
    background-repeat: no-repeat;
}
.obalka.nova{
	background: url("obalka-nova.png?v=2");
}

/*.kroky_3>.svisla_cara{display:none;}
.kroky_3{padding:0;width:80%;border-radius:40px;margin-top:-444px;height:370px;text-align:center;}
.kroky_3{display:none;}
.tri_kroky{font-size:18pt;}
.tri_kroky_jak{width:100%;margin:25px 0 50px 0;}
.jak_se_seznamit{font-size:12pt;}
.tri_kolecka{margin:0 30px 20px 30px;}*/
.prihlaseny_uzivatel{display:none;}


/*Profil*/
.header2{height:85px;background:none;}
.drobeckovka, .nadpis{display:none;}
.tricols{padding:0;margin-top:65px;}
.box_1110_uzivatel{margin-top:0;float:left;width:100%}
.col_a{width:100%;margin:0;}
.col_b{width:100%;margin:0;}
.col_c{width:100%;margin:0;}
.boxik.profil_box{margin:0 auto;margin-bottom:20px;}
.boxik{width:100%;margin:0 auto;margin-bottom:20px;}

.profil_parametr{margin-right:10px;height:30px;}
.profil_hodnota{float:left;text-align:left;}
.profil_hodnota>select{text-align:left;}
.text_profil{text-align:left;}

/*Uzivatele*/
/*.vnitrni_obsah{padding:0;}
.vypis_clenu{width:95%;margin:0 auto;}
.filtr_clenu{padding: 18px;width: 90%;margin:0 auto;border-bottom:0;margin-top:40px;}
.select_pohlavi		{float:left;margin:0 15px 10px 0;text-align:left;}
.select_mesto		{float:left;margin:0 15px 10px 0;text-align:left;}
.select_vek			{float:left;margin:0 5px 10px 0;text-align:left;}
.vymazat_filtry{margin-top:0px;margin-left:0;}
.clen_popisek{width:50%;text-align:right;margin:0}
.clen_fotecka{margin:0}
.clen_jmeno{margin-top:10px;margin-left:15px;text-align:left;}
.message{padding: 20px 0 20px 0;}
.clen_naposledy{margin-left:12px;width:150px;}*/

/* Login */
.login_leva{display:none;}
.login_prava{width:100%;clear:both;height:auto;}
.logo2{margin-top:40px;margin-left:35px;float:none;}
.vitejte{margin-top:35px}
.login_text{width:70%}
.login_form>.tlacitko_prihlasit{margin-left:0}
.login_form .form-control{
	/*max-width:500px;*/
}

/* Registrace */
.registrace_leva{display:none;}
}

/* CHAT */


  
  /* Chat Area CSS Start */
  .chat-area header{
    display: flex;
    align-items: center;
    padding: 18px 30px;
  }
  .chat-area header .back-icon{
    color: #333;
    font-size: 18px;
  }
  .chat-area header img{
    height: 45px;
    width: 45px;
    margin: 0 15px;
  }
  .chat-area header .details span{
    font-size: 17px;
    font-weight: 500;
  }
  .chat-box{
    position: relative;
    min-height: 40vh;
    max-height: 40vh;
    overflow-y: auto;
    padding: 10px 30px 20px 30px;
    /*background: #f7f7f7;*/
    box-shadow: inset 0 32px 32px -32px rgb(0 0 0 / 5%),
                inset 0 -32px 32px -32px rgb(0 0 0 / 5%);
  }
  .chat-box .text{
    position: absolute;
    top: 45%;
    left: 50%;
    width: calc(100% - 50px);
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .chat-box .chat{
    margin: 0px 0;
  }
  .chat-box .chat p{
    word-wrap: break-word;
    padding: 8px 16px;
    box-shadow: 0 0 32px rgb(0 0 0 / 8%),
                0rem 16px 16px -16px rgb(0 0 0 / 10%);
  }
  .chat-box .outgoing{
    display: flex;
  }
  .chat-box .outgoing .details{
    margin-left: auto;
    max-width: calc(100% - 80px);
  }
  .outgoing .details p{
    background: #333;
    color: #fff;
    border-radius: 18px 18px 0 18px;
  }
  .chat-box .incoming{
    display: flex;
    align-items: flex-end;
  }
  .chat-box .incoming img{
    height: 35px;
    width: 35px;
  }
  .chat-box .incoming .details{
    margin-right: auto;
    margin-left: 10px;
    max-width: calc(100% - 130px);
  }
  .incoming .details p{
    background: #fff;
    color: #fff;
    border-radius: 18px 18px 18px 0;
  }
  .typing-area{
    padding: 18px 30px;
    display: flex;
    justify-content: space-between;
  }
  .typing-area input{
    height: 60px;
    width: calc(100% - 58px);
    font-size: 16px;
    padding: 0 13px;
    border: 1px solid #e6e6e6;
    outline: none;
    border-radius: 5px 0 0 5px;
  }
  .typing-area button{
    color: #fff;
    width: 55px;
    border: none;
    outline: none;
    background: rgb(29, 29, 29);
    font-size: 19px;
    cursor: pointer;
    opacity: 0.7;
    border-radius: 0 5px 5px 0;
    transition: all 0.3s ease;
  }
  .typing-area button.active{
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Responive media query */
  @media screen and (max-width: 450px) {
    .form, .user{
      padding: 20px;
    }
    .form header{
      text-align: center;
    }
    .form form .name-details{
      flex-direction: column;
    }
    .form .name-details .field:first-child{
      margin-right: 0px;
    }
    .form .name-details .field:last-child{
      margin-left: 0px;
    }
  
    .user header img{
      height: 45px;
      width: 45px;
    }
    .user header .logout{
      padding: 6px 10px;
      font-size: 16px;
    }
    :is(.user, .user-list) .content .details{
      margin-left: 15px;
    }
  
    .user-list a{
      padding-right: 10px;
    }
  
    .chat-area header{
      padding: 15px 20px;
    }
    .chat-box{
      min-height: 400px;
      padding: 10px 15px 15px 20px;
    }
    .chat-box .chat p{
      font-size: 15px;
    }
    .chat-box .outogoing .details{
      max-width: 230px;
    }
    .chat-box .incoming .details{
      max-width: 265px;
    }
    .incoming .details img{
      height: 30px;
      width: 30px;
    }
    .chat-area form{
      padding: 20px;
    }
    .chat-area form input{
      height: 40px;
      width: calc(100% - 48px);
    }
    .chat-area form button{
      width: 45px;
    }
  }
  

.nahled_posledni_zpravy{}
.chatovaci_okno{float:right;width:60%;}
.zahlavi_chatu{height:130px;}
.zahlavi_chatu>.jmeno_uzivatele{font-size:18pt;}
.zahlavi_chatu>.fotecka_uzivatele{width:83px;height:97px;margin:20px;background-color:blue;border-radius:15px;}

.fixed-bottom-textarea {
            width:100%;
			height:80px;
			position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 1rem;
            background-color: #f8f9fa; /* Světle šedé pozadí */
            z-index: 1030; /* Zajišťuje, že textarea bude nad ostatním obsahem */
			bottom: env(safe-area-inset-bottom, 0); /* Přizpůsobí se zařízení s výřezem */
			transform: translateY(0);
			will-change: transform;
        }
		
/* Kontejner zabírající celou výšku viewportu */
.container.chatbox {
    /*height: 100vh; /* Nastaví výšku na výšku okna */
    display: flex;
    flex-direction: column;
}

/* Záhlaví chatu - pevná výška */
.zahlavi_chatu {
    flex-shrink: 0; /* Zamezí zmenšování záhlaví */
}

/* Chat box - zabírá zbytek prostoru */
.chat-box {
    flex-grow: 1; /* Zajistí, že chat-box zabere dostupný prostor */
    overflow-y: auto; /* Umožní vertikální scrollování */
    padding-bottom: 10px; /* Rezerva pro případné odsazení zpráv od spodku */
}

/* Spodní formulář - pevně zarovnán na spodní část okna */
.typing-area {
    flex-shrink: 0; /* Zamezí zmenšování pole pro psaní */
    padding: 10px;
    background-color: white; /* Změňte podle potřeby */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.input {
    width: calc(100% - 40px); /* Rezerva pro tlačítko odeslání */
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #ccc;
    outline: none;
}

.odeslat_zpravu {
    background: none;
    border: none;
    font-size: 20px;
    color: #007bff; /* Barva ikony */
    cursor: pointer;
}

.odeslat_zpravu i {
    vertical-align: middle;
}


/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
	.tlacitko_jdeme_na_to	{margin:20px 0 20px 0;}
	.tri_kolecka 			{background-size:80%;}
	.shoda					{height:350px;}
}

/* Small devices (≥ 576px) */
@media (min-width: 576px) {
	.tlacitko_jdeme_na_to	{margin:20px 0 20px 0;}
	.shoda					{height:450px;}
}

/* Medium devices (≥ 768px) */
@media (min-width: 768px) {
	.tlacitko_jdeme_na_to	{margin:0;}
	.shoda					{height:550px;}
	.tri_kroky_jak			{padding:10px;}
}

/* Large devices (≥ 992px) */
@media (min-width: 992px) {
  /* Vaše vlastní styly pro větší displeje (notebooky, větší tablety) */
}

/* Extra large devices (≥ 1200px) */
@media (min-width: 1200px) {
  /* Vaše vlastní styly pro stolní počítače */
}

/* Extra extra large devices (≥ 1400px) */
@media (min-width: 1400px) {
  /* Vaše vlastní styly pro velké monitory */
}