/*
* 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;}
.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,
.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;}
.disbled{ 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;}

.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; }

.cst-calendar .kanban-board *{white-space: normal; word-break: break-word;}

.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;}
p:last-child{ margin-bottom: 0;}

.list-unstyled li .icon-base {flex: 0 0 24px;}
[data-bs-theme=dark] .cst-tagify-tag{ color: #acabc1; background: rgb(181 160 255 / 8%);}
[data-bs-theme=dark] .cst-tagify-tag svg path{ fill: #acabc1;}

.dropzone{ height: 100%;}

.tb-border *{ vertical-align: top;}
.tb-border td{border-left: 1px solid #e6e6e8;}
.tb-border td:first-child{border-left:0;}

.dashboard-ranger .flatpickr-calendar{right: 0;}

.dashcard .card{ height: 100%;}

@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%;}

}

.locked-select + .dropdown-toggle {
    pointer-events: none;      /* disable user interactions */
    opacity: 1 !important;     /* keep normal look */
    background-color: #fff !important;
}

.locked-select + .select2-container .select2-selection {
    background-color: #f5f5f5 !important;
    pointer-events: none !important;
    opacity: 0.8;
}

.swal2-container {
    z-index: 200000 !important;
}
.uploaded-file-row {
    margin-top: 5px;
    background: #f5f5f5;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.uploaded-file-row .file-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.uploaded-file-row a {
    color: #192b3b;
    text-decoration: none;
    font-weight: 500;
}

.uploaded-file-row a:hover {
    text-decoration: underline;
}

.uploaded-file-row .delete-icon {
    cursor: pointer;
    font-size: 16px;
}


.status-label {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    color: #fff;
    white-space: nowrap;
}

.status-planned { background-color: #FFC107; color:#000; }
.status-quoted { background-color: #FF8A65; }
.status-deposit-received { background-color: #C5D9FF; color:#000; }
.status-active { background-color: #76FF03; color:#000; }
.status-ins-booked { background-color: #FF006E; }
.status-ins-complete { background-color: #9C27B0; }
.status-rebate-applied { background-color: #2979FF; }
.status-stc-applied { background-color: #E040FB; }
.status-grid-applied { background-color: #C6FF00; color:#000; }
.status-complete { background-color: #009688; }
.status-on-hold { background-color: #757575; }
.status-cancelled { background-color: #E53935; }