body {
    behavior: connection-manager;
}

div.content {
    flow: horizontal;
    size: *;
}

div.left-panel {
    size: *;
    padding: 1em;
    border-spacing: 1em;
    overflow-x: scroll-indicator;
    position: relative;
}

div.chaticon svg {
    size: 24px;
    margin: 4px;
    opacity: 0.66;
}

div.chaticon {
    position: absolute;
    right: 0;
    top: 0;
    size: 32px;
    background-color: color(gray-bg);
}

div.chaticon:hover svg {
    opacity: 1;
}

div.chaticon:active {
    background: white;
}

div.right-panel {
    background: white;
    border-left: color(border) 1px solid;
    size: *;
}

div.icon-and-id {
    flow: horizontal;
    border-spacing: 1em;
}

div.icon {
    size: 96px;
    text-align: center;
    font-size: 76px;
    line-height: 96px;
    color: white;
    font-weight: bold;
}

div.id {
    @ELLIPSIS;
    color: color(green-blue);
}

div.permissions {
    flow: horizontal;
    border-spacing: 0.5em;
}

div.permissions > div {
    size: 42px;
    background: color(accent);
}

div.permissions icon {
    margin: *;
    size: 32px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

div.permissions > div.disabled {
    background: #ddd;
}

div.permissions > div:active {
    opacity: 0.5;
}

icon.keyboard {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMA0Gd/0y8ILZgbJffDPUwV2nvzt+TMqZxyU7CMb1pYQyzsvKunkXE4AwJnNC24AAAA+0lEQVQ4y83O2U7DMBCF4ZMxk9rZk26kpQs7nPd/QJy4EiLbLf01N5Y/2YP/qxDFQvGB5NPC/ZpVnfJx4b5xyGfF95rkHvNCWH1u+N6J6T0sC7gqRy8uGPfBLEbozPXUjlkQKwGaFPNizwQbwkx0TDvhCii34ExZCSQVBdzIOEOyeclSHgBGXkpeygXSQgStACtWx4Z8rr8COHOvfEP/IbbsQAToFUAAV1M408IIjIGYAPoCSNRP7DQutfQTqxuAiH7UUg1FaJR2AGrrx52sK2ye28LZ0wBAEyR6y8X+NADhm1B4fgiiHXbRrTrxpwEY9RdM9wsepnvFHfUDwYEeiwAJr/gAAAAASUVORK5CYII=');
}

icon.clipboard {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAjVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8DizOFAAAALnRSTlMAnIsyZy8YZF3NSAuabRL34cq6trCScyZ4qI9CQDwV+fPl2tnTwzkeB+m/pIFK/Xx0ewAAAQlJREFUOMudktduhDAQRWep69iY3tle0+7/f16Qg7MsJUQ5Dwh8jzRzhemJPIaf3GiW7eFQfOwDPp1ek/iMnKgBi5PrhJAhZAa1lCxE9pw5KWMswOMAQXuQOvqTB7tLFJ36wimKLrufZTzUaoRtdthqRA2vEwS+tR4qguiElRKk1YMrYfUQRkwLmwVBYDMvJKF8R0o3V2MOhNrfo+hXSYYjPn1L/S+n438t8gWh+q1F+cYFBMm1Jh8Ia7y2OWXQxMMRLqr2eTc1crSD84cWfEGwYM4LlaACEee2ZjsQXJxR3qmYb+GpC8ZfNM5oh3yxxbxgQE7lEkb3ZvvH1BiRHn1bu02ICcKGWr4AudUkyYxmvywAAAAASUVORK5CYII=');
}

icon.audio {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAk1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ROyVeAAAAMHRSTlMAgfz08DDqCAThvraZjEcoGA751JxzbGdfTRP25NrIpaGTcEM+HAvMuKinhXhWNx9Yzm/gAAABFUlEQVQ4y82S2XLCMAxFheMsQNghCQFalkL39vz/11V4GpNk0r629+Va1pmxPFfyh1ravOP2Y1ydJmBO0lYP3r+PyQ62s2Y7fgF6VRXOYdToT++ogIuoVhCUtX7YpwJG3F8f6V8rr3WABwwUahlEvr8y3IBniGKdKYBQ5OGQpukQakBpIVcfwptIhJcf8hWGakdndAAhBInIGHbdQGJg6jjbDUgEE5EpmB+AAM4uj6gb+AQT6wdhITLvAHJ4VCtgoAlG1tpNA0gWON/f4ioHdSADc1bfgt+PZFkDlD6ojWF+kVoaHlhvFjPHuVRrefohY1GdcFm1N8JvwEyrJ/X2Th2rIoVgIi3Fo6Xf0z5k8psKu5f/oi+nHjjI92o36AAAAABJRU5ErkJggg==');
}

icon.file {
  background:url('data: image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAUVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////8IN+deAAAAGnRSTlMAH+CAESEN8jyZkcIb5N/ONy3vmHhmiGjUm7UwS+YAAAHZSURBVGje7dnbboMwDIBhBwgQoFAO7Ta//4NOqCAXYZQstatq4r+r5ubrgQSpg8iyC4ZURa+PlIpQYGiwrzyeHtYZjAL8T05O4H8BbbKvFgRa4NoBU8pXeYEkDDgaaLQBcwJrmeErJQB/7wes3QBWGnCIX0+AQycL1PO6BMwPa0nA4ZxbgTvOjUYMGPHRnZkQAY4mxPZBjmy53E7ukSkFKYB/D4XsWZQx64sCeYebOogGsoOBYvv6/UCb8F0IOBZ0TlP6lEYdANY350AJqB9/qPVuOI5evw4A1hgLigAlepnyxW80bcCcwN++A2s82Vcu02ta+ceq9BoL5KGTTRwQPlpqA3gCnwWU2kCDgeWRQPj2jAPCDxgCMjhI6uZnToDpvd/BJeFrJQB/fsAa02gCt3mi1wNuy8GgBNDZlysBNNSrADVSjcJl6vCpUn6jOdx0kz0q6PMhQRa4465SFKhx35cgUCBTwj2/NHwZAb71qR8GEP2H1XcmAtBPTEO67GP6FUUAIKGABbDLQ0EArhN2sAIGesRO+iyy+RMAjckVTlMCKFVAbh/4Af9OPgG61SkDVco3BQGT3GXaDAnTIAcYZDuBTwGsAGDxuBFeAQqIqwoFMlAVLrHr/wId5MPt0nilGgAAAABJRU5ErkJggg==');
}

icon.restart {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAB7BAAAewQHDaVRTAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAbhJREFUWIXVlrFqFGEUhb+7UYxaWCQKlrKKxaZSQVGDJih2tj6MD2DnMwiWvoAIRnENIpZiYxEro6IooiS7SPwsMgNLkk3mjmYmnmb45/73nMNwz/x/qH3gMu2gH6rAU+Blw+Lngau4jpmGxVF7qp1iPWjaQKnZ2WnXbuP/NqAeUPc3ZkA9XDwvqc+BVWCgPlJ7tRwUKThZce819b46VH+pfXVRXVO/q2cSul3VOgZUl0ejq86r39TXI8mqZKDuDEwCw3IREQvAbWAGmMsQZQ0sAl3gHPB1Q+0e8BuYzRDuy2yOiFVgaUxtRf0ETGc4syk4rc6PqU0Cx9j8Zf6dAeAK8Fi9sUXtFjABvEgxJlNwRP2svlNPjbw/q35U36oTFbnyMSwabxb/gB/qA3VBHagrauV7RW0DRfP1IvMlXqkXkhz1DYyQTKtHa/Z2VVMx3IiI+PI3/bCHjuOpFrSnAMpL6QfgTcMGesDx0kBr2BMzsNyi/vtQu8CJlgwsRbZDnWP90NkKaxHxJMOXMqAeAn5u0ydwMCKGY+qbkB3C2W3EKWoXk5zVoHbUZ+6Mh7tl4G4F8RJ3qvL+AfV3r5Vdpj70AAAAAElFTkSuQmCC');
}

icon.recording {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAANpJREFUWEftltENAiEMhtsJ1NcynG6gI+gGugEOR591gppeQoIYSDBILxEeydH/57u2FMF4obE+TAOTwLoIhBDOAHBExG2n6rgR0akW640AM0sn4SWMiDycc7s8JjN7Ijro/k8NqAAR5RoeAPZxv2ggP9hCJiWZxtGbq3hqbJiBVHy4gVx8qAER8Yi4JFy6huVAKXemgb8icI+1b5KEitq0DOO/Nm1EEX1TK27p/bVvv36MOhl4EtHHbFF7jq8AoG1z08OAiFycczrkFNe6RrIet26NMQlMAuYEXiayryF/QQktAAAAAElFTkSuQmCC');
}

div.outer_buttons {
    flow:vertical;
    border-spacing:8;
}

div.inner_buttons {
    flow:horizontal;
    border-spacing:8;
}

button.control {
    width: *;
}

button.elevate {
    background:green;
}

button.elevate:active {
    background: rgb(2, 104, 2);
    border-color: color(hover-border);
}

button.elevate>span {
    flow:horizontal;
    width: *;
}

button.elevate>span>span {
    margin-left:*;
    margin-right:*;
}

button.elevate>span>span>span {
    vertical-align: middle;
}

button#disconnect {
    background: color(blood-red);
    border: none;
}

