.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.responsive-select {
    width: 100%;
    max-width: 200px;
    margin-top: 10px;
}


@media (min-width: 576px) {
    .responsive-select {
        max-width: 250px;
    }
}

@media (min-width: 768px) {
    .responsive-select {
        max-width: 300px;
    }
} */


/* Add more media queries as needed for different screen sizes */
    .custom-select {
        position: relative;
        display: inline-block;
    }

    .custom-select select {
        display: none;
    }

    .custom-select .select-styled {
        display: inline-block;
        padding: 8px 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        cursor: pointer;
    }

    .custom-select .select-styled:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -3px;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #555 transparent;
        pointer-events: none;
    }

    .custom-select.active .select-styled {
        background-color: #f9f9f9;
    }

    .custom-select.active .select-styled:after {
        transform: rotate(180deg);
    }

    .custom-select .select-options {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        border-top: none;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        overflow: hidden;
        z-index: 999;
    }

    .custom-select.active .select-options {
        display: block;
    }

    .custom-select .select-options li {
        padding: 8px 16px;
        cursor: pointer;
    }

    .custom-select .select-options li:hover {
        background-color: #f1f1f1;
    }

table {
    width: 100%;
    border-collapse: collapse;
}

.green-button {
    background-color: green;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}

.primary-button {
    background-color: blue;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}

.mehroon-button {
    background-color: maroon;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}
.ready-button{
	background-color: #640370;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;

}
.yellow-button {
    background-color: gold;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}
.Teal-button {
    background-color: Teal;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}
.darkblue-button {
    background-color: darkblue;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}
.on-process-button {
    background-color: orange;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}
.manage-started-button{
    background-color: orange;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;

}
.break-button{
    background-color: red;
    color: #fff;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}
.red-button{
    background-color: red;
    color: white;
    padding: 11px 10px;
    border: none;
    border-radius: 4px;
}
