:root {
    --body: #f0f5ff;
    --bg: #ffffff;
    --bg-light: #dce4f1;
    --text-color: #2c3e50;
    --text-color-light: #6c757d;
    --loading-bg: rgba(255, 255, 255, 0.8);
    --table-border: #dee2e6;
    --table-bg: #eeeeee;

}

[data-bs-theme="dark"] {
    --body: #212529;
    --bg: #262b30;
    --bg-light: #33383d;
    --text-color: #d5dce3;
    --text-color-light: #6c757d;
    --loading-bg: rgba(0, 0, 0, 0.8);
    --table-border: #383838;
    --table-bg: #1d1d1d;

}  
 
body{
    background-color: var(--body);   
    color: var(--text-color);
    /* font-family: 'appfont', sans-serif !important; */
    overflow-x: hidden;  
    scroll-behavior: smooth;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.table{
    overflow: scroll;
}    
  
table{ 
    color: var(--text-color);
    border: 1px solid var(--table-border);
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
}

table th {
    background: var(--table-bg);
}

table td, table th {
    padding: .75rem;
    vertical-align: top;
    border: 1px solid var(--table-border);
}


.text-start {
    text-align: start !important;
}
.main-wrapper{
    padding-top: 60px;
}
 
.text-color-50{
    color: var(--text-color-light);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.min-vh-90{
    min-height: 90vh;
}

.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    transform: translateX(120%);
    transition: transform 0.3s ease-in-out;
    max-width: 350px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    border-left: 4px solid #28a745;
}

.notification.info {
    border-left: 4px solid #17a2b8;
}

.notification.warning {
    border-left: 4px solid #ffc107;
}

.notification.danger {
    border-left: 4px solid #dc3545;
}

.notification i {
    font-size: 1.2em;
}
 
.notification.success i {
    color: #28a745;
}  

.notification.info i {
    color: #17a2b8;
}

.notification.warning i {
    color: #ffc107;
}
 
.notification.danger i {
    color: #dc3545;
} 

.pjax-loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--loading-bg);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}
.spinner { 
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db; 
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); }
}

/* Floating alert styles */
/* .alert {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    max-width: 80%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} */

.w-30{
    width: 30%;
} 

.w-30-flex{
    width: 30%;
    flex-basis: 30%;
    flex-grow: 0;
    flex-shrink: 0;
}

.pagination li{
    padding: 10px;
    border-radius: 50%;
  

}

a{
    text-decoration: none;
}

.rect {
    position: relative;
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    background: #000;
    margin: 50px;
    overflow: unset;
  } 
  .rect::before, .rect::after {
    content: "";
    position: absolute;
    left: -6px;
    top: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    background: #333;
    background-image: linear-gradient(45deg, #ff3c41, #ff8a25, #ffe04f, #4fff88, #56ffef, #37b4ff, #c05aff, #ff3c41, #ff8a25, #ffe04f, #4fff88, #56ffef, #37b4ff, #c05aff);
    background-size: 500%;
    -webkit-animation: position 12s linear infinite alternate;
            animation: position 12s linear infinite alternate;
    z-index: -1;
  }
  .rect::after {
    filter: blur(10px);
  }
  
  @-webkit-keyframes position {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }
  
  @keyframes position {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }