/*
Theme Name: Movement RX Patient Dashboard V2
Author: CH 02.2025 | Prosoft Phils
Author URL: http://prosoft-phils.com/
Description: Styles
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
 1.0 Page
 2.0 Header
 3.0 Sub Header
 4.0 Sidebar
 5.0 Content/Body
 
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Page
--------------------------------------------------------------*/

.main-wrapper {
  display: flex;
  background: linear-gradient(90.07deg, #2A4E79 10%, #4268B0 95%);
  min-height: 100vh; /* Fill full height */
}

button svg {
  margin-top: -3px;
}

.party-popper {
  display: inline;
  width: 32px;
  vertical-align: top;
}

/*--------------------------------------------------------------
2.0 Header
--------------------------------------------------------------*/
.navbar-custom {
  background: linear-gradient(90.07deg, #2A4E79 10%, #4268B0 95%);
  height: 80px;
  
}

.navbar-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensure it stays above other elements */
}

.header-practice-search input::placeholder {
    color: white !important;
}

/* For older browser compatibility */
.header-practice-search input::-webkit-input-placeholder {
    color: white !important;
}

.header-practice-search input::-moz-placeholder {
    color: white !important;
}

.header-practice-search input:-ms-input-placeholder {
    color: white !important;
}

.header-practice-search input::-ms-input-placeholder {
    color: white !important;
}

.header-breadcrumb {
  color: #ffffff;
  margin-right: 3rem;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  text-decoration: none;
}
  .header-breadcrumb-active {
    color: #7AD6FD;
     text-decoration: none;
  }

.custom-input-group {
  /* Give the group a 1px border, round corners */
  border-radius: 8px;
  display: flex;
  align-items: center;
  max-width: 250px;
  position: relative;       /* ensures children stay within rounded corners */
  background-color: rgba(255, 255, 255, 0.1); 
}

.custom-input-group.header-practice-search,
.custom-input-group.header-practice-dropdown {
  /* Give the group a 1px border, round corners */
  border: 1px solid #7AD6FD; /* Adjust color to match your UI */
}
.custom-input-group.header-practice-search:hover,
.custom-input-group.header-practice-dropdown:hover{
  border: 1px solid #3B82F6;
}

.custom-input-group input {

  padding-left: 0 !important;
}

.custom-input-group .input-group-text {
  background-color: transparent; 
  border: none;
  color: #FFFFFF;
}
.custom-input-group .form-control,
.custom-input-group .form-select {
  border: none; 
  background-color: transparent; 
  color: #FFFFFF; /* Text color */
  box-shadow: none; /* Remove focus outline (optional) */
}
.custom-input-group .form-control:focus,
.custom-input-group .form-select:focus {
  box-shadow: none; /* Keep the minimal style on focus */
}
.custom-input-group .custom-dropdown-toggle {
   height: calc(1.5em + 0.75rem + 2px);
   padding: 19px;
}

.custom-input-group .custom-dropdown-toggle:hover {
  color: #fff;
}

.custom-dropdown-menu {
  max-height: 300px; /* Adjust this value as needed */
  overflow-y: auto;  /* Enables a vertical scrollbar when needed */

}

/* MATCHING THE "SEARCH" INPUT: hide default select arrow and use an icon */
/* 1) Hide the native arrow in most browsers */
.form-select.custom-select {
  appearance: none;         /* standard syntax */
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  padding-right: 2rem;      /* ensure space for custom icon on the right */
}
/* 2) Hide the arrow in IE 10+ (optional) */
.form-select.custom-select::-ms-expand {
  display: none;
}

/* Dropdown button styled like a select */
.custom-dropdown-toggle {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 6px 12px;
}


/* Custom dropdown menu */
.custom-dropdown-menu {
  border-radius: 8px;
  border: 1px solid #9cb3ff;
  min-width: 100%;
  background-color: #2e3f54;
  color: #fff;
}

.custom-dropdown-menu .dropdown-item {
  color: #fff;
}

.custom-dropdown-menu .dropdown-item:hover {
  background-color: #1f2b3d;
}

/* Icon inside button */
.dropdown-icon {
  margin-right: 8px;
}


/* Circular icon container */
.icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #3B82F6; /* Adjust to match your UI's blue */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* So the badge can be positioned absolutely */
  color: #fff;        /* Icon color */
  font-size: 1.2rem;  /* Icon size */
  cursor: pointer;
}

  .icon-circle:hover {
    opacity: .8;
  }

