ticket-website/apps/static/css/index.css

@charset "UTF-8";

:root, 
[data-bs-theme="light"] {
    --border-colour: var(--bs-light-border-subtle);
}
[data-bs-theme="dark"] {
    --border-colour: var(--bs-dark-border-subtle)
}

.select2-container {
  z-index: 99999;
}

.select2-selection__choice {
  display: flex;
  align-items: center;
  padding-left: 3px !important;
}

.select2-selection__choice > button {
  border: none;
  background-color: var(--bs-white-rgb);
}

.select2-results__option--selected { display: none; }

.ck-editor .ck.ck-editor__top .ck-toolbar {
  border-top-left-radius: 0.375rem !important;
  border-top-right-radius: 0.375rem !important;
}

.ck-editor .ck.ck-editor__main {
  overflow: hidden;
}

.ck-editor .ck.ck-editor__main > div {
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

.ck-editor__editable[role="textbox"] {
  /* editing area */
  min-height: 200px;
  max-height: 200px;
}

#ticketsContainer .loading .spinner-grow {
    width: .8rem;
    height: .8rem;
}

#ticketsContainer .loading .spinner-grow:nth-child(1) {
    animation-delay: 0s;
}

#ticketsContainer .loading .spinner-grow:nth-child(2) {
  animation-delay: .9s;
}

#ticketsContainer .loading .spinner-grow:nth-child(3) {
  animation-delay: 1.8s;
}

.bg-none {
    background: none;
}

.border-none {
    border: none
}

a {
  text-decoration: none;
}

body {
  font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #72777a;
  line-height: 1.5;
  letter-spacing: 0.2px;
  overflow-x: hidden;
}

.bdT {
    border-top: 1px solid var(--border-colour) !important;
}

.bdB {
    border-bottom: 1px solid var(--border-colour) !important;
}

.w-fc {
    width: fit-content;
}

.h-fc {
    height: fit-content;
}


/* Ticket List Items */

.ticket-item {
    cursor: pointer;
}

.ticket-item.active {
    background-color: var(--bs-tertiary-bg);
}

.ticket-item:hover {
    background-color: var(--bs-tertiary-bg);
}
/* 
.ticket-item .ticket-item-indicator {
    writing-mode: vertical-rl;
    text-orientation: upright;
} */

.ticket-item .ticket-item-complex {
    transition: all 0.3s ease;
    overflow: visible;
    width: 2rem;
}

#ticketsContainer:not(.complex-items) .ticket-item .ticket-item-complex {
    margin: 0 !important;
    width: 0 !important;
    overflow: hidden;
}

.ticket-item .ticket-item-complex .badge {
    min-width: 1.8rem;
    position: relative;
}

.ticket-item .ticket-item-complex .badge:hover {
    margin-left: 2rem;
}

.ticket-item .ticket-item-complex .badge .ticket-item-complex-expand {
    display: none;
}

.ticket-item .ticket-item-complex .badge:hover .ticket-item-complex-expand {
    display: inline;
}



/* 
.ticket-item .ticket-item-complex .badge:hover .ticket-item-complex-expand,
.ticket-item .ticket-item-complex .badge .ticket-item-complex-expand:hover {
    display: inline;
    width: fit-content;

}
*/

.ticket-item .ticket-item-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
}

.ticket-item .ticket-item-author {
    margin-bottom: 0;
}

.ticket-item .ticket-item-title {
    color: var(--bs-body-color);
    font-size: 1rem;
    text-transform: capitalize;
}

.ticket-item .ticket-item-desc {
    color: var(--bs-secondary-color);
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-height: 3rem;
}

.ticket-item .ticket-item-tags .ticket-content-badge:last-child {
    margin-right: 0 !important;
}

.loading .email-list-item {
    cursor: progress;
}


/* Ticket Content */

.ticket-content .ticket-content-title {
    color: var(--bs-body-color);
}

.ticket-content .ticket-content-desc {
    color: var(--bs-secondary-color);
}

.ticket-content .ticket-content-icon {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    object-fit: cover;
}

.ticket-content .ticket-content.author {
    /* color: var(--bs-tertiary-color); */
    margin-bottom: 5px;
}


/* Tickets Side Nav */

.email-app .email-side-nav {
    border-right: 1px solid var(--border-colour);
}

.email-app .email-side-nav .nav-item .nav-link {
    color: var(--bs-tertiary-color);
}

.email-app .email-wrapper {
    min-height: 0;
}

@media screen and (min-width: 992px) {
    .email-app .email-wrapper .email-list {
        border-right: 1px solid var(--border-colour);
    }
}


/* Base Sidebar Navigation */

.sidebar-menu {
    border-right: 1px solid var(--border-colour);
}

.sidebar-logo {
    border-right: 1px solid var(--border-colour);
    border-bottom: 1px solid var(--border-colour);
}


/* Top Navigation */

.header {
    border-bottom: 1px solid var(--border-colour);
}