@charset "UTF-8";


/* -------------------------------------------------------------- */



@font-face {
	font-family: Montserrat;
	src: url("../fonts/Montserrat-VariableFont_wght.ttf");
  }
  
@font-face {
	font-family: OpenSans;
	src: url("../fonts/OpenSans-VariableFont_wdth,wght.ttf");
  }

@font-face {
	font-family: FiraSans;
	src: url("../fonts/FiraSans-Regular.ttf");
  }




/* ---------------------------------- */




html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: 0px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



body {
  background-color: #000000;
  font-family: "OpenSans", sans-serif;
  text-transform: none;
}



img {
  max-width: 100%;
  line-height: 100%;
}





/*-------------------------------------------------------------*/






.header{
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 100%;
  z-index: 500;
  height: 60px;
  background-color: rgb(31 31 31);
  padding: 20px 18px 14px 18px;
}

.header__left{
  color: #0095ff;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.header__left i{
  font-size: 18px;
  margin-top: 2px;
}


.header__middle{
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.header__right i{
  font-size: 26px;
  cursor: pointer;
  color: #0095ff;
  margin-left: 4px;
}




.wrapper__detail .header{
  padding: 20px 8px 10px 8px;
  flex-wrap: wrap;
  align-content: center;
}

.header__right .chat_user{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
.wrapper__detail .header__left{
  color: #989898;
  font-weight: 500;
  font-size: 14px;
  padding-top: 7px;
}

.wrapper__detail .header__middle{
  font-size: 18px;
  font-weight: 600;
  padding-top: 4px;
  margin-right: 28px;
}




/*-------------------------------------------------------------*/



.footer{
  position: fixed;
  width: 100%;
  height: 66px;
  bottom: 0;
  left: 0;
  background-color: rgb(31 31 31);
  padding: 10px 18px;
  transition: all linear 0.2s;
  z-index: 501;
}

.footer__icons{
  display: flex;
  justify-content: space-between;
}

.footer__icon{
  display: flex;
  flex-direction: column;
}

.footer__icon i{
  font-size: 31px;
  color: #5e5e5e;
}

.footer__icon span{
  font-size: 12px;
  color: #4e4e4e;
}

.footer__icon__sel i, .footer__icon__sel span{
  color: #0095ff;
}








.vstup{
  width: 100%;
  /* background-color: rgb(238 238 238); */
  transition: all linear 0.2s;
  z-index: 90;
  display: flex;
  justify-content: space-between;
}

.vstup__mess{
  padding-top:2px;
  padding-left: 14px;
  border: none;
  border-radius: 18px;
  width: calc(100% - 32px);
  height: 34px;
  background-color: #303030;
  color: rgb(176, 176, 176);
  margin-left: 10px;
  margin-right: 10px;
  font-size: 16px;
}
.vstup__mess_text{
  font-size: 20px;
  /* height: 24px; */
  color: #ffffff;
  cursor: text;
  display: inline-block;
}

.vstup__ikony{
  font-size: 22px;
  color: #919191;
  margin-top: 4px;
}

.vstup__ikony i{

}

.vstup__ikony .vstup__ikony_mic{
  
}


.vstup__ikony_mic {
  margin-left: 8px;
}


.vstup__mess_kurzor{
  width: 2px;
  height: 23px;
  background-color: #ffffff;
  vertical-align: bottom;
  display: none;
  margin-bottom: 2px;
  margin-left: -3px;
  animation: kurzor 1s linear infinite;
}
@keyframes kurzor {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  95% {  
    opacity: 0;
  }
  100% {  
    opacity: 1;
  }
}


/*-------------------------------------------------------------*/



.chat{
  overflow: auto;
  width: 100%;
  /* height: calc(100vh - 90px); */
  padding-top: 64px;
  padding-bottom: 76px;
  transition: all linear 0.2s;
}

.chat__groups{
  padding: 0.2rem 1rem 0.8rem 1rem;
  width: 100%; 
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  flex-direction: column;
}

.chat__group{
  width: 100%; 
  display: flex;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dotted rgb(198 198 198);
} 

.chat__group__middle{
  margin-left: 12px;
}

.chat__group .avatar{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
}

.chat__group .title{
    font-weight: 600;
    font-size: 16px;
    margin-top: -4px;
    letter-spacing: -0.1px;
} 
.chat__group .text{
  font-size: 14px;
  margin-top: 0px;
  padding-right: 10px;
} 

.chat__group .time{
  font-size: 15px;
  font-weight: 600;
  color: #5e5e5e;
} 






/*-----------------------------------------------------------*/







.chat_meessages__wrap{
  overflow: auto;
  width: 100%;
  /* height: calc(100vh - 90px); */
  min-height: 100vh;
  padding-top: 60px;
  padding-bottom:156px;
  transition: all linear 0.2s;
  background-image: url(../images/pozadi2.png);
}

.chat_meessages{
  padding: 0.2rem 1rem 0.8rem 1rem;
  /* vertical-align: bottom;
  display: inline-block; */
  width: 100%; 
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  flex-direction: column;
  /* height: 82vh; */
  /* flex-flow: column wrap; */
}

.chat_mess{
  margin-top: 10px;
  align-self: flex-start;
  width: 100%;

  /* align-self: last baseline; */
}
.chat_mess p{
  line-height: 120%;
}

.chat__pes_hlavni{
  margin-top: 0px !important;
  background-color: white;
}
.chat__pes_horni{
  margin-top: 0px !important;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  /* border-top: 2px solid white; */
  background-color: #d9d9d9;
  position: fixed;
  width: 100%;
  z-index: 9999;
  height: 64px;
}
.chat__pes_nadpis{
  line-height: 120% !important;
  display: inline-block;
  margin-left: 0px;
  font-family: Montserrat;
  text-transform: none;
  height: 48px;
  line-height: 48px;
  padding: 0 20px;

  max-width: 100%;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;

  border: none;
}

.chat__pes_linka{
  margin-top: 14px;
  
}
.chat__pes_mezera{
  margin-bottom: 14px;
}


.chat__pes_jmeno{
  margin-top: 0 !important;

}


.chat__pes_right_mess{
  /* flex-direction: row-reverse; */
  display: inline-block !important;
  text-align: right;
  max-width: 84%;
}
.chat__pes_left_mess{
  /* flex-direction: row-reverse; */
  /* display: inline-block !important; */
  max-width: 84%;
}

.chat__doprava{
  text-align: right;
} 

.chat__doleva{
  text-align: left;
} 

/* .chat__doleva1{
  display: inline-block;
  margin-top: 10px;
}  */



.chat_mess__wrap{
  display: flex;
}

.chat_mess__avat{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #4e4e4e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  margin-top: 6px;
}

.chat__cas{
  text-align: right;
  font-size: 12px;
  margin-bottom: -4px;
  margin-top: 2px;
  color: #bababa;
}

.chat__like{
  position: absolute;
  bottom: -14px;
  left: 10px;
  background-color: #383838a8;
  border-radius: 10px;
  padding: 2px;
  display: flex;
  align-items: center;
  font-size: 15px;
}

.chat__like span{
  font-size: 13px;
}

.chat__schovana{
  display: none;
}

.chat__schovana_like{
  display: none;
}




.chat__sipka{
  display: inline-block;
  width: 10px;
  height: auto;
  vertical-align: bottom;
  margin-bottom: 14px;
}

.chat__vymena {
  font-size: 22px !important;
  font-weight: 500 !important;
}


.chat__pes_right_mess_obr{
  width: 286px;
}
.chat__pes_right_mess_obrr{
  width: 286px;
}

.chat_barva{
  position: relative;
  padding-left: 0.75rem;
  padding-right: 0.75rem; 
  padding-top: 0.5rem;   
  /* margin-right: 0.5rem; */
  border-radius: 10px;
  font-family: OpenSans;
  font-size: 18px;
  max-width: 80%;
}
.chat_barva__map{
  padding-left: 0.4rem;
  padding-right: 0.4rem;   
}
.chat_barva__map p{
  margin-top: 4px;  
}

.chat__modra{
  background-color: #383838 !important;
  padding-bottom: 0.6rem !important;
  color: rgb(255, 255, 255) !important;
  display: inline-block !important;
}
.chat__seda{
  background-color: #006497 !important;
  display: inline-block;
  padding-bottom: 0.6rem !important;
  color: rgb(208, 208, 208) !important;
}
.chat_barva p{
  font-size: 16px !important;
}
.chat__seda p{
  color: rgb(255, 255, 255) !important;
  font-size: 16px !important;
}

.chat__doleva_last{
  margin-top: 20px;
}


.chat__nadpis{
  font-size: 13px;
  text-align: center;
  line-height: 130%;
  margin-bottom: 6px;
  color: rgb(173, 173, 173);
}

.chat__ruzek{
  position: absolute;
  left: -5px;
  top: 12px;
  background-color: #006497 !important;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}
.chat__ruzek__seda{
    left: auto;
    right: -5px;
    background-color: #383838 !important;;
}

.chat__vymena{
  background: transparent;
  border: none;
  box-shadow: none;
  display:inline-block !important;
  box-shadow: none;
  -webkit-box-shadow:none;
  width: 285px !important;
  color: black !important;
  font-family: Montserrat;
}



.chat__map__marker{
  position: absolute;
  width: 40px;
  top: calc(50% - 60px);
  left: calc(50% - 20px);
}

.chat__map__marker{
  position: absolute;
}


.chat__image{
  display: none;
}
.chat__notsend{
  color: #0095ff;
  margin-top: 12px;
  font-size: 16px;
  margin-right: 8px;
  display: none;
}



.chat__missed{
  
}

.chat__missed i{
  color: rgb(0, 107, 246);
  display: inline-block;
}

.chat__missed p{
  display: inline-block;
  margin-left: 3px;
}


/* .chat__pes_schreiben{
  -webkit-animation: fadeinout 2s linear forwards;
  animation: fadeinout 2s linear forwards;
  animation-iteration-count: 3;
  margin-top: 16px;
}
.chat__pes_schreiben__text{

  text-align: right;
  width: 100%;
  margin-right: 10px;
  
}


@-webkit-keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}

@keyframes fadeinout {
0%,100% { opacity: 0; }
50% { opacity: 1; }
}


@media (max-width: 400px) {
  .obr__homeless{
    height: 320px;
  }
} */




/*-----------------------------------------------------------*/



.popup__likes{
  background-color: #121212;
  position: fixed;
  bottom: -300px;
  width: 100%;
  z-index: 999;  
  text-align: center;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  transition: all ease-out 0.3s;
}

.popup__likes__users{
  padding-bottom: 12px;
}

.popup__likes__user{
  display: flex;
  align-items: center;
  padding: 10px 20px 8px 20px;
  justify-content: flex-start;
  position: relative;
  border-bottom: 1px solid #222222;
}

.popup__likes__user:last-child{
  border-bottom: none;
}


.popup__likes__head{
  color: #a2a2a2;
  font-size: 20px;
  padding-top: 10px;
}

.popup__likes__user__name{
  color: #ffffff;
  font-size: 17px;
  margin-left: 15px;
}

.popup__likes__user__icon{
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 18px;
}

.popup__likes__avat {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #4e4e4e;
    display: flex;
    align-items: center;
    justify-content: center;
}






/*-----------------------------------------------------------*/


.record{
  position: absolute;
  width: 100%;
  height: 110px;
  bottom: 0;
  z-index: 99999;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  padding: 16px;
  display: none;
}
.record__top{
  display: flex;
  height: 40px;
  margin-bottom: 8px;
}
.record__bottom{
  height: 40px;
  display: flex;
  justify-content: space-between;
}


.record .time{
  color: white;
  font-size: 18px;
  width: 45px;
  margin-top: 3px;
}



.record i{
  color: white;
  font-size: 26px;
}

.record i:nth-child(2){
  color: #b70000;
  font-size: 29px;
}

.record i:nth-child(3){
  color: rgb(6 145 13);
  font-size: 29px;
}

.record .curve{
  width: calc(100% - 50px);
  height: 33px;
  margin-left: 10px;
  overflow: hidden;
  position: relative;
}
.record .curve img{
  max-width:none;
  width: auto;
  margin-top: -10px;
  -webkit-animation: vlny 40s linear forwards;
  animation: vlny 40s linear forwards;
  /* animation-iteration-count: 3; */
}
@-webkit-keyframes vlny {
  0% { margin-left: 310px; }
  100% { margin-left: -600px; }
}

.record .line{
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  top: 14px;
  background-color: #3b7495;
}

.voice__mess{
  /* display: none; */
}


/*-----------------------------------------------------------*/


.library{
  position: absolute;
  width: 100%;
  height: 100vh;
  bottom: 0;
  z-index: 990;
  background-color: #000000;
  padding: 1%;
  padding-right: 0;
  display: none;
}
.library__imgs{
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
  margin-top: 50px;
  padding-bottom: 50px;
  display: inline-block;
}
.library__img{
  width: 32%;
  background-size: cover;
  margin-bottom: 1%;
  margin-right: 1%;
  float: left;
  line-height: 0;
  border: 0;
}
.library__img img{
  width: 100%;
}

.library__img:nth-child(3n+3){
   margin-right: 0;
}

.library__img:nth-child(1){
  background-image: url(../images/gallery/gall1.jpg);
}
.library__img:nth-child(2){
  background-image: url(../images/gallery/gall2.jpg);
  /* box-shadow: 0px 0px 0px 4px rgb(0, 137, 234); */
}
.library__img:nth-child(3){
  background-image: url(../images/gallery/gall3.jpg);
}
.library__img:nth-child(4){
  background-image: url(../images/gallery/gall4.jpg);
}
.library__img:nth-child(5){
  background-image: url(../images/gallery/gall5.jpg);
}
.library__img:nth-child(6){
  background-image: url(../images/gallery/gall6.jpg);
}
.library__img:nth-child(7){
  background-image: url(../images/gallery/gall7.jpg);
}
.library__img:nth-child(8){
  background-image: url(../images/gallery/gall8.jpg);
}
.library__img:nth-child(9){
  background-image: url(../images/gallery/gall9.jpg);
}

.library__img:nth-child(10){
  background-image: url(../images/gallery/gall10.jpg);
}
.library__img:nth-child(11){
  background-image: url(../images/gallery/gall11.jpg);
}
.library__img:nth-child(12){
  background-image: url(../images/gallery/gall12.jpg);
}
.library__img:nth-child(13){
  background-image: url(../images/gallery/gall13.jpg);
}
.library__img:nth-child(14){
  background-image: url(../images/gallery/gall14.jpg);
}
.library__img:nth-child(15){
  background-image: url(../images/gallery/gall15.jpg);
}
.library__img:nth-child(16){
  background-image: url(../images/gallery/gall16.jpg);
}
.library__img:nth-child(17){
  background-image: url(../images/gallery/gall17.jpg);
}
.library__img:nth-child(18){
  background-image: url(../images/gallery/gall18.jpg);
}
.library__img:nth-child(19){
  background-image: url(../images/gallery/gall19.jpg);
}
.library__img:nth-child(20){
  background-image: url(../images/gallery/gall20.jpg);
}
.library__img:nth-child(21){
  background-image: url(../images/gallery/gall21.jpg);
}
.library__img:nth-child(22){
  background-image: url(../images/gallery/gall22.jpg);
}
.library__img:nth-child(23){
  background-image: url(../images/gallery/gall23.jpg);
}
.library__img:nth-child(24){
  background-image: url(../images/gallery/gall24.jpg);
}
.library__img:nth-child(25){
  background-image: url(../images/gallery/gall25.jpg);
}
.library__img:nth-child(26){
  background-image: url(../images/gallery/gall26.jpg);
}
.library__img:nth-child(27){
  background-image: url(../images/gallery/gall27.jpg);
}



.library__top{
  position: fixed;
  width: 100%;
  height: 46px;
  top: 0;
  z-index: 990;
  background-color: #000000;
  padding: 13px 10px 10px 10px;
  padding-right: 20px;
  text-align: right;
}

.library__top__text{
  color: rgb(171, 171, 171);
}




.library__bottom{
  position: fixed;
  width: 100%;
  height: 64px;
  bottom: 0;
  z-index: 991;
  background-color: #000000;
  padding: 10px;
  padding-right: 20px;
}

.library__vstup__mess{
  width: calc(100% - 80px);
  float: left;
  border-radius: 19px;

  padding-top: 2px;
  padding-left: 12px;
}

.library__vstup__mess::placeholder {
  color: rgb(120, 120, 120);
}

.library__vstup__ikony{
  float: left;
  margin-left: 6px;
}

.library__vstup__ikony i{
  font-size: 30px;
}





/*-----------------------------------------------------------*/




.nadpis{
  background-color: rgb(54, 54, 54);
  padding: 10px 20px;
  text-align: center;
}

.nadpis h1{
  color: white;
  font-size: 22px;
  font-family: Montserrat;
  font-weight: 500;
}


.chat__pes_schreiben__text{ 
  margin-top: 12px;
}



.tlac__odeslat{
  font-family: Montserrat;
  font-weight: 500;  
  background-color: rgb(68, 125, 211) !important;
}




/*---------- klavesnice ------------*/


.klavesnice_wrap{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 320px;
  overflow: hidden;
  /* pointer-events: none; */
}

.klavesnice{
  width: 100%;
  position: fixed;
  left: 0;
  bottom: -254px;
  transition: all linear 0.2s;
  z-index: 99;
}

.klavesnice img{
  width: 100%;
}

.klavesa{
  position: absolute;
  z-index: 99;
  width: 82px;
  top: -4px;
  left: 116px;
  display: none;
  text-align: center;
}
.pismeno{
  position: absolute;
  top: 27px;
  left: 0;
  font-family: FiraSans;
  font-size: 41px;
  color: white;
  width: 100%;
}


/*---------- vstupni pole ------------*/








.voice_mess{
  width: 100%;

  padding-top: 0.3rem;
  padding-bottom: 0.4rem !important;
}

.voice_mess__controls{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.voice_mess__play{
  font-size: 22px;
  margin-right: 8px;
  color: #116494;
  cursor: pointer;
}


.voice_mess__wrap .linka{
  width: calc(100% - 46px);
  /* margin-left: 9%; */
  height: 2px;
  border-radius: 3px;
  /* background-color: #92c4e0; */
  margin-bottom: 20px;
  margin-top: 14px;
  position: relative;
}

.voice_mess__wrap .tecka{
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #4584a2;
  left: -5px;
  top: -7px;
  /* transition: all linear 30s; */
}


.voice_mess__wrap .cas{
  float: left;
  margin-bottom: -4px;
  margin-top: -16px;
  margin-left: 36px;
  font-size: 14px;
  position: relative;
  z-index: 9;
}

.voice_mess__wrap .wave{
  position: absolute;
  width: calc(100% - 10px);
  height: 46px;
  left: 0;
  top: -22px;
}

.voice_mess__wrap .wave img{
  width: 100%;
  height: 46px;
}


.voice_mess .user{
  width: 50px;
}