@charset "utf-8";
/* CSS Document */
/* WoChat Plugin */
/* woovv.com Web Site (Agency) Hosting  */
::-webkit-scrollbar {width: 0px;}
@media (min-width: 768px) {	::-webkit-scrollbar {width: 8px;}}
.user_in_list.uygun1 figure:before {
    background-color: #16ccbb;
}
a {
    color: inherit;
    text-decoration: none;
}

h3{color:#FFF;}
:root { --woovvbir: 255,255,255; --woovviki: 245,245,250; --woovvgolgebir: 37,44,97; --woovvgolgeiki: 93,100,148;}
body{font-family: 'Outfit', sans-serif; background: url("../images/circ.png") no-repeat #121633; background-position: left top;}
@media (min-width: 768px) {body {font-family: 'Outfit', sans-serif; background: url("../images/circ.png") no-repeat #121633; background-position: left top;}}
#woovvscreen {background: url("../images/circ.png") no-repeat #121633;}
html {background: url("../images/circ.png") no-repeat #121633; }
@media (min-width: 768px) {html {background: url("../images/circ.png") no-repeat #121633;}}
h1{font-weight: bold;}
.login{margin-top: 60px;}
.login h1 {color: #a342e4;}
.login p {color: #a342e4; text-align: center; font-weight: 300; font-size: 13px;}
.login p img {margin-top: -1px; margin-right: 2px;}
#main {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow: hidden;}
.wologin{width: 98%; height: 100%; margin: auto;}
@media (min-width: 768px) {.wologin {width: 400px; min-height: 220px; margin: auto;}}
.nick{width: 100%; height: 50px; border-radius: 38px; border: 1px solid #a342e4; background: url("../images/user.png") no-repeat; background-position: left 20px top 7px; padding-left: 60px; margin-bottom: 7px; outline: none; color: #FFF;}
.logline{position: absolute; width: 30px; height: 2px; content: ""; background: #121633; margin-left: 63px; margin-top: -9px;}
.passline{position: absolute; width: 30px; height: 2px; content: ""; background: #121633; margin-left: 63px; margin-top: 49px;}
.sifre{width: 100%; height: 50px; border-radius: 38px; border: 1px solid #a342e4; background: url("../images/padlock.png") no-repeat; background-position: left 20px top 7px; padding-left: 60px; margin-bottom: 7px; outline: none; color: #FFF;}
.baglan{width: 100%; height: 60px; border-radius: 38px; border: 1px solid #a342e4; background: url("../images/woirc.png") no-repeat #a342e4; background-position: left 20px top 9px; margin-bottom: 7px; outline: none; color: #FFF; font-size: 20px;}
.wologin input:-moz-placeholder {color: #a342e4;}
.wologin input::-webkit-input-placeholder {color: #a342e4;}
.logo{ width: 120px; height: 120px; margin-top: 15px; margin-left: 3px; position: absolute; background: url("../images/wochat.png") no-repeat; z-index: 1002;}
.woline{position: absolute; left: 0; top: 0;}


.mobil-ust{position: absolute; height: 40px; left: 0; right: 120px; z-index: 1009;backdrop-filter: none;backdrop-filter:blur(15px);}
@media (min-width: 768px) {.mobil-ust {position: absolute; min-height: 40px;backdrop-filter: none;backdrop-filter:blur(0px); z-index: 100;}}

.img-res{width: 24px; height: 24px;}
@media (min-width: 768px) {.img-res {width: 32px; height: 32px;}}
.imag-res{width: 18px; height: 18px;}
@media (min-width: 768px) {.imag-res {width: 24px; height: 24px;}}
.p-yok{display: inline-block;}
@media (min-width: 468px) {.p-yok {display: none;}}
.radyoname{position: relative; z-index: 10;}
.radyo-img{position: absolute; margin-top: -16px; margin-left: -20px; z-index: 9; display: none;}
@media (min-width: 1100px) {.radyo-img {position: absolute; margin-top: -18px; margin-left: -20px; z-index: 9;display: inline-block;}}
.kanal-ust{position: absolute;width: 190px; right: 324px; top: 0; background: url("../images/chat-kanal.png") no-repeat #202547; background-position: left 10px center; height: 65px; z-index: 300; color: #c9bde4; padding-top: 20px; padding-left: 20px; text-align: center; font-size: 13px; padding-right: 25px;}
.kanal-ust span{color: #d72bda;font-size: 17px; font-weight: bold;}
.left-bg{position: absolute; margin-left: -15px; bottom: 120px; display: none;}
@media (min-width: 768px) {.left-bg {position: absolute; width: 80px; height: 400px; background: url("../images/ust.png") no-repeat; margin-left: -15px; bottom: 120px; display: block;}}
.menu{position: absolute; width: 40px; height: 40px;background: none; border-radius: 50%; right: 120px; margin-top: 0px; margin-right: 1px;box-shadow: none; padding-top: 6px;cursor: pointer; text-align: center; z-index: 2001}
@media (min-width: 768px) {.menu {position: absolute; width: 50px; height: 50px;background: #2c2c51; border-radius: 50%; right: 0; margin-top: 10px; margin-right: 30px;box-shadow: rgb(123 0 112 / 25%) 40px 20px 42px 10px; padding-top: 9px;cursor: pointer; text-align: center;}}
.right-join{position: absolute; width: 43px; height: 43px;background: #2c2c51; border-radius: 50%; right: 0; margin-top: 102px; margin-right: -28px; padding-top: 5px; display: none;}
@media (min-width: 992px) {.right-join {position: absolute; width: 43px; height: 43px;background: #2c2c51; border-radius: 50%; right: 0; margin-top: 112px; margin-right: 35px; padding-top: 5px; display:inline-block;}}
.ozel-kapat{position: absolute; width: 43px; height: 43px;background: #2c2c51; border-radius: 50%; right: 0; margin-right: -28px; padding-top: 5px;display: none;}
@media (min-width: 992px) {.ozel-kapat {position: absolute; width: 43px; height: 43px;background: #2c2c51; top: 56%; border-radius: 50%; right: 0; margin-right: 35px; padding-top: 5px; display: inline-block;}}
.gece-mod{position: absolute; right: 127px; width: 25px; min-height: 25px; background: url("../images/moon.png") no-repeat; background-size: 16px 16px; background-position: center center; margin-top: 75px; border-radius: 50%; font-size: 14px; text-align: left; padding-top: 12px; padding-left: 11px; z-index: 1005;}
@media (min-width: 768px) {.gece-mod {position: absolute; left: 0; margin-left: 47px; width: 32px; height: 32px; background: url("../images/moon.png") no-repeat #FFF; background-size: 16px 16px; background-position: center center; margin-top: 199px; border-radius: 50%; font-size: 14px; text-align: left; padding-top: 7px; padding-left: 7px; z-index: 1005;}}
.gece-mod button {width: 25px;height: 25px;margin-left: -7px;margin-top: -10px;border: none;outline: none;background: none;}
.vip-sale{position: absolute;right: 145px;width: 25px;min-height: 25px;background: none;margin-top: 95px;border-radius: 50%;font-size: 14px;text-align: left;padding-top: 10px;padding-left: 9px;z-index: 1005;}
@media (min-width: 768px) {.vip-sale {position: absolute;left: 0;margin-left: 40px;width: 35px;height: 35px;background: #FFF;margin-top: 233px;border-radius: 50%;font-size: 14px;text-align: left;padding-top: 6px;padding-left: 6px;z-index: 1005;}}
.oper-pass{position: absolute;right: 127px;width: 25px;height: 25px;background: none;margin-top: 126px;border-radius: 50%;font-size: 14px;text-align: left;padding-top: 3px;padding-left: 6px;z-index: 1005;}
@media (min-width: 768px) {.oper-pass {position: absolute;left: 0;margin-left: 47px;width: 32px;height: 32px;background: #FFF;margin-top: 270px;border-radius: 50%;font-size: 14px;text-align: left;padding-top: 3px;padding-left: 6px;z-index: 1005;}}
.ekran-logo{position: fixed; right: 580px; top: 100px; z-index: 1003;}
.kanal-i{position: absolute; right: 20px;color: #696a9a; padding-left: 7px; padding-right: 7px; font-size: 14px; margin-top: 2px;font-weight: bold;display: none;}
@media (min-width: 768px) {.kanal-i {position: absolute; right: 20px;color: #696a9a; padding-left: 7px; padding-right: 7px; font-size: 14px; margin-top: 2px;font-weight: bold; display: inline-block;}}
.bildirimler{position: absolute; width: 100%; left: 0; right: 0; bottom: 0; background: #7857ed; height: 50px; text-align: center; color: #FFF; padding: 2px 4px 4px 4px; border: none;z-index: 1000; display: none;}
@media (min-width: 768px) {.bildirimler {position: absolute; width: 100%; left: 0; right: 0; bottom: 0; background: #7857ed; height: 50px; text-align: center; color: #FFF; padding: 2px 4px 4px 4px; border: none;z-index: 1000; display: block;}}
.m-ust{position: absolute; left: 0; margin-left: 1px; margin-top: 21px; z-index: 1000; display: none;}
@media (min-width: 992px) {.m-ust {position: absolute; width: 110px; height: 21px; left: 0; margin-left: 79px; margin-top: 45px; z-index: 1000;display: inline-block;background: url("../images/m-ust.png") no-repeat; background-size: cover;}}
.status_title{position: absolute;width: 260px; right: 65px; top: 0; background: none; height: 65px; z-index: 999; text-align: center; padding: 10px 4px 4px 4px; font-size: 20px;color: #c9bde4; border-left: 1px solid #3b3b6d;}
@media (min-width: 768px) {.status_title {position: absolute;width: 260px; right: 65px; top: 0; background: #2c2c51; height: 65px; z-index: 999; text-align: center; padding: 10px 4px 4px 4px; font-size: 20px;color: #c9bde4; border-left: 1px solid #3b3b6d;}}
.sunucuadi{width: 100%; min-height: 47px; background: #202547;color: #c9bde4; text-align: center; font-size: 14px; padding-top: 3px;}
.sunucuadi strong{color:#FFF; z-index: 999;}
.sunucuadi p{font-size: 12px;} 
.wonick{width: 140px; min-height: 40px; margin-left: 150px; position: absolute; z-index: 999; padding-top: 2px; padding-left: 2px; color: #c9bde4; font-weight: 400; font-size: 14px; margin-top: 22px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: none;}
.wonick img{ margin-top: -3px;}
.WoChan{width: 80px; min-height: 40px; left: 0; margin-left: 0px; position: absolute; z-index: 999; padding-top: 10px; padding-left: 2px; color: #fff; font-weight: 600; font-size: 12px; margin-top: 0px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;background: #121633;backdrop-filter: none;backdrop-filter:blur(4px); opacity: 0.9;}
@media (min-width: 768px) {.WoChan {width: 250px; min-height: 60px; left: 0; margin-left: 150px; position: absolute; z-index: 999; padding-top: 2px; padding-left: 2px; color: #c9bde4; font-weight: 600; font-size: 18px; margin-top: 10px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; background: none;backdrop-filter: none;backdrop-filter:blur(0px);}}
.WoChan img{width: 18px; height: 18px; margin-top: -5px;}
@media (min-width: 768px) {.WoChan img {display: inline-block; margin-top: -5px;width: 24px; height: 24px;}}
/* Bu satırda kaldık */
.WoRadyo{width: 45px; min-height: 40px; position: relative; float: left; margin-left: 80px; z-index: 999; padding-top: 5px; padding-left: 2px; color: #c9bde4; font-weight: 600; font-size: 16px; margin-top: 0px;background: #1b214b;border-top-right-radius: 38px; border-bottom-right-radius: 38px;}
@media (min-width: 768px) {.WoRadyo {width: 150px; min-height: 60px; right:380px; position: absolute; z-index: 999; padding-top: 16px; padding-left: 18px; color: #c9bde4; font-weight: 600; font-size: 16px; margin-top: 3px; background: none; }}
@media (min-width: 1100px) {.WoRadyo {width: 250px; min-height: 60px; right:395px; position: absolute; z-index: 999; padding-top: 16px; padding-left: 18px; color: #c9bde4; font-weight: 600; font-size: 16px; margin-top: 3px; background: none; }}
.radyo{ position: relative;background: none; border: none; outline: none;color: #c9bde4; z-index: 10; margin-top: -2px;}
.WoChat_Secren{position: absolute;left: 0px;top: 0px;bottom: 0px;right: 0px;overflow: auto;background-color: rgb(240, 239, 255); padding: 4px 2px 2px; border-radius: 0px;}
@media (min-width: 768px) {.WoChat_Secren {position: absolute;left: 65px;top: 65px;bottom: 45px;right: 65px;overflow: auto;background-color: rgb(240, 239, 255); padding: 4px 2px 2px; border-radius: 22px 0px 22px 22px;}}
.WoMessage_Clm{position: absolute;  left: 0; bottom: 75px;right: 120px;padding-top: 40px;top: 0; z-index: 400; background: #FFF; color: #2c2c51;overflow: auto;overflow-x: hidden;scrollbar-width: none;}
@media (min-width: 768px) {.WoMessage_Clm {position: absolute;  left: 0; bottom: 100px;right: 120px;padding:0px;top: 0; z-index: 400; background: #FFF; color: #2c2c51;overflow: auto;overflow-x: hidden;}}
@media (min-width: 992px) {.WoMessage_Clm {position: absolute;  left: 0; bottom: 100px;right: 450px;padding: 2px 2px 2px 90px;top: 0; z-index: 400; background: #FFF; color: #2c2c51;overflow: auto;overflow-x: hidden;}}
.WoMessage_Clm::-webkit-scrollbar {width: 0px; background-color: #FFF; border-left: 0px solid #ccc; }
.WoMessage_Clm::-webkit-scrollbar-thumb {background-color: #b9b5ee; border-radius: 22px;}
.WoMessage_Clm::-webkit-scrollbar-thumb:hover {background-color: #2c2c51;}
@media (min-width: 768px) {.WoMessage_Clm::-webkit-scrollbar {width: 6px; background-color: #FFF; border-left: 0px solid #ccc;}}
.WoMesaj_Clm{font-family: 'Montserrat', sans-serif;position: absolute;  height: 75px; left: 0; bottom: 0px;right: 120px;background-color: rgb(240, 239, 255); }
@media (min-width: 768px) {.WoMesaj_Clm {font-family: 'Montserrat', sans-serif;position: absolute;  height: 100px; left: 0; bottom: 0px;right: 450px;background-color: rgb(240, 239, 255); }}
.WoKanal{position: absolute; width: 260px; right: 0; top: 0; bottom: 0;border-left:1px solid #d6d8f7;background:#2c2c51;}
@media (min-width: 768px) {.WoKanal {position: absolute; width: 260px; right: 0; top: 0; bottom: 0;border-left:1px solid #d6d8f7;background:#2c2c51;}}
.WoNickList{position: absolute; width: 120px; right: 0; top: 0; bottom: 0; border-left:1px solid #d6d8f7; background: #e6e4fe;overflow: hidden;overflow-x: hidden; padding-bottom: 35px;}
@media (min-width: 768px) {.WoNickList {position: absolute; width: 190px; right: 260px; top: 0; bottom: 0; border-left:1px solid #d6d8f7; background: #e6e4fe;overflow: hidden;overflow-x: hidden; padding-bottom: 50px;}}

.nick-ara{width: 120px; min-height: 37px; background: url("../images/search.png") no-repeat #f1f0fd; background-position: left 10px center; color: #CCC; text-align: center; padding-top: 7px;overflow: auto;overflow-x: hidden; font-size: 14px;}
@media (min-width: 768px) {.nick-ara {width: 190px; min-height: 47px; background: url("../images/search.png") no-repeat #f1f0fd; background-position: left 10px center; color: #CCC; text-align: center; padding-top: 9px;overflow: auto;overflow-x: hidden; font-size: 18px;}}
.nick-ara input{background: none; border: none; padding-left: 40px; outline: none;}
.kanallisttitle{font-family: 'Montserrat', sans-serif;width: 100%; min-height: 37px; padding: 10px 8px 8px 8px; border-bottom: 1px solid #353558; display: none;}
@media (min-width: 768px) {.kanallisttitle {font-family: 'Montserrat', sans-serif;width: 100%; min-height: 37px; padding: 10px 8px 8px 8px; border-bottom: 1px solid #353558; display: inline-block;}}
.kanallisttitle strong{color: #FFF; font-size: 12px;}
.ozellisttitle{width: 100%; min-height: 37px; padding: 5px 8px 8px 8px; border-bottom:none; margin-bottom: 14px;}
@media (min-width: 768px) {.ozellisttitle {width: 100%; min-height: 37px; padding: 10px 8px 8px 8px; border-bottom: 1px solid #353558;}}
.ozellisttitle img{margin-right: 0px; margin-top: -4px;}
@media (min-width: 768px) {.ozellisttitle img {margin-right: 5px;}}
@media (min-width: 768px) {.ozellisttitle {font-family: 'Montserrat', sans-serif;width: 100%; min-height: 37px; padding: 10px 8px 8px 8px; border-bottom: 1px solid #353558;}}
.ozellisttitle strong{color: #696a9a; font-size: 16px; font-weight: bold;}
@media (min-width: 768px) {.ozellisttitle strong {color: #FFF; font-size: 12px;}}
.kanal-list{position: absolute; top: 0px; left: 0; bottom: 0; right: 0; overflow: auto;overflow-x: hidden;}
@media (min-width: 768px) {.kanal-list {position: absolute; top: 90px; left: 0; bottom: 0; right: 0; overflow: auto;overflow-x: hidden; z-index: 1000;}}
.kanallar{height: 50%;width: 100%;display: none;}
@media (min-width: 768px) {.kanallar {display: inline-block;}}
.kanallar-clm{overflow-y: auto;height: calc(100% - 50px);}
.kanal-list-box{font-family: 'Montserrat', sans-serif; width: 100%; height: 27px; position: relative; font-size: 16px; padding: 0px 2px 0px 7px; font-weight: 500; display: block; clear: both;cursor: pointer; color: #908fd0;}
.yeni_post{color: #FFF;}
.kanal-list-box:hover{background: #202547;}
.kanal-list-box:hover span{opacity: 1;}
.kanal-list-name span{color: inherit; padding-right: 2px; font-size: 18px; font-weight: bold; display: none;}
@media (min-width: 768px) {.kanal-list-name span {color: inherit; padding-right: 2px; font-size: 18px; font-weight: bold; display: inline-block;}}
.kanal-list-box button{position: absolute; right: 2px; background: none; border-radius: 50%; border: none; outline: none; margin-top: 4px;}
@media (min-width: 768px) {.kanal-list-box button {position: absolute; right: 3px; background: none; border-radius: 50%; border: none; outline: none; margin-top: 1px;}}
.kanal-list-box button span{width: 20px; height: 20px; border-radius: 50%;background: #54518b;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 20px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s; opacity: 1;}
@media (min-width: 768px) {.kanal-list-box button span {width: 20px; height: 20px; border-radius: 50%;background: #54518b;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 20px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s; opacity: 0;}}
.kanal-list-box button span:hover{background: #ff0074;color: #FFF;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s;}
.kana4l-gelen-mesaj{float: left; width: 25px; height: 25px; margin-top: 1px; font-size: 10px; font-weight: 200; color: #FFF; text-align: center;padding: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-left: 5px;}
.kanal-gelen-mesaj{width: 18px; height: 17px; float: left; font-size: 10px; margin-top: 5px; margin-left: 36px; font-weight: 400; display: inline-block; background: #54518b; color: #25234a; text-align: center; padding-top: 2px; border-radius: 38px 38px 0px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.kanal-list-name{float: left; width: 145px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-transform:capitalize;}
.kanal-list-name strong{padding: 3px 8px 3px 8px; border-radius: 2px; font-weight: 600;}
.golge{position: absolute; left: 20%; bottom: -130px; z-index: -1;}
.kanallar-clm::-webkit-scrollbar {width: 0px; background-color: #e6e4fe; border-left: 1px solid #ccc; }
.kanallar-clm::-webkit-scrollbar-thumb {background-color: #7857ed; border-radius: 22px;}
.kanallar-clm::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
@media (min-width: 768px) {.kanallar-clm::-webkit-scrollbar {width: 2px; background-color: #e6e4fe; border-left: 1px solid #ccc;}}
.ozeller{height: 40%;width: 100%; }
.ozeller-clm{overflow-y: auto;height: calc(100% - 50px);}
.ozel-mesaj{font-family: 'Montserrat', sans-serif; width: 100%; height: 25px; color: #908fd0; position: relative; font-size: 14px; padding: 2px 2px 0px 40px; font-weight: 700; display: block; clear: both;background: url("../images/mesaj.png") no-repeat; background-position: left 13px top 3px; cursor: pointer;}
.ozel-mesaj:hover{ font-size: 14px;background: url("../images/mesaj.png") no-repeat #202547;cursor: pointer;background-position: left 13px top 3px;}

.ozel-mesaj img{margin-top: -3px; margin-right: 6px;} 
.ozel-mesaj:hover span{opacity: 1;}
.ozel-mesaj-nick{float: left; width: 145px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ozel-mesaj button{position: absolute; right: 3px; background: none; border-radius: 50%; border: none; outline: none; margin-top: 7px;}
.ozel-mesaj button span{width: 20px; height: 20px; border-radius: 50%;background: #54518b;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 20px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s; opacity: 1;}
@media (min-width: 768px) {.ozel-mesaj button span {width: 20px; height: 20px; border-radius: 50%;background: #54518b;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 20px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s; opacity: 0;}}
.ozel-mesaj button span:hover{background: #ff0074;color: #FFF;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s;}
.ozel-gelen-mesaj{float: left; width: 25px; height: 25px; margin-top: -2px; font-size: 10px; font-weight: 200; color: #FFF; text-align: center;padding: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ozel-gelen-mesaj strong{width: 18px; height: 17px; float: left; display: inline-block; border-color: #fd70b0;background-color: #fd70b0;color: #ff0074; text-align: center; padding-top: 1px; border-radius: 38px 38px 0px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ozeller-clm::-webkit-scrollbar {width: 0px; background-color: #eaeaea; border-left: 1px solid #ccc; }
.ozeller-clm::-webkit-scrollbar-thumb {background-color: #7857ed; border-radius: 22px;}
.ozeller-clm::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
@media (min-width: 768px) {.ozeller-clm::-webkit-scrollbar {width: 2px; background-color: #eaeaea; border-left: 1px solid #ccc; }}
.nickler{height: 100%; width: 100%;font-family: 'Helvetica Neue', sans-serif;}
.nickler-clm{overflow: auto;overflow-x: hidden;height:100%;scrollbar-width: none;}
@media (min-width: 768px) {.nickler-clm {overflow: auto;overflow-x: hidden;height:100%;scrollbar-width: auto; }}
.nickler-clm::-webkit-scrollbar {width: 0px; background-color: #e6e4fe; border-left: 0px solid #ccc; }
.nickler-clm::-webkit-scrollbar-thumb {background-color: #b9b5ee; border-radius: 22px;}
.nickler-clm::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
@media (min-width: 768px) {.nickler-clm::-webkit-scrollbar {width: 8px; background-color: #e6e4fe; border-left: 0px solid #ccc;}}
.nick-box{width: 190px; height: 22px; margin-top: 1px; margin-bottom: 1px; padding: 5px 4px 2px 4px; display: block; clear: both; font-weight: 400; cursor: pointer;}
.nick-prefix{font-family: 'Montserrat', sans-serif;width: 24px; height: 24px; border-radius: 4px; float: left; margin-left: 1px; margin-right: 2px; text-align: center; font-size: 14px; color: #000;line-height: 23px; font-weight: bold; margin-top: -1px;}
.founde8r{font-weight: bold;}
.founder{background-image: linear-gradient(to right,#7857ed,#fa6981); font-weight: 400;}
.sop{background-image: linear-gradient(to right,#333,#404040); font-weight: 400;}
.aop{background-image: linear-gradient(to right,#fd4092,#fa6981); font-weight: 400; font-size: 12px; line-height: 22px;}
.halfop{background-image: linear-gradient(to right,#673ce2,#8b64fc); font-weight: 400;}
.avoice{background-image: linear-gradient(to right,#fcac13,#fdbf46); font-weight: 400;}
.auser{background-image: linear-gradient(to right,#f1f0fd,#f1f0fd); font-weight: 400; text-align: center;}
.user span{width: 8px; height: 8px; display: block; background: #52b58e; margin: auto; margin-top: 8px; border-radius: 50%;}
.nick-name{float: left; width: 100px; height: 18px; font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-top: 0px;}
@media (min-width: 768px) {.nick-name {float: left; width: 154px; height: 22px; font-size: 16px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-top: 0px;}}


.mesaj-clm{width: 100%; height: 40px; background: #f6f5fe;  border-bottom: 1px solid #d9d7f8; padding-left: 5px;}
.butdonlar{width: 310px; height: 40px; display: inline-block; float: left; background-image: linear-gradient(to right,#121633,#2c2c51); border-radius: 38px; margin-left: -55px; text-align: left; padding-top: 4px; padding-left: 30px; }
.mesaj-clm button{position: relative; float: left; width: 26px; height: 26px; border-radius: 50%; border: none; background: #2c2c51; outline: none; text-align: center; margin-left: 12px; margin-right: 12px; line-height: 5px; z-index: 1002;}
.k-emoji{ width: 30px !important; height: 30px !important; margin-top: 6px; margin-left: 5px !important; margin-right: 5px !important; padding: 0; background: none !important; border: 3px solid #FFF !important;}
.k-emoji:before{position: absolute; content: url("../images/after.png"); width: 26px; height: 26px; margin-top: -1px !important; margin-left:-15px !important; transform: rotate(-30deg); display: none;}
@media (min-width: 992px) {.k-emoji {width: 30px !important; height: 30px !important; margin-top: 6px; margin-left: 15px !important; margin-right: 6px !important; padding: 0; background: none !important; border: 3px solid #FFF !important;}}
.emoji{position: absolute; margin-left: -1px !important; margin-top: 4px;}
.renk{ position: absolute; margin-left: -9px !important; margin-top: 28px !important;}
.k-yazi{ position: absolute; margin-left: -33px !important; margin-top: 63px !important;}
.mesaj-clm button:before{position: absolute; content: url("../images/after.png"); width: 26px; height: 26px; margin-top: -5px; margin-left:-14px; transform: rotate(-30deg);}
.mesaj-clm button img{margin-left: -1px; position: relative; z-index: 500;}
.msj-right{float: right !important; width: 130px !important; height: 40px !important; border-radius: 0px !important; background: none !important; border-left: 1px solid #d9d7f8 !important; padding: 8px; font-size: 16px; display: none;}
@media (min-width: 992px) {.msj-right {float: right !important; width: 130px !important; height: 40px !important; border-radius: 0px !important; background: none !important; border-left: 1px solid #d9d7f8 !important; padding: 8px; font-size: 16px;display: block;}}
.msj-right:before{display: none;}
.msj-right img{margin-top: -3px;}
.extra_button{width: 100px; height: 40px; position: absolute; bottom: 127px; background: none; z-index: 1010; right: 160px;}
@media (min-width: 768px) {.extra_button {width: 140px; height: 140px; position: absolute; background: url("../images/bt.png") no-repeat; background-position: left top; z-index: 1001; bottom: 10px; margin-left: 5px; left: 0;}}
.extra_button button{position: relative; float: left; width: 26px; height: 26px; border-radius: 50%; border: none; background: none; outline: none; text-align: center; margin-left: 12px; margin-right: 12px; line-height: 5px; z-index: 1002;}
@media (min-width: 768px) {.extra_button button {position: relative; float: left; width: 26px; height: 26px; border-radius: 50%; border: none; background: #2c2c51; outline: none; text-align: center; margin-left: 12px; margin-right: 12px; line-height: 5px; z-index: 1002;}}
.extra_button button:before{position: absolute; content: url("../images/after.png"); width: 26px; height: 26px; margin-top: -5px; margin-left:-14px; transform: rotate(-30deg); display: none;}
@media (min-width: 768px) {.extra_button button:before{position: absolute; content: url("../images/after.png"); width: 26px; height: 26px; margin-top: -5px; margin-left:-14px; transform: rotate(-30deg); display: block;}}
.temizle{position: absolute; margin-left: 65px !important; margin-top: 98px !important;}
@media (min-width: 768px) {.temizle {position: absolute; margin-left: 76px !important; margin-top: 98px !important;}}
.temizle img{width: 24px; height: 24px;}
@media (min-width: 768px) {.temizle img {width: 18px; height: 18px;}}
.tam_ekran{position: absolute; margin-left: 37px !important; margin-top: -25px !important;}
@media (min-width: 768px) {.tam_ekran {position: absolute; margin-left: 37px !important; margin-top: -18px !important;}}
.yolla {float: left;position: absolute; margin-left: 1px; width: calc(89% - 50px);height: 35px;box-shadow: none;font-size: 16px;padding-top: 3px;padding-left:15px;left: 0;border: none;outline: none;background: none;}
@media (min-width: 768px) {.yolla {float: left;position: absolute; margin-left: 70px; width: calc(89% - 50px);height: 58px;box-shadow: none;font-size: 16px;padding-top: 1px;padding-left:20px;left: 0;border: none;outline: none;background: none;}}
.gonder-mjs{position: absolute; width: 80px; height: 35px; background: #52b58e; right: 16px; margin-top: 0px; text-align:center; color: #FFF; border-radius: 38px; padding-top: 2px; font-size: 14px; border: 2px solid #e6e4fe;}
@media (min-width: 768px) {.gonder-mjs {position: absolute; width: 100px; height: 50px; background: #52b58e; right: 16px; margin-top: 5px; text-align:center; color: #FFF; border-radius: 38px; padding-top: 4px; font-size: 18px; border: 8px solid #e6e4fe;}}


.message-box {
    position: relative;
    float: left;
    width: 100%;
    font-size: 15px;
}
.message-box-nick strong{padding-left: 2px; padding-right: 2px; color: inherit !important;}
@media (min-width: 992px) {.message-box-nick strong {padding-left: 2px; padding-right: 2px;color: inherit !important;}}
.message {width: calc(100% - 1px);}
.message-box-msj {float: left;width: calc(100% - 1px);margin-left: 0px;font-size: 13px;font-weight: 400;-webkit-appearance: none;word-break: break-word;}
@media (min-width: 992px) {.message-box-msj {float: left;width: calc(100% - 50px);margin-left: 1px;font-size: 15px;font-weight: 400;-webkit-appearance: none;word-break: break-word;}}
.message-box-msj p {
    margin: 0 !important;
}
.message-box-nick {float: left; margin-left: 40px;}
@media (min-width: 992px) {.message-box-nick {float: left; margin-left: 1px}}
.message-box-nick strong {font-weight: 600; color: #000;}
.zaman_g {
    position: absolute;
    float: left;
    font-size: 10px;
    font-weight: normal;
    margin-top:2px;
    background: #e6e4fe; border-radius: 38px; padding-left: 3px; padding-right: 3px;
    margin-right: 4px;
    color: #9490c4;
}
@media (min-width: 992px) {
    .zaman_g {
        position: relative;
        float: left;
    font-size: 11px;
    font-weight: normal;
    margin-top:2px;
    background: #e6e4fe; border-radius: 38px; padding-left: 3px; padding-right: 3px;
    margin-right: 4px;
    color: #9490c4;
    }
}
.giris-mesaj {
    color: #000;
    font-size: 14px;
    margin-bottom: 5px;
    padding-top: 6px;
    padding-bottom: 4px;
    width: 100%;
}
.yeni_mesaj{color:#fd70b0;background: url("../images/n-mesaj.png") no-repeat;cursor: pointer;background-position: left 13px top 3px;}
.yeni_mesaj:hover{color:#fd70b0;background: url("../images/n-mesaj.png") no-repeat #202547;cursor: pointer;background-position: left 13px top 3px;}
.kanal-mesaj-title{border-color: #fd70b0;background-color: #fd70b0;color: #ff0074; border-radius: 0px 38px 38px; padding: 2px;margin-right: 2px;font-weight: 600; font-size: 10px;}
.message-box-msj img {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: -1px;
}
div#scroll_lock {position: fixed;background-color: #e6e4fe;height: 30px;width: 30px;top: 42px;right: 50px;z-index: 1000;border-radius: 50%;text-align: center;padding-top: 1px;cursor: pointer;backdrop-filter: none;
    backdrop-filter: blur(15px); opacity: 0.5;}
div#scroll_lock img{width: 20px; height: 20px;}
@media (min-width: 768px) {div#scroll_lock {position: fixed;background-color: #e6e4fe;height: 40px;width: 40px;top: 70px;right: 50px;z-index: 1000;border-radius: 50%;text-align: center;padding-top: 5px;cursor: pointer;}}
@media (min-width: 768px) {div#scroll_lock img {width: 24px; height: 24px;}}
.join-mode {
    float: left;
    width:100%;
    min-height: 12px;
    font-size: 10px;
    color: #222;
    padding-left: 2px;
    margin-bottom: 1px;
}
.join-mode p{background: none; margin: 0 !important; border-radius: 38px; padding-left: 5px; padding-right: 5px;}
@media (min-width: 768px) {.join-mode p {background: #e6e4fe; margin: 0 !important; border-radius: 38px; padding-left: 5px; padding-right: 5px;}}
.join-mode p span{text-decoration: underline;}

@media (min-width: 768px) {
    .join-mode {
        padding-left:46px;
        font-size: 10px;
        color: #222;
        margin-bottom:2px;
    }
}

.join-chan {
    float: left;
    color: #9490c4;
    margin-top: 1px;
    margin-left: 50px;
}
.nick-degisti{margin-left:70px;}
.part-etti{margin-left: 32px;}
.kick-durum{margin-left: 27px;}
.join-giris-ico {
    position: absolute;
    float: left;
    margin-right: 5px;
    padding: 1px 5px 1px 5px;
    border-radius: 38px;
    border-color: #daf5ea;
    background-color: #daf5ea;
    color: #17d44a;
    text-align: center;
    font-weight: 700;
}


.join-quit-ico {
    position: absolute;
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    border-radius: 38px;
    border-color: #fd70b0;
    background-color: #fd70b0;
    color: #ff0074;
    text-align: center;
    font-weight: 700
}

.join-nick-ico {
    position: absolute;
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    border-radius: 38px;
    border-color: #fdc78f;
    background-color: #fdc78f;
    color: #ff8100;
    text-align: center;
    font-weight: 700
}

.join-kick-ico {
    position: absolute;
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    border-radius: 38px;
    border-color: #ff6363;
    background-color: #ff6363;
    color: #ea1a1a;
    text-align: center;
    font-weight: 700
}

.join-mode-ico {
    position: absolute;
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    border-radius: 38px;
    border-color: #95ebfd;
    background-color: #95ebfd;
    color: #05bee6;
    text-align: center;
    font-weight: 700
}
.join-chan span{ background: none !important;border: none !important ;color: #9e97b6 !important; border-radius: 38px; padding-left: 1px; padding-right: 1px;}
.join-part-ico {
    position: absolute;
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    border-radius: 38px;
    border: 1px dashed #ded5fb;
    color: #9e97b6;
    text-align: center;
}


@media (min-width: 768px) {
    .join-chan {
        float: left;
        color: #9490c4;
        margin-top: 1px;
        margin-left: 0px;
    }
    .nick-degisti{margin-left:0px;}
    .part-etti{margin-left: 0px;}
    .kick-durum{margin-left: 0px;}
    .join-giris-ico {
        position: relative;
        float: left;
        margin-right: 5px;
        padding: 1px 5px 1px 5px;
        border-radius: 38px;
        border-color: #daf5ea;
        background-color: #daf5ea;
        color: #17d44a;
        text-align: center;
        font-weight: 700;
    }


    .join-quit-ico {
        position: relative;
        float: left;
        margin-right: 5px;
        padding: 0px 5px 1px 5px;
        border-radius: 38px;
        border-color: #fd70b0;
        background-color: #fd70b0;
        color: #ff0074;
        text-align: center;
        font-weight: 700
    }

    .join-nick-ico {
        position: relative;
        float: left;
        margin-right: 5px;
        padding: 0px 5px 1px 5px;
        border-radius: 38px;
        border-color: #fdc78f;
        background-color: #fdc78f;
        color: #ff8100;
        text-align: center;
        font-weight: 700
    }

    .join-kick-ico {
        position: relative;
        float: left;
        margin-right: 5px;
        padding: 0px 5px 1px 5px;
        border-radius: 38px;
        border-color: #ff6363;
        background-color: #ff6363;
        color: #ea1a1a;
        text-align: center;
        font-weight: 700
    }

    .join-mode-ico {
        position: relative;
        float: left;
        margin-right: 5px;
        padding: 0px 5px 1px 5px;
        border-radius: 38px;
        border-color: #95ebfd;
        background-color: #95ebfd;
        color: #05bee6;
        text-align: center;
        font-weight: 700
    }
    .join-chan span{ background: none !important;border: 1px dashed #ded5fb !important ;color: #9e97b6 !important; border-radius: 38px; padding-left: 1px; padding-right: 1px;}
    .join-part-ico {
        position: relative;
        float: left;
        margin-right: 5px;
        padding: 0px 5px 1px 5px;
        border-radius: 38px;
        border: 1px dashed #ded5fb;
        color: #9e97b6;
        text-align: center;
    }
}


.format_span {
    font-family: 'Poppins', sans-serif;
    padding: 2px;
    border-radius: 38px;
    font-size: 11px;
}
@media (min-width: 768px) {
    .format_span {
    font-family: 'Poppins', sans-serif;
    padding: 2px;
    border-radius: 38px;
    font-size: 11px;
    }
}
@media (min-width: 768px) {
    .notice {
        font-size:12px
    }
}
.notice {
    font-family: 'Poppins', sans-serif;
    color: #000;
    min-height: 20px;
    font-size: 12px;
}
.notice span {
    font-weight: 500;
}
b{font-family: 'Poppins', sans-serif; font-weight: 500;}
@media (min-width: 768px) {
    .notice {
        font-size:12px
    }
}






#menu-list {position: fixed;width: 280px;display: none;overflow: auto;float: left; margin-left: -15px; height: 100%;top: 0px;padding: 10px 2px;z-index: 2000;text-align: left;font-size: 14px;color: #696a9a;background: #121633;background-position: center top;padding-bottom: 15px;}
@media (min-width: 768px) {#menu-list {position: fixed;width: 259px;display: none;overflow: auto;right: 65px;height: 383px;top: 157px;padding: 10px 2px;z-index: 1001;text-align: left;font-size: 14px;color: #696a9a;background: #202547;background-position: center top;padding-bottom: 15px;}}
.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: none;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    backdrop-filter: none;
    backdrop-filter: blur(10px);
}
.menu-ac {position: fixed;z-index: 3000;}
#menu-list button{color: #696a9a; outline: none; border: none; display: block;}
#menu-list strong {display: block; font-weight: 600; padding-left: 10px; border-bottom: 1px solid #272c50; padding-bottom: 4px; font-size: 18px; margin-bottom: 10px; }

.renk-ac ul{width: 360px; height: 55px;background: #e6e4fe; border: none; margin: 4px 4px 4px -52px !important; padding: 15px;}
#renksec {
    cursor: pointer;
    float: left;
    margin-top: 8px;
    margin-left: 6px;
}
#sitil {position: absolute;display: none;bottom: 75px;left: 10px;border-radius: 7px;padding: 10px;background: #e6e4fe;width: 165px;z-index: 1000;}
@media (min-width: 768px) {#sitil {position: absolute;display: none;bottom: 100px;left: 90px;border-radius: 7px;padding: 10px;background: #e6e4fe;width: 165px;z-index: 1000;}}
#sitil div {
    position: relative;
    float: left;
    height: 20px;
    width: 20px;
    margin-right: 3px;
    margin-bottom: 3px;
    z-index: 1000;
    background: #e6e4fe;
}
.emoji-ac ul{width: 300px; height: 240px;background: #e6e4fe; border: none; margin: 4px 4px 4px -1px !important; padding: 15px;overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}
.emoji-ac ul li{float: left; cursor: pointer;}
.emoji-ac ul::-webkit-scrollbar {
  display: none;
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #121633;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    outline: 0;
    color: #FFF;
}
.modal-header{border: none;}
.modal-footer{border: none;}
.modal-body input{width: 100%; min-height: 55px; border-radius: 38px; border: none; outline: none; margin: 2px 0px; padding: 15px;background: #2c2c51;}
.btn-close { border: 1px solid #ff0074; color: #FFF;}
.btn-close:focus, .btn-close.focus {
    outline: 0;
    box-shadow: none;
}
.vazgec{background: #db649a; border: none; outline: none;}
.vazgec:hover{background: #ff0074; border: none; outline: none;}
.ok{background: #52b58e; border: none; outline: none;}
.ok:hover{background: #409f7a; border: none; outline: none;}
.m-yok{display:none;}
@media (min-width: 768px) {.m-yok {display: block;}}
.m-gizle{display:none;}
@media (min-width: 768px) {.m-gizle {display: inline-block;}}






#kanal {position: fixed;left: 130px; width: 35px; top: 7px;font-size: 10px;cursor: pointer;display: inline-block;z-index: 1001;color: #000;}
@media (min-width: 768px) {#kanal { display: none;}}
#kanal-list {position: fixed;width: 100%;display: none;overflow: auto;left: 0; height: 100%; top: 0px;padding: 10px 2px;z-index: 2003;text-align: left;font-size: 14px;color: #696a9a;background: #121633;padding-bottom: 15px;}
.m-kanal-title {display: block;width: 170px;min-height: 35px;margin-top: -12px;margin-left: -25px;margin-bottom: 10px;font-size: 17px;text-align: left;padding-top: 7px;padding-left: 30px;}
.m-kanal-title img{margin-top: -3px;}
.m-message-title img {vertical-align: top; margin-right: 4px;}
.m-message-close {position: absolute;right: 0;top: 17px;background: none;border: none;outline: none;cursor: pointer;}
#kanal-list ul {list-style:none; padding: 0px;}
#kanal-list ul button {width: 20px;height: 20px;border-radius: 50%;background: #54518b;display: inline-block;font-size: 18px;font-weight: 200;color: #202547;padding: 0px;line-height: 20px;
-webkit-transition-duration: 0.3s;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-ms-transition-duration: 0.3s;transition-duration: 0.3s;border: none;float: right;margin-right: 5px;}
.status{font-size: 22px;padding-left: 7px;}
#m-message {position: fixed;left: 165px;top: 5px;background: none;border: none;outline: none;cursor: pointer;z-index: 1001;display: inline-block;}
@media (min-width: 992px) {#m-message { display: none;}}
#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: #121633;;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);}

.mobil-mesaj {position: absolute;width: 16px;height: 16px;line-height: 16px;border-radius: 60%;background-color: #e126d8;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);}

.nickmode {position: absolute; right: 120px;top: 0px;width: 165px;height: 100%;text-align: center;font-size: 12px;color: #908fd0;font-weight: bold;overflow: auto;display: none; z-index: 2002;}
@media (min-width: 768px) {.nickmode {right: 515px;top: 65px;height: 90%; z-index: 1010;}}
.nickmode-box {position: relative;width: 165px;background-color: #e6e4fe;border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;  padding: 15px;padding-bottom: 30px;z-index: 1000;}
@media (min-width: 768px) {.nickmode-box {position: relative;width: 165px;background-color: #2c2c51;border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;  padding: 15px;padding-bottom: 30px;z-index: 1000;}}
.nickmode-box .btn{color:#ff0074; padding: 0; font-size: 14px;}
.mode-bilgi {width: 130px;min-height: 24px;text-align: left;cursor: pointer;padding-right: 5px;padding-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.mode-bilgi span {color: #ff0074;font-weight: bold;}
.mode-oplar {font-size: 14px; padding-left: 20px;}
#yan_nick{color:#ff0074; font-size: 15px;}
.nick-modem button {position: absolute;right: 3px;background: none;border-radius: 50%;border: none;outline: none;}
.nick-modem button span{width: 20px; height: 20px; border-radius: 50%;background: #ff0074;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 20px;-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) {.nick-modem button span { width: 20px; height: 20px; border-radius: 50%;background: #54518b;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 20px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s;}}
.nick-modem button span:hover{background: #ff0074;color: #FFF;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration:0.3s;}

.chat_ozel{position: fixed; left: 0px; right: 0px; top: 0; height: 40px;color: #c9bde4;  font-size: 18px; padding-top: 5px; font-weight: 600;padding-left: 50px; background: #FFF;border-bottom: 1px solid #d9d7f8;}
@media (min-width: 768px) {.chat_ozel { position: fixed; left: 65px; right: 65px; top: 0; height: 65px;color: #c9bde4;  font-size: 18px; padding-top: 15px; font-weight: 600;padding-left: 90px;background: url("../images/ozel_tp.png") no-repeat;border-bottom: none;}}
.chat_ozel_clms{position: absolute;width: 200px;height: 40px;background: #121633;z-index: -1;left: 0;top: 0;border-top-right-radius: 38px;border-bottom-right-radius: 38px; display: inline-block;}
@media (min-width: 768px) {.chat_ozel_clms {display: none;}}
.chat_ozel-durum-nick{width: 140px; height: auto; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; float: left;}
.ozel-info {color:#c9bde4; font-weight: 300; float: left;}
.arkadas-engelle {color:#fd70b0; font-weight: 300; float: right; font-size: 16px;}
@media (min-width: 768px) {.arkadas-engelle {color:#fd70b0; font-weight: 300; float: left; font-size: 16px;}}
.arkadas-engelle button {width: 120px;height: 24px; background: none; border: none; outline: none; color:#fd70b0;}
.arkadas-engelle button img {margin-right: 3px; margin-top: -3px;}
.chat_ozel-durum-nick img{margin-top: -6px;}

.chat_ozel .message-back {
    position: absolute;
    left: 0;
    background: none; border: none;
    margin-top: -4px;
}
.status-right{position: fixed; right: 15px; top: 5px; background: none; border: none; outline: none; display: inline-block;}
@media (min-width: 768px) {.status-right {position: fixed; right: 15px; top: 5px; background: none; border: none; outline: none; display: none;}}
.wowel{max-width: 180px;padding: 1px 5px 1px 5px;border-radius: 38px;border-color: #daf5ea;background-color: #daf5ea;color: #17d44a;font-weight: 600;font-size: 12px;display: block;}
.wotext{max-width: 220px; padding: 0px 5px 1px 5px;border-radius: 38px;border-color: #fd70b0;background-color: #fd70b0;color: #ff0074;font-weight: 600;font-size: 12px;display: block; margin-top: 5px; margin-bottom: 5px;}
.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 .nick-name{position: absolute; margin-left: 10px;}
.arkadas-notice { position: absolute;right: 0px;bottom: 75px;width: 180px;min-height: 53px; border-color: #fd70b0;background-color: #fd70b0;color: #ff0074;border-radius: 4px; padding-top: 2px;z-index: 1010;}
@media (min-width: 768px) {.arkadas-notice {width: 259px;bottom: 45px; right: 65px; padding-top: 4px;}}
.arkadas-notice .nick-box:hover {background-color: #FFF;}
.arkadas-notice-durum {position: absolute;font-size: 12px;color: #000;top: 25px;margin-left: 11px;}
@media (min-width: 768px) {.arkadas-notice-durum { margin-left: 10px;top: 25px;}}
.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;}}

@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: -45px;right: 100px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 999;}
@media (min-width: 768px) {.c-hearts {width: 100px;height: 300px;position: absolute; bottom: -35px;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%; } }
#nicktabla{float: left;margin-left: 17px;margin-top: 8px;cursor: pointer;}