@charset "utf-8";
/* CSS Document */
/* jIRC Plugin */
/* jIRCV1*/
body{background: #1f2734;font-family: 'Poppins', sans-serif;}
#fullscreenElement {background: #1f2734;}
html { background: #1f2734;}
@media (min-width: 768px) { html {background: #1f2734;}}
#jirc{position: absolute;top: 0px;left: 0px;bottom: 0px;right: 0px;overflow: hidden;background: #2a364b;}
@media (min-width: 992px) { #jirc {position: absolute;top: 40px;left: 0px;bottom: 0px;right: 0px;overflow: hidden;background: #2a364b; border-radius: 16px;}}
.logo{position: fixed;right: 650px;margin-top: 15px; display: none;}
@media (min-width: 768px) {.logo {position: fixed;right: 650px;margin-top: 15px; display: inline-block;}}
.login{margin-top: 60px;}
.login h1 {color: #fff8ff;}
.login p {color: #fff8ff; text-align: center; font-weight: 300; font-size: 12px; margin-top: 10px; margin-bottom: 10px}
.login p img {margin-top: -1px; margin-right: 2px;}
#WoChat {position: absolute;top: 0;left: 0;bottom: 0;right: 0;overflow: hidden;}
.wologin{width: 98%; min-height: 220px; margin: auto;}
@media (min-width: 768px) {.wologin {width: 400px; min-height: 220px; margin: auto;}}
.nick{width: 100%; height: 50px; border-radius: 8px; border: 1px solid #404D65; background: url("../images/nick.png") no-repeat #fff8ff; background-position: left 20px top 10px; padding-left: 60px; margin-bottom: 7px; outline: none; color: #252d3b;}
.sifre{width: 100%; height: 50px; border-radius: 8px; border: 1px solid #404D65; background: url("../images/lock.png") no-repeat #fff8ff; background-position: left 20px top 10px; padding-left: 60px; margin-bottom: 7px; outline: none;}
.baglan{width: 100%; height: 60px; border-radius: 8px; border: none; background: #198754; margin-bottom: 7px; outline: none; color: #fff8ff; font-size: 20px;}
.f-surum{width: 100%; height: 60px; border-radius: 8px; border: none; background: #d5394f; margin-bottom: 7px; outline: none; color: #fff8ff; font-size: 20px; display: block; text-align: center; text-decoration: none; padding-top: 14px;}
.f-surum:hover{text-decoration:none; color: #fff8ff;}
.wologin input:-moz-placeholder {color: #404D65;}
.wologin input::-webkit-input-placeholder {color: #404D65;}
.bildirim-clm{position: absolute;right: 15px; bottom: 115px; width: 170px; height: 35px; border-radius: 38px;color: #95a1b5; font-size: 12px; background: url("../images/bildirim.png") no-repeat; background-position: left 15px top 2px; padding-left: 43px; padding-top: 6px; z-index: 500; display: none;}
@media (min-width: 992px) {.bildirim-clm {position: absolute;right: 110px; top: 5px; width: 220px; height: 35px; border-radius: 38px;color: #95a1b5; font-size: 12px; background: url("../images/bildirim.png") no-repeat; background-position: left 15px top 2px; padding-left: 43px; padding-top: 6px; z-index: 500; display: inline-block;}}
.yeni-bildirim{position: absolute; width: 200px; height: 38px; bottom: 90px; right: 0px; background: #D5394F; color: #FFF; padding: 1px 7px; border-radius: 2px; font-size: 11px !important; z-index: 2000; font-weight: 400;}
@media (min-width: 992px) {.yeni-bildirim {position: absolute; width: 200px; height: 38px; top: 1px; right: 90px; background: #D5394F; color: #FFF; padding: 1px 7px ; border-radius: 2px; font-size: 12px; z-index: 500;}}
.yeni-bildirim .nick-name {font-size: 12px; height: 20px; width: 90px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.yeni-bildirim .arkadas-notice-durum {width:105px; float: left;  overflow: hidden;text-overflow: ellipsis;white-space: nowrap; margin-top: -2px;}
.renk-mod{position: absolute; width: 224px; height: 40px; left: 220px;  padding-top: 5px; display: none;}
@media (min-width: 992px) {.renk-mod {position: absolute; width: 224px; height: 40px; left: 220px; padding-top: 5px; display: inline-block;}}
.renk-s{width:70px; font-size: 12px; float: left; color: #d5394f; text-align: center; margin-top: 7px; min-height: 25px;}
.renk-bt { width: 30px; height: 30px; border-radius: 50%; border: none; display: block; margin-bottom: 10px; position: relative;z-index: 2000;}
.mod-setting {
    position: fixed; width: 100px; height: 150px; right: 120px; top: 41%; z-index: 2000;
}
@media (min-width: 992px) {
    .mod-setting {
        position: fixed; width: 100px; height: 150px; right: 500px; top: 35%; z-index: 2000;
    }
}
    .ana-tema{background: #343e51;margin-left: 50px; margin-top: 10px; position: relative; width: 30px; height: 30px; z-index:2000;}
    .gece-tema{background:#000;margin-left: 18px;margin-top: -8px;position: relative; width: 30px; height: 30px; z-index:2000;}
    .renk-tema{background: #D400AB;margin-left: 17px;margin-top: 15px;position: relative; width: 30px; height: 30px; z-index:2000;}
    .color-tema{background: #7857ed;margin-left: 55px;margin-top: -10px;position: relative; width: 30px; height: 30px; z-index:2000;}


.oku{position: fixed;right: 155px;bottom: 100px; z-index: 500; width: 25px; height: 25px; text-align: center !important; border-radius: 50%;color: #d5394f;}
@media (min-width: 992px) {.oku {position: fixed;right: 463px;bottom: 100px; z-index: 500; width: 25px; height: 25px;}}
.oku button { width: 25px; height: 25px; border-radius: 50%; background: none; border: none; outline: none; color: #d5394f;text-align: center !important; margin: 0;}
.oku i {text-align: center !important;color: #d5394f; margin: 0;}
.menu{position: absolute; right: 10px; top: 7px; z-index: 2000; cursor: pointer;}
@media (min-width: 992px) {.menu {position: absolute; right: 15px; top: 7px; z-index: 2000; cursor: pointer;}}
.hangi-kanal{position: absolute; left: 50px; top: 12px; width: 105px; height: 35px; background: #2a364b; text-align: center; padding-top: 5px; border-radius: 6px; color: #FFF; font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: none;}
@media (min-width: 992px) {.hangi-kanal {position: absolute; left: 0px; top: 12px; width: 105px; height: 35px; background: #2a364b; text-align: center; padding-top: 5px; border-radius: 6px; color: #FFF; font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: inline-block;text-transform: capitalize;}}
.kisi_sayisi{position: absolute; left: 146px; top: 5px; width: 35px; height: 25px; background: #d5394f; text-align: center; padding: 3px; border-radius: 4px; color: #FFF; font-size: 12px; display: none;}
@media (min-width: 992px) {.kisi_sayisi {position: absolute; left: 90px; top: 5px; width: 35px; height: 25px; background: #d5394f; text-align: center; padding: 3px; border-radius: 4px; color: #FFF; font-size: 12px; display: inline-block;}}
.scroll-kapa{position: fixed; cursor:pointer; right: 140px; top: 188px; width: 25px; height: 25px; border-radius: 50%; background: #343e51; color: #FFF; text-align: center; font-size: 14px; padding-top: 2px; z-index: 1000; background-color: rgba(0, 0, 0, 0.35);}
@media (min-width: 992px) {.scroll-kapa {position: fixed; cursor:pointer; right: 463px; top: 100px; width: 25px; height: 25px; border-radius: 50%; background: #343e51; color: #FFF; text-align: center; font-size: 14px; padding-top: 2px; z-index: 1000; background-color: rgba(0, 0, 0, 0.35);}}
#menu-list {position: fixed;width: 200px;display: none;overflow: auto;float: left; margin-left: 0px; height: 100%;top: 0px;padding: 10px 20px;z-index: 2000;text-align: left;font-size: 14px;color: #696a9a;background: #2a364b;padding-bottom: 15px;}
@media (min-width: 992px) {#menu-list {position: fixed;width: 265px;display: none;overflow: auto;right: -6px;height: 393px;top: 48px;padding: 10px 20px;z-index: 1000;text-align: left;font-size: 14px;color: #696a9a;background: #2a364b;background-position: center top;padding-bottom: 15px;}}

.mobil-clm{position: fixed; left: 0; right: 0; top: 0; height: 40px; background: #1f2734; display: inline-block;}
@media (min-width: 992px) {.mobil-clm{display: none;}}

.tab-containers {
  width: 100%; display: block;
  z-index: 1000;
}
@media (min-width: 992px) {.tab-containers {width: 100%; display:none; z-index: 1000;}}
.tabs {
  position: absolute;
  top: 0;
  left: 50px;
  height: 40px;
  padding: 5px 45px 5px 15px;
  background: #343e51;
  border: none;
  cursor: pointer;
    z-index: 1000;
    font-size: 13px;
}
.tabs img{margin-top:-2px; margin-right:4px; }

.tab-contents {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 76px;
    z-index: 100;
  display: none;
  padding: 10px;
  background-color: #ffff;
  transition: max-height 0.3s ease;
    float: left;
    margin-top: 40px;
    overflow-x: hidden;
}
.tab-contents::-webkit-scrollbar {width: 3px;background-color:  #D5394F;border-left: 1px solid rgb(204, 204, 204);}

.tab-contents::-webkit-scrollbar-thumb {background-color:  #D5394F;border-radius: 22px;}

.tab-contents::-webkit-scrollbar-thumb:hover {background-color:  #404d65;}

@media (min-width: 768px) {.ozel-alan-clm::-webkit-scrollbar {width: 2px;background-color: #404d65;border-left: 1px solid rgb(204, 204, 204);}}
.active {
  background-color:#343e51;
  color: #fff;
  display: block !important;
}

.icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
#m-message {
    position: fixed;left: 215px;top: 7px;background: none;border: none;outline: none;cursor: pointer;z-index: 1001;display: inline-block; color: #FFF; font-size: 13px;
}
#m-message img {margin-right: 8px;}
@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: #2a364b;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 img {vertical-align: top; margin-right: 4px;}
.m-message-title {margin-top:13px; display: inline-block;}
.m-message-close {position: absolute;right: 0;top: 17px;background: none;border: none;outline: none;cursor: pointer;}
.mobil-mesaj {position: absolute;width: 16px;height: 16px;line-height: 16px;border-radius: 60%;background-color: #D5394F;margin-top: -27px;margin-left: 16px;font-size: 9px;color: #FFF;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);}

.mobil-oda-box{padding: 5px 14px 5px 6px;background: #343e51; border-radius: 2px; text-align: center; font-size: 12px; float: left; margin-right: 1px;color: #47c798; margin-bottom: 3px;border: 1px solid #47c798;}
.oda-name{float:left;}
.mobil-oda-box .close{background: none; border: none; outline: none; float: left; color: #47c798; font-size: 18px; margin-top: -5px; width: 10px; height: 10px; font-weight: bold;}
.mobil_secili{background: #cdffed;}
.m-radyo{position:absolute; width: 50px; height: 40px; text-align: center; left: 0; top: 0; z-index: 500; padding-top: 7px;}
.p-none{display:inline-block;}
@media (min-width: 992px) {.p-none { display: none;}}

#menu-list strong {color: #fff8ff; display: block;border-bottom: 1px solid #404d65; margin-bottom: 10px; padding-bottom: 8px; font-weight: 400; font-size: 18px;}
#menu-list button {color: #95a1b5;outline: none;border: none;display: block; padding: 4px 0px;}


.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #1f2734;
    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: #343e51;}
.btn-close { border: 1px solid #d5394f; color: #FFF;}
.btn-close:focus, .btn-close.focus {
    outline: 0;
    box-shadow: none;
}
.vazgec{background: #e64c62; border: none; outline: none;}
.vazgec:hover{background: #d5394f; border: none; outline: none;}
.ok{background: #52b58e; border: none; outline: none;}
.ok:hover{background: #409f7a; border: none; outline: none;}

.chat_ozel{position: sticky; left: 0px; right: 0px; top: 114px; height: 40px;color: #fff8ff;  font-size: 18px; padding-top: 7px; font-weight: 600;padding-left: 50px;background: none;}
@media (min-width: 992px) {.chat_ozel { position: fixed; left: 0px; right: 45px; top: 0px; height: 40px;color: #fff8ff;  font-size: 18px; padding-top: 7px; font-weight: 600;padding-left: 65px;background: #1f2734;}}
.chat_ozel-durum-nick{width: 100px; height: auto; margin-left: 6px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; float: left;font-size: 12px; padding-top: 6px;padding-bottom: 2px;color: #d5394f; margin-bottom: 10px;}
.chat_ozel-durum-nick img {
    width: 16px; height: 16px;
}
@media (min-width: 992px) {
    .chat_ozel-durum-nick {
        position: fixed;left: 60px;top: 8px; width: 140px; height: auto; overflow: hidden;text-overflow: ellipsis;white-space: nowrap; float: left; font-size: 16px; margin-left: 1px; padding-top: 1px; color: #FFF;
    }
    .chat_ozel-durum-nick img {
        width: 20px; height: 20px;
    }
}
.ozel-info {color:#c9bde4; font-weight: 300; float: left;}
.ozelde_goster{position: fixed; right: 0px; top: 40%;}
@media (min-width: 992px) {.ozelde_goster {position: fixed; right: 260px; top: 40%;}}
.arkadas-engelle button { background: none; border: none; outline: none;color: #47c798;}
.arkadas-engelle button img { margin-top: -2px;}
.chat_ozel-durum-nick img{margin-top: -6px;}

.chat_ozel .message-back {
    position: fixed;
    right: 20px;
    background: none;
    border: none;
    bottom: 140px;
    color: #d5394f;
}

.nickmode {position: absolute; right: 120px;top: 0px;width: 165px;height: 100%;text-align: center;font-size: 12px;color: #95a1b5;font-weight: bold;overflow: auto;display: none; z-index: 2002;}
@media (min-width: 992px) {.nickmode {right: 450px;top: 55px;height: 90%; z-index: 1010;}}
.nickmode-box {position: relative;width: 165px;background-color: #2a364b; margin-top: 40px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;  padding: 15px;padding-bottom: 30px;z-index: 1000;}
@media (min-width: 992px) {.nickmode-box {position: relative; margin-top:0px; width: 165px;background-color: #2a364b;border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;  padding: 15px;padding-bottom: 30px;z-index: 1000;}}
.nickmode-box .btn{color:#d5394f; 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: #d5394f;font-weight: bold;}
.mode-oplar {font-size: 14px; padding-left: 20px;}
#yan_nick{color:#d5394f; 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: #475265;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: 992px) {.nick-modem button span { width: 20px; height: 20px; border-radius: 50%;background: #475265;display: inline-block;font-size: 18px; font-weight: 200; color: #202547; padding: 0px; line-height: 22px;-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: #d5394f;;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;}

#toggleButton {position: absolute;right: 0;top: 50%; background: none; border: none; outline: none; z-index: 500;}
#toggleDiv {z-index: 100;}
.ozel_islemler { position:absolute; right: 0; background: #343e51; width: 120px; height: 180px;border-top-left-radius: 16px; border-bottom-left-radius: 16px; font-size: 12px; padding-top: 10px; padding-left: 15px;}
@media (min-width: 992px) {.ozel_islemler {position:absolute; right: 0; background: #343e51; width: 110px; height: 140px;border-top-left-radius: 16px; border-bottom-left-radius: 16px; font-size: 12px; padding-top: 10px; padding-left: 15px;}}
.ozel_islemler strong{position: absolute; margin-top: -38px; font-size: 18px; display: inline-block; color: #47c798;}
.arkadas-engelle { width: 100%;  color: #47c798;display: block; margin-bottom: 10px; clear: both;}
.arkadas-bilgi{ width: 100%; color: #47c798; display: block; cursor: pointer; float: left; padding-left: 6px; margin-bottom: 10px; background: none; border: none; outline: none;}
.arkadas-bilgi img{margin-top:-2px;}
.details,
.jshow,
.jhide:target {
  display: none;
}
.jhide:target + .jshow,
.jhide:target ~ .details {
  display: block;
}

#goster{position: fixed; width: 70px; height: 50px; right: 510px; top: 48%; color: #47c798; text-decoration: none; font-size: 14px; font-weight: bold;z-index: 1000;}
@media (min-width: 992px) {#goster {position: fixed; width: 70px; height: 50px; right: 510px; z-index: 1000; top: 41%; color: #47c798; text-decoration: none; font-size: 14px; font-weight: bold;}}
#gizle{position: fixed; width: 50px; height: 50px; right: 595px; z-index: 1000; top: 48%; color: #47c798; text-decoration: none; font-size: 14px; font-weight: bold;}
@media (min-width: 992px) {#gizle {position: fixed; width: 50px; height: 50px; right: 595px; z-index: 1000; top: 41%; color: #47c798; text-decoration: none; font-size: 14px; font-weight: bold;}}

#screenshotBtn{text-align:left; padding-left: 7px;}
.loader {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-left:15px;
 margin-top: 10px;
  position: relative;
  background: #FFF;
  box-shadow: -10px 0 #FFF, 10px 0 #FFF;
  box-sizing: border-box;
  animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
  33% {
    background: #FFF;
    box-shadow: -10px 0 #d5394f, 10px 0 #FFF;
  }
  66% {
    background: #d5394f;
    box-shadow: -10px 0 #FFF, 10px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -10px 0 #FFF, 10px 0 #d5394f;
  }
}

.ozel-ms{margin-bottom:3px;}
.ozel-ms p {background: #cbd0d9; display: inline-block; padding: 1px 6px 3px 6px;border-radius: 0px 16px 16px;border: 1px solid #eff4fd;}

.jirc_screen{position: absolute;left: 0px;top: 74px;bottom: 0px;right: 0px;background: #FFF; background-position: left top; border-radius: 0px; overflow: auto;}
@media (min-width: 992px) {.jirc_screen {position: absolute; overflow: auto; left: 0px;top: 15px;bottom: 0px;right: 0px; background: #FFF; background-position: left top; border-radius: 16px;     -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.09); -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.09);}}
.m-none{display:none;}
@media (min-width: 992px) {.m-none {display:block;}}
.jchat-clm{position: absolute; top: 40px; left: 0; bottom: 90px; right: 120px; background: #FFF;-webkit-overflow-scrolling: auto; overflow: auto;overflow-x: hidden;padding: 2px 2px 2px 3px; z-index: 100;}
@media (min-width: 992px) {.jchat-clm {position: absolute; top: 0; left: 0; bottom: 90px; right: 450px; background: #FFF; -webkit-overflow-scrolling: auto; overflow: auto;overflow-x: hidden;padding: 35px 2px 2px 15px; z-index: 100;}}
.jchat-clm::-webkit-scrollbar {width: 0px; background-color: #e6e4fe; border-left: 0px solid #ccc; }
.jchat-clm::-webkit-scrollbar-thumb {background-color: #2a364b; border-radius: 22px;}
.jchat-clm::-webkit-scrollbar-thumb:hover {background-color: #d5394f;}
@media (min-width: 768px) {.jchat-clm::-webkit-scrollbar {width: 6px; background-color: #e6e4fe; border-left: 0px solid #ccc;}}




.message-box {
    position: relative;
    float: left;
    width: 100%;
}
.message-box-nick strong{position:relative; margin-left: 4px; display: inline-block; margin-right: 5px;}
@media (min-width: 992px) {.message-box-nick strong {position:relative; margin-left: 4px; display: inline-block; margin-right: 5px;}}
.message {width: calc(100% - 1px);}
.message-box-msj {float: left;margin-left: 0px;font-weight: 400;-webkit-appearance: none;word-break: break-word;font-family: "Poppins";}
@media (min-width: 992px) {.message-box-msj {float: left;margin-left: 1px;font-weight: 400;-webkit-appearance: none;word-break: break-word;font-family: "Poppins";}}
.message-box-msj p {
    margin: 0 !important;
    display: inline;
}

.messages.ozel_mesajlari .message-box-msj p {
    margin-left: 4px !important;
    margin-bottom: 2px !important;
    display: inline-block;
    background: #FFF;
    padding-left: 12px;
    padding-right: 30px;
    padding-top: 5px;
    padding-bottom: 6px;
    border-radius: 0px 38px 38px;
    box-shadow: 0 0.125rem 0.45rem rgba(0,0,0,.175) !important;
}

.messages.ozel_mesajlari .message-box-msj p:after {
    position: absolute;
    content: url("../images/okundu.png");
    width: 16px;
    height: 16px;
    margin-left: 5px;
    margin-top: 10px;
}
.message-box-nick {float: left;}

.zaman_g {
    float: left;
    font-size: 11px;
    font-weight: normal;
    margin-top:2px;
    margin-right: 4px;
    color: #1f2734;
}
.giris-mesaj {
    position: relative;
    width: auto;
    left: 0;
    right: 0;
    top: 0;
    background: #FFF;
    color: #000;
    border-bottom: 2px dashed #e6e4fe;
    font-size: 14px;
    margin-bottom: 5px;
    padding-top: 6px;
    padding-bottom: 4px;
    z-index: 500;
    border-top-left-radius: 8px;
}
@media (min-width: 992px) {.giris-mesaj {position: fixed;
    left: 10px;
    top: 55px;
    right: 459px;
    background: #FFF;
    color: #000;
   border-bottom: 2px dashed #e6e4fe;
    font-size: 14px;
    margin-bottom: 5px;
    padding-top: 6px;
    padding-bottom: 4px;
    z-index: 500;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top-left-radius: 8px;}}
.giris-mesaj span {
    border-radius: 38px;
    margin-right: 1px;
    font-size: 12px;
}
.gmesaj-title{background: #404d65;padding: 2px 6px 2px 6px; color: #FFF; margin-right: 10px;}
.message-box-msj img {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: -1px;
}

.join-mode {
    float: left;
    width:100%;
    min-height: 12px;
    color: #1f2734;
    margin-bottom: 2px;
}
.join-mode p{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 {
        color: #1f2734;
    }
}

.join-chan {
    float: left;
    color: #1f2734;
    margin-top: 1px;
}

.join-giris-ico {
    float: left;
    margin-right: 5px;
    padding: 1px 5px 1px 5px;
    border-radius: 38px;
    border-color: #daf5ea;
    color: #17d44a;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
}

.join-part-ico {
    float: left;
    margin-right: 5px;
    border-radius: 38px;
    color: #CCC;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    padding: 0px 5px 1px 5px;
}

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

.join-nick-ico {
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    color: #ff8100;
    text-align: center;
    font-weight: 700
}

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

.join-mode-ico {
    float: left;
    margin-right: 5px;
    padding: 0px 5px 1px 5px;
    color: #05bee6;
    text-align: center;
    font-weight: 700
}

.notice {
    font-family: 'Montserrat', sans-serif;
    color: #000;
    min-height: 20px;
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .notice {
        font-size:13px
    }
}

.notice span {
    font-weight: 700
}






.jsend-message-clm{position: fixed; right: 0; top: 0; bottom:0; width: 260px; background: #343e51;overflow: auto;overflow-x: hidden;}
@media (min-width: 992px) {.jsend-message-clm{position: absolute; right: 0; top: 0; bottom:0; width: 260px; background: #343e51;}}
.sunucu-name{background: #1f2734; width: 100%; min-height: 45px; color: #95a1b5; text-align: center; padding-top: 10px; display: none;}
@media (min-width: 992px) {.sunucu-name{background: #1f2734; width: 100%; min-height: 45px; color: #95a1b5; text-align: center; padding-top: 10px; display: inline-block;}}
.sunucu-name img{vertical-align:middle;}
.kanal-title{width:100%; min-height: 45px; background: #404d65; padding: 11px; color: #fff8ff;}
.kanal-t{float:left; margin-right: 5px;}
.kanal-t img{margin-top: -2px;}
.k-join{position: absolute; right: 40px; margin-right: 8px;font-size: 14px;margin-top: 2px;color: #95a1b5;cursor: pointer;}
@media (min-width: 992px) {.k-join{position: absolute; right: 0; margin-right: 8px;font-size: 14px;margin-top: 2px;color: #95a1b5;cursor: pointer;}}
.k-join img{margin-top:-2px;}
.new-clm{width: 100%; min-height: 62px;border-bottom: 1px solid #404d65;color: #95a1b5; cursor: pointer;}
.new-clm figure{margin:0rem;}
.new-left{float:left;width: 50%;padding: 8px 4px 4px; text-align: center;}
.new-left button {background: none; border: none; outline: none;}
.irc-radyo {
    position: absolute; left: 3px; margin-top: 6px; z-index: 10;
}
@media (min-width: 992px) {
    .irc-radyo {
        position: absolute; right: 25px; left: auto; margin-top: 152px; z-index: 10;
    }
}
.irc-radyo figure {
    margin: 0rem
}
.irc-radyo button {
    background: none; border: none; outline: none;
    z-index: 90;
}
.irc-radyo span {
    display: none; margin-left: -5px;color: #95a1b5;
}
@media (min-width: 992px) {
    .irc-radyo span {
        display: inline-block; margin-left: -5px;color: #95a1b5;
    }

}
.kanal-clm{position: absolute;top: 0px;left: 0;bottom: 0;right: 0;overflow: auto;overflow-x: hidden;z-index: 999;}
@media (min-width: 992px) {
    .kanal-clm {
        position: absolute;top: 153px;left: 0;bottom: 0;right: 0;overflow: auto;overflow-x: hidden;z-index: 999;
    }
}
.oda-list{width: 100%; height: 50%; display: none;}
@media (min-width: 992px) {
    .oda-list {
        width: 100%; height: 50%; display: inline-block;
    }
}
.oda-alan{overflow-y: auto;height: calc(100% - 50px);}

.oda-alan::-webkit-scrollbar {width: 0px;background-color:  #404d65;border-left: 1px solid rgb(204, 204, 204);}
.oda-alan::-webkit-scrollbar-thumb {background-color:  #404d65;border-radius: 22px;}
.oda-alan::-webkit-scrollbar-thumb:hover {background-color:  #404d65;}
@media (min-width: 992px) {.oda-alan::-webkit-scrollbar {width: 2px;background-color: #404d65;border-left: 1px solid rgb(204, 204, 204);}}


.oda-box {
    width:auto; float: left; position: relative; min-height: 26px;border-bottom: none; padding: 3px 2px 0px 3px; color: #95a1b5;
    font-size: 13px;background: #2c3649;margin-right: 2px;margin-bottom: 1px;
}
@media (min-width: 992px) {
    .oda-box {
        width: 100%; position: relative; min-height: 29px;border-bottom: 1px solid #404d65; padding: 3px 3px 3px 7px; color: #95a1b5; display: block;clear: both;cursor: pointer;
        font-size: 16px; background: none;
    }
}
.oda-box:hover{background: #404d65;}
.kanal-isim{float:left; margin-right: 2px; width: auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-transform: capitalize;}
@media (min-width: 992px) {
    .kanal-isim {
        float:left; margin-right: 4px; width: 145px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-transform: capitalize;
    }

}
.kanal-isim span{color: #da3349; margin-right: 3px; font-weight: 600; display: none;}

@media (min-width: 992px) {
    .kanal-isim span {
        color: #da3349; margin-right: 3px; font-weight: 600; display: inline-block;
    }

}
.kanal-isim strong{font-weight: 600;}
.kanal-gelen-mesaj {position:absolute; z-index:-1; opacity:0;width: 18px;float: left;font-size: 10px;margin-top: 3px;margin-left: 36px;font-weight: 400;background: #343e51;color: #343e51;text-align: center;padding-top: 2px;border-radius: 38px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
@media (min-width: 992px) {
        .kanal-gelen-mesaj {
          position: relative; opacity: 9; z-index: 10;  width: 18px;height: 18px;float: left;font-size: 10px;margin-top: 3px;margin-left: 36px;font-weight: 400;background: #d5394f;color: #FFF;text-align: center;padding-top: 2px;border-radius: 38px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: inline-block;
        }

}
.status{width: 70px; float: left; font-size: 13px; background: none !important; margin-top: 3px;}
.status img {margin-top: -2px;}
.kanal-gelen-mesaj strong{font-weight:400;}
.oda-box button {position: relative;float: left;background: none;border-radius: 50%;border: none;outline: none;margin-top: 0px;}
@media (min-width: 992px) {
    .oda-box button {
        position: absolute;right: 3px;background: none;border-radius: 50%;border: none;outline: none;margin-top: 0px;
    }

}
.oda-box button span {width: 15px;height: 15px;border-radius: 50%;background: none;color: #55637b;display: inline-block;font-size: 18px;font-weight: 200;padding: 0px;line-height: 16px;-webkit-transition-duration: 0.3s;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-ms-transition-duration: 0.3s;transition-duration: 0.3s; margin-top: 1px;}

@media (min-width: 992px) {
    .oda-box button span {
        width: 20px;height: 20px;border-radius: 50%;background: #2a364b;color: #55637b;display: inline-block;font-size: 18px;font-weight: 200;padding: 0px;line-height: 21px;-webkit-transition-duration: 0.3s;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-ms-transition-duration: 0.3s;transition-duration: 0.3s;
    }

}
.secili_kanal{background: #404d65; color: #FFF;}
.ozel-alan{height: 40%;width: 100%; }
.ozel-alan-clm{overflow-y: auto;height: calc(100% - 50px);}
.ozel-alan .kanal-title{margin-bottom: 10px;}
.ozel-mesaj {width: 100%;height: 25px;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 4px;cursor: pointer;color: #fff8ff;}
.ozel-mesaj:hover{ font-size: 14px;background: url("../images/mesaj.png") no-repeat #404d65;cursor: pointer;background-position: left 13px top 4px;}
.ozel-mesaj-nick {float: left;width: 145px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; font-weight: 400;}
.ozel-gelen-mesaj {float: left;width: 25px;height: 25px;margin-top: -2px;font-size: 10px;font-weight: 200;color: rgb(255, 255, 255);text-align: center;padding: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.ozel-gelen-mesaj strong {width: 18px;height: 18px;float: left;display: inline-block;background: #d5394f;color: #FFF;text-align: center;padding-top: 1px;border-radius: 38px;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: -1px;}

.ozel-mesaj button span {width: 20px;height: 20px;border-radius: 50%;background: #2a364b;color: #55637b;display: inline-block;font-size: 18px;font-weight: 200;padding: 0px;line-height: 21px;
transition-duration: 0.3s;opacity: 1;}
.ozel-alan-clm::-webkit-scrollbar {width: 0px;background-color:  #404d65;border-left: 1px solid rgb(204, 204, 204);}

.ozel-alan-clm::-webkit-scrollbar-thumb {background-color:  #404d65;border-radius: 22px;}

.ozel-alan-clm::-webkit-scrollbar-thumb:hover {background-color:  #404d65;}

@media (min-width: 768px) {.ozel-alan-clm::-webkit-scrollbar {width: 2px;background-color: #404d65;border-left: 1px solid rgb(204, 204, 204);}}

.yeni_mesaj {color: #d5394f;background: url(../images/n-mesaj.png) left 13px top 3px no-repeat;cursor: pointer;}
.yeni_mesaj:hover{color:#d5394f;background: url("../images/n-mesaj.png") no-repeat #404d65;cursor: pointer;background-position: left 13px top 3px;}
.jwel{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;}
.jtext{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;}
.jnick-clm{position: absolute; width: 120px; right: 0px; top: 40px; bottom: 90px;background: #f7faff;overflow: hidden;overflow-x: hidden;padding-bottom: 20px;border-left: 2px dashed #e6e4fe;}
@media (min-width: 992px) {.jnick-clm {position: absolute; width: 190px; right: 260px; top: 0; bottom: 0px;background: #f7faff;overflow: hidden;overflow-x: hidden;padding-bottom: 50px; border-left: none;}}
.nickler {height: 100%;width: 100%;font-family: 'Helvetica Neue', sans-serif; z-index: 1000; position: relative;}
.nickler-clm {overflow: auto;overflow-x: hidden;height: 100%;scrollbar-width: auto;}
.nick-box {width: 120px;height: 24px;margin-top: 1px;margin-bottom: 0px;padding: 4px 3px 1px 3px;display: block;clear: both;font-weight: 400;cursor: pointer;}
@media (min-width: 992px) {.nick-box  {width: 190px;height: 29px;margin-top: 1px;margin-bottom: 1px;padding: 5px 4px 2px 4px;display: block;clear: both;font-weight: 400;cursor: pointer;}}
.nick-name {float: left;width: 90px;height: 20px;font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 1px; font-weight: 600;}
@media (min-width: 992px) {.nick-name  {float: left;width: 154px;height: 22px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 0px; font-weight: 600;}}
.nick-prefix-img {float:left; margin-right: 2px; width: 18px; height: 18px; margin-top: -4px;}
@media (min-width: 992px) {.nick-prefix-img  {float:left; margin-right: 2px; width: 24px; height: 24px; margin-top: -4px;}}
.nick-prefix-img img {border-radius: 4px; width: 16px; height: 16px;}
@media (min-width: 992px) {.nick-prefix-img img {border-radius: 4px; width: 20px; height: 20px;}}
.nick-ara{width:100%; min-height: 35px; background: url("../images/ara.png") no-repeat #d5ddeb; color: #95a1b5; text-align: center; padding-top: 8px; background-position: left 4px center; font-size: 12px;}
.nick-ara input {
    background: none; border: none; padding-left: 40px; outline: none;
}
@media (min-width: 992px) {
    .nick-ara {
        width:100%; min-height: 35px; background: url("../images/ara.png") no-repeat #d5ddeb; color: #95a1b5; text-align: center; padding-top: 10px; background-position: left 8px center; font-size: 13px;
    }
}
.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: none;
    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: none;
}



.class_q{color: red;}
.class_a{color: #be284d;}
.class_o{color: #48a9c5;}
.class_h{color: #69bd27;}
.class_v{color: #ecb731;}
.class_n{color: #00334e;}
.nickler-clm::-webkit-scrollbar {width: 0px; background-color: #e6e4fe; border-left: 0px solid #ccc; }
.nickler-clm::-webkit-scrollbar-thumb {background-color: #2a364b; border-radius: 22px;}
.nickler-clm::-webkit-scrollbar-thumb:hover {background-color: #d5394f;}
@media (min-width: 768px) {.nickler-clm::-webkit-scrollbar {width: 6px; background-color: #e6e4fe; border-left: 0px solid #ccc;}}



.mesaj_alan {position: absolute;  height: 90px; left: 0; bottom: 0px;right: 0px; background: #ebeff7;z-index: 100;}
@media (min-width: 992px) {.mesaj_alan {position: absolute;  height: 90px; left: 0; bottom: 0px;right: 450px; background: #ebeff7; z-index: 100;}}
.mesaj-ust{width: 100%; min-height: 35px; background: #f6f9ff;border-top: 2px solid #eff4fd; padding-left: 0px;}
@media (min-width: 992px) {
    .mesaj-ust {
        width: 100%; min-height: 35px; background: #f6f9ff;border-top: 2px solid #eff4fd; padding-left: 0px;
    }
}
.emojis{position: absolute; right: 80px; margin-top: 15px; border: none; outline: none; background: none; z-index: 2001;}
@media (min-width: 992px) {
    .emojis {
        position: absolute; right: 50px; margin-top: 15px; border: none; outline: none; background: none;  z-index: 2001;
    }
}
.emojis img{position: relative; width: 24px; height: 25px; margin: auto; text-align: center; z-index: 1000;}
.emoji-ac{position:relative; width: 150px;float: right;margin-right: 13px; z-index: 2000;}
@media (min-width: 992px) {
    .emoji-ac {
       position: relative; width: 300px;float: right;margin-right: 63px; z-index: 2000;
    }
}
.emoji-ac ul{width: 230px; height: 186px;background: #e6e4fe; border: none; margin: 2px 4px 46px -220px !important; padding: 15px;overflow: auto; -ms-overflow-style: none; scrollbar-width: none;}
@media (min-width: 992px) {.emoji-ac ul {width: 300px; height: 240px;background: #e6e4fe; border: none; margin: 4px 4px 46px -153px !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;
}
.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: 4px;
    margin-left: 5px;
    margin-right: 5px;
}
@media (min-width: 992px) {
    #renksec {
        cursor: pointer;
        float: left;
        margin-top: 4px;
        margin-left: 11px;
        margin-right: 10px;
    }
}
#sitil {position: absolute;display: none;bottom: 90px;left: 10px;border-radius: 7px;padding: 10px;background: #e6e4fe;width: 165px;z-index: 1000;}
@media (min-width: 992px) {#sitil {position: absolute;display: none;bottom: 90px;left: 1px;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;
}
.btn-ust{float: left; margin-left: 0px; margin-right:0px; margin-top: 3px; border: none; background: none; outline: none;}
@media (min-width: 992px) {
    .btn-ust {
        float: left; margin-left: 5px; margin-right:5px; margin-top: 3px; border: none; background: none; outline: none;
    }
}
.btn-ust a{color: #000; text-decoration: none;}
.btn-right{position: absolute; right: 45px; margin-top: 3px; border: none; background: none; outline: none;}
.prnt {right: 115px; margin-top: 1px;}
.k-ic{right:80px;}
.f-c{right:10px;}
.nick-tab{float:left; padding: 4px;border-right: 1px solid #c8d2e3; font-size: 12px; color: #95a1b5; margin: 13px 2px 1px 2px; padding-right: 15px; cursor: pointer;}
@media (min-width: 992px) {
    .nick-tab {
        float:left; padding: 8px;border-right: 1px solid #c8d2e3; font-size: 12px; color: #95a1b5; margin: 8px 8px 1px 18px; padding-right: 25px; cursor: pointer;
    }
}
.mesaj-gonderim{float:left;}
.yolla {float: left;position: absolute;margin-left: 32px;width: calc(89% - 125px);height: 50px;box-shadow: none;font-size: 16px;padding-top: 10px;padding-left: 20px;left: 0px;border: none;outline: none;background: none;}

@media (min-width: 992px) {
    .yolla {
        float: left;position: absolute;margin-left: 70px;width: calc(89% - 50px);height: 50px;box-shadow: none;font-size: 16px;padding-top: 2px;padding-left: 20px;left: 0px;border: none;outline: none;background: none;
    }
}

.gonder-mjs {position: absolute;width: 85px;height: 40px;background: url("../images/send.png") no-repeat #47c798; background-position: left 6px center; right: 3px;margin-top: 8px;text-align: center;color: rgb(255, 255, 255);border-radius: 38px;padding-top: 2px; padding-left: 15px; font-size: 12px; border: none;}
@media (min-width: 992px) {
    .gonder-mjs {
        position: absolute;width: 95px;height: 40px;background: url("../images/send.png") no-repeat #47c798; background-position: left 6px center; right: 14px;margin-top: 9px;text-align: center;color: rgb(255, 255, 255);border-radius: 38px;padding-top: 2px; padding-left: 15px; font-size: 14px; border: none;
    }
}
.islemler {position: absolute;width: 100%;left: 0px;right: 0px;bottom: 0px;background: #1f2734;height: 55px;text-align: center;color: rgb(255, 255, 255);border: none;z-index: 1000;display: block; font-size: 12px;}
.islem-clm{width:33.3%; float: left; height: 100%; padding: 6px; color: #8e99ad; border-right: 1px solid #262f3d; cursor: pointer;}
.islem-clm:hover{background: #262f3d;}
.islem-clm figure{margin:0rem;}
.islem-clm img{margin-bottom:3px;}
.c-hearts {width: 100px;height: 300px;position: absolute; bottom: -45px;left: 0px; margin-right: -30px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100;}
@media (min-width: 768px) {.c-hearts {width: 100px;height: 300px;position: absolute; bottom: -35px;left: 20px; margin-right: 0px; -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%; } }
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    border:0;
    background: url("../images/close.png") no-repeat;
    border-radius: 0.25rem;
    opacity: .5;
    color: #FFF;
}
.chat_ozel_left {
    float: left;
    width: 100%;
    margin-left: 4px;
    cursor: pointer
}

.chat_ozel_left label {
    padding-left: 20px;
    padding-top: 2px;
    min-height: 25px;
    cursor: pointer;
    background: url(../images/resim_gonder.png) no-repeat;
    background-size: 16px 16px;
    background-position: left top 2px;
    color: #47c798;
}
#acilacakDiv {
    width: 100px;
    height: 150px;
    display: none;
    padding: 10px;
    margin-top: -50px;
    margin-left: -30px;
}

/* Kapalı durum için gösterilecek icon */
.fa-chevron-right {
    position: absolute;
    display: inline;
    color: green;
    top: -20px;
    margin-left: -100px;
    font-size: 14px;
}
@media (min-width: 992px) {
    .fa-chevron-right {
        position: absolute;
        display: inline;
        color: green;
        top: -10px;
        margin-left: -100px;
        font-size: 14px;
    }
}

/* Açık durum için gösterilecek icon */
.fa-chevron-left {
    position: absolute;
    width: 70px;
    font-size: 14px;
    top: -10px;
    display: none;
    margin-left: -55px;
    color: #d5394f;
}


/* Buton stili */
#toggleButton {
    cursor: pointer;
}