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

/* Başlıklar */
h1{font: bold 50px/50px 'Quicksand', sans-serif;color: #000;}
h2{font: 45px/50px 'Quicksand', sans-serif;color: #000;}
h3{font: 35px/40px 'Quicksand', sans-serif;color: #000;}
h4{font: 30px/40px 'Quicksand', sans-serif;color: #000;}
h5{font: 25px/25px 'Quicksand', sans-serif;color: #000;}
body{ font-family: 'Quicksand', sans-serif; 
background: url('../images/main-bg.png') no-repeat; 
background-color:#f0f7fd;
background-position: right top;}
::-webkit-scrollbar {width: 0px;background-color: #eaeaea;border-left: 1px solid #ccc;}
::-webkit-scrollbar-thumb {background-color: #67b5d9;border-radius: 22px;}
::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}

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

}


#main{position:absolute;overflow:hidden;top: 0;left: 0;bottom: 0;right: 0;}
a{-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
a.dapplet{background: #5fbfca; border:none; color:#FFF; font-weight:bold; border-radius: 4px; font-size:14px; padding:9px; text-decoration:none;}
a.dapplet:hover{background:#ff0074;width:185px;height:50px;}
.pad0{padding: 0;}
.logo{margin-top: 20px;}
.header{position: relative; min-height: 72px;background: url('../images/body.png') no-repeat; background-size: contain; z-index: 1001;}
/* toolbar başlangıç */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
.tool{position: absolute; left: 0; right: 0px; top: 0; min-height: 45px; background: #5fbfca;background-position: right; padding-left: 50px;}
@media (min-width: 992px) {.tool { background: url(../images/m-tool-bg.png) #5fbfca no-repeat;left: 260px;padding-left: 20px;}}
  @media (min-width: 768px) {.tool { background-position: left;}}
    .tool-chan{width: 100px; min-height: 45px; margin-left: 55px; padding-top: 9px;}
    @media (min-width: 768px) {.tool-chan { width: 500px; min-height: 45px; margin-left: 130px;padding-top: 10px;}}
    .tool-chan-img{ position: absolute; float: left; width: 25px; min-height: 25px; margin-right: 2px;border-radius: 60%; }
    .tool-chat-kanal{float: left; width: 95px; min-height: 30px; margin-left: 26px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #FFF; font-weight: bold; font-size: 16px;}
    @media (min-width: 768px) {.tool-chat-kanal { width: 110px; font-size: 16px;}}
      .tool-kanal{margin-left: 135px;}
      .tool-kanal-kisi{margin-left: 35px;}
    .ust-kanal{ display: none;  width: 105px; min-height: 30px; margin-left: 42px; float: left; margin-right: 10px; margin-top: 9px; margin-bottom: 5px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; color: #FFF; }
    @media (min-width: 992px) {.ust-kanal { width: 275px; margin-left: 135px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}}
      .ust-kanal img{float: left;}
    .ust-kanal .chan{ float: left; color: #FFF; font-weight: bold; font-size: 16px; margin-left: 6px;text-shadow: 0 3px 2px rgba(0,0,0,.1); }
    #menu{position: fixed; right: 10px;top: 4px; font-size: 14px;cursor:pointer;display:inline-block; z-index: 1001;}
    @media (min-width: 768px) {#menu { right: 75px;top: 10px;}}
      #menu-list{position: fixed;width:185px;display:none;overflow:auto;left:0;top: 0px;padding-top: 5px; z-index:2000;text-align: center;font-size: 15px; color: #FFF; background-color: #5fbfca;  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);}
      @media (min-width: 768px) {#menu-list {width:170px;right: 0;left: auto;top: 45px;}}
      #kanal{position: fixed; right: 47px;top: 4px; font-size: 10px;cursor:pointer;display:inline-block; z-index: 1001; color: #FFF;}
      @media (min-width: 768px) {#kanal { right: 75px;top: 10px;}}
        #kanal-list{position: fixed;width:185px; height: 100%; display:none;overflow:auto;left:0;top: 0px;padding-top: 5px; z-index:2000;text-align: center;font-size: 16px; color: #FFF; background-color: #5fbfca;  padding-bottom: 35px; -webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1); 
        box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);}
        #kanal-list ul button{margin-right: 4px; margin-top: -2px;}
        #kanal-list ul button span{color:#FFF;}
        @media (min-width: 768px) {#kanal-list {width:170px;right: 0;left: auto;top: 45px;}}
        #kanal-list h5{color: #FFF; font-weight: bold;}
        #kanal-list ul{list-style: none; margin-left: -35px;}
        #kanal-list li {color: #FFF;width: 95%; min-height: 35px; line-height: 25px; text-align: center; font-weight: bold;border-bottom: 1px dashed #eff1f1; padding-top: 4px;border-radius: 4px;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s; cursor: pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
        #kanal-list li:hover{background: #ff0074;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
        .m-secili-kanal{background-color: #ff0074;}
        #kanal-list li a{color: #000;}
        .kanal-mesaj{position: absolute; width: 10px; height: 10px; border-radius: 60%; background-color: #ff0074; margin-top: -24px; margin-left: -2px; font-size: 9px; color: #5fbfca; text-align: center; font-weight: bold;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01);text-shadow: 0 3px 2px rgba(0,0,0,.2); display: none;}
        .m-kanal-gelen-mesaj{ float: left; width: 12px; height: 12px; border-radius: 60%; background-color: #FFF; color: #FFF; margin-top: 7px; margin-left: 4px; font-size: 14px; text-align: center; font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        #kanal-list li a:hover{ opacity: 0,9; text-decoration:none;}
        .join-chat{ -webkit-animation-duration: 3s;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: 1;}
        .mobil-mesaj{position: absolute; width: 10px; height: 10px; border-radius: 60%; background-color: #ff0074; margin-top: -18px; margin-left: 5px; font-size: 9px; color: #5fbfca; text-align: center; font-weight: bold;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01);text-shadow: 0 3px 2px rgba(0,0,0,.2);}
      .bildirim-mesaj{position: absolute; width: 22px; height: 22px; border-radius: 60%; background-color: #ff0074; margin-top: 5px; margin-left: 5px; font-size: 13px; color: #FFF; text-align: center; font-weight: bold;-webkit-appearance: none; box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01);overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 1px; }
      .btn{background: #5fbfca; border:none; color: #FFF; border-radius: 4px; font-size: 14px; font-weight: bold; margin-top: 5px; width: 95%;}
      .btn-secondary{background: #ff0074;}
      .btn-secondary:hover{background: #CCC;}
      .bstn:focus{border:none;}
      .btn:hover{background: #ff0074;}
      .btn:focus, .btn.focus {outline: 0;box-shadow: none;}
      .modal h5{color: #5fbfca; font-weight: bold;}
      .modal-inp{width: 95%; min-height: 50px; margin-top: 10px; margin-bottom: 10px; border-radius: 38px;-webkit-appearance: none;box-shadow: 0 6px 32px rgba(0,0,0,0.1), 0 2px 10px rgba(0,0,0,0.01); border: none; background-color: #FFF; outline: none; padding-left: 30px;}
    .alt{width: 100%; min-height: 10px;border-bottom: 1px dashed #eff1f1; margin-bottom: 3px; }
.alt-bos{width: 100%; height:10px;}
    .menu-ac{position: fixed; z-index: 3000;}
    /* ------------------------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------------------------ */
    /* ------------------------------------------------------------------------------------------ */
    /* toolbar bitti */









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


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

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

              .message-box{ position: relative; float: left; width: 100%; margin-left: 2px; margin-bottom: 3px; margin-top: 6px; color: #FFF;}
              @media (min-width: 768px) {.message-box {position: relative; float: left; width: 100%; margin-left: 2px; margin-bottom: 5px; margin-top: 4px; color: #FFF; }}
              .message-box-img{float: left; margin: 0px;width: 24px; height: 26px;}
              @media (min-width: 768px) {.message-box-img {width: 35px; height: 37px;margin: 0px; }}
              .message-box-img img{ float: left; width: 24px; height: 26px; border-radius: 60%; margin-right: 4px;cursor: pointer;}
              @media (min-width: 768px) {.message-box-img img {width: 35px; height: 37px; margin-left: 4px; margin-right: 4px; }}
            .message{float: left;  width: calc(100% - 26px); }
            @media (min-width: 768px) {.message {width: calc(100% - 50px);}}
            .message-box-nick{margin-left: 9px; font-size: 10px; margin-top: -12px; color: #999; font-weight: bold;cursor: pointer;}
            @media (min-width: 768px) {.message-box-nick {font-size: 11px;margin-left: 22px; margin-top: -10px;}}
          .message-box-nick span{color:#5fbfca; }
          .message-box-time{ margin-left: 10px;}
          .message-box-msj{ float: left;  margin-left: 2px; background-color: #ff5400; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; border-radius: 38px; font-size: 14px; text-align: left; margin-top: -1px; font-weight: bold;}
          @media (min-width: 768px) {.message-box-msj {margin-left: 10px;padding-left: 12px; padding-right: 12px; padding-top: 5px; padding-bottom: 6px;font-size: 14px; font-weight: bold;margin-top: -2px; }}
          .message-box-msj img{ width: 16px; height: 16px; margin-left: 2px; margin-right: 2px;}
          @media (min-width: 768px) {.message-box-msj img {width: 22px; height: 22px; margin-left: 4px; margin-right: 4px; }}
          .join-mode{float: left; width: 100%; min-height: 12px; font-size: 10px;  color: #bbbaba;  margin-bottom: 6px; padding-left: 10px;}
          @media (min-width: 768px) {.join-mode {padding-left: 80px;font-size: 10px;color: #CCC; }}
          .join-chan{ float: left; margin-bottom: 1px;font-size:11px;}
          .join-giris-ico{ float: left; margin-right: 5px; width: 14px; height: 14px; border-radius: 60%; background-color:#5fbfca; color: #FFF; text-align: center; font-weight: bold;}
          .join-part-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#CCC; color: #FFF; text-align: center; font-weight: bold;}
          .join-quit-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#ff0074; color: #FFF; text-align: center; font-weight: bold;}
          .join-nick-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#ff5400; color: #FFF; text-align: center; font-weight: bold;}
          .join-kick-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#955bd0; color: #FFF; text-align: center; font-weight: bold;}
          .join-mode-ico{float: left; margin-right: 5px; width: 13px; height: 13px; border-radius: 60%; background-color:#af006f; color: #FFF; text-align: center; font-weight: bold;}
          .notice{color:#000; min-height: 20px; font-size: 12px; font-weight: bold;margin-bottom: 3px;}
          @media (min-width: 768px) {.notice {font-size: 12px; }}
          .notice img{width: 24px; height: 23px;}
          @media (min-width: 768px) {.notice img {width: 32px; height: 32px;}}
          .notice span{font-weight: bold;}
          .default img{width: 24px; height: 24px; margin-top: 1px;}
          @media (min-width: 768px) {.default img { width: 35px; height: 35px; margin-top: 1px;}}
            .giris-mesaj{background-color: #FFF; color: #000;-webkit-appearance: none;-webkit-box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1);box-shadow: 1px 7px 24px -5px rgba(0,0,0,0.1); font-weight: normal; font-size: 12px; margin-bottom: 15px; margin-top: 5px;}
            .giris-mesaj span{font-weight: bold;color: #5fbfca;}
            /* chat alan bitti */
            /* ------------------------------------------------------------------------------------------ */
            /* ------------------------------------------------------------------------------------------ */
            /* ------------------------------------------------------------------------------------------ */


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


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

                                    /* kanallist başladı */
                                    /* ------------------------------------------------------------------------------------------ */
                                    /* ------------------------------------------------------------------------------------------ */
                                    /* ------------------------------------------------------------------------------------------ */
                                    .kanal-list{position: absolute; width: 170px; top: 45px; bottom: 43px; right: 0px; display: block; background:#FFF; overflow: auto; padding-bottom: 10px;overflow-x: hidden; border-bottom: 1px dotted #d2d1d2;}
                                    .server-name{width: 160px; min-height: 40px; border-radius: 38px; margin: auto;background: url(../images/server.png) #ff0074 no-repeat; color: #FFF; text-align:left; padding-left: 44px; font-weight: bold; font-size: 16px; padding-top: 7px; margin-top: 15px; margin-bottom: 15px;-webkit-box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07);box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07);}
                                    .kanal-list button{  margin-top: 1px; margin-right: 6px; outline: none;}
                                    .kanal-list button span{color:#CCC;}
                                    .kanal-list-box{width: 150px; min-height: 30px; margin: auto; text-align: left; background-color: #ffffff;  cursor: pointer;-webkit-box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07);box-shadow: -1px 2px 6px 1px rgba(0,0,0,0.07); margin-top: 10px; margin-bottom: 10px; border-radius: 38px;}
                                    .kanal-list-box:hover{background-color: #f2f2f2;}
                                    .kanal-list-name {
                                      float: left;
                                      margin-right: 5px;
                                      width: 107px;
                                      min-height: 30px;
                                      text-align: left;
                                      padding-left: 8px;
                                      padding-right: 0px;
                                      padding-top: 5px;
                                      font-size: 14px;
                                      cursor: pointer;
                                      overflow: hidden;
                                      text-overflow: ellipsis;
                                      white-space: nowrap;
                                      color: #5fbfca;
                                      font-weight: bold;
                                    }
                                    .kanal-list-name span{font-weight: bold;}
                                    .kanal-gelen-mesaj{ float: left; width: 17px; height: 17px; border-radius: 60%; background-color: #ff0074; color: #FFF; margin-top: 7px; font-size: 12px; text-align: center; font-weight: bold;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
                                    .kanal-list::-webkit-scrollbar {width: 6px;background-color: #eaeaea;border-left: 1px solid #ccc;}
                                    .kanal-list::-webkit-scrollbar-thumb {background-color: #5fbfca;border-radius: 22px;}
                                    .kanal-list::-webkit-scrollbar-thumb:hover {background-color: #ff0074;}
                                    /* kanallist  bitti */
                                    /* ------------------------------------------------------------------------------------------ */
                                    /* ------------------------------------------------------------------------------------------ */
                                    /* ------------------------------------------------------------------------------------------ */



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

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


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

                                        @media (max-width: 579px) {
                                          .hidden-xxs {
                                            display: none !important;
                                          }
                                          .mesaj-gonder .yolla {margin: 3px auto 3px auto;}
                                        }
                                        @media (max-width: 767px) {
                                          .hidden-xs {
                                            display: none !important;
                                          }
                                        }
                                        @media (min-width: 768px) and (max-width: 991px) {
                                          .hidden-sm {
                                            display: none !important;
                                          }
                                        }
                                        @media (min-width: 992px) and (max-width: 1199px) {
                                          .hidden-md {
                                            display: none !important;
                                          }
                                        }
                                        @media (min-width: 1200px) {
                                          .hidden-lg {
                                            display: none !important;
                                          }
                                        }

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

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

.baglan2{width: 300px; min-height: 75px; background-color:#5fbfca; margin:3px auto; border: none; text-align: center; outline: none; border-radius: 38px; color: #FFF;  font-size: 20px; cursor: pointer;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;border: 5px solid rgba(255, 255, 255, 0.80);}
                                        @media (min-width: 768px) {
                                          .baglan2 {width: 400px; min-height: 85px; background-color:#5fbfca; margin: 3px auto;border: 8px solid rgba(255, 255, 255, 0.80);}
                                        }
                                        .baglan2:hover{background-color:#ff0074;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
                                        @media (min-width: 768px) {
                                          .baglan2:hover {background-color:#ff0074;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;transition-duration: 0.3s;}
                                        }
                                        .login-alt{margin: auto;max-width:432px;width:auto;height:auto;}
                                        .giris-logo {margin:0 auto;max-width:300px;width:auto;height:100px;}
/**div.kutu {
  border: 1px solid #ccc;
  width: 50px;
  height: 25px;
  float: left;
  margin: 0 auto;
}
div.kutu.tema1 { background-color:rgba(0,0,0,0.50);}
div.kutu.tema2 { background: url(../images/left-col.png) #FFF no-repeat; }
.theme-dark {width:100%;height:100%; } **/