button#disconnect:active {
    opacity: 0.5;
}

@media platform != "OSX" {
header .window-toolbar {
  left: 40px;
  top: 8px;
}
}

@media platform == "OSX" {
header .tabs-wrapper {
    margin-left: 80px;
    margin-top: 8px;
}
}

div.tabs-wrapper {
    size: *;
    position: relative;
    overflow: hidden;
}

div.tabs {
    size: *;
    flow: horizontal;
    white-space: nowrap;
    overflow: hidden;
}

header {
  height: 32px;
  border-bottom: none;
}

div.border-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: *;
    height: 1px;
    background: color(border) 1px solid;
}

header div.window-icon {
    size: 32px;
}

div.tabs > div {
    display: inline-block;
    height: 24px;
    line-height: 24px;
}

div.tab {
    width: 70px;
    @ELLIPSIS;
    text-align: center;
    position: relative;
    padding: 0 5px;
}

div.active-tab {
    background: color(gray-bg);
    border: color(border) 1px solid;
    border-bottom: none;
    font-weight: bold;
}

span.unreaded {
    position: absolute;
    font-size: 11px;
    size: 15px;
    border-radius: 15px;
    line-height: 15px;
    background: color(blood-red);
    display: inline-block;
    color: white;
}

div.left-panel {
    background: color(gray-bg);
}

button.window#minimize {
    right: 0px!important;
}

div.tab-arrows {
    position: absolute;
    right: 2px;
    font-weight: bold;
    background: white;
}

div.tab-arrows span {
    display: inline-block;
    height: *;
    margin: 0;
    padding: 6px 2px;
    line-height: 20px;
    opacity: 0.66;
}

div.tab-arrows span:hover {
    opacity: 1;
}

div.tab-arrows span:active {
    opacity: 1;
    background-color: #ddd;
}