/*DMs*/

.qvitter-settings.dropdown-menu{
	margin-right: -355px;
}

#top-dm {
            border: 1px solid rgba(0, 0, 0, 0.1);
	    border-radius: 4px;
	    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
	    box-sizing: border-box;
	    cursor: pointer;
	    display: block;
	    height: 32px;
	    margin: 0 -398px 0 0;
	    position: fixed;
	    right: 50%;
	    top: 7px;
	    width: 32px;
	    z-index: 100;
	    display: none;
}

#top-dm.hidden{
	display:none;
}
	
#top-dm:before {
	    cursor: pointer;
	    display: block;
	    height: 32px;
	    margin-top: -3px;
	    position: absolute;
	    width: 30px;
	    z-index: 101;
	    text-align: center;
	    line-height: 36px;
	    content: "\f0e0";
	    /* text-align: center; */
	    font-family: FontAwesome;
	    color: #fff;
	    top: 0;
	    font-size: 18px;
	    overflow: hidden;
}




#settingslink .dropdown-toggle{
	margin-right: -360px;
}

#search {
	margin: 7px 140px 0 7px;
}


/* popup */

#popup-dm-container {
    max-height: 85vH;
    width: 100%;
    /* margin-left: 10px; */
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: 0.3s height;
}

#popup-dm-container .spinner {
  width: 40px;
  height: 40px;

  position: relative;
  margin: 100px auto;
}

#popup-dm-container .double-bounce1, #popup-dm-container  .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 0%;
  background-color: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

#popup-dm-container .double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


.convo-partner {
    width: 100%;
    height: 80px;
    background: rgba(214, 214, 214, 0.14);
    /* margin-top: 0px; */
    /* display: flex; */
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 5px;
}

.convo-partner .avatar {
    
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 0px;
    opacity: 0.6;
}

.convo-partner .username {
    display: inline-block;
    position: absolute;
    margin-left: 1px;
    font-size: 8pt;
}

.convo-partner .username h4 {
    margin: 0px;
    display: inline-block;
}

.convo-partner .username p {
    margin: 0px;
    margin-left: 3px;
    display: inline-block;
}

.last-message {
        margin: 0px;
    width: 80%;
    float: right;
    margin-top: 20px;
    font-size: 10pt;
    max-width: 85%;
    height: 40px;
    color: #b7b7b7;
    overflow: hidden;
}


.convo-partner:hover {
    background: rgba(247, 247, 247, 0.09);
    /* border: 1px inset grey; */
}

.convo-partner:hover .last-message {
    color: #4e4e4e;
}

.convo-partner:hover .avatar {
    opacity: 1;
}

.convo-partner.new:before {
    content: ' ';
    width: 10px;
    height: 10px;
    background: black;
    display: block;
    position: absolute;
    top: 34px;
    border-radius: 0px;
    left: -5px;
}

#top-dm strong {
    position: absolute;
    display: block;
    background: white;
    z-index: 101;
    padding: 1px;
    border-radius: 5px;
    top: -5px;
    font-size: 9pt;
    height: 15px;
    font-weight: bold;
    left: -5px;
    border: 2px solid rgba(128, 128, 128, 0.48);
}

.hover-card .user-menu-dm {
    /* color: #fff; */
    display: block;
    /* float: none; */
    font-size: 16px;
    margin: -50px 0px 0px 9px;
    /* right: 0px; */
    opacity: 0.8;
    position: absolute;
    text-shadow: none;
    cursor: pointer;
}

.user-menu-dm {
    /* color: #fff; */
    display: block;
    /* float: none; */
    font-size: 16px;
    margin: -50px 0px 0px 9px;
    /* right: 0px; */
    opacity: 0.8;
    position: absolute;
    text-shadow: none;
    cursor: pointer;
    margin: 17px 0 0;
    /* right: 30px; */
    float: right;
    position: relative;
}



.user-menu-dm::before {
    font-family: fontAwesome;
    content: '\f0e0';
}



#popup-dm-convo-container {
    height: 85vH;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}


#popup-dm-convo-messages {
    height: 70vH;
    overflow-y: auto;
}

.message-box {
    width: 100%;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
}

.avatar {
    height: 40px;
    width: 40px;
    /*background: black;*/
    display: inline-block;
    border-radius: 0px;
}

.message-box.left .message {
    background: #2196F3;
    color: white;
    text-shadow: 1px 1px black;
}

.message {
    max-width: 70%;
    /* width: 100%; */
    display: inline-block;
    background: yellow;
    padding: 10px;
    border-radius: 15px;
    white-space: pre-wrap;
    font-size: 10pt;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
}

.message-box.left .message:before {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 10px 5px 0;
    border-color: transparent #2196F3 transparent transparent;
    position: absolute;
    left: -10px;
    top: 15px;
}

.message-box.right {
    flex-direction: row-reverse;
}

.message-box.right .message {
    background: #FFC107;
    color: white;
    text-shadow: 1px 1px black;
}

.message-box.right .message:before {
    content: ' ';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0px 5px 10px;
    border-color: transparent transparent transparent #FFC107;
    position: absolute;
    /* left: -40px; */
    right: -10px;
    top: 15px;
}

#popup-dm-convo-container .inline-reply-queetbox {
    background: white;
    border: 0px;
}

.back-button {
    height: 30px;
    width: 30px;
    position: absolute;
    display: block;
    /* background: black; */
    top: 1px;
    left: 10px;
    border-radius: 6px;
    z-index: 10;
    border: 3px solid white;
    color: white;
    font-size: 26px;
    line-height: 30px;
    cursor: pointer;
}

.back-button:before {
    content: '\f104';
    font-family: FontAwesome;
}

.queet .user-menu-dm.logged-in {
    margin: 17px 0 0;
    /* right: 30px; */
    float: right;
    position: relative;
}

.quitter-settings.dropdown-menu {
    margin-right: -354px;
    right: 50%;
}

/*Mobile*/

@media (max-width: 910px) {
#top-dm {
	    border: 3px solid #fff;
	    box-shadow: none;
	    cursor: pointer;
	    display: block;
	    height: 41px;
	    margin: 0;
	    position: fixed;
	    right: 56px;
	    top: 5px;
	    width: 41px;
	    z-index: 100;
}

#top-dm:before {
        cursor: pointer;
    display: block;
    height: 32px;
    margin-top: -3px;
    position: absolute;
    width: 35px;
    z-index: 101;
    text-align: center;
    line-height: 41px;
    content: "\f0e0";
    /* text-align: center; */
    font-family: FontAwesome;
    color: #fff;
    top: 0;
    font-size: 18px;
    overflow: hidden;
}

#popup-dm-convo-messages{
	height: 25vH;
}

#popup-dm-convo-container{
	height: 55vH;
}

#search-query{
	right: 100px;
}


}