html, body {
   margin: 0;
   padding: 0;
   width: 100%;
   height: 100%;
   max-height: 100%;
}

html, body, td, th, input, textarea, select, button {
    font-size: 0.85vw;
    line-height: 1.2rem;
    color: #333;
    font-weight: normal;
    font-family: 'Helvetica';
}

body {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}
body::-webkit-scrollbar-track {
  background: transparent;
}
body::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 6px;
  border: 3px solid #ccc;
}

a {
    text-decoration: none;
    color: inherit;
}

.wrap {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.messenger-contents {
    margin: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: stretch;
    max-height: 100%;
}

/* Messenger Navigation Left */
.navbar-left {
    background: #693257;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    padding: 0 0.5em;
}

.nav-item-messenger,
.nav-item-contacts,
.nav-item-logout {
    padding: 0.75em 0.75em 0.5em 0.75em;
    margin: 0.5em 0em;
    font-size: 1rem;
    width: 100%;
    text-align: center;
}

.nav-item-contacts,
.nav-item-logout {
    padding-top: 1.3em;
}

.messenger-logo,
.nav-item-icon {
    font-size: 3rem;
    text-align: center;
}

.messenger-name,
.nav-item-description {
    text-align: center;
}

.nav-item-active {
    background: rgba(0,0,0,0.10);
    border-radius: 0.3em;
}

/* Conversations */
.nav-conversations {
    background: #ccc;
    max-height: 100%;
}

.nav-conversations,
.chat-section {
    padding: 0;
}

.column-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.25em;
}

.nav-conversations .column-header {
    padding-top: 1.65em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #333;
}

.column-headline {
    font-size: 1.5rem;
}

.column-headline p {
    margin: 0;
}

.icon-chats {
    display: inline-block;
    color: rgba(105,50,87,0.75);
}

.icon-filter-conversations {
    margin-right: 0.5em;
    font-size: 1.8rem;
}

.dropdown-filter-chats {
    display: block;
    position: absolute;
    top: 4em;
    right: 3.7em;
    background: #693257;
}

.dropdown-filter-chats-item {
    padding: 0.7em;
    color: #fff;
}

.dropdown-filter-chats-item:hover {
    background: rgba(255,255,255,0.10);
}

.filter-item-active {
    background: rgba(255,255,255,0.20);
}

.icon-add-conversation {
    font-size: 2rem;
}

.conversations {
    padding: 0;
    margin: 0;
    height: 90%;
    max-height: 90% !important;
    overflow-y: auto;
}