/* Badge for notification count */
.notif-badge {
  display: flex;
  width: 20px;
  height: 20px;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -30%);
  background-color: #EF4444; 
  color: #fff;
  font-size: 0.6rem;
  padding: 2px;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
}

.header-practice-dropdown,
.header-practice-search{
  width: 300px;
}

/* status row look */
.header-notifications .status-row {
  list-style: none;
  text-align: center;
  padding: .5rem .75rem;
  font-size: 12px;
  color: #6c757d;
}

/* tiny inline spinner */
.header-notifications .status-row .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.45);
  border-radius: 50%;
  animation: notifspin .6s linear infinite;
  margin-right: .5rem;
  vertical-align: -2px;
}
@keyframes notifspin { to { transform: rotate(360deg); } }

.icon-circle + .dropdown-menu {
  border-radius: 8px;
}

.notification-con {
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
  padding: 8px;
  width: 320px;
  border-radius: 12px;
}

  a:hover .notification-con {
    background: #e2e6ea;
  }

  .notification-con.notif-new {
    border: 4px solid #7AD6FD;
  }

  .notification-con.notif-seen {
    border: 1px solid #F5F5F5;
  }


  .notification-con .patient-img {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    overflow: hidden;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 12px;

  }

  .profile-con .dropdown-item {
    border-radius: 8px;
    padding: 12px 20px 12px 12px;
  }

    .profile-con .dropdown-item:hover {
      background-color: #e2e6ea;
    }

.header-notifications ul{
    max-height: 500px;
    overflow: auto;
}

.header-notifications ul{
    max-height: 500px;
    overflow: auto;
}

.header-notifications ul li .notification-con p{
    max-width: 220px;          /* ≈ 20 “0” glyphs in the current font */
    overflow: hidden;         /* hide anything past the box */
    white-space: nowrap;      /* keep it on a single line */
    text-overflow: ellipsis;
}


/*--------------------------------------------------------------
3.0 Sub Header
--------------------------------------------------------------*/

.navbar-brand {
  font-weight: 600;
}
.header-title {
  font-size: 1.31rem;
  font-weight: 600;
  color: #4B5563;
  padding-bottom: 3px;
}
.header-subtitle {
  color: #6c757d;
  color: #4B5563;
}

.content-area .custom-input-group {
  background-color: white !important;
  border-color: #EFF4FB;
}

.content-area .custom-input-group input {
  color: #6B7280;
}

.main-content{
  margin:10px;
}



/*--------------------------------------------------------------
4.0 Sidebar
--------------------------------------------------------------*/


