html, #appcontent {
    height: 100%;
}

#appcontent, .thecontent, .project-content, .project-terminal {
    display: flex;
    flex-grow: 1;
    overflow:hidden;
    flex-direction: column;
}

#appcontent {
    padding: 0px;
    margin: 0px;
}

.project-content {
    flex-direction: row;
}

.project-commands {
    flex: 0 0 200px;
    overflow: auto;
    scrollbar-width: thin;
}

.project-commands button {
    margin: 2px;
}

.project-terminal, .project-stream {
    flex-grow: 1;
    overflow: auto;
}

.project-stream .card {
    padding: 5px;
    margin-bottom: 10px;
}

.project-command {
    display: flex;
    padding: 2px;
    position: relative;
}

.project-command .message {
    width: 100%;
    padding-right:30px;
    margin-right:8px;
}

.project-command .sendmessage {
    position: absolute;
    right: 14px;
    top: 8px;
}

.card .part {
    white-space: pre-line;
}

.card .part::before {
    content: "\00a0 \00a0 \00a0";
    color: white;
    width: 16px;
    display: inline-block;
    margin-right: 2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.card .part.server {
    background-color: var(--bs-dark-bg-subtle);
    color: var(--bs-dark-text-emphasis);
    border-color: var(--bs-dark-border-subtle);
}
.card .part.server::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-double-left%3C/title%3E%3Cpath d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z' /%3E%3C/svg%3E");
}

.card .part.client {
    background-color: var(--bs-light-bg-subtle);
    color: var(--bs-light-text-emphasis);
    border-color: var(--bs-light-border-subtle);
}
.card .part.client::before {    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-double-right%3C/title%3E%3Cpath d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z' /%3E%3C/svg%3E");
    
}

.card .part.error {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
}
.card .part.error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Ealert%3C/title%3E%3Cpath d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z' /%3E%3C/svg%3E");
}

.card .status {
    text-align: right;
    font-size: 0.7em;
    opacity: 0.7;
}

.card .status .fa-ellipsis {
    text-align: right;
    font-size: 0.7em;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
}

.fa-grip-lines:hover {
    cursor: pointer;
}

.ui-sortable-helper .fa-grip-lines {
    cursor: grab;
}

.icon-link {
    text-decoration: none;
}