@charset "utf-8";
/* CSS Document */

/* Başlıklar */
h1{font: bold 50px/50px 'Comfortaa', cursive;color: #000;}
h2{font: 45px/50px 'Comfortaa', cursive;color: #000;}
h3{font: 35px/40px 'Comfortaa', cursive;color: #000;}
h4{font: 30px/40px 'Poppins', sans-serif;color: #000;}
h5{font: 25px/25px 'Poppins', sans-serif;color: #000;}
body{ font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; background: url(../images/mobil-main-bg.png) #f8f9fa no-repeat; background-position: right top;}
@media (min-width: 768px) { body { background: url(../images/main-bg.png) #f8f9fa no-repeat; background-position: right top;}}
::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}

@media (min-width: 768px) {
	
	::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}



}




#main{position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow: hidden;}
a{-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
.pad0{padding: 0;}
.logo{margin-top: 20px;}
.header{position: relative; min-height: 72px;background: url(../images/body.png) no-repeat; background-size: contain; z-index: 1001;}
/* toolbar başlangıç */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.tool{position: absolute; left: 0; right: 0px; top: 0; min-height: 45px;  padding-left: 5px;}
@media (min-width: 992px) {.tool { left: 260px;padding-left: 20px; background: none;}}

.tool-chan{position: relative; width: 300px; min-height: 45px; margin-left: 22px; padding-top: 3px;z-index: 500;}
@media (min-width: 768px) {.tool-chan {position: relative; float: right; width: 770px; min-height: 45px; margin-left: 5px; margin-right: 20px;padding-top: 10px; z-index: 500;}}
.tool-chan-img{ position: absolute; float: left; width: 25px; min-height: 25px; margin-right: 2px;border-radius: 60%; z-index: 3; }
.tool-chan-img img{ margin-left: -65px; margin-top: 7px; width: 10px; height: 10px; margin-right: 3px;}
@media (min-width: 768px) {.tool-chan-img img { margin-left: -18px; margin-top: 6px; width: 16px; height: 16px; margin-right: 1px;}}
.tool-chat-kanal{position: fixed; right: 0; width: 80px; min-height: 25px; background-color: #FFF; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #000; font-weight: 300; font-size: 12px; text-align: center; border-radius: 38px; margin-top: 1px; margin-right: 35px; padding-top: 4px;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;-webkit-appearance: none;}
@media (min-width: 768px) {.tool-chat-kanal { position: relative; float: left; width: 85px;min-height: 30px; font-size: 12px; margin-top: 0px; margin-right: 0px;padding-top: 7px;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;-webkit-appearance: none; color: #000;}}
.tool-kanal{ float: left; margin-left: 135px;}
.tool-kanal-kisi{margin-left: 15px;}
.dj{width: 90px; float: left; margin-left: -11px; margin-top: -3px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: none;}
@media (min-width: 768px) {.dj { width: 140px;margin-left: 10px;}}
.dj img{ float: left; width: 30px; height: 32px; border-radius: 50%; margin-right: 10px; margin-top: 3px;}
@media (min-width: 768px) {.dj img { width: 35px; height: 37px; margin-top: 1px;}}
.dj strong{display: block; font-size: 11px; color: #16ccbb;}
@media (min-width: 768px) {.dj strong { font-size: 12px;}}
 .equalizer {position:absolute;top: -21px;margin-left: 20px;font-size: 0;text-align: center;padding: 24px;}
@media (min-width: 768px) {.equalizer { top: -15px;}}
 .equalizer-bar {transition: transform 150ms linear;display: inline-block;background: #16ccbb;width: 2px;height: 20px;border-radius: 1px;margin: 0 1px;transform: scaleY(0.1);transform-origin: center center;}

#m-message{position: fixed; left: 110px; top: 6px; background: none; border:none; outline: none; cursor: pointer; z-index: 1001;display:inline-block;}
#m-message-list{position: fixed;width:265px; height: 100%; display:none;overflow:auto;left:0;top: 0px;padding-top: 5px; padding-left: 15px; z-index:2000;font-size: 15px; color: #FFF; background: url(../images/mobil-main-bg.png) #f8f9fa no-repeat; background-position: right top;  padding-bottom: 15px; -webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1); box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);}
.m-message-title{display: block; width: 180px; min-height: 35px; margin-top: 5px; margin-left: -35px; margin-bottom: 30px; color: #000; font-size: 17px; text-align: left; padding-top: 7px; padding-left: 35px;}
.m-kanal-title{display: block; width: 170px; min-height: 35px; margin-top: -3px; margin-left: -25px; margin-bottom: 10px; color: #16ccbb; font-size: 17px; text-align: left; padding-top: 7px; padding-left: 35px;}

.m-message-title img{margin-top: -2px;}
.m-message-close{position: absolute; right: 0; top: 17px; background: none; border: none; outline: none; cursor: pointer;}
.ust-kanal{ display: none;  width: 105px; min-height: 30px; margin-left: 42px; float: left; margin-right: 10px; margin-top: 9px; margin-bottom: 5px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; color: #FFF; }
@media (min-width: 992px) {.ust-kanal { width: 275px; margin-left: 135px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}}
.ust-kanal img{float: left;}
.ust-kanal .chan{ float: left; color: #FFF; font-weight: bold; font-size: 16px; margin-left: 6px;text-shadow: 0 3px 2px rgba(0,0,0,.1); }
#menu{position: fixed; right: 10px;top: 4px; font-size: 14px;cursor:pointer;display:inline-block; z-index: 1001;}
@media (min-width: 768px) {#menu { right:400px;top: 15px;}}
#menu-list{position: fixed;width:185px;display:none;overflow:auto;left:0;top: 0px;padding-top: 5px; z-index:2000;text-align: center;font-size: 15px; color: #FFF; background: url(../images/mobil-main-bg.png) #f8f9fa no-repeat; background-position: left top;  padding-bottom: 15px; -webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1); 
box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);}
#menu-list button{background: none; color: #000;}
@media (min-width: 768px) {#menu-list {width:170px;right: 0;left: auto;top: 0px;}}
#kanal{position: fixed; left: 55px;top: 8px; font-size: 10px;cursor:pointer;display:inline-block; z-index: 1001; color: #000;}
@media (min-width: 768px) {#kanal { right: 75px;top: 10px;}}
#kanal-list{position: fixed;width:245px; height: 100%; display:none;overflow:auto;left:0;top: 0px;padding-top: 5px; z-index:2000;text-align: center;font-size: 16px; color: #000; background: url(../images/mobil-main-bg.png) #f8f9fa no-repeat; background-position: right top;  padding-bottom: 35px; -webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1); 
box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);}
.chan-info{position: relative; float: right; width: 20px; min-height: 12px; border-radius: 38px; background-color: #ff0074; color: #FFF;text-align: center;font-weight: bold; margin-left: -7px; font-size: 9px; padding-top: 1px;}

#kanal-list ul button{margin-right: 4px; margin-top: 1px;}
#kanal-list ul button span{color:#FFF;}
@media (min-width: 768px) {#kanal-list {width:170px;right: 0;left: auto;top: 45px;}}
#kanal-list h5{color: #000; font-weight: bold;}
#kanal-list ul{list-style: none; margin-left: -35px;}
#kanal-list li {color: #16ccbb;width: 95%; min-height: 35px; line-height: 25px; text-align: left; font-weight: bold; padding-left: 20px; padding-top: 4px;border-radius: 38px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s; cursor: pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 1px;}
#kanal-list li:hover{background: #ff0074;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s; color: #FFF;}
.m-secili-kanal{background-color: #ff0074; color: #FFF !important;}
.secili-kanal{background-color: #f8f9fa}
#kanal-list li a{color: #000;}
.kanal-mesaj{position: absolute; width: 10px; height: 10px; border-radius: 60%; background-color: #ff0074; margin-top: -24px; margin-left: -2px; font-size: 9px; color: #16ccbb; text-align: center; font-weight: bold;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01);text-shadow: 0 3px 2px rgba(0,0,0,.2); display: none;}
.m-kanal-gelen-mesaj{float: left;  margin-right: 8px; width: 15px; height: 15px; border-radius: 60%; background-color: #ff0074; color: #FFF; margin-top: 5px; margin-left: 2px; font-size: 11px; text-align: center; font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; line-height: 17px;}
#kanal-list li a:hover{ opacity: 0,9; text-decoration:none;}
.join-chat{ -webkit-animation-duration: 3s;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: 1;}
.mobil-mesaj{position: absolute;width: 16px;height: 16px;line-height: 16px;border-radius: 60%;background-color: #ff0074;margin-top: -27px;margin-left: 16px;font-size: 9px;color: white;text-align: center;font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01);text-shadow: 0 3px 2px rgba(0,0,0,.2);}
.bildirim-mesaj{position: absolute; width: 22px; height: 22px; border-radius: 60%; background-color: #ff0074; margin-top: 5px; margin-left: 5px; font-size: 13px; color: #FFF; text-align: center; font-weight: bold;-webkit-appearance: none; box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01);overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; }
.btn{background: #16ccbb; border:none; color: #FFF; border-radius: 4px; font-size: 14px; font-weight: bold; margin-top: 5px; width: 95%;}
.btn-secondary{background: #ff0074;}
.btn-secondary:hover{background: #CCC;}
.bstn:focus{border:none;}
.btn:hover{background: #ff0074;}
.btn:focus, .btn.focus {outline: 0;box-shadow: none;}
.modal h5{color: #16ccbb; font-weight: bold;}
.modal-inp{width: 95%; min-height: 50px; margin-top: 10px; margin-bottom: 10px; border-radius: 38px;-webkit-appearance: none;box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01); border: none; background-color: #FFF; outline: none; padding-left: 30px;}
.alt{width: 100%; min-height: 10px;border-bottom: 1px dashed #eff1f1; margin-bottom: 3px; }
.menu-ac{position: fixed; z-index: 3000;}



/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* toolbar bitti */









/* profil alan başladı */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.left-col{position: absolute; height: 100%; width: 100%; top: 0px; left: 0; bottom: 0; background: url(../images/left-col.png) #f8f9fa no-repeat; overflow: auto;box-shadow: none; z-index: 1000; }
@media (min-width: 992px) {.left-col { width: 270px;box-shadow: 0 16px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.06);}}
.chat-container {height: 100%;position: fixed;top: 0;z-index: 1002;width: 100%;left: -100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out; display: none;}
@media (min-width: 992px) {.chat-container { width: 270px;left: 0;}}
.chat-container.chat-open {left: 0; }
@media (min-width: 992px) {.chat-container.chat-open { left: -270px;}}
.toggle-chat {top: -67px;float: left; margin-left: 115px; height: 25px;width:24px;position: relative;cursor: pointer;padding: 15px 11px;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;background: url(../images/sen.png) no-repeat;  z-index: 1001; display: block; margin-top: 5px;display: none;}
.toggle-mesaj{position: absolute; float: left; font-size: 12px; top: 1px; left: 30px; color: #FFF; font-weight: bold;}
@media (min-width: 992px) {.toggle-chat { left: 230px; background: url(../images/kapa.png) no-repeat; display: none;}}
.toggle-chat.active {position: relative; float: right; width: 35px; height: 50px; margin-right: 15px; background: url(../images/kapa.png) no-repeat; z-index: 1005; }
@media (min-width: 992px) {.toggle-chat.active { left: 35px; background: url(../images/ac.png) no-repeat;}}
.profil-alan{width: 220px; min-height: 55px; margin: auto; margin-bottom: 10px; text-align: center;}
.profil-alan span{font-size: 9px; cursor: pointer;}
.user-img {width: 52px; min-height: 64px; margin: auto;}
.user-img img{border-radius: 60%;box-shadow: 0 10px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01); margin-top: 5px; margin-bottom: 10px;}
.profil-alan-nick{text-align: center; color: #16ccbb; font-weight: bold; margin-top: -22px; font-size: 18px;}
.profil-alan-durum{ position: relative; top: 5px;}
select{border-radius: 38px; margin-top: 10px; margin-bottom: 8px; font-size: 11px; border: none; padding: 4px; padding-right: 20px; padding-left: 10px; outline: none; cursor: pointer;-webkit-appearance: none;-moz-appearance: none; appearance: none;background: linear-gradient(#FFF, #FFF) no-repeat, linear-gradient(-135deg, rgba(255,255,255,0) 50%, #FFF 50%) no-repeat, linear-gradient(-225deg, rgba(255,255,255,0) 50%, #FFF 50%) no-repeat, linear-gradient(#16ccbb, #16ccbb) no-repeat; background-color: #FFF;background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%; background-position: right 20px center, right bottom, right bottom, right bottom;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
option{color: #CCC;}
.img-yukle{width: 105px; min-height: 28px;  margin: auto; text-align: center;}
.img-yukle input{max-width: 80px; min-height: 20px; overflow: hidden;}
.img-yukle label{font-size: 12px; color: #333; cursor: pointer; margin-top: 5px; margin-bottom: 5px;}
.img-yukle label img{margin-top: -2px;}
.yukle{width: 80px; min-height: 28px;  margin: auto;  text-align: center; font-size: 11px; color: #CCC; padding-top: 4px; }
.ileti{width: 99%; min-height: 20px;font-size: 11px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   margin-top: 15px; margin-bottom: 15px; text-align: center; padding: 12px; font-weight: normal;-webkit-appearance: none;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; border-radius: 38px; background-color: #FFF;}
.ileti img{width: 28px; height: 28px;  margin-left: 4px; margin-right: 4px;}
.ileti-btn{width: 100%; background: none; border: none; outline: none; cursor: pointer;}
.ileti-btn:focus, .bilgi-btn.focus {outline: 0;box-shadow: none;}
.ileti-inp {width: 100%;min-height: 33px;margin-top: 10px;margin-bottom: 10px;border-radius: 38px;-webkit-appearance: none;-webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);border: none;background-color: #FFF;outline: none;padding-left: 30px;font-size: 11px;}
.my-profil{width: 235px; min-height: 100px; margin: auto; margin-top: 5px;}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {background-color: #ff0074;border: none;color: #FFF;}
.nav-tabs .nav-link {background-color: #16ccbb;border:none;border-radius: 38px;margin-left: 5px;font-size: 12px;color: #FFF;margin-top: 15px;margin-bottom: 15px;}
.nav-tabs {border-bottom: none;}
.my-nav-title{color: #16ccbb !important; font-size: 20px !important; font-weight: bold !important; background: none !important; margin-top: -20px !important;}
.my-profil-mesaj{ position: relative; width: 225px; min-height: 60px; margin-bottom: 5px; margin-top: 20px; cursor: pointer; border-bottom: 1px dotted #CCC;}
.my-profil-mesaj button{position: absolute; float: right; margin-top: -13px;}
@media (min-width: 768px) {	.my-profil-mesaj button span{color: #CCC; display: none;}}
.my-profil-mesaj button span{color: #CCC;}
@media (min-width: 768px) {	.my-profil-mesaj:hover button span{color: #CCC; display: block;}}
.my-profil-mesaj:hover button span{color: #CCC;}
.my-porfil-mesaj-img{float: left; margin-right: 5px;}
.gelen-msj{position: absolute; width: 20px; height: 20px; border-radius: 60%;background-color: #ff0074; margin-top: -55px; text-align: center; color: #FFF; font-size: 12px; padding-top: 1px; font-weight: bold;}
.my-porfil-mesaj-img img{border-radius: 60%; width: 50px; height: 52px;} 
.my-porfil-mesaj-default{float: left; margin-right: 5px;}
.my-porfil-mesaj-default img{border-radius: 60%; width: 50px; height: 50px;}
.my-porfil-mesaj-nick{width: 165px;float: left;font-size: 12px;margin-top: -12px;}
.profil-nick{ float: left; width: 120px; margin-left: 10px; min-height: 10px; margin-right: 2px;color: #16ccbb;  font-weight: bold;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mesaj-time{float: left; width: 30px; font-size: 9px; padding-top: 5px;color: #16ccbb;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.my-porfil-mesaj-box{ float: left; width: 165px; min-height: 40px; background-color: #FFF; border-radius: 38px; margin-top: 2px; padding-left: 15px; padding-right: 5px; padding-top: 9px; font-size: 13px; color: #000;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;-webkit-appearance: none;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
.my-porfil-mesaj-box:hover{background-color: #ff0074;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s; color: #FFF;}


.my-porfil-mesaj-box img{margin-top: -2px; margin-right: 2px; margin-left: 2px; width: 16px; height: 16px;}
.my-profil-arkadas{position: relative; width: 225px; min-height: 60px; margin-bottom: 5px; margin-top: 20px; cursor: pointer; border-bottom: 1px dotted #CCC;}
.my-porfil-arkadas-img{float: left; margin-right: 5px;}
.my-porfil-arkadas-img img{border-radius: 60%; width: 50px; height: 52px;}
.my-porfil-arkadas-default{float: left; margin-right: 5px;}
.my-porfil-arkadas-default img{border-radius: 60%; width: 50px; height: 50px;}
.cevrim-ici{position: absolute; width: 15px; height: 15px; border-radius: 60%;background-color: #16ccbb; margin-top: -50px; text-align: center; color: #FFF; font-size: 12px; padding-top: 1px; font-weight: bold;}
.cevrim-disi{position: absolute; width: 15px; height: 15px; border-radius: 60%;background-color: #FFF; border: 3px solid #ff0074; margin-top: -50px; text-align: center; color: #FFF; font-size: 12px; padding-top: 1px; font-weight: bold;}
.mesgul{position: absolute; width: 15px; height: 15px; border-radius: 60%;background-color: #ff0074; margin-top: -50px; text-align: center; color: #FFF; font-size: 12px; padding-top: 1px; font-weight: bold;}
.dead{position: absolute; width: 15px; height: 15px; border-radius: 60%;background-color: #CCC; margin-top: -50px; text-align: center; color: #FFF; font-size: 12px; padding-top: 1px; font-weight: bold;}
.disarda{position: absolute; width: 15px; height: 15px; border-radius: 60%;background-color: #fbb00f; margin-top: -50px; text-align: center; color: #FFF; font-size: 12px; padding-top: 1px; font-weight: bold;}
.my-porfil-arkadas-box{ float: left; width: 165px; min-height: 30px; padding-left: 11px; padding-right: 5px; padding-top: 3px; font-size: 13px; color: #CCC;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
.porfil-arkadas-nick{width: 165px;float: left;font-size: 16px;margin-top: -4px;}
.arkadas-nick{float: left; width: 105px; font-size: 16px;margin-left: 10px; color: #16ccbb; font-weight: bold;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.arkadas-durum{float: left; width: 45px; font-size: 9px; padding-top: 8px;color: #16ccbb;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;}
/* profil alan bitti */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

/* chat alan başladı */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.tr_chat{position: absolute; left: 0; top: 40px; bottom: 35px; right: 120px; overflow: auto;  padding: 4px 2px 2px 2px;}
@media (min-width: 992px) {.tr_chat { left: 269px;right: 370px;}}
@media (min-width: 768px) {.tr_chat {bottom: 98px;right: 370px;padding: 2px 3px 3px 3px;top: 0; }}
.tr_chat_ozel{position: absolute; left: 0; top: 45px; bottom: 35px; right: 0; overflow: auto;  padding: 2px;padding-top: 95px;}
@media (min-width: 992px) {.tr_chat_ozel { left: 269px;right: 170px;}}
@media (min-width: 768px) {.tr_chat_ozel {bottom: 98px;right: 170px;padding: 8px;padding-top: 95px; }}
.chat_ozel{position: fixed; left: 0; max-height: 105px; top: 0; right: 0; background: url("../images/m-ozel-bg.png") no-repeat; background-position: right 10px top; z-index: 1001; padding-top: 4px;padding-left: 50px;}
@media (min-width: 992px) {.chat_ozel {left: 270px;right: 190px;  }}
@media (min-width: 768px) {.chat_ozel {right: 190px; padding-left: 20px; background: url("../images/ozel-bg.png") no-repeat; background-position: right 51px top;z-index: 1001;}}
.chat_ozel-img{float: left; margin-left: 2px; margin-right: 4px;}
.chat_ozel-img img{ width: 50px; height: 52px; border-radius: 60%;}
.chat_ozel-durum{float: left; margin-left: 2px;}
.chat_ozel-durum-nick{ width: 80px; font-size: 11px; font-weight: bold;color: #16ccbb; padding-top: 8px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media (min-width: 768px) {.chat_ozel-durum-nick {width: 300px;font-size: 16px;padding-top: 5px;  }}
.chat_ozel_button{width: 140px;position: fixed;right: 3px;z-index: 1000;}
@media (min-width: 768px) {.chat_ozel_button {right: 190px; }}
.chat_ozel_left{ float: left; width: 45px;  margin-top: 15px; cursor: pointer;}
.chat_ozel_left label{ padding-left: 25px; padding-top: 4px; min-height: 25px; cursor: pointer; background: url(../images/resim_gonder.png) no-repeat; background-position: left; color: #FFF; font-size: 11px;}
.message-back{position: fixed; left: 750px; top: 15px; background: none; outline: none; cursor: pointer; border: none;}
.arkadas-ekle{position: relative; z-index: 1005; font-size: 11px; margin-top: 5px; color: #CCC; float: left;}
.arkadas-ekle button{ width: 16px; height: 16px; background: url(../images/arkadas-ekle.png) no-repeat;}
.arkadas-ekle button:focus{background: url(../images/arkadas-sil.png) no-repeat;}
.arkadas-engelle{position: relative; z-index: 1005;font-size: 11px; margin-top: 4px; color: #CCC; float: left; margin-left: 10px;}
.arkadas-engelle button {width: 16px; height: 16px; background: url(../images/ozel-engelle.png) no-repeat;}
.arkadas-engelle button:focus {width: 16px; height: 16px; background: url(../images/ozel-engel-kaldir.png) no-repeat;}
.ozel-ileti{ float: left; width: 99%; min-height: 20px; color: #333; font-size: 11px; padding-left: 5px; padding-right: 5px; margin-top: -25px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@media (min-width: 768px) {.ozel-ileti {padding-left: 10px; padding-right: 10px;  }}
.ozel-ileti img{width: 24px; height: 24px; background-color: #16ccbb; margin-left: 4px; margin-right: 4px; border-radius: 60%; }
.tr_chat::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
.tr_chat::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.tr_chat::-webkit-scrollbar-thumb:hover { background-color: #ff0074;}
.tr_chat_ozel::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
.tr_chat_ozel::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.tr_chat_ozel::-webkit-scrollbar-thumb:hover { background-color: #ff0074;}
@media (min-width: 768px) {
 .tr_chat::-webkit-scrollbar {width: 2px;background-color: #eaeaea;border-left: 1px solid #ccc; }
.tr_chat::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.tr_chat::-webkit-scrollbar-thumb:hover { background-color: #ff0074;}
.tr_chat_ozel::-webkit-scrollbar {width: 4px;background-color: #eaeaea;border-left: 1px solid #ccc;}
.tr_chat_ozel::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.tr_chat_ozel::-webkit-scrollbar-thumb:hover { background-color: #ff0074;}
}

.message-box{ position: relative; float: left; width: 100%; margin-left: 2px; margin-bottom: 3px; margin-top: 6px; color: #000;}
@media (min-width: 768px) {.message-box {position: relative; float: left; width: 100%; margin-left: 2px; margin-bottom: 5px; margin-top: 4px; color: #000; }}
.message-box-img{float: left; margin: 0px;width: 24px; height: 26px; display: none;}
@media (min-width: 768px) {.message-box-img {width: 35px; height: 37px;margin: 0px; }}
.message-box-img img{ float: left; width: 24px; height: 26px; border-radius: 60%; margin-right: 4px;cursor: pointer; margin-top: -1px;}
@media (min-width: 768px) {.message-box-img img {width: 35px; height: 37px; margin-left: 4px; margin-right: 4px;margin-top: 0px; }}
.message{float: left;  width: calc(100% - 26px); }
@media (min-width: 768px) {.message {width: calc(100% - 50px);}}
.message-box-nick{float: left; margin-left: 9px; font-size: 11px; margin-top: -1px; color: #000; cursor: pointer; font-weight: bold;-webkit-appearance: none;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; background-color: #FFF; padding-left: 7px; padding-right: 7px; padding-top: 1px; border-radius: 8px;}
.message-box-nick::before{ position: absolute; float: left; margin-left: -7px; color: #000; content: "<"; }
.message-box-nick::after{ position: absolute; float: right; margin-right: 4px; color: #000; content: ">"; }
@media (min-width: 768px) {.message-box-nick {margin-top: 0px;font-size: 13px; }}
.message-box-nick span{color:#16ccbb; }
.message-box-time{ margin-left: 10px;}
.message-box-msj{ float: left;  margin-left: 2px; background-color: #FFF; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; border-radius: 38px; font-size: 11px; text-align: left; margin-top: -3px; font-weight: bold;-webkit-appearance: none;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;word-break: break-word;}
@media (min-width: 768px) {.message-box-msj {margin-left: 3px;padding-left: 12px; padding-right: 12px; padding-top: 3px; padding-bottom: 4px;font-size: 13px; font-weight: bold;margin-top: -3px;-webkit-appearance: none;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;word-break: break-word;}}
.message-box-msj img{ width: 16px; height: 16px; margin-left: 2px; margin-right: 2px;}
@media (min-width: 768px) {.message-box-msj img {width: 24px; height: 24px; margin-left: 4px; margin-right: 4px; }}
.join-mode{font-family: 'Comfortaa', cursive;float: left; width: 100%; min-height: 12px; font-size: 10px;  color: #999;  margin-bottom: 6px; padding-left: 10px;}
@media (min-width: 768px) {.join-mode {padding-left: 20px;font-size: 10px;color: #999; }}
.join-chan{ float: left; margin-bottom: 1px;color: #333;}
.join-giris-ico{ float: left; margin-right: 5px; width: 14px; height: 14px; border-radius: 60%; background-color:#16ccbb; color: #FFF; text-align: center; font-weight: bold;}
.join-part-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#CCC; color: #FFF; text-align: center; font-weight: bold;}
.join-quit-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#ff0074; color: #FFF; text-align: center; font-weight: bold;}
.join-nick-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#ff5400; color: #FFF; text-align: center; font-weight: bold;}
.join-kick-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#955bd0; color: #FFF; text-align: center; font-weight: bold;}
.join-mode-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#af006f; color: #FFF; text-align: center; font-weight: bold;}
.notice{ color: #000; min-height: 20px; font-size: 11px; margin-bottom: 3px;}
@media (min-width: 768px) {.notice {font-size: 12px; }}
.notice img{width: 28px; height: 28px;}
@media (min-width: 768px) {.notice img {width: 28px; height: 28px;}}
.notice span{font-family: 'Comfortaa', cursive;font-weight: bold;}
.default img{width: 24px; height: 24px; margin-top: 1px;}
@media (min-width: 768px) {.default img { width: 35px; height: 35px; margin-top: 1px;}}
.giris-mesaj{font-family: 'Comfortaa', cursive;background-color: #FFF; color: #000;-webkit-appearance: none;-webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1); font-size: 12px; margin-bottom: 15px; margin-top: 5px; font-weight: bold;}
.giris-mesaj span{font-weight: bold;color: #16ccbb; }
/* chat alan bitti */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */


/* mesaj alan başladı */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.send-mesaj{position: absolute; left: 0; bottom: 0; right: 0px;box-shadow: 0 16px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.06);  min-height: 35px; color: #000; display: block;}
@media (min-width: 992px) {.send-mesaj { left: 269px;}}
@media (min-width: 768px) {.send-mesaj { right: 370px;min-height: 98px;}}
.send-mesaj_ozel{position: absolute; left: 0; bottom: 0; right: 0px;box-shadow: 0 16px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.06);  min-height: 35px; color: #000; display: block;}
@media (min-width: 992px) {.send-mesaj_ozel { left: 269px;}}
@media (min-width: 768px) {.send-mesaj_ozel { right: 170px;min-height: 98px;}}
.butonlar{ float: left; width: 220px; min-height: 30px; padding-top: 5px;}
@media (min-width: 768px) {.butonlar { width: 100%;}}
.send-mesaj .emojiler{float: left; margin-left: 1px;}
@media (min-width: 768px) {.send-mesaj .emojiler { margin-left: 12px;}}
.send-mesaj .emojiler .me{background: none; border: none; outline: none;cursor: pointer;}
.me span{color: #16ccbb; font-weight: bold; font-size: 16px; margin-top: 10px; vertical-align: bottom;}
.emojiler-pos{position: fixed; left: 1px; bottom: 30px; }
@media (min-width: 992px) {.emojiler-pos { left: 290px;bottom: 70px;}}
.emoji-list{ max-height: 310px; margin: auto; background-color:#16ccbb;overflow: auto;}
.emoji-list ul{list-style: none; margin-left: -35px;}
.emoji-list ul li{float: left; margin: 6px; cursor: pointer;}
.modal-body {
    padding: 15px;
}
.modal-header {
    padding: 15px;
}
.dinle{color: #ff0074; font-weight: bold;  margin-top: 1px; margin-left: 2px;}
@media (min-width: 768px) {.dinle {margin-left: -10px;}}
.mirc{float: right; margin-right: 15px;color:#16ccbb; font-size: 16px; font-weight: bold;}
.mirc a{color:#16ccbb;}
.mirc a:hover{text-decoration: none;}
.mesaj-gonder{float: left; margin-left: 3px;}
@media (min-width: 768px) {.mesaj-gonder { margin-left: 20px;}}
.mesaj-gonder .yolla { float: left; position: absolute; left: 175px; width:100px;overflow: auto; height: 31px; margin-top: 2px; background: none; border:none; color: #000; outline: none; font-size: 12px; padding-top: 2px; padding-left: 6px;-webkit-appearance: none; -webkit-box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07);box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07); border-radius: 38px;-webkit-transition-duration:0.3s;-webkit-transition: all .5s;-moz-transition: all .5s;transition: all .5s; }
.mesaj-gonder .yolla:focus{ left: 45px; width: 60%; background-color: #FFF;}
@media (min-width: 768px) {.mesaj-gonder .yolla:focus {left: 12px; width: calc(90% - 50px); background-color: #FFF;}}
@media (min-width: 768px) {.mesaj-gonder .yolla { float: left; position: absolute;width: calc(90% - 50px); height: 50px; box-shadow: none;font-size: 18px;padding-top: 8px; padding-left: 1; left: 12px;}}
.mesaj-gonder input:-moz-placeholder {
	color: #CCC; 
}
.mesaj-gonder input::-webkit-input-placeholder {
	color: #CCC;
}
.gonder-mjs{position: absolute; width: 80px; height: 100%; right: 0; bottom: 0; border-top-left-radius:8px; border-bottom-left-radius:8px;border-top-right-radius:0px;border-bottom-right-radius:0px;   background-color: #16ccbb; border: none; outline: none; color: #FFF; font-size: 14px; cursor: pointer; font-weight: bold;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;padding-bottom: 2px;}
.gonder-mjs:hover{background-color: #ff0074;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
@media (min-width: 768px) {.gonder-mjs { width: 85px; height: 40px;font-size: 18px;bottom: 13px; padding-bottom: 3px;border-radius: 38px;right: 10px;}}
/* mesaj alan bitti */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */


/* nicklist başladı */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.nick-list{position: absolute; width: 120px; top: 35px; bottom: 35px; right: 0;color: #000; display: block; background:#FFF; border-top-left-radius:16px; border-top-right-radius: 16px; box-shadow: none; overflow: auto;overflow-x: hidden; }
@media (min-width: 768px) {.nick-list { right: 170px;width: 200px;bottom: 0; top: 0;-webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);}}
.nick-list::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
.nick-list::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.nick-list::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
@media (min-width: 768px) {
.nick-list::-webkit-scrollbar {width: 3px;background-color: #eaeaea;border-left: 1px solid #ccc;}
.nick-list::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.nick-list::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
}
.nick-ara{ position: fixed; width: 112px; min-height: 45px; background: #FFF; border-radius: 38px;-webkit-box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07); 
box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07);margin-bottom: 20px; z-index: 1001; outline: none; font-size: 12px; color: #CCC; padding-top: 5px;}
@media (min-width: 768px) {.nick-ara {width: 194px;}}
.nick-ara input[type=text] {-webkit-appearance: textfield;font-family: inherit;outline: none;}
.nick-ara input::-webkit-text-decoration,input::-webkit-text-cancel-button {display: none;}
.nick-ara input[type=text] {background: #FFF url(../images/search.png) no-repeat 9px center;padding: 9px 15px 9px 43px;width: 99%;-webkit-border-radius: 10em;-moz-border-radius: 10em;border-radius: 10em;-webkit-transition: all .5s;-moz-transition: all .5s;transition: all .5s;border: none;	}
.nick-ara input[type=text]:focus {width: 99%;background: url(../images/thinking.png) no-repeat 9px center;}
.nick-ara input::-moz-placeholder {color: #CCC;}
.nick-ara input::-webkit-input-placeholder {color: #CCC;}
.nick-listele{margin-top: 55px;}
.nick-box{width: 119px; height: 30px; margin: auto; cursor: pointer;}
.nick-box:hover{background-color: #f9f9f9;}
@media (min-width: 768px) {.nick-box {width: 200px;  height: 30px;padding-left: 3px;}}
.nick-box img{ width: 27px; height: 29px; border-radius: 60%; margin-left: 4px;}
@media (min-width: 768px) {.nick-box img { width: 27px; height: 29px;}}
.nick-re .nick-prefix{position: relative; width: 15px; height: 15px; background-color: #FFF; border-radius: 60%; top: 6px; left: 1px; color: #16ccbb; text-align: center; font-size: 18px; z-index: 2; }
@media (min-width: 768px) {.nick-re .nick-prefix { width: 15px; height: 15px; margin-left: -1px;}}
.nick-re{width:27px; height: 29px; float: left; }
.nick-re .u_avatar {
    display: none;
}
@media (min-width: 768px) {.nick-re { width:27px; height: 29px;}}
.nick-prefix img{ position: absolute; width: 18px; height: 18px; margin-top: 0px;left: -4px; }
@media (min-width: 768px) {.nick-prefix img { width: 18px; height: 18px;margin-top: 0px;}}
.nick-name{float: left; width: 79px; min-height: 29px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-size: 11px; font-weight: bold; padding-top: 5px; color: #000; margin-left: -3px; }
@media (min-width: 768px) {.nick-name { width: 145px; min-height: 29px;font-size: 14px;padding-top: 4px;color: #000;}}
.default-n img{width: 30px; height: 30px; margin-top: 2px;}
@media (min-width: 768px) {.default-n img { width: 27px; height: 29px; margin-top: 1px;}}
/* nicklist bitti */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

/* kanallist başladı */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.kanal-list{position: absolute; width: 170px; top: 45px; bottom: 43px; right: 0px; display: block; background: url(../images/mobil-main-bg.png) #f8f9fa no-repeat; background-position: right top; overflow: auto; padding-bottom: 10px;overflow-x: hidden; border-bottom: 1px dotted #d2d1d2;scrollbar-width: none;}
@media (min-width: 768px) {.kanal-list { top: 0px;}}
.server-name{width: 160px; min-height: 40px; border-radius: 38px; margin: auto;color: #16ccbb; text-align:left; font-weight: bold; font-size: 14px; margin-top: 5px; margin-bottom: 10px; padding-top: 9px; padding-left: 38px; background: url("../images/jokee.png") no-repeat #FFF; background-position: left 10px top 8px;  -webkit-appearance: none;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
.kanal-list button{  margin-top: 3px; margin-right: 6px; outline: none;}
.kanal-list button span{color: #CCC;}

.kanal-list-box{width: 150px; min-height: 28px; margin: auto; text-align: left; cursor: pointer; margin-top: 3px; margin-bottom: 3px; border-radius: 38px; background-color: #FFF;-webkit-appearance: none;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
.kanal-list-box:hover{background-color: #f8f9fa;}
.kanal-list-name {
    float: left;
    margin-right: 5px;
    width: 107px;
    min-height: 30px;
    text-align: left;
    padding-left: 8px;
    padding-right: 0px;
    padding-top: 4px;
    font-size: 14px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #16ccbb;
   font-weight: bold;
}
.kanal-list-name span{font-weight: bold;}
.kanal-gelen-mesaj{ float: left; width: 15px; height: 15px; border-radius: 60%; background-color: #16ccbb; color: #FFF; margin-top: 7px; font-size: 10px; text-align: center;  font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.kanal-list::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
.kanal-list::-webkit-scrollbar-thumb {background-color: #16ccbb;border-radius: 22px;}
.kanal-list::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
/* kanallist  bitti */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

 

.bilgi-tr{position: absolute; right: 0; bottom: 8px; width: 170px; background: #FFF;}
.bilgi-left{float: left; margin-right: 3px; margin-left: 10px; font-size: 11px;}
.bilgi-btn{background: none; border: none; outline: none;cursor: pointer;color: #16ccbb; font-weight: bold;}
.bilgi-btn:focus, .bilgi-btn.focus {outline: 0;box-shadow: none;}

.arkadas-notice{ position: absolute; right: 10px; bottom: 45px; width: 220px; min-height: 70px; background-color: #FFF; border-radius: 38px;-webkit-box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07); box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07); padding-top: 2px; z-index: 1001; }
@media (min-width: 768px) {.arkadas-notice {width: 250px;bottom: 105px;padding-top: 4px;}}
.arkadas-notice .nick-box:hover{background-color: #FFF;}
.arkadas-notice-durum{position: absolute; font-size: 12px; color: #000;  top: 45px; margin-left: 11px;}
@media (min-width: 768px) {.arkadas-notice-durum { margin-left: 55px;top: 40px;}}
.notice-nick{margin-top:-1px;}
@media (min-width: 768px) {.notice-nick { margin-top: -8px;}}
#hide {-moz-animation: css 0s ease-in 4s forwards;-webkit-animation: css 0s ease-in 4s forwards;-o-animation: css 0s ease-in 4s forwards;animation: css 0s ease-in 4s forwards;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
@keyframes css {to {width:0;height:0;overflow:hidden;}}
@-webkit-keyframes css {to {width:0;height:0;visibility:hidden;}}


.nickmode{position: absolute; right:125px; top: 45px; width: 200px; height: 100%;  text-align: center; font-size: 12px; color: #16ccbb; font-weight: bold; overflow: auto; display: none;}
@media (min-width: 768px) {.nickmode { right:374px;}}
.nickmode-box{ width: 200px; background-color: #FFF; border-radius:8px;padding: 15px; padding-bottom: 30px;}
.mode-bilgi{ width: 120px; min-height: 24px; margin: auto; text-align: left; cursor: pointer; padding-left: 9px; padding-right: 9px; padding-top: 5px; padding-bottom: 5px; border-radius: 38px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.mode-bilgi:hover{background-color: #f9f9f9;}
.mode-bilgi span{color: #ff0074; font-weight: bold;}
.mode-oplar{font-size: 14px; padding-left: 20px;}


@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

.c-hearts {width: 100px;height: 300px;position: absolute;bottom: -80px; right:20px; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.c-hearts .particle {width: 45px;height: 45px;opacity: 1;position: absolute;bottom: 0;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}
.c-hearts .particle i {position: absolute;left: 0;top: 0;opacity: 0.3;}
.c-hearts .particle i.ion-heart {z-index: 1;opacity: 0.8;}
.c-hearts .colOne {color: #955bd0;}
.c-hearts .colTwo {color: #f55d02;}
.c-hearts .colThree {color: #7000e3;}
.c-hearts .colFour {color: #000;}
.c-hearts .colFive {color: #360f5f;}
.c-hearts .colSix {color: #bf80ff;}

@-webkit-keyframes flowOne {0% {opacity: 0;bottom: 0;left: 35%;}40% {opacity: 0.8;}50% {opacity: 1;left: 45%;}60% {opacity: 0.2;}80% {bottom: 80%;}100% {opacity: 0;bottom: 100%;left: 68%;}}
@keyframes flowOne {0% {opacity: 0;bottom: 0;left: 35%;}40% {opacity: 0.8;}50% {opacity: 1;left: 45%;}60% {opacity: 0.2;}80% {bottom: 80%;}100% {opacity: 0;bottom: 100%;left: 68%;}}
@-webkit-keyframes flowTwo {0% {opacity: 0;bottom: 0;left: 45%;}40% {opacity: 0.8;}50% {opacity: 1;left: 61%;}60% {opacity: 0.2;}80% {bottom: 60%;}100% {opacity: 0; bottom: 80%;left: 45%;}}
@keyframes flowTwo {0% {opacity: 0;bottom: 0;left: 45%;}40% {opacity: 0.8;}50% {opacity: 1;left: 61%;}60% {opacity: 0.2;}80% {bottom: 60%;}100% {opacity: 0;bottom: 80%; left: 45%;}}
@-webkit-keyframes flowThree {0% {opacity: 0;bottom: 0;left: 45%;}40% {opacity: 0.8;}50% {opacity: 1;left: 25%;}60% {opacity: 0.2;}80% {bottom: 70%;}100% {opacity: 0; bottom: 90%;left: 45%;}}
@keyframes flowThree {0% {opacity: 0;bottom: 0;left: 45%;}40% {opacity: 0.8;}50% {opacity: 1;left: 25%;}60% {opacity: 0.2;}80% {bottom: 70%;}100% {opacity: 0;bottom:90%; left: 45%;}}
.giris-logo{margin-top: 15px;}
.login{width: 300px; min-height: 200px; margin: auto;}
@media (min-width: 768px) {
 .login {width: 400px; min-height: 200px; margin: auto;}
}
.login-alt{margin: auto;}
.nick{width: 300px; min-height: 75px; margin: auto; background: url(../images/m-nick.png) no-repeat; border: none; text-align: center; font-size: 18px; outline: none; border-radius: 38px;}
@media (min-width: 768px) {
 .nick {width: 400px; min-height: 85px; background: url(../images/nick.png) no-repeat; margin-left: 5px;}
}
.sifre{width: 300px; min-height: 75px; background: url(../images/m-sifre.png) no-repeat; margin: auto; border: none; text-align: center; font-size: 18px; outline: none; border-radius: 38px;}
@media (min-width: 768px) {
 .sifre {width: 400px; min-height: 85px; background: url(../images/sifre.png) no-repeat; margin-left: 5px;}
}
.baglan{width: 300px; min-height: 75px; background: url(../images/m-bagla.png) no-repeat; margin: auto; border: none; text-align: center; outline: none; border-radius: 38px; color: #FFF;  font-size: 22px; cursor: pointer;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
@media (min-width: 768px) {
 .baglan {width: 400px; min-height: 85px; background: url(../images/baglan.png) no-repeat; margin-left: 5px;}
}
.baglan:hover{background: url(../images/m-bagla.png) no-repeat;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
@media (min-width: 768px) {
 .baglan:hover {background: url(../images/baglan-ho.png) no-repeat;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
}
.login-alt{margin: auto;}

.circle {position: relative;width: 27px;height: 29px;}
@media (min-width: 768px) {.circle {position: relative;width: 27px;height: 29px;}}
.circle svg { position: absolute;fill: none;stroke: #ff0074 !important;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0; animation: stroke-draw 6s ease-out infinite alternate;width: 38px;height: 42px;left: -2px;top: -6px;	}
@media (min-width: 768px) {.circle svg {width: 38px;height: 42px;left: -2px;top: -6px;}}
.live{position: absolute; left: 8px; top: 22px; background-color: #ff0074; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 6px; text-align: center; font-weight: bold;}
@media (min-width: 768px) {.live {left: 7px; top: 22px;font-size: 7px;}}

.chat_ozel .circle {width: 52px; height: 54px; }
.chat_ozel .circle svg { position: absolute;
    fill: none;
    stroke-linecap: round;
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: stroke-draw 6s ease-out infinite alternate;
    width: 68px;
    height: 70px;
    left: -9px;
    top: -9px;	}

.chat_ozel .live{position: absolute; left: 17px; top: 41px; background-color: #ff0074; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 9px; text-align: center; font-weight: bold;}

.circle-ozel {position: relative;width: 52px;height: 54px;}
.circle-ozel svg { position: absolute;fill: none;stroke: #ff0074 !important;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0;animation: stroke-draw 6s ease-out infinite alternate;width: 68px;height: 70px;left: -9px;top: -9px;}
.circle-ozel .live{position: absolute; left: 17px; top: 41px; background-color: #ff0074; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 9px; text-align: center; font-weight: bold;}

.live-cam{ position: relative; width: 150px; min-height: 50px; margin: auto; margin-top: 15px; margin-bottom: 15px; z-index: 9999;}
.live-cam-img{ position: relative; margin-left: 20px; cursor: pointer; z-index: 9999;}
.live-cam-left-img{margin-left: -5px;}
.live-cam p{font-size: 12px;}

.circle-profil {position: relative;width: 52px;height: 54px; margin-bottom: 25px;}
.circle-profil svg { position: absolute;fill: none;stroke: #ff0074;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0;animation: stroke-draw 6s ease-out infinite alternate;width: 68px;height: 70px;left: -8px;top: -4px;}
.live-profil{position: absolute; left: 11px; top: 55px; background-color: #ff0074; padding-left: 4px; padding-right: 4px; color: #FFF; font-size: 11px; text-align: center; font-weight: bold;}



.vipcircle {position: relative;width: 27px;height: 29px;}
@media (min-width: 768px) {.vipcircle {position: relative;width: 27px;height: 29px;}}
.vipcircle svg { position: absolute;fill: none;stroke: #fe8e0a;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0; animation: vipstroke-draw 6s ease-out infinite alternate;width: 38px;height: 42px;left: -2px;top: -6px;	}
@media (min-width: 768px) {.vipcircle svg {width: 38px;height: 42px;left: -2px;top: -6px;}}
.viplive{position: absolute; left: 10px; top: 22px; background-color: #fe8e0a; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 7px; text-align: center; font-weight: bold;}
@media (min-width: 768px) {.viplive {left: 10px; top: 22px;font-size: 7px;}}

.vipcircle-ozel {position: relative;width: 52px;height: 54px;}
.vipcircle-ozel svg { position: absolute;fill: none;stroke: #fe8e0a;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0;animation: vipstroke-draw 6s ease-out infinite alternate;width: 68px;height: 70px;left: -9px;top: -9px;}
.vipcircle-ozel .viplive{position: absolute; left: 17px; top: 41px; background-color: #fe8e0a; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 9px; text-align: center; font-weight: bold;}


.vipcircle-profil {position: relative;width: 52px;height: 54px; margin-bottom: 25px;}
.vipcircle-profil svg { position: absolute;fill: none;stroke: #fe8e0a;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0;animation: vipstroke-draw 6s ease-out infinite alternate;width: 68px;height: 70px;left: -8px;top: -4px;}
.viplive-profil{position: absolute; left: 11px; top: 55px; background-color: #fe8e0a; padding-left: 4px; padding-right: 4px; color: #FFF; font-size: 11px; text-align: center; font-weight: bold;}

.rootcircle {position: relative;width: 27px;height: 29px;}
@media (min-width: 768px) {.rootcircle {position: relative;width: 27px;height: 29px;}}
.rootcircle svg { position: absolute;fill: none;stroke: #000;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0; animation: rootstroke-draw 6s ease-out infinite alternate;width: 38px;height: 42px;left: -2px;top: -6px;	}
@media (min-width: 768px) {.rootcircle svg {width: 38px;height: 42px;left: -2px;top: -6px;}}
.rootlive{position: absolute; left: 7px; top: 22px; background-color: #000; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 7px; text-align: center; font-weight: bold;}
@media (min-width: 768px) {.rootlive {left: 8px; top: 22px;font-size: 7px;}}

.rootcircle-ozel {position: relative;width: 52px;height: 54px;}
.rootcircle-ozel svg { position: absolute;fill: none;stroke: #000;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0;animation: rootstroke-draw 6s ease-out infinite alternate;width: 68px;height: 70px;left: -9px;top: -9px;}
.rootcircle-ozel .rootlive{position: absolute; left: 14px; top: 41px; background-color: #000; padding-left: 1px; padding-right: 1px; color: #FFF; font-size: 9px; text-align: center; font-weight: bold;}


.rootcircle-profil {position: relative;width: 52px;height: 54px; margin-bottom: 25px;}
.rootcircle-profil svg { position: absolute;fill: none;stroke: #000;stroke-linecap: round;stroke-width: 2;stroke-dasharray: 1;stroke-dashoffset: 0;animation: rootstroke-draw 6s ease-out infinite alternate;width: 68px;height: 70px;left: -8px;top: -4px;}
.rootlive-profil{position: absolute; left: 11px; top: 55px; background-color: #000; padding-left: 4px; padding-right: 4px; color: #FFF; font-size: 11px; text-align: center; font-weight: bold;}


.mycall{display: none;}


div#arama_alani {
    position: absolute;
    z-index: 9999;
    width: 320px;
    height: 640px;
    left: calc(50% - 160px);
    top: calc(50% - 320px);
    overflow: hidden;
}
i#goruntulu_kapat_icon {
    position: absolute;
    right: 0;
    font-size: 23px;
    color: red;
    background: #5f6062;
    padding: 4px;
    border-radius: 20px;
}



@keyframes stroke-draw {
  from {
    stroke: #ff0074;
    stroke-dasharray: 1;
  }
  to {
    stroke: #ce017a;
    transform: rotate(180deg);
    stroke-dasharray: 8;
  }
}

@keyframes vipstroke-draw {
  from {
    stroke: #fd8900;
    stroke-dasharray: 1;
  }
  to {
    stroke: #fd8900;
    transform: rotate(180deg);
    stroke-dasharray: 8;
  }
}
@keyframes rootstroke-draw {
  from {
    stroke: #000;
    stroke-dasharray: 1;
  }
  to {
    stroke: #000;
    transform: rotate(180deg);
    stroke-dasharray: 8;
  }
}
.user_in_list figure {position: relative;}
.user_in_list figure:before{content: " ";position: absolute;left: 2px;top: 8px;width: 10px;height: 10px;border-radius: 50%;background-color:#16ccbb;z-index: 1;}
@media (min-width: 768px) {.user_in_list figure:before{content: " ";left: 2px;top:8px;width: 12px;height: 12px; z-index: 1;}}
.user_in_list.uygun1 figure:before{background-color:#16ccbb;}
.user_in_list.mesgul1 figure:before{background-color:#ff0074;}
.user_in_list.disarda1 figure:before{background-color: #fbb00f;}
.user_in_list.away1 figure:before{background-color: #FFF; border: 3px solid #ff0074;}
.user_in_list.dead1 figure:before{background-color: #CCC;}
.resim-sil{position: absolute; font-size: 20px !important; right: -15px; top: -5px; z-index: 999; color: #CCC;}
.ses-gonder-box{width: 200px; min-height: 25px; background-color: #FFF;box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;-webkit-appearance: none; margin-left: 10px; border-radius: 38px; margin-top: -15px; }
.ses-gonder-box img{float: left; margin-left: 10px; margin-top: 1px;}
.ses-gonder-box time{float: right; margin-right: 10px; color: #000; font-size: 14px; margin-top: 3px;}
.ses-gonder-box button{ float: left; width: 16px; height: 16px; outline: none; border: none; background: url("../images/ses-play.png") no-repeat; cursor: pointer; margin-left: 15px; margin-top: 5px;}
.ses-gonder-box button:focus{width: 16px; height: 16px; outline: none; border: none; background: url("../images/ses-pause.png") no-repeat; cursor: pointer;}
.ses-rec{margin-top: -3px;}
.vip-sil-inp{position: absolute; left: 0; margin-left: -40px; margin-top: 16px;}
.vip-sale{min-height: 35px; margin-top: 10px; margin-bottom: 5px;}
.vip-sale a{color: #333;}
.vip-sale a:hover{text-decoration: none;}
.vip-sale img{display: block; margin: auto; margin-bottom: 5px;}
.vip-sale span{display: block; color: #CCC !important; font-size: 12px !important; }

.c_disi_mesaj {
    position: relative;
    margin-bottom: 15px;
    min-width: 300px;
}
.c_disi_mesaj:before {
    position: absolute;
    content:"Cevrimdisi Mesaj";
    bottom: -20px;
    color: black;
    font-style: italic;
    font-size: 10px;
    left: 5px;
}
span.c_zaman {
    position: absolute;
    bottom: -22px;
    right: 4px;
    font-size: 10px;
}

.live.call_icons {
    z-index: 1;
    width: 21px;
    text-align: center;
}






div#uyelik_durum {
    font-size: 12px;
    display: -webkit-inline-box;
}

div#u_durum {
    margin-left: 6px;
    font-weight: bolder;
}

div#u_durum span {
    padding-right: 5px;
}

span.u_root {
    background: black;
    color: white;
    text-align: center;
    padding-left: 5px;
	font-weight: bold;
	border-radius: 38px;
}

span.u_vip {
    background: #fe8e0a;
    color: #FFF;
    text-align: center;
    padding-left: 5px;
	font-weight: bold;
	border-radius: 38px;
}

a.bulur_img img {
    filter: blur(12px);
    -webkit-filter: blur(12px);
}
#ses_gonderme {
	display: none;
}
.call-circle{width: 100px; height: 100px;-webkit-animation: spinner-grow 1.35s linear infinite;
    animation: spinner-grow 1.35s linear infinite;}
.call-go{width: 150px; height: 400px; margin: auto; color: #000; text-align: center;}
.call-go span{display: block; width: 100%; min-height: 40px; margin-top: 20px; font-size: 16px; font-weight: bold;}
.call-go .spinner-grow{ color: #16ccbb; margin: auto;}
.call-go-user-img{position: relative; margin-top: -80px; margin-left: -3px;}
.call-go-user-img img{border-radius: 50%;box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;-webkit-appearance: none;}
.call-line{position: relative; width: 3px; height: 30px; margin: auto; border-left: 3px dashed #333;}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none !important;
  }
}
.gelenarama-clm{max-width: 220px; margin: auto; border-radius: 38px; }
.gelenarama-clm-img{position: absolute; left: -50px; margin-top: -50px; }
.gelenarama-open{width: 150px; min-height: 70px; margin: auto; margin-top: 60px;}
.gelenarama-live{background: none; border: none; outline: none; float: left; cursor: pointer;}
.arama-close{background: none; border: none; outline: none; float: right; cursor: pointer;}
.all-close{width: 150px; min-height: 35px; margin: auto; text-align: center; font-size: 13px;}
.all-close-ok{background: none; border: none; outline: none; cursor: pointer;}
.gelencam-img{position: absolute; left: 20px; margin-top: -580px; z-index: 999;}
.gelencam-clm{max-width: 340px; height: 640px; margin: auto; border-radius: 38px; overflow: hidden; }
.gelencam-person{width: 370px;
    height: 645px;
    margin: auto;
    border-radius: 8px;
    margin-left: -40px;
    margin-top: -20px;}
.gelencam-main{position: absolute;
    right: 0px;
    bottom: 15px;
    background-color: #CCC;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;}
.gelencam-close{position: absolute; left: 20px; bottom: 30px; background: none; border: none; outline: none; float: right; cursor: pointer;}