/* Toggle Button (round) */
.toggle-btn {
  position: absolute;
  top: 75%;
  right: -15px; /* so half the button sits “outside” the sidebar */
  transform: translateY(-50%);
  z-index: 1000;   /* ensure the button is above the sidebar */
  
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  
  display: flex;
  align-items: center;
/*  justify-content: center;*/
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

 /* SIDEBAR STYLES */

.sidebar {
    position: fixed;
    top: 80px; /* Adjust based on navbar height */
    left: 0;
    width: 250px;
    height: calc(100vh - 80px); /* Fill remaining height */
    background: linear-gradient(195.46deg, #2A4E79 16.9%, #4268B0 88.02%);
    transition: width 0.3s ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar .nav {
  height: calc(100vh - 120px);
  flex-wrap: nowrap;
}

.sidebar h6{
 
  font-family: Inter;
  font-size: 14px;
  font-weight: 700;
  line-height: 16.94px;
  color: #fff;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}
.sidebar .nav-link {
  color: #fff;
  margin: 0.5rem 1rem;
  display: flex;
  align-items: center; /* Vertically centers icon + text */
  height: 50px;
}

.sidebar .nav-link:hover {
  background-color: rgba(122, 214, 253, 0.3); /* Slightly transparent blue */
  border-radius: 0.375rem;
}
.sidebar .nav-link.active {
  background-color: #7AD6FD;
  border-radius: 0.375rem;
  color: #2A4E79;
}

.sidebar .nav-link.active img {
 filter: invert(1);
}
.sidebar .link-text{
  font-size: 14px;
  font-weight: 600;
}
/* When collapsed, reduce width and hide text */
.sidebar.collapsed {
  width: 74px;
}
.sidebar.collapsed .link-text {
  display: none; /* Hide the text next to the icons */
}


/*--------------------------------------------------------------
5.0 Content/Body
--------------------------------------------------------------*/
.content-area {
  position: absolute;
  padding: 1.5rem;
  top: 80px; /* Offset for navbar height */
  left: 250px; /* Offset for sidebar width */
  width: calc(100% - 250px);
  height: calc(100vh - 75px);
  overflow-y: auto; /* Enable vertical scrolling */
  /* If you want both top corners rounded: */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  background: rgba(245, 249, 255, 1);
  /* Optional: a little box-shadow or a border if you like: */
  box-shadow: 0 -5px 10px rgba(0,0,0,0.05);
  backdrop-filter: blur(4px);
  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;

}

.content-area.overview-pg {
  left: 0;
  width: 100%;
}

.sidebar.collapsed + .content-area {
    left: 74px;
    width: calc(100% - 74px);
}

.dataTables_wrapper .row .col-sm-12 {
  overflow: auto; /* So large tables can scroll horizontally */
}

.dataTables_filter{
  display: none;
}

.nav-tabs .nav-link {
  border: none;
  background: transparent;
}
.nav-tabs .nav-link.active {
  border-bottom: 2px solid #3B82F6;
}

.custom-tab-button {
  color: #6c757d;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding:17px;
}
.custom-tab-button.active {
  background-color: transparent !important;
  color: #3B82F6 !important;
  border-bottom: 2px solid #3B82F6;
}
.custom-tab-button.active .badge{
   background: #3B82F6 !important;
}

.custom-tab-button .badge {
/*  width: 25px;*/
  height: 23px;
  margin-left: 4px;
  padding: 0 6px;
  font-size: 10px;
  align-content: center;
  background: transparent;
  border-radius: 5px 5px 5px 0px;

}

.table-actions li{
  margin: 3px;
}

/* Table Design */
/*.dataTable {
    border-radius: 10px;
    overflow: hidden;
    background-color: black;
}
*/
table.dataTable thead th:first-child {
  border-top-left-radius: 8px;
}

table.dataTable thead th:last-child {
  border-top-right-radius: 8px;
}

/* For the bottom left cell of the last row */
table.dataTable tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

/* For the bottom right cell of the last row */
table.dataTable tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.dataTables_wrapper .dataTables_length{
  display: none;
}

/* Header */

table.dataTable thead tr {
  background-color: #2A4E79 !important; /* Dark Blue */
}

table.dataTable thead th {
  background-color: #2A4E79 !important; /* Dark Blue */
  color: white !important;
  font-weight: 400 !important;
  font-size: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

table.dataTable tbody td {
  vertical-align: middle !important;
  font-size: 14px;
  color: #4B5563;
  padding: 13px 10px;
}

/* Row Hover */
table.dataTable tbody tr:hover {
    background-color: rgba(52, 58, 64, 0.1);
}


/* Pagination Button Styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    width: 42px;
    height: 42px;
    align-content: center;
    margin: 2px;
    border-radius: 50px; /* Rounded buttons */
    background: transparent;
    color: #6B7280 !important;
    border: none !important;
    font-weight: 400 !important;
    transition: all 0.3s ease;
}

.dataTables_wrapper .dataTables_paginate {
    width: 100%;
    background: #fff !important;
    margin-top: .5rem;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 9px;
    padding: 5px 10px;
}

/* Active Page Number */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #EFF6FF;
    color: #1D4ED8 !important;
    font-weight: 400;
}

/* Disabled  */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  background-color: #fafafa !important;
  opacity: .6;
}

/* Hover Effect */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #F2F2F2 !important;
    color: #6B7280 !important;
    border-radius: 50px;
}

/* Hide Pagination "Processing" Text */
.dataTables_processing {
    display: none !important;
}

/* First and Last Page Buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:first-child,
.dataTables_wrapper .dataTables_paginate .paginate_button:last-child {
    font-size: 1rem;
    font-weight: 400;
}

/* Number of entries dropdown */
.dataTables_length select {
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #ddd;
}

.select2-container {
    z-index: 1055 !important; /* Higher than modal's z-index */
}

.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #ced4da !important;
}

