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

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

.app-brand-logo.demo svg {
  width: 34px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! 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;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 72px !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: 1rem !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: 254px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

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


/* custom styling */

/* .authentication-cover{background: url(../img/login-auth.png); background-size: cover;} */

.video-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100vh; overflow: hidden; /*opt*/ display: flex ;}
.video-bg video { width: 100%; /*height: 100%; object-fit: contain;*/ object-position: center;}
.video-bg .bg-video{object-fit: cover; filter: blur(100px); position: absolute; z-index: -1; height: 100%;}


.input-group.shadow-none:focus-within::before, .input-group.shadow-none:focus::before{box-shadow: none;}
.upload-btn{ background: rgba(0, 47, 242, 0.10); color: #012FF2; border-color:  rgba(0, 47, 242, 0.02); box-shadow: none;}
.table-responsive.rounded-box{ border-radius: 6px; border: 1px solid rgba(47, 43, 61, 0.12);}
.table-responsive.rounded-box table tr:first-child th{ border-top: 0;}
.table-responsive.rounded-box table tr:last-child td{ border-bottom: 0;}
.dropzone{ text-align: center;}
.action-box i{ font-size: 24px; color: #6d6b77;}
a.under-lined { text-decoration: underline; color: #6d6b77;}
.bg-purple {background-color: rgba(115, 103, 240, 0.16) !important; color: rgba(115, 103, 240, 1) !important;}
input[type=text].form-control:read-only,
input[type=date].form-control:read-only  { color: var(--bs-secondary-color); background-color: var(--bs-gray-50); border-color: color-mix(in sRGB, var(--bs-base-color) 24%, var(--bs-paper-bg));opacity: 1;}

.nav-pills ~ .tab-content.bg-trans{ box-shadow: none; background-color: transparent; border: transparent;}

[data-bs-theme=dark] .menu-item.active > .menu-link:not(.menu-toggle){background: #7367f0;}

.nav-align-left .nav-tabs .nav-link,
.nav-align-left .nav-tabs .nav-link:not(.active):hover{ border-bottom-color: transparent !important;}

.vertical-tab .nav-link{ color: rgba(47, 43, 61, 0.6);}
.vertical-tab .nav.nav-tabs { border-bottom:0 ;}

.rltv-blue-lbl{ position: relative;}
.abs-blue-lbl{ position: absolute; color: #007AFF; margin: 0; right: 12px;top: 2px;}
.blue-lbl{ color: #007AFF; margin: 0;}

.stepper-outr{font-weight: 500; gap: 16px;}
.bs-circle{display: flex ; align-items: center; justify-content: center; border-radius: .375rem; block-size: 2.375rem; font-size: 1.125rem; font-weight: 500; inline-size: 2.375rem; width: 2em; height: 2em; padding: .5em 0; margin: .25rem; line-height: 1em;  background: rgba(2, 40, 66, 0.10);}
.bs-circle-label{line-height: 1.375rem;}
.bs-circle-title{font-size: 18px; font-weight: 500; line-height: 2rem; color: rgba(47, 43, 61, 0.9); }
.bs-circle-subtitle{ font-weight: 400; color: rgba(47, 43, 61, 0.7); font-size: 13px;}

.text-blue{color: #022842;}

/* .input-group.disabled{color: var(--bs-secondary-color); background-color: var(--bs-gray-50); border-color: color-mix(in sRGB, var(--bs-base-color) 24%, var(--bs-paper-bg)); opacity: 1;} */

.min-w-80{ min-width: 80px;}

.pay-status-bor-rht{ border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}

.modal-400{max-width:400px}
.modal-500{max-width:500px}

.dropdown-item:hover, .dropdown-item:focus{ background-color: rgba(2, 40, 66, 0.1);}

.flash-input:focus{ box-shadow: none; border-width: 0 !important; border-color: transparent !important ;}

.swal2-popup{padding: 1.5em; width: 400px; box-shadow: 0 0.25rem 1.125rem 0 rgba(47, 43, 61, 0.16); border-radius:8px;}
.swal2-container{ z-index: 1080 !important;}
.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation{background: rgba(151, 149, 158, .5);}
.flatpickr-calendar {
    z-index: 2000 !important; /* higher than Bootstrap's offcanvas (z-index: 1045) */
}

/* Force larger icons inside DataTable pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button i {
  font-size: 1.4rem !important; /* Bigger icon */
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Make the buttons square & centered like in second screenshot */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
}

/* Optional: hover color like Vuexy */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
}

.swal2-title{ font-size: 1.5rem; line-height: 2.375rem; text-align: left; padding: 0; }
.swal2-actions{ margin: 0; justify-content: end; padding-top: 1.5em; gap: 4px;}


.app-chat .app-chat-history{border-radius: 6px; box-shadow: 0 3px 12px 0 rgba(47, 43, 61, 0.14); overflow: hidden;}

.app-chat .app-chat-history .chat-history-body .chat-history .chat-message.chat-message-right .chat-message-text{background: rgba(2, 40, 66, 0.10) !important; color: var(--bs-primary) !important;}

.app-chat .app-chat-history .chat-history-wrapper{background-color:rgba(248, 247, 250, 1) !important;}

.date-time{color: var(--bs-timeline-event-time-color); font-size: 0.85rem;}


.timeline.timeline-center.dashed-line .timeline-item.timeline-item-left, .timeline.timeline-center.dashed-line .timeline-item:nth-of-type(odd):not(.timeline-item-left, .timeline-item-right){border-inline-end: 2px dashed var(--bs-border-color);}
.timeline.timeline-center.dashed-line .timeline-item.timeline-item-right, .timeline.timeline-center.dashed-line .timeline-item:nth-of-type(even):not(.timeline-item-left, .timeline-item-right){ border-inline-start:2px dashed var(--bs-border-color);}

.timeline.dashed-line .timeline-item .timeline-point{block-size: 1rem; inline-size: 1rem;}

.timeline.timeline-center.dashed-line .timeline-item.timeline-item-left .timeline-point, .timeline.timeline-center.dashed-line .timeline-item:nth-of-type(odd):not(.timeline-item-left, .timeline-item-right) .timeline-point{margin-inline-start: -0.4rem;}

.btn{ font-weight: 400;}

.modal-footer .btn,
.text-end .btn, .mw-100,
.offcanvas-body .btn { min-width: 100px;}

/* .table > :not(caption) > * > *,
.table .simple-link{ color: rgba(47, 43, 61, 0.9);} */

.kanban-board {
    margin-left: 0 !important;
}

.modal-outer{ padding:10px 6px;}
.modal .modal-footer{ padding-top: 4px;}

.font-14{ font-size: 14px;}

.fav-logo{ display: none;}

.layout-menu-collapsed .fav-logo{ display: block; max-width: 100%;}

.layout-menu-collapsed.layout-menu-hover .fav-logo{ display: none;}
.layout-menu-collapsed.layout-menu-hover .main-logo{ display: block;}

.layout-menu-collapsed .main-logo{ display: none;}

.layout-menu-collapsed .layout-menu-toggle{ display: none;}
.layout-menu-collapsed.layout-menu-hover .layout-menu-toggle{ display: block;}

.cst-calendar .kanban-container{gap: 15px;}
.cst-calendar.app-kanban .kanban-wrapper{overflow-x: unset;}
.cst-calendar .kanban-board { flex: 0 0 calc(14.285% - 12.85px);}
.cst-calendar.app-kanban .kanban-wrapper .kanban-container{inline-size: auto !important;}
.cst-calendar.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-item{inline-size: auto;}
.cst-calendar.app-kanban .kanban-wrapper .kanban-container .kanban-board .kanban-drag{min-inline-size: 100%;}
.cst-calendar .kanban-item:hover { cursor: pointer; }

.iconed-box{ position: relative; padding-right: 24px;}
.iconed-box .calender-box-icon{ position: absolute; right: 0;}

.tooltip-inner{ padding: 12px; font-size: 11px; font-weight: 500;}

.lbl-strip{ display: flex; padding: 15px 0; margin: 0; list-style: none; border-top: 1px solid rgba(47, 43, 61, 0.12); border-bottom: 1px solid rgba(47, 43, 61, 0.12); flex-wrap: wrap; gap: 14px;}
.lbl-strip li{ font-size: 13px; padding-right: 14px; border-right: 1px solid rgba(47, 43, 61, 0.24); display: flex; align-items: center; gap:5px; color: rgba(47, 43, 61, 0.9); flex-wrap: wrap;}
.lbl-strip li:last-child{ border-right: 0; padding-right: 0; margin-right: 0;}

.cst-row-spacer{ }
.cst-row-spacer .col-auto{ flex: 0 0 12.5%;}

/*.form-control:focus, .form-select:focus{box-shadow: 0 0.125rem 0.375rem 0 rgba(115, 103, 240, 0.3); border-color: #7367f0;}
.input-group:focus-within, .input-group:focus { box-shadow: 0 0 0 1px #7367f0; }
.input-group:focus-within::before, .input-group:focus::before { box-shadow: 0 0.125rem 0.375rem 0 rgba(115, 103, 240, 0.3); }
.bootstrap-select .dropdown-toggle.show, .bootstrap-select .dropdown-toggle:focus, .bootstrap-select .dropdown-toggle:active {border-color: #7367f0 !important;}
.select2-container--open{--bs-select-active-border-color:#7367f0 !important;}*/


.sales-tracker-stats .col{ flex: 0 0 20%;}

.cst-tagify-tag{border-radius: 4px; background: rgba(47, 43, 61, 0.08); padding: 3px 10px; display: inline-flex; color: rgba(47, 43, 61, 0.9); font-size: 13px; font-weight: 500; gap: 4px; align-items: center; transition: .13s ease-out;}
.cst-tagify-tag:hover{ background:#E0DFE2;}
.tg-close{ opacity: .7;}

.attachment-blue-text{ color: rgba(0, 122, 255, 1); font-size: 14px; display: block; line-height: 24px;}

.sepr1{ background-color: rgba(47, 43, 61, 0.12); width: 1px; height: 100%;}
.col-50{ flex: 0 0 calc(50% - 16.5px); border-radius: 6px;}

.yellow-badge{background: rgba(247, 182, 0, 1); color: #fff;}

.center-nav{inset-inline-start: 0 !important;}

.grey-boxed{ background: rgba(47, 43, 61, 0.06); border: 1px solid rgba(47, 43, 61, 0.12); border-radius: 6px;}
.bor-right{}
.bor-top{border-top:1px solid rgba(47, 43, 61, 0.12);}

.grey-boxed .col-lg-4:nth-child(1), .grey-boxed .col-lg-4:nth-child(2){border-right:1px solid rgba(47, 43, 61, 0.12);}

.company-logo{ width: 80px; height: 40px;}
.company-logo img{ width: 100%; height: 100%; object-fit: contain; object-position: left;}

p{/*color: rgba(47, 43, 61, 0.9);*/ font-size: 16px; font-weight: 500; line-height: 28px;}

.list-unstyled li .icon-base {flex: 0 0 24px;}

/* [data-bs-theme=light] .menu{background-color: #2f3349;}
[data-bs-theme=light] .menu-item.active > .menu-link:not(.menu-toggle) { background: #7367f0;}
[data-bs-theme=light] .menu-header .menu-header-text { color: #76778e;}
[data-bs-theme=light] .menu-link, [data-bs-theme=light] .menu-horizontal-prev, [data-bs-theme=light] .menu-horizontal-next{color: #cfcde4;}
[data-bs-theme=light] .menu-vertical .menu-item:not(.active):not(.open) .menu-link:hover { background-color: color-mix(in sRGB, #e1def5 6%, #2f3349);}

.layout-menu-collapsed:not(.layout-menu-hover, .layout-menu-offcanvas, .layout-menu-fixed-offcanvas) .layout-menu.menu-vertical .menu-inner > .menu-header::before {background-color: #44485e;} */

.file-thumb { padding-right: 80px;}
.thumb-banner{ position: absolute;  display: block; right: 0; top: -17px; width: 58px; height: 58px;}
.thumb-banner img{ max-width: 100%; height: 100%; object-fit: cover; border-radius: 50px;}
.thumb-banner .icon-x{ position: absolute; color: #fff; opacity: 1; transition: .25s; background: rgba(255, 0, 0, 1); padding: 4px; right: 0; border-radius: 50px;}
.thumb-banner:before{ content: ''; }
.thumb-banner:hover:before, .thumb-banner:hover .icon-x{ opacity: 1;}

.preview-box{position: relative; box-sizing: content-box; border-radius: .375rem; box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14); font-size: .8125rem; inline-size: 11.25rem;}
.preview-box .dz-thumbnail{box-sizing: content-box; padding: .625rem;}
.preview-box .dz-thumbnail>img { max-block-size: 100%; max-inline-size: 100%;}
.preview-box .dz-size{color: #acaab1; font-size: .6875rem; font-style: italic; padding: 5px 10px 15px 10px;}

@media (max-width: 1660px) {

.cst-calendar.app-kanban .kanban-wrapper{overflow-x: auto; overflow-y: auto;}
.rltv-blue-lbl{padding-bottom: 22px;}
.abs-blue-lbl{ bottom: 0; top: auto; left: 12px;}
}

@media (max-width: 1500px) {
.sales-tracker-stats .col { flex: 0 0 33.3334%; }
}

@media (max-width: 1400px) {
.cst-row-spacer .col-auto{ flex: 0 0 25%;}
}

@media (max-width: 1024px) {
.cst-row-spacer .col-auto{ flex: 0 0 33.334%;}
}

@media (max-width: 991px) {
.sales-tracker-stats .col { flex: 0 0 100%; }
.grey-boxed .col-lg-4:nth-child(1), .grey-boxed .col-lg-4:nth-child(2) {border-right: 0;}
.bor-top{ border: 0;}
.grey-boxed .col-lg-4>div{border-bottom: 1px solid rgba(47, 43, 61, 0.12);}
}

@media (max-width: 767px) {
  .cst-row-spacer .col-auto{flex: 0 0 100%;}

}
#viewModal .modal-footer {
    display: none;
}

.pac-container {
    z-index: 99999 !important; /* Always on top of modal */
}

.modal-body, .form-control-validation {
    overflow: visible !important; /* Prevent clipping of dropdown */
}

.unread-row {
    background-color: #f0f0f0 !important;
    font-weight: 600;
}

.flatpickr-date.input.is-invalid {
    border: 1px solid #dc3545 !important;
    box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25) !important;
}

.form-control.read-only{ color: var(--bs-secondary-color); background-color: var(--bs-gray-50); border-color: color-mix(in sRGB, var(--bs-base-color) 24%, var(--bs-paper-bg));opacity: 1;}