@charset "utf-8";

#cb-connect-sidebar-main { display: none;}

.custom-signature { border: 1px solid #ddd; touch-action: none;}

.custom-dropzone {
    min-height: 120px !important;
}

.custom-form-check-input {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

.custom-flexSwitchCheck {
    width: 2.5em !important;
    height: 1.2em !important;
}

.custom-form-check-input + label.form-check-label, .custom-flexSwitchCheck + label.form-check-label {
    margin: 0.9px 0 0 10px;
}

.fa-cog-color { color: #238781;}

canvas#bcPaintCanvas {
    width: 100%;
    /* width: 388.663px; */
    height: 168.6px;
}

.img-15x {
    width: 1.55rem;
    height: 1.55rem;
}

.fs-85 {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

.fa-12x {
    font-size: 1.28em;
    vertical-align: middle;
}

/* #image-preview-container {
    display: flex;
    flex-flow: row;
} */

.preview-img {
    margin-right: 14px;
}

.image-block { display:inline-block; text-align:center; margin-bottom: 15px; /* margin:10px; */}

/* Signature Canvas */
#signature {
    /* width: 100%; */
    height: 185px;
    border: 1px solid #ddd;
    background-color: white;
    touch-action: none;
}

.modal #signature {
    background-color: white !important;
    z-index: 1051;
}

#demo-upload {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
}
.dz-preview .dz-image img {
    max-width: 100%;
    max-height: 100px;
}

/* Clear button styling */
#clear-signature {
    margin-top: 10px;
}

/* Fix for modal signature */
.modal.show #signature {
    background-color: white !important;
}

/* Better signature appearance */
.signature-pad {
    cursor: crosshair;
}

/* Modal Fixes */
.modal {
    opacity: 1 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

/* Tags Input Suggestions */
.tt-menu {
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    max-height: 150px;
    overflow-y: auto;
}

.tt-suggestion {
    padding: 8px 15px;
    cursor: pointer;
}

.tt-suggestion:hover {
    background-color: #f5f5f5;
}

/* Ensure proper modal stacking */
.modal {
    z-index: 1060 !important;
}
.modal-backdrop {
    z-index: 1050 !important;
}

/* Dropzone styling */
.dropzone {
  border: 2px dashed #ccc;
  padding: 20px;
  min-height: 150px;
}

/* Signature canvas */
.custom-signature {
  width: auto;
  height: 185px;
  border: 1px solid #ddd;
  background-color: white !important;
}

.typeahead.dropdown-menu li {
    padding: 5px 10px;
    cursor: pointer;
}

.bootstrap-tagsinput {
    width: 100%;
  }
  .twitter-typeahead {
    width: 100%;
  }
  .tt-menu {
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
  }
  .tt-suggestion {
    padding: 8px 12px;
    cursor: pointer;
  }
  .tt-suggestion:hover {
    background-color: #f5f5f5;
  }
  .tag.label-info {
    display: inline-block;
    margin: 2px;
    padding: 5px 8px;
  }

/* .bootstrap-tagsinput {
    width: 90%;
} */

/* .dataTables_length, .dataTables_filter {
    width: 50%;
    float: left;
    margin-bottom: 11px;
} */

@media (max-width: 767px) {
    .custom-signature { width: 100%;}
    .range-slider { width: 150px;}
    .mg-0 { margin: 0; padding: 0;}
}

@media (max-width: 991px) {
    .brand-logo { width: calc(100% - 90px);}
    .brand-logo .app-brand { min-width: 100%;}
    div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
        margin-bottom: 10px !important;
    }
}

.error {
    color: red;
}

#divmsg {
    color: red;
}

.was-validated .form-control:valid, .form-control.is-valid {
    background-image: unset !important;
    border-color: unset !important;
}

.was-validated .form-select:valid:not([multiple]):not([size]) {
    --bs-form-select-bg-icon: unset !important;
}

.suggestion-container {
    position: relative;
    width: 100%;
}

#customerSuggestionBox {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.suggestion {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestion:hover {
    background-color: #f5f5f5;
}

.suggestion.no-results {
    color: #999;
    cursor: default;
}

.reports-dropdown .dropdown-menu {
  z-index: 1050;
  position: absolute !important;
}

/* Custom modal styles */
#eventsModal .modal-dialog.custom-modal {
    max-width: 800px;
    height: 80vh;
}

#eventsModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#eventsModal .modal-body {
    overflow-y: auto;
    flex: 1;
}

#eventsModal .table-responsive {
    margin-bottom: 0;
}

#eventsModal .table th {
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}


/* Custom modal styles */
#eventsDetailModal .modal-dialog.custom-modal {
    max-width: 800px;
    height: 80vh;
}

#eventsDetailModal .modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#eventsDetailModal .modal-body {
    overflow-y: auto;
    flex: 1;
}

#eventsDetailModal .table-responsive {
    margin-bottom: 0;
}

#eventsDetailModal .table th {
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}




.customer-events-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.customer-events-wrapper table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
}

.customer-events-wrapper th, 
.customer-events-wrapper td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
    color: #333;
}

.customer-events-wrapper th {
    background-color: #007bff; /* Bootstrap primary blue */
    color: #fff;
    font-weight: 600;
    user-select: none;
}

.customer-events-wrapper tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.customer-events-wrapper tbody tr:hover {
    background-color: #e9f2ff;
    cursor: pointer;
}

.event-cust-th {
    color: black !important;
    font-weight: 1000 !important;
}

#noDataFound {
    display:none;
}
#databaseError {
    display:none;
}

#eventsTable_wrapper {
    margin-top: 20px;
}