.nav .nav-tabs{
  border-bottom: 1px solid #eaeaea;
}

.main-container{
  background:#fff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding-bottom: 30px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}

.main2-content{
  margin:20px;
}


.profile-card {
  background-color: #fff; /* White background for the card */
  border-radius: 10px;
  padding: 0 0 50px;
  position: relative;
  color:#fff;
}


.profile-section {
  background-color: var(--blue);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  position: relative; /* Establish positioning context for the image */
  padding: 15px 0 5px;
}

.profile-container {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-color: #ccc; /* fallback color */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;   /* control the initials size */
  color: #4B5563;       /* text color for initials */
  overflow: hidden;  /* ensure a circular shape */
  object-fit: cover;
   /* Adjust this value as needed */
  left: 20px;  /* Adjust to control horizontal placement */
  z-index: 2;
}

/* Push the content to the right so it doesn't sit underneath the image */
.profile-content {
  margin-left: 180px;  /* Adjust based on image width + desired spacing */
  width: calc(100% - 180px);
}

.profile-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top:5px;
  margin-bottom: 15px;
  
}

.profile-column {
  flex: 1;
  min-width: 180px;
  padding: 0 20px;
}

.profile-content .col-md-4 {
  padding-left:45px;
}

/* Vertical divider with left/right padding */
.divider {
  margin: 0 45px;
  background-color: #E5E7EB;
  width: 1px;
  align-self: stretch;
  opacity:15%;
}

/* Label text styling */
.label-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: #F5F5F5;
}

/* Highlight text styling */
.highlight {
  font-weight: 600;
  font-size: 14px;
  line-height: 16.94px;
  letter-spacing: 0;
  margin: 0;
}

.tab-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Optional: Add padding or margin as needed */

  border-bottom: 1px solid #dee2e6;
  padding-bottom:24px;
}

.tab-title {
  /* Additional styling for the title if needed */
  font-weight: 600;
  font-size: 17.5px;
  line-height: 50px;

}

.tab-buttons {
  /* This container automatically moves to the right because of space-between */
}

.custom-table {
  border-collapse: separate;
  border-spacing: 0 !important;
  border-radius: 6px;
  overflow: hidden;
}

.custom-table thead tr th {
  background: var(--blue, blue);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  line-height: 12.71px;
  letter-spacing: 0;
  text-align: center;
  color: #F3F3F3;
  padding: 14px;
}

.custom-table thead th,
.custom-table td {
  vertical-align: middle;
}

.custom-table thead th:last-child {
  border-top-right-radius: 6px;
}



.custom-table tbody td {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16.94px;
  letter-spacing: 0;
  color: #4B5563;
  text-align: center;
  padding: 21px 14px;
}

/* Style odd rows */
.custom-table tbody tr:nth-child(odd) {
  background-color: var(--white, white);
}

/* Style even rows */
.custom-table tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}

.badge {
  border-radius: 0.375rem;
}

.badge.phone-call,
.badge.voice-call {
    padding: 5px;
}

.voice-call-count {
  position: absolute;
  top: -8px;
  right: -10px;
  padding: 1px 5px;
  border-radius: 50%;
  background: #3B82F6;
}

.btn-more.dropdown-toggle:after {
  display: none;
}

.btn-more + .dropdown-menu {
  padding: 0;
  margin: 0;
}

.btn-more + .dropdown-menu li a {
  padding: 0 8px;
}

.btn-more + .dropdown-menu li a img {
  margin-top: -3px;
  margin-right: 3px;
}

