/********************************************************************************************
 * Name        : app.css
 * Author	   : 
 * Date		   : 
 * Inputs	   : Inputs
 * Outputs	   : Outputs
 * Description : application css
 *-------------------------------------------------------------------------------------------
 * Revision History:
 * Date             Author		      Description Of Changes
 * 06 Apr 2020      YL			        Amend oj-table-element th background-color from #99b3ff to #004B85 and font color from black to #ffffff
 * 09 Apr 2020      YL              1. Added .menu-button .menu - set font color to black. code: #000000
 *                                  2. Added .oj-table-element th:hover - set font color to black. code: #000000
 * 14 Apr 2020      YL              set .table height
 *********************************************************************************************/
:root {
  --c-primary-color-1: #195A8F;
}

.link:hover {
  cursor: hand;
  cursor: pointer;
  text-decoration: none;
}

.clickable {
  color: #07C;
}

.clickable:hover {
  cursor: hand;
  cursor: pointer;
}

.deleteIcon {
  visibility: hidden;
}

.oj-table-element {
  counter-reset: rowNumber;
}

.counterCell:before {
  content: counter(rowNumber);
  counter-increment: rowNumber;
}

.oj-table-element th {
  padding-top: 12px;
  padding-bottom: 12px;
  /* 6  Apr 2020: commented
  background-color: #99b3ff;
  color: black;*/
  background-color: #004B85;
  color: #ffffff;
  font-weight: bold;
}

/* 9 Apr 2020: added */
.oj-table-element th:hover {
  color: #000000;
}

/* 9 apr 2020: end */

.table {
  table-layout: fixed;
  height: 500px;
  /*14 Apr 2020: YL Added*/
  width: 100%;
  word-wrap: break-word;
}

#FAQTable {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #000000;
}

#Border {
  border: 1px solid #000000;
  text-align: center;
  padding: 8px;
}

#colour {
  background-color: #99a6c4;
  border: 1px solid #000000;
  text-align: center;
  padding: 8px;
}

.horizontal-scroll-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: visible;
}

/* 9 Apr 2020: added */
.menu-button:hover .menu {
  color: #000000;
}

.menu {
  color: #FFFFFF;
}

/* 9 apr 2020: end */

.c-container-filter-1 {
  border: 2px solid var(--c-primary-color-1);
  border-radius: 10px;
  padding: 10px;
  background-color: var(--c-primary-color-1);
  width: 100%;
  box-sizing: border-box;
}

.c-container-input-1 {
  max-width: 1000px;
  margin: 1rem auto;
  display: flex;
  gap: 1rem;
}

.c-container-input-row-1 {
  width: 100%;
  display: flex;
  justify-content:
    space-between;
  gap: 1rem;
}

.c-container-input-row-1>input {
  width: 48% !important;
}

.c-text-1 {
  color: #FFF !important;
}

.c-btn-primary-1 {
  background-color: white;
  border-radius: 8px;
}

.c-btn-secondary-1 {
  background-color: #195A8F;
  color: white;
  border-radius: 8px;
}

.c-table-1 {
  max-height: 50rem;
}

.c-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.3;
  height: 100vh !important;
  width: 100vw !important;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.oj-progress-circle-indeterminate-inner {
  border-color: #004B85 !important;
}

/* Loading when logged in to the page */
.loader-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  /* Semi-transparent background */
  z-index: 9999;
  /* Ensure it's on top of other elements */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader-spinner {
  /* Add your spinner styles here, e.g., */
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

.loader {
  width: 60px;
  /* Increased size for better visibility */
  height: 60px;
  border: 6px solid #f3f3f3;
  border-top: 6px solid #333333;
  /* Darker color for contrast */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

.loader-text {
  margin-top: 12px;
  font-size: 16px;
  color: #3498db;
  font-weight: 500;
  text-align: center;
}


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

  100% {
    transform: rotate(360deg);
  }
}

#loader-body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: rgba(240, 240, 240, 0.95);
  /* Slightly transparent for better overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  /* Higher z-index to ensure visibility */
  transition: opacity 0.5s ease;
  /* Smoother transition */
}

#loader-body.hidden {
  opacity: 0;
  pointer-events: none;
}

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

  100% {
    transform: rotate(360deg);
  }
}