/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  /* height: 64px; */
  height: auto;
}

.app-brand-logo.demo svg {
  width: 38px;
  height: 20px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
  letter-spacing: 0.15px;
}

.authentication-wrapper .app-brand-text.demo {
  text-transform: capitalize;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}
/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.25rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1.25rem;
}


.four-line-limit {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
}

#descText {
  max-height: 60px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-align: justify;
}
#descText.expanded {
  max-height: 500px;
  overflow-y: auto;
}

body {
    word-wrap: break-word !important;
    word-break: break-word !important;
}


/*************************************** Table **********************************************/
/* =========================================================
   GLOBAL ADMIN TABLE FIX - Bootstrap 5
   ========================================================= */

/* Har table ko apne container ke andar properly handle karega */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Normal tables ko content squeeze karne se rokega */
.table {
    width: 100%;
    margin-bottom: 0;
}

/* Table heading aur cells */
.table th,
.table td {
    vertical-align: middle;
}

/* Heading ko unnecessary character breaking se bachao */
.table th {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* Normal table data */
.table td {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Text ko A / R / E / A ki tarah break hone se rokega */
.table td,
.table td * {
    word-break: normal;
}

/* Long words/URLs hone par sirf zarurat ke hisaab se break */
.table td {
    overflow-wrap: anywhere;
}

/* Table ka text readable rahe */
.table td,
.table th {
    line-height: 1.4;
}

/* Badges ko break hone se bachao */
.table .badge {
    white-space: nowrap;
    word-break: normal;
}

/* Icons + number ek line me */
.table .text-nowrap {
    white-space: nowrap !important;
}

/* Small text ko bhi character-by-character break mat hone do */
.table small {
    word-break: normal;
}

/* Table images */
.table img {
    max-width: 100%;
}



/* =========================================================
   GLOBAL TABLE LONG TEXT WRAPPING
   ========================================================= */

/* Table cells ko paragraph ki tarah wrap karega */
.table td {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Table headings ek line me rahenge */
.table th {
    white-space: nowrap;
    word-break: normal;
}

/* Long text wale elements */
.table td p,
.table td div,
.table td span,
.table td small {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Bahut lamba continuous text ho to bhi container ke bahar nahi jayega */
.table td {
    max-width: 300px;
}

/* Text ko readable line-height */
.table td {
    line-height: 1.5;
}

/* Bootstrap text-nowrap ko sirf intentionally nowrap
   elements ke liye allow karo */
.table .text-nowrap {
    white-space: nowrap !important;
}

/* Badges ko break mat karo */
.table .badge {
    white-space: nowrap !important;
}

/* =========================================================
   LONG TEXT COLUMN
   ========================================================= */

.table td .long-text,
.table td .description,
.table td .content,
.table td .name,
.table td .display-name {
    max-width: 350px;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Table ko unnecessarily narrow columns me squeeze
     * hone se bachayega.
     */
    .table {
        min-width: max-content;
    }

}

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

@media (max-width: 991.98px) {

    /*
     * Chhoti screen par table horizontally scroll hoga
     * instead of text becoming unreadable.
     */
    .table-responsive .table {
        min-width: 800px;
    }

}
/*************************************** Table ****************************************************/

.ql-snow .ql-tooltip {
      left: 0px !important;
}

.table-more-data-height {
    max-height: 200px;
    overflow-y: auto !important;
}






























/* =========================================================
   CONTACT / TROUBLESHOOT MODAL FIX
   ========================================================= */

.tteesstt {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Modal itself */
.tteesstt .modal-header,
.tteesstt .modal-body,
.tteesstt .modal-footer {
    min-width: 0;
}

/* Header */
.tteesstt .modal-header {
    gap: 12px;
}

.tteesstt .modal-header > div {
    min-width: 0;
    flex: 1 1 auto;
}

.tteesstt .modal-title {
    max-width: 100%;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* Body - horizontal overflow completely remove */
.tteesstt .modal-body {
    overflow-x: hidden !important;
    min-width: 0;
}

/* Bootstrap row/columns */
.tteesstt .modal-body .row {
    min-width: 0;
}

.tteesstt .modal-body [class*="col-"] {
    min-width: 0;
}

/* Labels */
.tteesstt .ct-meta-label {
    white-space: normal;
    word-break: normal;
}

/* All modal text */
.tteesstt .modal-body span,
.tteesstt .modal-body small,
.tteesstt .modal-body a {
    max-width: 100%;
}

/* Long values like Subject, Name, IP etc. */
.tteesstt .fw-medium,
.tteesstt .ct-break {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Email */
.tteesstt a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Message box */
.tteesstt .ct-msg-box {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;

    overflow-x: hidden !important;
    overflow-y: auto;

    max-height: 220px;
}

/* User Agent / Device */
.tteesstt .ct-break {
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Form controls */
.tteesstt .form-select,
.tteesstt textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Footer */
.tteesstt .modal-footer {
    flex-wrap: wrap;
    gap: 10px;
}

.tteesstt .modal-footer > * {
    min-width: 0;
}

/* Prevent buttons from overflowing */
.tteesstt .modal-footer .btn {
    white-space: nowrap;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

    .tteesstt {
        max-height: calc(100vh - 40px);
    }

    .tteesstt .modal-body {
        padding: 1.25rem;
    }

}


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

@media (max-width: 767.98px) {

    .modal-dialog.modal-lg {
        width: auto;
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .tteesstt .modal-header {
        padding: 1rem;
    }

    .tteesstt .modal-body {
        padding: 1rem;
    }

    .tteesstt .modal-footer {
        padding: 1rem;
    }

    .tteesstt .modal-footer > form,
    .tteesstt .modal-footer > div {
        width: 100%;
    }

    .tteesstt .modal-footer > form .btn {
        width: 100%;
    }

    .tteesstt .modal-footer > div {
        display: flex;
    }

    .tteesstt .modal-footer > div .btn {
        flex: 1;
    }
}





@media (min-width: 992px) {
    #postsTable .post-column {
        min-width: 400px;
        width: 400px;
    }

    #postsTable .post-column .text-truncate {
        max-width: 360px !important;
    }

    #postsTable .post-column .text-truncate:hover {
        color:#666cff;
    }


        #postsTable .author-column {
        min-width: 260px;
        width: 260px;
    }

    #postsTable .author-column .text-truncate {
        max-width: 220px !important;
    }


}




.text-break {
word-wrap: break-word !important;
word-break: break-word !important;
}






/* =========================================================
   GENERATE REPORT - USER COLUMN FIX
   ========================================================= */

#reportTable .report-user-cell {
    min-width: 380px !important;
    width: 380px !important;
    max-width: 380px !important;
    overflow: hidden !important;
}

/* User row */
#reportTable .report-user-cell > div {
    min-width: 0 !important;
    max-width: 100%;
}

/* Avatar */
#reportTable .report-avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    flex: 0 0 38px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}

/* Actual profile image */
#reportTable .report-avatar-img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
}

/* Initial avatar */
#reportTable .report-avatar .avatar-initial {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
}

/* User information */
#reportTable .report-user-info {
    min-width: 0 !important;
    width: calc(100% - 55px) !important;
    max-width: calc(100% - 55px) !important;
    overflow: hidden !important;
}

/* Name */
#reportTable .report-user-name {
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.4;
}

/* Display / Email */
#reportTable .report-user-detail {
    display: block !important;
    width: 100%;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.5;
}

@media (min-width: 992px) {

    #reportTable .report-user-cell {
        min-width: 380px !important;
        width: 380px !important;
        max-width: 380px !important;
    }

}