.btn-more + .dropdown-menu li {
  padding: 7px 5px;
  margin: 0;
}

  .btn-more + .dropdown-menu li:hover,
  .btn-more + .dropdown-menu li:hover a {
    background-color: #ccc;
  }

.iti {
  display: block !important;
}

table.dataTable tbody th, table.dataTable tbody td {
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

table.dataTable tbody td:first-child {
  border-left: 1px solid #E5E7EB;
}

table.dataTable tbody td:last-child {
  border-right: 1px solid #E5E7EB;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: none !important;
  border-radius: 12px !important;
  padding-right: 8px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  border-right: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove span {
  vertical-align: middle;
}


.tab-container {
  border-radius: 12px;
  margin-top:16px;
}

/* Header text */
.header-title {
  color: #4B5563;
  font-size: 17.5px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
}


/* Container for each record item */
.list-item {
  padding: 12px 16px;
  background: #EFF3F8;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom:12px;
  transition: border 0.3s ease; /* Smooth transition for hover effect */
  border:1px solid transparent;
}

.list-item:hover{
  border:1px solid var(--teal);

}

/* Left column of a record item */
.record-item-left {
  /* Using Bootstrap’s flex-grow-1 in the markup for flexibility */
}

/* Folder name text */
.list-title {
  color: #4B5563;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  line-height: 21px;
  word-wrap: break-word;
}

/* Folder date text */
.list-desc {
  color: #6B7280;
  font-size: 12.25px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  word-wrap: break-word;
}


/* Custom gap for 12px spacing */
.gap-12 {
  gap: 12px;
}


 /* Base styling: remove default appearance and set dimensions */
 .form-check-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background-color: white;
  border: 2px solid #D1D5DB;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

/* Checked state styling: change background and border colors */
.form-check-input:checked {
  background-color: #1d4ed8;
  border-color: #3b82f6;
}


/* Optional label styling */
.form-check-label {
  margin-left: 8px;
  cursor: pointer;
}

.image-container {
  width: 72px;
  height: 72px;
  overflow: hidden; /* Hides the extra width of the image */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Fills the container, cropping the image as needed */
  object-position: center; /* Centers the image so the middle portion is shown */
}

.min-h{
  min-height: 630px;
}

/* Floating Container */
#floatingTimer {
  position: fixed;
  top: 20px;
  right: 40%;
  width: 320px;
  padding: 12px;
  background-color: #fff;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  border: 1px solid #F5F5F5;
  display: none;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
  cursor: move; /* Standard four-direction move cursor */
}

#floatingTimer:hover,
#floatingTimer:active {
  cursor: move;
}

/* Keep the text big and centered */
.time-text {
  color: #4B5563;
  font-size: 35px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  text-align: center;
}

/* Smoother transitions on the SVG icons */
#playButton svg,
#pauseButton svg,
#stopButton svg {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#floatingTimer svg{
  margin-top:0 !important;/* Apply transition to the SVG icon */
  
  
}

#floatingTimer:hover,
#floatingTimer:active {
  cursor: move; /* Ensures the same cursor is used on hover and when active */
}

/* Icon wrapper (first child) */
.icon-wrapper {
  /* Additional styling if needed */
}

/* Info Container */
.info-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.bubble-name{
  color: #4B5563;
   font-size: 14px;
   font-family: Inter;
   font-weight: 600;
   line-height: 21px;
   word-wrap: break-word
}


.btn:disabled, .btn.disabled {
  opacity: .5 !important;
}

.table-container .table-actions li:hover a svg rect{
    fill: #e2e6ea;
}

.table-container .table-actions li:hover a svg path{
    fill: var(--color-blue);
}


.custom-breadcrumb .breadcrumb{
  background-color: inherit;
  padding:0;
}


