.tim-row {
  margin-bottom: 20px;
}

.tim-white-buttons {
  background-color: #777777;
}

.typography-line {
  padding-left: 25%;
  margin-bottom: 35px;
  position: relative;
  display: block;
  width: 100%;
}

.typography-line span {
  bottom: 10px;
  color: #c0c1c2;
  display: block;
  font-weight: 400;
  font-size: 13px;
  line-height: 13px;
  left: 0;
  position: absolute;
  width: 260px;
  text-transform: none;
}

.tim-row {
  padding-top: 60px;
}

.tim-row h3 {
  margin-top: 0;
}
.login-page .card-login.card-white .card-header .card-title {
    color: #1d1d2a;
    text-align: center;
    margin-top: 30px;
    margin-bottom: -20px;
}
.offline-doc .page-header {
  display: flex;
  align-items: center;
}

.offline-doc .footer {
  position: absolute;
  width: 100%;
  background: transparent;
  bottom: 0;
  color: #fff;
  z-index: 1;
}

@media all and (min-width: 992px) {
  .sidebar .nav>li.active-pro {
    position: absolute;
    width: 100%;
    bottom: 10px;
  }
}

.card.card-upgrade .card-category {
  max-width: 530px;
  margin: 0 auto;
}

/* Media query for screens between 1280px and 1240px width */
@media only screen and (max-width: 1280px) and (min-width: 1200px) {
    /* Improved sidebar spacing for smaller screens */
    .sidebar, .off-canvas-sidebar {
        width: 220px !important; /* Reduce sidebar width slightly */
    }
    .tab button {
      font-size: 10px !important;
  }
    .sidebar .nav li > a, .off-canvas-sidebar .nav li > a {
      margin: 0px 6px 0 !important;
      padding: 9px 3px !important;
      font-size: 11px !important;
  }
  dashboardheading {
    text-align: CENTER;
    padding: 22px;
    margin-top: 20px;
    margin-bottom: 6px;
    padding-bottom: 0px;
    font-size: 17px !important;
}
.card form label+.form-control {
  margin-bottom: 10px;
  font-size: 11px !important;
}
a.btn.btn-sm.btn-success {
  line-height: 24px !important;
}
.form-control {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 7px 8px !important;
  height: 28px;
  background: #f8f9fa;
}
input.select2-search__field {
  font-size: 10px !important;
  padding: 3px !important;
}
.btn {
  border-radius: 8px;
  font-weight: 500;
  padding: 6px 8px !important;
  margin-top: 1px;
  transition: all 0.3s 
ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-size: 11px !important;
}

    .sidebar .nav i,
    .off-canvas-sidebar .nav i {
        font-size: 18px !important; /* Smaller icons */
        margin-right: 10px !important; /* Reduce icon spacing */
    }
    .filter-hint {
      display: block;
      margin-top: 6px;
      color: #6c757d;
      font-size: 11px;
      font-style: italic;
  }
    .sidebar .logo,
    .off-canvas-sidebar .logo {
        padding: 0.4rem 0.6rem !important; /* Reduce logo padding */
    }
    .search-input {
      border: 2px solid #e9ecef;
      border-radius: 8px;
      padding: 16px 20px !important;
      font-size: 14px;
      height: 33px !important;
      transition: all 0.3s 
  ease;
      background: white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      font-size: 10px;
  }
    
    .sidebar .logo p,
    .off-canvas-sidebar .logo p {
        font-size: 18px !important; /* Smaller logo text */
        margin: 8px 8px !important; /* Reduce logo margins */
    }
    
    /* Adjust main panel to accommodate smaller sidebar */
    .main-panel {
        width: calc(100% - 220px) !important;
    }
    
    /* Improve content spacing */
    .content {
      padding: 71px 25px 26px 25px !important;
  }
    
    /* Optimize navbar for smaller screens */
    .navbar .navbar-nav .nav-link {
        padding: 0.5rem 0.75rem !important; /* Reduce navbar link padding */
    }
    
    /* Improve sidebar collapse behavior */
    .sidebar .nav [data-toggle="collapse"] ~ div > ul > li > a {
      padding: 4px 0px !important;
      font-size:10px !important;
  }
    
    /* Better spacing for sidebar wrapper */
    .sidebar .sidebar-wrapper {
        padding: 0 10px !important; /* Add some horizontal padding */
    }
    .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p {
      color: #aa1651;
      font-size: 20px;
      margin-bottom: 0px;
  }
  .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    border-color: #585b5d;
    padding: 7px 4px;
    vertical-align: middle;
    font-size: 10px;
}
.dashboardbox .btn {
  padding: 7px 18px;
  border-radius: 5px;
  font-size: 10px;
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card p {
  color: #aa1651;
  font-size: 11px;
  margin-bottom: 0px;
  font-weight: 400;
}
.col-lg-3.col-md-12 .card-header {
  margin-bottom: 0px !important;
}
.col-lg-3.col-md-12 p {
  margin-bottom: 10px;
}
table.dataTable tbody td {
  padding: 0px 10px;
}
.dashboardbox .card .card-header .fa {
  color: #ab1651;
  font-size: 20px;
}
table a.btn.btn-sm.btn-primarydashboard {
  padding: 0px 11px !important;
  line-height: 24px !important;
}
.location-select {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 2px 20px !important;
  font-size: 12px !important;
  height: 36px !important;
}
.dashboardbox .card .card-header {
  margin-bottom: 10px;
  margin-top: 7px;
}
.filters-container {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  padding: 10px 10px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e9ecef;
}
    .skill-tag {
        padding: 1px 6px !important;
        border-radius: 6px !important;
        font-size: 8px !important;
    }

    a#editFormSubmission {
      line-height: 17px !important;
  }
    
    .skill-tag-more {
        background-color: #6c757d !important;
        color: white !important;
        font-weight: bold !important;
    }
.col-lg-12.col-md-12.dashboardheading {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
}
.sidebar .nav li.active > a:not([data-toggle="collapse"])::before {
  top: 16px !important;
}
.dashboardbox .card .card-header {
  margin-bottom: 10px;
  margin-top: 7px;
}
.modal-content {
  left: 60% !important;
}
#addHolidayModal .modal-content {
  position: absolute !important;
  top: 5% !important;
  left: 58% !important;
  transform: translateX(-50%) !important;
  max-width: 600px !important;
  width: 90% !important;

}
#addHolidayModal .modal-content {
  position: absolute !important;
  top: 5% !important;
  left: 55% !important;
  transform: translateX(-50%) !important;
  max-width: 830px !important;
}
.table .btn {
  padding-left: 4px !important;
  padding-right: 4px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  line-height: 17px !important;
  height: 25px !important;
}
.modal-content {
  width: 70% !important;
  max-width: 600px !important;
  left: 58% !important;
}
.card label {
  font-size: 10px;
  margin-bottom: 5px;
}
button.btn.btn-sm.btn-primary {
  font-size: 10px;
  padding: 2px 9px;
  line-height: 24px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 3px 6px;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: #333 !important;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 10px;
  margin-top: 8px;
}
div#table_info {
  font-size: 11px;
  margin-top: 6px;
}
a.btn.btn-sm {
  font-size: 10px;
  padding: 2px 9px;
  line-height: 24px;
}
h3.mb-0 {
  font-size: 17px;
  margin-top: 8px;
}
    /* Optimize sidebar scrolling */
    .sidebar .sidebar-wrapper {
        overflow-y: auto !important;
        max-height: calc(100vh - 80px) !important; /* Account for header */
    }
    
    /* Improve hover effects for smaller screens */
    .sidebar .nav li:hover:not(.active) > a {
        transform: translateX(3px) !important; /* Smaller hover translation */
    }
}

/* Enhanced unified dropdown styling */
.navbar .dropdown-menu.dropdown-navbar {
    background: #ffffff !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0.5rem !important;
}

.navbar .dropdown-item {
  color: #525f7f !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  padding: 0px 8px !important;
  transition: all 0.3s 
ease !important;
  border: none !important;
  background: transparent !important;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: #f8f9fa !important;
    color: #a81851 !important;
    transform: translateX(2px) !important;
}

.navbar .dropdown-item i {
    color: #a81851 !important;
    margin-right: 0.75rem !important;
    width: 16px !important;
    text-align: center !important;
}

.navbar .dropdown-divider {
    margin: 0.5rem 0 !important;
    border-color: #e9ecef !important;
}

/* Notification badge in dropdown items */
.dropdown-item .notification-count {
    background: linear-gradient(135deg, #a81851, #a81851) !important;
    color: white !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    margin-left: auto !important;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3) !important;
}

/* PDF and file preview styling */
.pdf-preview, .pdf-preview-container {
    text-align: center !important;
    padding: 20px !important;
    border: 2px dashed #e9ecef !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
    margin-bottom: 10px !important;
}

.pdf-preview i, .pdf-preview-container i {
    margin-bottom: 10px !important;
}

.pdf-preview p, .pdf-preview-container p {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #495057 !important;
}

.pdf-preview small, .pdf-preview-container small {
    color: #6c757d !important;
    font-size: 10px !important;
}

.current-image-container {
    position: relative !important;
    display: inline-block !important;
}

.current-image-container .remove-current-image {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 10 !important;
}

.file-upload-container {
    margin-bottom: 15px !important;
}

    .current-saved-image {
        max-width: 200px !important;
        max-height: 150px !important;
        border-radius: 8px !important;
        border: 1px solid #e9ecef !important;
    }
    button#remindersListBtn {
      height: 37px;
  }
  .card form label+.form-control {
    margin-bottom: 10px;
    font-size: 11px !important;
    padding: 0px !important;
    padding-left: 4px !important;
}
  .form-group.mr-3 {
    margin-right: 0px !important;
}
select#assigned_user_id {
  padding: 0px !important;
  height: 32px !important;
}
li.nav-link {
  border: 0px !important;
}
a#unifiedDropdown {
  border: 0px !important;
}
    /* Disable autofill styling across all browsers */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
        -webkit-text-fill-color: #525f7f !important;
        background-color: white !important;
        background-image: none !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }
    
    /* Firefox autofill prevention */
    input:-moz-autofill,
    textarea:-moz-autofill,
    select:-moz-autofill {
        background-color: white !important;
        color: #525f7f !important;
    }
    
    /* Additional autofill prevention for all browsers */
    input[autocomplete="off"],
    textarea[autocomplete="off"],
    select[autocomplete="off"] {
        background-color: white !important;
        color: #525f7f !important;
    }
    
    /* Prevent autofill background color changes */
    .form-control:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
        -webkit-text-fill-color: #525f7f !important;
        border: 2px solid #e9ecef !important;
    }
    
    .form-control:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
        -webkit-text-fill-color: #525f7f !important;
        border: 2px solid #a81851 !important;
    }
    
    /* More aggressive autofill prevention */
    input[data-form-type="other"],
    input[autocomplete="off"],
    textarea[autocomplete="off"],
    select[autocomplete="off"] {
        background-color: white !important;
        background-image: none !important;
        color: #525f7f !important;
    }
    
    /* Prevent autofill on specific field types */
    input[name*="postcode"],
    input[name*="city"],
    input[name*="email"],
    input[name*="phone"],
    input[name*="mobile"],
    input[name*="telephone"] {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
        -webkit-text-fill-color: #525f7f !important;
        background-color: white !important;
        background-image: none !important;
    }
    
    /* Force override any browser autofill styling */
    .form-control-alternative:-webkit-autofill,
    .form-control-alternative:-webkit-autofill:hover,
    .form-control-alternative:-webkit-autofill:focus,
    .form-control-alternative:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
        -webkit-text-fill-color: #525f7f !important;
        background-color: white !important;
        background-image: none !important;
        transition: background-color 5000s ease-in-out 0s !important;
    }