/* Padding All Sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

/* Padding Top */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

/* Padding Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

/* Padding Left (Start) */
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.ps-5 { padding-left: 3rem !important; }

/* Padding Right (End) */
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 0.25rem !important; }
.pe-2 { padding-right: 0.5rem !important; }
.pe-3 { padding-right: 1rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.pe-5 { padding-right: 3rem !important; }

/* Padding X-axis (Left and Right) */
.px-0 {       
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
}
.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}
.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}
.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

/* Padding Y-axis (Top and Bottom) */
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}
.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}
.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

/* Bootstrap 5 Margin Classes */

/* Margin (All Sides) */
.m-0 {margin: 0 !important;}
.m-1 {margin: 0.25rem !important;}
.m-2 {margin: 0.5rem !important;}
.m-3 {margin: 1rem !important;}
.m-4 {margin: 1.5rem !important;}
.m-5 {margin: 3rem !important;}

/* Margin Top */
.mt-0 {
    margin-top: 0 !important;
}
.mt-1 {
    margin-top: 0.25rem !important;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.mt-3 {
    margin-top: 1rem !important;
}
.mt-4 {
    margin-top: 1.5rem !important;
}
.mt-5 {
    margin-top: 3rem !important;
}

/* Margin Bottom */
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-1 {
    margin-bottom: 0.25rem !important;
}
.mb-2 {
    margin-bottom: 0.5rem !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
.mb-4 {
    margin-bottom: 1.5rem !important;
}
.mb-5 {
    margin-bottom: 3rem !important;
}

/* Margin Left */
.ms-0 {
    margin-left: 0 !important;
}
.ms-1 {
    margin-left: 0.25rem !important;
}
.ms-2 {
    margin-left: 0.5rem !important;
}
.ms-3 {
    margin-left: 1rem !important;
}
.ms-4 {
    margin-left: 1.5rem !important;
}
.ms-5 {
    margin-left: 3rem !important;
}

/* Margin Right */
.me-0 {
    margin-right: 0 !important;
}
.me-1 {
    margin-right: 0.25rem !important;
}
.me-2 {
    margin-right: 0.5rem !important;
}
.me-3 {
    margin-right: 1rem !important;
}
.me-4 {
    margin-right: 1.5rem !important;
}
.me-5 {
    margin-right: 3rem !important;
}

/* Margin X-axis (Left and Right) */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.mx-1 {
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
}
.mx-2 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}
.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}
.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}
.mx-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

/* Margin Y-axis (Top and Bottom) */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.my-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}
.my-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}
.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.m-auto { margin:auto !important; }


/* Background Colors */
.bg-primary {
  background-color: #0d6efd !important; /* Bootstrap primary color */
}

.bg-secondary {
  background-color: #6c757d !important; /* Bootstrap secondary color */
}

.bg-success {
  background-color: #198754 !important; /* Bootstrap success color */
}

.bg-danger {
  background-color: #dc3545 !important; /* Bootstrap danger color */
}

.bg-warning {
  background-color: #ffc107 !important; /* Bootstrap warning color */
}

.bg-info {
  background-color: #0dcaf0 !important; /* Bootstrap info color */
}

.bg-light {
  background-color: #f8f9fa !important; /* Bootstrap light color */
}

.bg-dark {
  background-color: #212529 !important; /* Bootstrap dark color */
}

.bg-body {
  background-color: #ffffff !important; /* Default body background color */
}

.bg-transparent {
  background-color: transparent !important; /* Transparent background */
}



/* Custom Bootstrap 5-like display classes for Bootstrap 3 */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Custom Bootstrap 5-like text alignment classes for Bootstrap 3 */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Justify content classes */
.justify-content-start { justify-content: flex-start;}
.justify-content-end { justify-content: flex-end;}
.justify-content-center { justify-content: center;}
.justify-content-between { justify-content: space-between;}
.justify-content-around { justify-content: space-around;}
.justify-content-evenly { justify-content: space-evenly;}
.align-items-center { align-items:center !important; }