.custom-breadcrumb {
  /* Use the encoded SVG as the divider */
  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M9.99983%2017.7498C9.90129%2017.7503%209.80365%2017.7311%209.71264%2017.6933C9.62162%2017.6555%209.53907%2017.6%209.46983%2017.5298C9.32938%2017.3892%209.25049%2017.1986%209.25049%2016.9998C9.25049%2016.8011%209.32938%2016.6105%209.46983%2016.4698L13.9398%2011.9998L9.46983%207.52985C9.33735%207.38767%209.26522%207.19963%209.26865%207.00532C9.27208%206.81102%209.35079%206.62564%209.48821%206.48822C9.62562%206.35081%209.81101%206.2721%2010.0053%206.26867C10.1996%206.26524%2010.3877%206.33737%2010.5298%206.46985L15.5298%2011.4698C15.6703%2011.6105%2015.7492%2011.8011%2015.7492%2011.9998C15.7492%2012.1986%2015.6703%2012.3892%2015.5298%2012.5298L10.5298%2017.5298C10.4606%2017.6%2010.378%2017.6555%2010.287%2017.6933C10.196%2017.7311%2010.0984%2017.7503%209.99983%2017.7498Z%22%20fill%3D%22%236B7280%22/%3E%3C/svg%3E");
}