.conversation-item {
    font-size: 1.1rem;
    padding: 1em 1.25em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversation-item:hover {
    background: rgba(0,0,0,0.1);
    color: #333;
}

.conversation-item p {
    margin: 0;
}

.conversation-active {
    background: rgba(105,50,87,0.75);
    color: #fff;
}

.conversation-active:hover {
    background: rgba(105,50,87,0.65);
    color: #fff;
}

.conversation-new-messages {
    font-weight: bold;
}

.conversation-item-icon {
    font-size: 1.5rem;
}

/* Chat */
.chat-section {
    background: #693257;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 100%;
}

.chat-section .column-header {
    color: #fff;
}

.messages-background {
    background: #fff;
    height: 100%;
    max-height: 100% !important;
    overflow-y: auto;
}

.messages-placebolder-logo {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.messages-placebolder-logo img {
    width: 25em;
    margin-left: auto;
    margin-right: auto;
}

.messages-date-wrap,
.messages-new-wrap {
    text-align: center;
}

.messages-background hr {
    width: 90%;
    border: 1px dotted #333;
    margin: 0em auto;
    margin-top: 1em;
}

.messages-date,
.messages-info-new {
    min-width: 20%;
    background: #ccc;
    text-align: center;
    display: inline-block;
    padding: 0.3em 0em;
    margin-top: 1em;
    border-radius: 0.8em;
}

.incoming-message,
.outgoing-message {
    display: flex;
    align-items: flex-end;
}

.incoming-message-bubble p,
.outgoing-message-bubble p {
    padding: 0;
    margin: 0;
}

.incoming-message-bubble {
    justify-content: flex-start;
}

.outgoing-message {
    justify-content: flex-end;
}

.incoming-message-bubble,
.outgoing-message-bubble {
    border-radius: 0.7em;
    max-width: 66%;
    padding: 1em;
    margin: 1em;
}

.incoming-message-bubble {
    background: #cbe5fe;
}

.outgoing-message-bubble {
    background: #cee0cb;       
}

.message-image img {
    max-height: 30em;
    max-width: 100%;
    border-radius: 0.7em;
}

.message-file {
    text-align: center;
}

.message-file i {
    font-size: 4.5rem;
    padding-bottom: 0.2em;
}

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: pointer;
}

.attachment-previews {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   flex-wrap: wrap;
   max-width: 100%;
   color: #fff;
   border-top: 1px solid #fff;
}

.dz-preview {
   padding: 1em;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1;
   max-width: 25%;
}

.dz-size, .dz-success-mark, .dz-error-mark {
    display: none;
}

.dz-details, .dz-filename, .dz-remove {
    padding: 0.5em 0em;
}

.dz-image img {
    border-radius: 0.3em;
    max-width: 8em;
    max-height: 8em;
}

.delete-attachment-icon {
    font-size: 1.5rem;
    border: 1px solid white;
    border-radius: 0.3em;
}

.dz-error-message {
    padding-bottom: 0.5em;
    font-weight: bold;
}

.no-display {
    display: none;
}

.new-message {
    background: #693257;
    display: flex;
    justify-content: space-between;
    padding: 1.15em 1em;
}

.file-upload,
.text-input textarea,
.submit input {
    border: none;
    border-radius: 0.3em;
}

.file-upload {
    background: #693257;
    height: 3.07em;
    width: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: solid 1px #fff;
    position: relative;
    z-index: 999;
}

.file-upload-icon {
    font-size: 1.8rem;
}

.file-upload-icon i {
    position: relative;
    z-index: 10;
}

.text-input {
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
}

.text-input textarea {
    width: 100%;
    height: 2.7em;
    min-height: 2.7em;
    max-height: 8.1em;
    font-size: 1.1rem;
    line-height: 1.2em;
    padding: 0.75em;
    resize: none;
    overflow: auto;
}

.submit input {
    width: 7em;
    height: 3.07em;
    font-size: 1rem;
    background: #693257;
    color: #fff;
    border: solid 1px #fff;
}


/* CONTACTS */
.groups-header {
    padding-top: 0;
    padding-bottom: 0;
    height: 5.25em;
}

.btn-all-groups {
    background: rgba(105,50,87,0.75);
    color: #fff;
    font-size: 1.2rem;
    border-radius: 0.3em;
    padding: 0.5em 0.5em;
}

.icon-add-contact {
    color: #fff;
    border-radius: 0.3em;
    border: 1px solid #fff;
    margin-right: 0.5em;
    padding: 0.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.4em;
    width: 2em;
    font-size: 2rem;
}

.search-form-wrapper {
    border-top: 1px solid #fff;
}

.search-text-input {
    padding-right: 1em;
    padding-bottom: 0.2em;
    width: 100%;
}

.search-text-input input {
    width: 100%;
    height: 2.5em;
    border-radius: 0.3em;
    font-size: 1.1rem;
    line-height: 1.2em;
    padding: 0.5em;
}

.search-submit input {
    height: 2.75em;
}

.contect-background {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
}

.contacts {
    padding: 1em;
    margin: 0;
}

.contact-card {
    min-height: 14em;
    background: #693257;
    border-radius: 0.3em;
    padding: 1em 1.5em;
    padding-right: 2.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #fff;
    display: flex;
    align-content: space-between;
    flex-wrap: wrap;
    
    -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);
    transition: 0.3s;
}

.contact-card:hover {
    -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.75);
}

.contact-card p {
    line-height: 1em;
}

.contact-name,
.contact-info {
    width: 100%;
}

.contact-name-main {
    font-weight: bold;
}

.contact-card a:hover {
    text-decoration: underline;
}

.icon-edit-contact,
.icon-delete-contact {
    font-size: 1.3rem;
    padding: 0.5em;
    position: absolute;
    right: 1em;
}

.icon-edit-contact {
    top: 0.75em;
}

.icon-delete-contact {
    top: 2.5em;
    margin-top: 0.5em;
}

.popup-contact,
.popup-new-chat {
  position: relative;
  background: #fff;
  padding: 2em;
  width: 50em;
  max-width: 90%;
  margin: 2em auto;
  border-radius: 0.3em;
}

.form-contact {
    display: flex;
    flex-direction: column;
    display: inline-block;
}

.form-contact-row {
    display: flex;
}

.contact-input {
    padding: 1em;
}

.contact-input:first-child {
    padding-left: 0;
}

.contact-input:last-child {
    padding-right: 0;
}

.contact-input label {
    font-size: 1.1rem;
}

.contact-input input,
.contact-input select {
    border-radius: 0.3em;
    font-size: 1.1rem;
    line-height: 1.2em;
    padding: 0.5em;
    margin-top: 0.3em;
    width: 20em;
}

.contact-input select {
    max-height: 5.5em;
    overflow-y: auto;
}

.form-contact .submit {
    margin-top: 1em;
}



.popup-delete-contact {
    position: relative;
    background: #fff;
    padding: 2em;
    width: 25em;
    max-width: 90%;
    margin: 2em auto;
    border-radius: 0.3em;
}

.popup-delete-contact p {
    font-size: 1.1rem;
    padding: 1em 0;
}

.popup-contact .submit,
.popup-delete-contact .submit {
    display: flex;
    justify-content: space-between;
}

.btn-cancel {
    border: 1px solid #693257 !important;
    color: #693257 !important;
    background: #fff !important;
}

.popup-new-chat .submit,
.popup-new-chat .contact-input {
    display: inline-block;
}

.contact-selection {
    overflow-y: auto;
    max-height: 30em;
}

.contact-selection-item {
    margin: 0.5em 0;
    padding: 1em 0.7em;
    font-size: 1.1rem;
    background: #d5d5d5;
    
    background: #825974;
    color: #fff;
}

.contact-selection-item:hover {
    background: #693257;
    color: #fff;
}


/* LOGIN FORM */
.login {
    height: 100vh;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    background: #693257;
}

.login h1 {
    padding-bottom: 0.5em;
    margin: 0;
}

.login-box {
    height: 100%;
    display:-webkit-flex;display:-ms-flexbox;display:flex;
    -webkit-justify-content:center;-ms-justify-content:center;-ms-flex-pack:center;justify-content:center;
    -webkit-align-items:center;-ms-align-items:center;-ms-flex-align:center;align-items:center;
    
}

.login-card {
    border: none;
    padding: 3em;
    background: #693257;
    color: #fff;
    border-radius: 0.3em;
    max-width: 95%;
    
   /* -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.5);
    transition: 0.3s; */
}

/*.login-card:hover {
    -webkit-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 20px 0px rgba(0,0,0,0.75);
}*/

.login-card input[type=text],
.login-card input[type=password] {
    border-radius: 0.3em;
    font-size: 1.1rem;
    line-height: 1.2em;
    padding: 0.5em;
    width: 20em;
}

.login-wrap {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.line {
    height: 1px;
    width: 100%;
    margin-bottom: 2.5em;
    background: -moz-linear-gradient(left,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}

.login-input {
    margin: 2em 0;
}

.login .submit {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    margin-top: 3em;
}

.login .submit input {
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
}

.login .submit .second-button {
    margin-top: 1.5em;
}

.login-messages-wrap {
    position: absolute;
    right: 2em;
    bottom: 0;
    max-height: 25em;
    width: 23em;
    max-width: 100%;
    overflow-y: auto;
}

.login-messages-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.login-message-box {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.95);
    border-radius: 0.3em;
    max-width: 100%;
    padding: 1.5em;
    margin: 0.5em 0;
}

.login-message-box:first-child {
    margin-top: 0;
}

.login-message-box:last-child {
    margin-bottom: 1em;
}

.login-message-box h3 {
    margin: 0;
    margin-bottom: 0.5em;
}

.login-message-box p {
    margin: 0;
}

.login-input.username-info {
    font-size: 1.1em;
}

.login-input.username-info label {
    font-weight: bold;
}


/* Mobile Navigation */
@media screen and (max-width: 991px) {
    .navbar-left {
        flex-direction: row;
    }
    
    .nav-messengers {
        width: 33.33%;
        display: flex;
        justify-content: center;
    }
    
    .nav-bottom {
        width: 66.66%;
        display: flex;
        justify-content: space-around;
    }
}

/* Mobile Login */
@media screen and (max-height: 650px) {
    .login-messages-wrap {
        display: none;
    }
}

/* DESKTOP */
@media screen and (min-width: 1301px) and (max-width: 1500px) {
    html, body, td, th, input, textarea, select, button {
        font-size: 1.15vw;
    }
}

@media screen and (min-width: 1101px) and (max-width: 1300px) {
    html, body, td, th, input, textarea, select, button {
        font-size: 1.2vw;
    }
}

@media screen and (min-width: 992px) and (max-width: 1100px) {
    html, body, td, th, input, textarea, select, button {
        font-size: 1.3vw;
    }
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 991px) {
    html, body, td, th, input, textarea, select, button {
        font-size: 1.7vw;
    }

    /* Login */
    .login-messages-wrap {
        max-height: 15em;
    }
    
    .messenger-contents {
        display: block;
    }

    .icon-filter-conversations {
        font-size: 1.9rem;
        margin-right: 0.7em;
    }
    
    .icon-add-conversation {
        font-size: 2.1rem;
    }
    
    .dropdown-filter-chats .dropdown-filter-chats-item {
        padding: 0.7em;
    }
    
    .messages-placebolder-logo img {
        max-width: 40%;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    
    .icon-edit-contact, .icon-delete-contact {
        font-size: 1.4rem;
    }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    html, body, td, th, input, textarea, select, button {
        font-size: 2.2vw;
    }
    
    /* Login */
    .login-messages-wrap {
        max-height: 10em;
    }
    
    .messenger-contents {
        display: block;
    }
    
    .icon-filter-conversations {
        font-size: 2rem;
        margin-right: 0.7em;
    }
    
    .icon-add-conversation {
        font-size: 2.2rem;
    }
    
    .dropdown-filter-chats .dropdown-filter-chats-item {
        padding: 0.7em;
    }
    
    .messages-placebolder-logo img {
        max-width: 60%;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    
    /* Contacts */
    .icon-edit-contact, .icon-delete-contact {
        font-size: 1.5rem;
    }
    
    .popup-contact .form-contact {
        max-width: 100%;
        width: 100%;
    }
    
    .popup-contact .form-contact-row {
        max-width: 100%;
        flex-wrap: wrap;
    }
    
    .popup-contact .contact-input {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
        width: 100%;
    }
    
    .popup-contact .contact-input input,
    .popup-contact .contact-input select {
        max-width: 100%;
        width: 100%;
    }
}

/* SMARTPHONE */
@media screen and (max-width: 480px) {
    html, body, td, th, input, textarea, select, button {
        font-size: 3.8vw;
    }
    
    /* Login */
    .login-messages-wrap {
        width: 90%;
        max-width: 90%;
        left: 5%;
        right: 5%;
        max-height: 10em;
    }
    
    /* Messenger */
    .icon-filter-conversations {
        font-size: 2.1rem;
        margin-right: 0.7em;
    }
    
    .icon-add-conversation {
        font-size: 2.3rem;
    }
    
    .dropdown-filter-chats .dropdown-filter-chats-item {
        padding: 1em;
    }
    
    .search-form-wrapper .submit,
    .form-new-message .submit {
        max-width: 20%;
    }
    
    .search-form-wrapper .submit input,
    .form-new-message .submit input {
        max-width: 100%;
    }
    
    .messages-placebolder-logo img {
        max-width: 60%;
        margin-top: 3em;
        margin-bottom: 3em;
    }
    
    .messages-date,
    .messages-info-new {
        padding: 0.4em 1.5em;
    }
    
    .popup-new-chat .contact-input {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }
    
    .popup-new-chat .contact-input input,
    .popup-new-chat .contact-input select {
        max-width: 100%;
    }
    
    .popup-new-chat .submit {
        width: 100%;
        max-width: 100%;
        padding-bottom: 1em;
    }
    
    .popup-new-chat .submit input {
        width: 100%;
    }
    
    /* Contacts */
    .icon-edit-contact, .icon-delete-contact {
        font-size: 1.5rem;
    }
    
    .popup-contact .form-contact {
        max-width: 100%;
    }
    
    .popup-contact .form-contact-row {
        max-width: 100%;
        flex-wrap: wrap;
    }
    
    .popup-contact .contact-input {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    
    .popup-contact .contact-input input,
    .popup-contact .contact-input select {
        max-width: 100%;
    }
}