/* Fancy styles for the dropzone container */

.red {
  color: red;
}

.silver {
  color: silver;
}

.gray {
  color: gray;
}

.white {
  color: white;
}

.maroon {
  color: maroon;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.fuchsia {
  color: fuchsia;
}

.green {
  color: green;
}

.lime {
  color: lime;
}

.olive {
  color: olive;
}

.yellow {
  color: yellow;
}

.navy {
  color: navy;
}

.blue {
  color: blue;
}

.teal {
  color: teal;
}

.aqua {
  color: aqua;
}

.orange {
  color: orange;
}

.aliceblue {
  color: aliceblue;
}

.antiquewhite {
  color: antiquewhite;
}

.aquamarine {
  color: aquamarine;
}

.azure {
  color: azure;
}

.beige {
  color: beige;
}

.bisque {
  color: bisque;
}

.blanchedalmond {
  color: blanchedalmond;
}

.blueviolet {
  color: blueviolet;
}

.brown {
  color: brown;
}

.burlywood {
  color: burlywood;
}

.cadetblue {
  color: cadetblue;
}

.chartreuse {
  color: chartreuse;
}

.custom-dropzone {
    border: 2px dashed #3498db;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: #ecf0f1;
    color: #3498db;
    transition: border 0.3s ease-in-out;
  }
  
  .custom-dropzone:hover {
    border: 2px dashed #2980b9;
  }
  
  /* Fancy styles for the image preview container */
  .image-preview-container {
    margin-top: 20px;
  }
  
  /* Fancy styles for each image preview item */
  .image-preview {
    display: inline-block;
    margin: 0 10px 10px 0;
    position: relative;
  }
  
  /* Fancy styles for the preview image */
  .preview-image {
    
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  
        width: 100px;
        height: 100px;
       
  }
  
  /* Fancy styles for the close button in the image preview */
  .close-button {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    background-color: #e74c3c;
    border: none;
    border-radius: 50%;
    padding: 0px;
    /* height: 20px; */
    transition: background-color 0.3s ease-in-out;
    width: 25px;
}
  
  .close-button:hover {
    background-color: #c0392b;
  }
  

  /* Toastify Styles */
.Toastify__toast {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  padding: 15px;
  margin: 10px;
  color: black !important;
}

/* Error Toast Styles */
.Toastify__toast--error {
  background-color: #ff6347; /* Light Coral */
}

/* Success Toast Styles */
.Toastify__toast--success {
  background-color: #32cd32; /* Lime Green */
}

/* Info Toast Styles */
.Toastify__toast--info {
  background-color: #6495ed; /* Cornflower Blue */
}

/* Warning Toast Styles */
.Toastify__toast--warning {
  background-color: #ffd700; /* Gold */
}

/* Ul and Li Styles */
.Toastify__toast ul {
  margin: 0;
  padding: 0;
  list-style-type: desc;
  margin-top: 10px;
}

.Toastify__toast li {
  margin-bottom: 5px;
}

label, p, span, input, ul, li, textarea, select, button, a,tr,td {
  font-size: 13px !important;
}
.form-group {
  margin-bottom: 4px !important;
}
.green-btn{
  color:green;
}
.red-btn{
  color:red;
}

span.custom-badge.custom-badge-danger {
  color: red;
  font-weight: bold;
  float: left;
}
span.custom-badge.custom-badge-success {
font-weight: bold;
color: green;
float: left;
}
span.badge {
  float: left;
}
.invoice tr td {
  vertical-align: middle !important;
}
.row.invoice-info {
  font-size: 14px;
  padding: 12px;
}
.col-sm-3.invoice-col {
  border: 0.5px solid lightgray;
  padding: 20px;
}
.row.invoice-info span.badge {
  float: none;
}

.error{
  color: red;
}

.winner {
  color: green;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.loser {
  color: red;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

.brand-text {
  font-weight: 300!important;
  font-size: 26px !important;
  font-weight: bold !important;
  text-align: center !important;
  width: 100%;
}
.ongoing i {
  color: darkgoldenrod;
}

.ongoing {
  text-align: center;
}

.login-box {
  width: 500px;
  box-shadow: 0px 0px 30px 1px #bb0f51;
  background: white;
  padding: 15px;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent white background */
  z-index: 9999; /* Ensure it's above other elements */
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner-border {
  width: 3rem;
  height: 3rem;
  color: #007bff; /* Bootstrap primary color */
}

button.btn.login-btn {
  background-color: #c21557;
  border: 0px;
  padding: 10px;
  font-size: 14px !important;
  font-weight: bold;
}

.projects .table-avatar img, .projects img.table-avatar {
    border-radius: 50%;
    display: inline;
    width: 2.5rem;
    object-fit: cover;
    height: 40px;
    width: 40px;
    border: 1px solid darkgray;
}