:root{
    --primaryColor: #FFD580;
    --secondaryColor: #E9E8E6;  

    --fontColor: #000;
    --errColor: #FF3333;

    --primaryColorHover: #F1B642;
}

.error{color: var(--errColor);}

/* Card content-header */                       
.content-header{padding-bottom: 0;}

.card-body{padding-bottom: 0;}

.modal-header{background-color: var(--primaryColor);}

.modalHeaderCustom{
    align-items: center;
    padding: 0 16px;
}

.modal-contentBG{background-color: var(--secondaryColor);}

.modalBtn{
    background-color: var(--primaryColor);
    color: var(--fontColor);
    border: none;
}

.modalBtn1{
    background-color: var(--primaryColor);
    color: var(--fontColor);
    border: 1px solid var(--fontColor);
}

.modalBtn:active, .modalBtn:hover
.modalBtn1:active, .modalBtn1:hover{
    background-color: var(--primaryColorHover);
}

/* Datatable search */
.dataTables_wrapper .dataTables_paginate {
    padding-bottom: 10px;
}

/* table.dataTable.table-sm>thead>tr>th:not(.sorting_disabled){
    text-align: center;
}

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td{
    text-align: center;
} */

#tblData td {
    vertical-align: middle;
    text-align: justify;
}

/* Left Sidebar */
.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active{
    background-color: var(--primaryColor);
}

/* Custom Loader */
#loadingSpinner {
    border: 7px solid #f3f3f3;
    border-radius: 50%;
    border-top: 7px solid #3498db;
    width: 65px;
    height: 65px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Ensure it's above the modal */
    display: none; /* Initially hidden */
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }