/* =========================================================
   ICQ2Go V4
   ICQ 2003b inspired UI
   ========================================================= */

html,
body {
    font-family:Tahoma,Verdana,Arial,sans-serif !important;
    font-size:11px !important;
}

body {
    background:#dfe7d3 !important;
}


/* =========================================================
   MAIN WINDOW
   ========================================================= */

.main-window {
    width:286px !important;
    height:620px !important;

    border:1px solid #4f6573 !important;
    border-radius:3px 3px 0 0 !important;

    background:#eef1eb !important;

    box-shadow:
        0 5px 15px rgba(0,0,0,.35) !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.titlebar {
    height:24px !important;
    min-height:24px !important;

    padding:0 3px !important;

    background:
        linear-gradient(
            #50a5d8 0%,
            #328bc4 26%,
            #176ca8 52%,
            #3a91c8 100%
        ) !important;

    border-bottom:
        1px solid #315875 !important;

    color:#fff !important;

    font-size:11px !important;
    font-weight:bold !important;
}

.title-flower {
    width:18px !important;
    height:18px !important;

    margin-right:3px !important;
}

.window-controls {
    gap:2px !important;
}

.window-control {
    width:17px !important;
    height:17px !important;

    min-width:17px !important;

    padding:0 !important;

    font-size:10px !important;

    border:1px solid #315873 !important;

    border-radius:1px !important;

    background:
        linear-gradient(
            #f4fbff,
            #8bc5e7
        ) !important;

    color:#174866 !important;
}

.window-control.close {
    color:white !important;

    background:
        linear-gradient(
            #ff9985,
            #d5412c
        ) !important;

    border-color:#963828 !important;
}


/* =========================================================
   MENUS
   ========================================================= */

.menu-bar {
    height:22px !important;
    min-height:22px !important;

    padding-left:3px !important;

    background:#fafbf8 !important;

    border-bottom:
        1px solid #9da49e !important;
}

.menu-item {
    height:21px !important;

    padding:0 6px !important;

    font-size:10px !important;
}

.menu-item:hover,
.menu-item.active {
    background:#316ac5 !important;
    color:white !important;
}

.dropdown,
.popup-menu {
    border:1px solid #6c6c6c !important;

    border-radius:0 !important;

    padding:2px !important;

    background:#f5f5f2 !important;

    box-shadow:
        2px 2px 4px rgba(0,0,0,.35) !important;

    color:#000 !important;

    font-size:11px !important;
}

.dropdown-entry,
.popup-entry {
    height:23px !important;

    padding:0 24px 0 7px !important;

    color:#000 !important;
}

.dropdown-entry:hover,
.popup-entry:hover {
    color:white !important;

    background:#316ac5 !important;
}

.dropdown-separator,
.popup-separator {
    margin:3px 2px !important;

    border-top:
        1px solid #aaa !important;
}


/* =========================================================
   OWN PROFILE
   ========================================================= */

.user-header {
    height:64px !important;
    min-height:64px !important;

    background:#fafbf8 !important;

    border-bottom:
        1px solid #9ea59f !important;
}

.my-user {
    padding:6px 8px !important;
}

.user-flower {
    width:38px !important;
    height:38px !important;

    margin-right:7px !important;

    image-rendering:auto;
}

.my-uin {
    color:#003399 !important;

    font-family:
        "Times New Roman",
        Tahoma,
        serif !important;

    font-weight:bold !important;
}

.logo-box {
    width:67px !important;

    background:#fafbf8 !important;

    font-family:
        "Times New Roman",
        serif !important;

    font-size:20px !important;

    border-left:
        1px solid #aaa !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-row {
    height:39px !important;
    min-height:39px !important;

    padding:5px !important;

    background:#e7eae5 !important;

    border-bottom:
        1px solid #989e99 !important;
}

.search-row input {
    height:28px !important;

    border:
        1px solid #7b817c !important;

    border-radius:0 !important;

    background:#fff !important;

    font-size:11px !important;
}

.search-button {
    width:37px !important;

    border-radius:0 !important;
}


/* =========================================================
   MAIN TOOLBAR
   ========================================================= */

.toolbar {
    height:40px !important;
    min-height:40px !important;

    background:#e5e8e2 !important;

    border-bottom:
        1px solid #969c97 !important;
}

.toolbar button {
    position:relative;

    border-right:
        1px solid #a8ada8 !important;

    background:
        linear-gradient(
            #fafbf9,
            #dde1db
        ) !important;

    color:#000 !important;

    font-family:Tahoma !important;

    font-size:14px !important;
}

.toolbar button:hover {
    background:
        linear-gradient(
            #eaf4fb,
            #cbddec
        ) !important;
}

.toolbar button:active {
    box-shadow:
        inset 1px 1px 2px #777 !important;
}


/* =========================================================
   GROUPS
   ========================================================= */

.group-header {
    height:28px !important;

    padding:0 5px !important;

    font-family:
        "Times New Roman",
        Tahoma,
        serif !important;

    font-size:13px !important;

    font-weight:bold !important;

    background:
        linear-gradient(
            #fafbf8,
            #e2e6df
        ) !important;

    border-bottom:
        1px solid #aaa !important;
}

.group-toggle {
    width:16px !important;
    height:16px !important;

    margin-right:5px !important;

    font-family:Tahoma !important;
    font-size:11px !important;

    border:
        1px solid #777 !important;

    background:#fff !important;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact {
    height:45px !important;

    padding:
        5px 7px 4px 10px !important;

    background:#fff;
}

.contact img {
    width:27px !important;
    height:27px !important;

    margin-right:7px !important;
}

.contact-name {
    color:#003399 !important;

    font-family:
        "Times New Roman",
        Tahoma,
        serif !important;

    font-weight:bold !important;

    font-size:13px !important;

    line-height:14px !important;
}

.contact-status {
    color:#000;

    font-family:Tahoma !important;

    font-size:9px !important;

    line-height:11px !important;
}

.contact:hover,
.contact.selected {
    background:#5376b5 !important;

    color:#fff !important;
}

.contact:hover .contact-name,
.contact.selected .contact-name,
.contact:hover .contact-status,
.contact.selected .contact-status {
    color:#fff !important;
}

.contact.offline {
    opacity:.55 !important;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.bottom {
    background:#e4e7e1 !important;
}

.bottom-row {
    height:33px !important;

    padding:0 7px !important;

    background:
        linear-gradient(
            #f8f9f6,
            #dfe3dc
        ) !important;

    border-bottom:
        1px solid #aaa !important;

    font-size:10px !important;
}

.bottom-actions {
    height:40px !important;
}

.bottom-actions button {
    background:
        linear-gradient(
            #fff,
            #dedfda
        ) !important;

    font-size:10px !important;
}


/* =========================================================
   CHAT WINDOW
   ========================================================= */

.chat-window {
    width:590px !important;
    height:465px !important;

    border-radius:3px 3px 0 0 !important;

    background:#e5e8e2 !important;
}

.chat-user {
    height:60px !important;
    min-height:60px !important;

    padding:6px 9px !important;

    background:#fff !important;

    border-bottom:
        1px solid #aaa !important;
}

.chat-user img {
    width:36px !important;
    height:36px !important;
}

.chat-uin {
    color:#003399 !important;

    font-family:
        "Times New Roman",
        serif !important;

    font-size:14px !important;

    font-weight:bold !important;
}


/* =========================================================
   CHAT TOOLBAR
   ========================================================= */

.chat-toolbar {
    height:39px !important;

    background:#e3e6e0 !important;

    border-bottom:
        1px solid #a0a5a0 !important;
}

.chat-toolbar button {
    width:48px !important;

    border-right:
        1px solid #aaa !important;

    background:
        linear-gradient(
            #fafbf9,
            #dce0da
        ) !important;
}

.chat-toolbar button:hover {
    background:#d8e7f4 !important;
}


/* =========================================================
   MESSAGE VIEW
   ========================================================= */

.message-history {
    background:#fff !important;

    padding:9px !important;

    font-family:
        Arial,
        Tahoma,
        sans-serif !important;

    font-size:11px !important;

    line-height:1.35 !important;
}

.message-head {
    font-family:
        Arial,
        Tahoma,
        sans-serif !important;
}

.message-head.me {
    color:#003399 !important;
}

.message-head.other {
    color:#d00000 !important;
}


/* =========================================================
   FORMAT + COMPOSER
   ========================================================= */

.format-toolbar {
    height:29px !important;

    background:#e5e8e2 !important;

    border-top:
        1px solid #aaa !important;

    border-bottom:
        1px solid #aaa !important;

    font-family:
        "Times New Roman",
        serif !important;
}

.composer {
    height:100px !important;

    background:#e5e8e2 !important;

    padding:5px !important;
}

.composer textarea {
    border:
        2px inset #ddd !important;

    border-radius:0 !important;

    background:#fff !important;

    font-family:
        Arial,
        Tahoma,
        sans-serif !important;
}

.send-area button {
    border-radius:0 !important;

    background:
        linear-gradient(
            #fff,
            #ddd
        ) !important;
}


/* =========================================================
   PROFILE DIALOG
   ========================================================= */

.modal-overlay {
    background:
        rgba(0,0,0,.24) !important;
}

.modal {
    width:420px;

    background:#eceee9 !important;

    border:
        1px solid #536774 !important;

    box-shadow:
        4px 6px 16px
        rgba(0,0,0,.45) !important;
}

.modal-title {
    height:27px !important;

    color:white;

    font-size:11px;

    background:
        linear-gradient(
            #50a5d8,
            #1768a5,
            #3e91cb
        ) !important;
}

.icq-profile {
    display:grid;

    grid-template-columns:
        125px 1fr;

    min-height:250px;
}

.icq-profile-nav {
    padding:4px;

    border-right:
        1px solid #9d9d9d;

    background:#eef0eb;
}

.icq-profile-nav div {
    height:25px;

    padding:5px 7px;

    border:
        1px solid transparent;
}

.icq-profile-nav div.active {
    border:
        1px solid #7f7f7f;

    background:#d7d9d5;

    font-weight:bold;
}

.icq-profile-body {
    padding:10px 12px;

    background:
        linear-gradient(
            #fafbf8,
            #ecefe9
        );
}

.profile-heading {
    margin-bottom:13px;

    padding-bottom:5px;

    border-bottom:
        1px solid #aaa;

    color:#003399;

    font-weight:bold;
}

.profile-row {
    display:grid;

    grid-template-columns:
        110px 1fr;

    padding:3px 0;
}

.profile-label {
    font-weight:bold;
}


/* =========================================================
   STATUS MANAGER
   ========================================================= */

.status-manager-row {
    display:flex;

    align-items:center;

    height:28px;

    padding:2px 5px;

    cursor:pointer;
}

.status-manager-row:hover {
    background:#316ac5;
    color:white;
}

.status-manager-row img {
    width:18px;
    height:18px;

    margin-right:7px;
}


/* =========================================================
   SMILEYS
   ========================================================= */

.smiley-picker {
    background:#f6f6f3 !important;

    border:
        1px solid #6c6c6c !important;

    border-radius:0 !important;
}

.smiley-cell:hover {
    background:#dce8f5 !important;

    border-color:
        #316ac5 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px) {

    .main-window,
    .chat-window {
        left:8px !important;
        right:8px !important;
        width:auto !important;
        top:calc(var(--vv-top, 0px) + 8px) !important;
        height:calc(var(--vv-height, 100dvh) - 16px) !important;
        max-height:calc(var(--vv-height, 100dvh) - 16px) !important;
    }

    .format-toolbar {
        height:29px !important;
        padding:0 8px !important;
        overflow:hidden !important;
    }

    .composer {
        height:100px !important;
        padding:5px !important;
        overflow:hidden !important;
    }

    .modal {
        width:94% !important;
    }

}