/* =========================
   GLOBAL / RESET
========================= */
* {
    scrollbar-width: thin;
    scrollbar-color: #6c757d #343a40;
}

dl,
ol,
ul {
    margin-bottom: 0.7rem;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #343a40;
}
::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #80bdff;
}

/* Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #3f474f inset !important;
    box-shadow: 0 0 0 1000px #3f474f inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff;
    border: 1px solid #666 !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* =========================
   TYPOGRAPHY / BASIC ELEMENTS
========================= */
.form-required {
    font-size: 16px;
    margin-left: 4px;
    color: red;
}

.content-header h1 {
    font-size: 1rem;
}

#credit_balance {
    font-size: 1.1rem;
}

/* =========================
   LINKS / BUTTON STATES
========================= */
.dark-mode a:not(.btn):hover {
    color: unset;
}

a.bg-light:focus,
a.bg-light:hover,
button.bg-light:focus,
button.bg-light:hover {
    background: initial !important;
}

/* =========================
   NAVIGATION
========================= */
.navbar-nav .nav-link {
    padding: 0.2rem 1rem;
    height: 1.8rem;
}

/* =========================
   BRAND / HEADER
========================= */
.brand-link {
    padding: 0.5rem 1rem;
}

.brand-link .brand-image {
    margin-top: 0px;
    margin-left: 0.3rem;
    margin-right: 0.2rem;
}

.card-header {
    padding: 0.36rem 1.25rem;
}

/* =========================
   SIDEBAR / LAYOUT
========================= */
aside.main-sidebar {
    max-width: 169px !important;
}

.content-wrapper > .content {
    padding: 0 0.2rem;
}

/* Full height layout */
.full-height-row {
    min-height: calc(100vh - 54px);
}

/* Desktop */
@media (min-width: 768px) {
    .full-height-card {
        height: calc(100vh - 54px);
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        border-radius: 0px;
        box-shadow: none;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .full-height-card {
        height: calc(100vh - 84px);
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
}

.full-height-card .card-body {
    flex: 1;
    overflow-y: auto;
}

.full-height-card .only-msg-footer {
    min-height: 21vh;
    padding: 0.75rem 0.25rem;
}

.full-height-card .only-msg-footer .footer-form {
    height: 100%;
}

/* =========================
   CHAT / UI COMPONENTS
========================= */
.chat-image {
    width: 100%;
    max-width: 350px;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
}

.direct-chat-messages {
    height: 100%;
    overflow-y: auto;
}

.dark-mode .direct-chat-info .right > .direct-chat-text {
    background-color: #292d32;
}

.dark-mode .direct-chat-info .right > .direct-chat-text::after,
.dark-mode .direct-chat-info .right > .direct-chat-text::before {
    border-left-color: #d2d6de;
}

.dark-mode .direct-chat-info .right > .direct-chat-text {
    border-color: #d2d6de;
}

/* =========================
   INPUT / AI PROMPT
========================= */
.ai-input-wrapper {
    display: flex;
    height: 100%;
}

.ai-input-wrapper .input-group-prepend,
.ai-input-wrapper .input-group-append {
    max-height: 36px;
    margin: 0px 11px;
}

.ai-input-wrapper .ai-prompt-input {
    height: 100%;
    flex: 1;
    resize: none;
}
/* for prompt layout */
.ai-input-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.ai-input-wrapper > .col {
    flex: 1;
    min-width: 0;
}

.ai-input-wrapper > .col-auto {
    flex-shrink: 0;
}

.ai-input-wrapper .CodeMirror {
    width: 100% !important;
}

/* =========================
   UPLOAD COMPONENT
========================= */
.modern-upload-area {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 11px 11px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease;
    background: #292d32;
    color: #ccc;
}

.modern-upload-area:hover {
    color: #ccc;
    background: #343a40;
}

.upload-icon {
    font-size: 21px;
    margin-bottom: 0px;
}

.upload-text {
    margin-bottom: 0px;
}

#previewContainer img {
    max-height: 69px;
    object-fit: cover;
}

/* =========================
   FORM / PANEL
========================= */
#leftPanel .form-group {
    margin-bottom: 0.7rem;
}

#leftPanel .form-group label {
    font-weight: 400;
    font-size: small;
    margin-bottom: 0.2rem;
}

#projectSelect,
#groupSelect {
    max-width: 156px !important;
}

/* =========================
   STATUS / MESSAGES
========================= */
.character-typing,
.msgg {
    z-index: 2;
    margin: 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
}

.character-typing div {
    background: #2e2e2ecd;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    padding: 6px 16px;
    font-weight: 300;
    display: inline-block;
    font-size: 16px;
}

.msgg div {
    background: #2e2e2e;
    text-align: center;
    border-radius: 6px;
    color: #fff;
    padding: 6px 16px;
    font-weight: 300;
    display: inline-block;
    font-size: 16px;
    opacity: 0.7;
}

/* =========================
   TOASTS
========================= */
#toastsContainerTopRight,
.toasts-top-right {
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%);
    top: 1px !important;
}

/* =========================
   UTILITIES
========================= */
.filter-hidden {
    display: none !important;
}

/* =========================
   DARK MODE FIXES
========================= */
.dark-mode .preloader {
    background-color: #454d55b8 !important;
}

.dark-mode .page-item .page-link,
.dark-mode .page-item:not(.active) .page-link:hover {
    color: #d2d2d2;
}

/* =========================
   THIRD PARTY OVERRIDES
========================= */
.tox-statusbar__branding {
    display: none;
}

/* =========================
   MEDIA QUERIES
========================= */

/* Desktop */
@media (min-width: 768px) {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
        .content-wrapper,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
        .main-footer,
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav)
        .main-header {
        margin-left: 169px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .module_title_h {
        position: absolute;
        bottom: 46px;
        left: 0;
    }
}

/* select2 themeing */
.select2-container--default .select2-selection--single {
    background-color: initial !important;
    border: 1px solid #6c757d !important;
    padding: 6px 3px !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #fff !important;
}
.select2-container .select2-selection--single {
    height: initial !important;
}
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    top: 7px !important;
}
.select2-container--default .select2-results__option--selected {
    background-color: initial !important;
}
#voiceWrapper .voice_select_wrapper {
    min-width: 0;
}