/* Custom Bootstrap 5-like text color classes for Bootstrap 3 */
.text-primary { color: #007bff !important; }
.text-secondary { color: #6c757d !important; }
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }
.text-light { color: #f8f9fa !important; }
.text-dark { color: #343a40 !important; }
.text-white { color: #FFFFFF !important; }

/* Custom Bootstrap 5-like text size classes for Bootstrap 3 */
.fs-1 { font-size: 3rem !important; }
.fs-2 { font-size: 2.5rem !important; }
.fs-3 { font-size: 2rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }

/* Custom Bootstrap 5-like button classes for Bootstrap 3 */
.btn-custom { 
display: inline-block; 
padding: 0.5rem 1rem; 
font-size: 1rem; 
border-radius: 0.25rem; 
color: #fff; 
text-align: center; 
background-color: #007bff; 
border: 1px solid transparent; 
}
.btn-custom:hover { 
background-color: #0056b3; 
border-color: #004085; 
}

/* Custom Bootstrap 5-like width classes for Bootstrap 3 */
.w-25 { width: 25% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

.h-100 { height:100% !important; }
.max-width { width:max-content !important; }

/* Custom Bootstrap 5-like position classes for Bootstrap 3 */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top:0 !important; }
.end-0 { right:0 !important; }
.bottom-0 { bottom:0 !important; }
.start-0 { right:0 !important; }

/* Custom Bootstrap 5-like float classes for Bootstrap 3 */
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-none { float: none !important; }

/* Custom Utility Classes */
.width-fit-content { width: fit-content !important; }

/* List style */
.list-style-none {
       list-style: none !important;
}

/* Basic Borders */
.border {
    border: 1px solid #dee2e6; /* Default light gray border */
}

.border-top {
    border-top: 1px solid #dee2e6;
}

.border-end {
    border-right: 1px solid #dee2e6;
}

.border-bottom {
    border-bottom: 1px solid #dee2e6;
}

.border-start {
    border-left: 1px solid #dee2e6;
}

/* Disable Specific Borders */
.border-top-0 {
    border-top: 0 !important;
}

.border-end-0 {
    border-right: 0 !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-start-0 {
    border-left: 0 !important;
}

/* Border Widths */
.border-0 {
    border-width: 0 !important;
}

.border-1 {
    border-width: 1px !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-3 {
    border-width: 3px !important;
}

.border-4 {
    border-width: 4px !important;
}

.border-5 {
    border-width: 5px !important;
}

/* Border Colors */
.border-primary {
    border-color: #0d6efd !important; /* Bootstrap Primary Color */
}

.border-secondary {
    border-color: #6c757d !important; /* Bootstrap Secondary Color */
}

.border-success {
    border-color: #198754 !important; /* Bootstrap Success Color */
}

.border-danger {
    border-color: #dc3545 !important; /* Bootstrap Danger Color */
}

.border-warning {
    border-color: #ffc107 !important; /* Bootstrap Warning Color */
}

.border-info {
    border-color: #0dcaf0 !important; /* Bootstrap Info Color */
}

.border-light {
    border-color: #f8f9fa !important; /* Bootstrap Light Color */
}

.border-dark {
    border-color: #212529 !important; /* Bootstrap Dark Color */
}

.border-white {
    border-color: #fff !important; /* Bootstrap White Color */
}

/* Rounded Borders */
.rounded {
    border-radius: 0.25rem !important;
}

.rounded-top {
    border-top-left-radius: 0.25rem !important;
    border-top-right-radius: 0.25rem !important;
}

.rounded-end {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
    border-bottom-left-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

.rounded-start {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.rounded-pill {
    border-radius: 50rem !important;
}

/* Border Opacity */
.border-opacity-10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.border-opacity-20 {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.border-opacity-30 {
    border-color: rgba(0, 0, 0, 0.3) !important;
}

.border-opacity-40 {
    border-color: rgba(0, 0, 0, 0.4) !important;
}

.border-opacity-50 {
    border-color: rgba(0, 0, 0, 0.5) !important;
}

.border-opacity-60 {
    border-color: rgba(0, 0, 0, 0.6) !important;
}

.border-opacity-70 {
    border-color: rgba(0, 0, 0, 0.7) !important;
}

.border-opacity-80 {
    border-color: rgba(0, 0, 0, 0.8) !important;
}

.border-opacity-90 {
    border-color: rgba(0, 0, 0, 0.9) !important;
}

.border-opacity-100 {
    border-color: rgba(0, 0, 0, 1) !important;
}


/* Overflow Utilities */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

/* Directional Overflow Utilities */
.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

/* Cursor Utilities */
.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-help {
  cursor: help;
}