/* Styling for the "Assignments" link */
.breadcrumb-link {
  color: #7AD6FD;
  font-size: 17.5px;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

/* Styling for the active breadcrumb item ("Folder Name") */
.breadcrumb-item.active {
  color: #4B5563;
  font-size: 17.5px;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.show-notes {
  position: relative; /* Establish positioning context */
}

.show-notes .badge {
  width: 16px;
  height: 16px;
  position: absolute;
  top: -5px;    /* Adjust as needed */
  right: -5px;  /* Adjust as needed */
  background-color: #EF4444; /* Example: red, or use Bootstrap's danger color */
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-simplebar] .simplebar-content {
  padding-right: 12px !important; /* Adjust this value to match the scrollbar's width */
}

.dataTables_wrapper .table-select-sm{
  padding: .375rem 2.25rem .375rem .75rem !important;
}
.dataTables_wrapper .dataTables_paginate {
  margin-top: 0 !important;
}

table.dataTable.no-footer {
  border-bottom: none !important;
}

.toggle-password {
  border: 1px solid #ced4da;
  background-color: #fff;
}

.ui-datepicker {
  z-index: 1100 !important;
}

.note-list {
    margin-bottom: .5rem;
    padding: 1rem;
    background: #FAFAFA;
    border-radius: 6px;
}

.notes-content p {
    margin: 0;
}

.chat-empty-title {
  color: #4B5563;
  font-size: 17.5px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}

.chat-empty-subtitle {
  color: #6B7280;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 21px;
  word-wrap: break-word;
}

.table-responsive {
    overflow-y: unset !important;
}

/* Override for Select2 single select with Bootstrap 5 theme */
.select2-container--bootstrap-5 .select2-selection--single {
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #6B7280 !important;
  background-color: #fff !important;
  border: 1px solid #ced4da !important; /* add a border similar to native form controls if needed */
  border-radius: 0.25rem !important;
  min-height: 2.8rem !important;
  height: 2.8rem !important;
  padding: 0 !important; /* Reset padding if necessary */
  /*padding: 0.375rem 0.75rem !important;*/
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

/* Ensure the rendered text aligns vertically */
.select2-container--bootstrap-5 .select2-selection__rendered {
  line-height: 2.8rem !important;
  padding-left: 10px !important;
}
.select2-container--bootstrap-5 .select2-selection__placeholder {
  line-height: 2.8rem !important;
  padding-left: 5px !important;
}

/* Adjust the arrow container to match the field height */
.select2-container--bootstrap-5 .select2-selection__arrow {
  height: 2.8rem !important;
}

.select2-container--open {
  z-index: 9999 !important;
}

/* If you want to add a "grayed-out" style while disabled, you can do something like: */
.disable-interaction {
  pointer-events: none;
  opacity: 0.7; /* optional for a visual cue */
}

/*** styles for sticky pagination ***/
.table-wrapper-for-sticky-pagination {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.sticky-pagination-wrapper {
    position: relative;
    width: 100%;
}

.sticky-pagination {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    background-color: var(--white);
}

.sticky-pagination .dataTables_paginate {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 1 auto;
}

.sticky-pagination .items-per-page-container {
    flex-shrink: 0;
    padding-right: 1rem;
}

/*FIX for datatables overlapping with some user options*/
.table-wrapper-for-sticky-pagination {
  min-height: 480px;   /* tweak as you like */
}
/*** end of styles for sticky pagination ***/


/* Container */
.bug-intro{
  font-size:.95rem;
  border-radius:.75rem .75rem 0 0;
  padding:1rem 1.25rem;
  border-bottom:1px solid #E5EEF8;
}
.bug-intro p{ margin:0 0 .45rem; }

/* SLA line + badges */
.sla-line{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.5rem 1rem; margin:.25rem 0 .5rem;
}
.sla-line .label{
  font-weight:600; color:#254B73; /* dark blue label */
}

/* Badge list */
.sla-badges{
  display:flex; flex-wrap:wrap; gap:.5rem;
  list-style:none; padding:0; margin:0;
}

/* Badges */
.sla-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.38rem .65rem; border-radius:999px;
  font-weight:700; font-size:.82rem; line-height:1; color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.05), inset 0 0 0 1px rgba(255,255,255,.08);
  letter-spacing:.2px; white-space:nowrap;
}
.sla-badge.critical{ background:#FF3D32; } /* red */
.sla-badge.high{     background:#254B73; } /* dark blue */
.sla-badge.normal{   background:#0EA5E9; } /* light blue */
.sla-badge.low{      background:#22C55E; } /* green */

/* Better legibility on bright colors */
@media (prefers-contrast: more){
  .sla-badge{ outline:2px solid rgba(0,0,0,.25); }
}

/* Small screens: stack cleanly */
@media (max-width:576px){
  .sla-line{ flex-direction:column; align-items:flex-start; gap:.5rem; }
}

/* ===== SLA / Support strip (for .bug-intro block only) ===== */
.bug-intro{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #111827;
  border-top: 1px solid #EEF2F7;
  border-bottom: 1px solid #EEF2F7;
  text-align: left;
}

.bug-intro p{
  margin: 0 0 6px 0;
}

.bug-intro .label{
  color: #475569;            /* slate-600 */
  font-weight: 600;
  white-space: nowrap;
}

.sla-badges{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;             /* safety if Bootstrap classes are absent */
  flex-wrap: wrap;
  gap: 8px;
}

.sla-badges li{ margin: 0; }

.sla-badge{
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  border: 1px solid transparent;
}

.sla-badge.critical{
  color: #B42318;            /* red-700 */
  background: #FEE4E2;       /* red-100 */
  border-color: #FEC6C1;     /* red-200 */
}

.sla-badge.high{
  color: #B54708;            /* amber-800 */
  background: #FEF0C7;       /* amber-100 */
  border-color: #FADB5F;     /* amber-300 */
}

.sla-badge.normal{
  color: #0B63C7;            /* blue-700 */
  background: #E0ECFF;       /* blue-100 */
  border-color: #BBD6FF;     /* blue-200 */
}

.sla-badge.low{
  color: #344054;            /* gray-700 */
  background: #F2F4F7;       /* gray-100 */
  border-color: #E4E7EC;     /* gray-200 */
}

/* Accessible focus ring for keyboard users */
.sla-badge:focus-visible{
  outline: 2px solid #93C5FD; /* blue-300 */
  outline-offset: 2px;
  text-decoration: none;
}

/* Optional: compact spacing on small screens */
@media (max-width: 576px){
  .bug-intro{ padding: 12px 16px; }
}

/* Center the Select files button via margins (works in flex & non-flex parents) */
#popup-submit-bug .qq-upload-button-selector.qq-upload-button {
  display: block !important;     /* needed for margin auto in non-flex layouts */
  float: none !important;        /* neutralize any theme float */
  margin: 16px auto 0 !important;/* horizontal center */
}

.sla-line .label { white-space: nowrap; }
.sla-copy p { line-height: 1.4; }

.modal .iframe-in-modal {
    height: 70vh;
}

.modal .modal-fullscreen .iframe-in-modal {
    height: 85vh;
}

/*FIX for datatables overlapping with some user options*/
.table-wrapper-for-sticky-pagination {
  min-height: 480px;   /* tweak as you like */
}