/* To hide html content */
.content-hidden {
    display: none;
}


/* Blue Box */
.lightblue-button {
    background-color: rgba(3, 0, 255, 0.8);
    /* background: linear-gradient(to right, #c7d6f7, #dac1e5);  */
    padding: 10px;
    border-radius: 10px;
    margin: 5px;

}

/* Blue Box */
.blue-box {
    background-color: rgba(0, 0, 255, 0.5); /* Blue with 50% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Purple Box */
.purple-box {
    background-color: rgba(128, 0, 128, 0.5); /* Purple with 50% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Gold Box */
.gold-box {
    background-color: rgba(255, 215, 0, 0.5); /* Gold with 50% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Silver Box */
.silver-box {
    background-color: rgba(192, 192, 192, 0.5); /* Silver with 50% opacity */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* BG gradient */
.orange-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #FFA500);
    /* opacity: 0.85; */
    /* filter: alpha(opacity=85); For IE8 and earlier */
    color: #fff;

  }

.orange-gradient-reverse-bg {
    background: linear-gradient(135deg, #FFA500, #001f3f);
    opacity: 0.8; /* Adjust the opacity as needed (0.0 to 1.0) */
    filter: alpha(opacity=80); /* For IE8 and earlier */
    color: #fff;

  }

  .black-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #000000);
    color: #fff;
  }


  .blue-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #0074cc);

    color: #fff;
  }

  .purple-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #800080);

    color: #fff;
  }

  .green-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #008000);

    color: #fff;
  }

  .silverbird-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #c0c0c0);

    color: #000;
  }

  .golden-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #ffd700);

    color: #fff;
  }
  /* .testgolden-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #141308);

    color: #fff;
  } */

  /* ////Animation */

  .black-animate-gradient-bg {
    background: linear-gradient(135deg, #001f3f, #000000);

    color: #fff;
    animation: flowAnimation 5s infinite linear; /* Adjust animation duration as needed */
  }

  @keyframes flowAnimation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }



/* CSS for Canvas */
.canvas-container {
    position: relative;
    width: 100%;
    height: 400px; /* Adjust the height as needed */
    background: linear-gradient(to right, #c7d6f7, #dac1e5); /* Gradient from light blue to light purple */
    opacity: 0.8; /* Adjust the opacity for transparency */
    border-radius: 10px; /* Optional: Add border radius for rounded corners */
    overflow: hidden; /* Optional: Hide overflowing content */
}

/* Example CSS for Operational Buttons */
.button-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.operational-button {
    background-color: #fff; /* Button background color */
    color: #333; /* Button text color */
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.operational-button:hover {
    background-color: #ddd; /* Button background color on hover */
}

.chevron {
    color: #fff;
}

.chevron:hover {
    color: #56f30dec;
}

/* ////////////// */

#tbds-record{
    color: maroon;

}

div a{
    color: maroon;
    text-decoration:none;

}

#error-msg{
    padding-left: 5px;
    padding-bottom: 1px;
    background-color:rgba(240, 0, 0, 0.897);
    color: rgb(252, 250, 250);
    width:20rem;
    transition:ease-in;
}
#good-msg{
    padding-left: 5px;
    padding-bottom: 1px;
    background-color:chartreuse;
    color: rgb(14, 53, 50);
    width:20rem;
    transition:ease-in;
}


   /* DATA TABLE   Change font color of table headers */
   /* .dataTable thead th {
    color: #c5c741;
} */

/* Change font color of table data cells */
.dataTable tbody td {

    color: #180606;
}

/* Change background color of even rows */
/* .dataTable tbody tr:nth-child(odd) {
  background: linear-gradient(135deg, #001f3f, #000000);
} */


/* .dataTable tbody tr:nth-child(even) {
  background: linear-gradient(135deg, #141308, #001f3f);
} */


/* Style the search input box */
/* .dataTables_filter input[type="search"] {
    color: #fffcf7;
} */

/* Change the text color of labels in the DataTable */
/* .dataTables_wrapper label {
    color: #e0acac;
} */


/* Animation */

.fade-in {
  opacity: 0;
  animation: fadeInAnimation 1s ease forwards;
}

@keyframes fadeInAnimation {
  to { opacity: 1; }
}

.slide-up {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUpAnimation 0.8s ease forwards;
}

@keyframes slideUpAnimation {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-right {
  transform: translateX(-100%);
  animation: slideRightAnimation 0.5s forwards;
}

@keyframes slideRightAnimation {
  to {
    transform: translateX(0);
  }
}

.slide-left {
  transform: translateX(100%);
  animation: slideLeftAnimation 0.5s forwards;
}

@keyframes slideLeftAnimation {
  to {
    transform: translateX(0);
  }
}

.rotate {
  animation: rotateAnimation 0.5s 1s linear;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* myStyle */