/*********** colors (START) *****************/

.color-gray {
    color: #525252 !important;
}

.color-danger {
    color: #A52D2E !important;
}

.color-black {
    color: black !important;
}

/*********** colors (END) *****************/

/*********** buttons (start) *****************/

.status-button-active {
    background-color: #EEFFE3 !important;
    color: #227F5B !important;
    font-weight: 700 !important;
    text-decoration: none;
    border-radius: 0px !important;
    pointer-events: none;
    cursor: not-allowed;
}

.status-button-inactive {
    background-color: #F0DBDB !important;
    color: #B04748 !important;
    font-weight: 700 !important;
    text-decoration: none;
    border-radius: 0px !important;
    pointer-events: none;
    cursor: not-allowed;
}

/*********** buttons (end) *****************/

.error-message {
    padding: 5px;
    color: red;
    background-color: #f8d7da;
    margin-bottom: 10px;
}

input:-webkit-autofill {
    background-color: white !important; /* Or any desired color */
    color: black !important; /* Ensure the text is visible */
    transition: background-color 5000s ease-in-out 0s; /* Prevent autofill color flash */
}

.main-bg-color {
    background-color: #eaeaea;
}

.table-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1.5);
    border-radius: 50px; /* Optional: Rounds the corners */
    overflow: hidden; /* Ensures the shadow is neat */
}

.btn-gray {
    color: #adb7ba !important; /* Light text */
    background-color: #FFFFFF !important; /* White background */
    border-color: #adb7ba !important;/* Light border */
}

:focus {
  border-color: #ccc !important;  /* Set a custom border color (e.g., light gray) */
  box-shadow: none !important;     /* Remove the focus box-shadow */
}

.btn-outline-danger {
    border-color: #A52D2E !important;
    color: #A52D2E !important;
    background-color: #FFFFFF !important; 
}

.btn-outline-danger:hover {
    background-color: #A52D2E !important;
    color: white !important;
}


.required:after {
    content:"*";
    color: red;
}

/*********  Modal css  ***************************/

.modal-cancel-btn {
    background-color: #D9B6B6 !important;
    color: #b64a4a !important;
    margin-right: 20px;
}

.modal-cancel-btn:hover {
    background-color: #d55d5e !important;
    color: white !important;
}


.modal-body .form-label {
    display: block !important;
    font-style: italic !important;
    opacity: 0.6 !important; /* Reduce opacity (0.0 to 1.0 scale) */
    /*font-size: 1.1rem; *//* Increase font size */
    /*font-weight: bold;  Make the text bold */
   /* color: #495057;  Dark text color */
    /*margin-bottom: 0.5rem;*/ /* Add spacing below the label */
    /*display: block;  Ensure label is a block-level element */
}


/**************  Filters *******************/

.filter-form-select {
    color: #808080;
    padding: 0.5rem 1rem;  /* Add padding for better spacing */
    font-size: 1rem;       /* Set font size */
    border-radius: 0.375rem; /* Rounded corners */
    border: 1px solid #ccc;  /* Border color */
    background-color: #fff ;  /* White background */
    transition: border-color 0.3s ease; /* Smooth transition on focus */
}

.filter-form-select:focus {
    border-color: #007bff;  /* Change border color on focus */
    outline: none;  /* Remove default outline */
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.25); /* Blue shadow */
}

/****************** CSS for tables ***********************/
.table {
    border: 2px solid #007bff;  /* Border color and width */
    border-radius: 10px;  /* Rounded corners for the table */
    border-collapse: separate;  /* Prevent borders from collapsing into each other */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table th {
    vertical-align: top;
    text-align: center;
    font-size: 12px;
}

.table td {
    vertical-align: middle;
    text-align: center;
    font-size: 14px !important;
}

/***************** close button in modals *************/
.custom-close-btn {
  background-color: #dc3545; /* Danger background color */
  color: white; /* White text for the "X" */
  border: none;
  border-radius: 50%; /* Circular button */
  width: 30px;
  height: 30px;
  font-size: 16px; /* Adjust font size for the "X" */
  line-height: 30px; /* Center align text vertically */
  text-align: center; /* Center align text horizontally */
  cursor: pointer;
  padding: 0;
}

.gray {
    color: gray;
    opacity: 0.5;
}

.red-bg-and-text-for-fullname {
    display: inline-block;
    background-color: #F0DBDB !important;
    color: #B04748 !important;
    border-radius: 10px;
}

.green-bg-and-text {
    display: inline-block;
    background-color: #EEFFE3 !important;
    color: #227F5B !important;
    font-size: 14px;
    line-height: 1.3;
    padding-left: 5px;
    padding-right: 5px;
}

.red-bg-and-text {
    display: inline-block;
    background-color: #F0DBDB !important;
    color: #B04748 !important;
    font-size: 14px;
    line-height: 1.3;
    padding-left: 5px;
    padding-right: 5px;
    }

.gray-bg-and-dark-text {
    display: inline-block;
    background-color: #cecfd0 !important;
    font-size: 14px;
    line-height: 1.3;
    padding-left: 5px;
    padding-right: 5px;
}

.text-danger-me {
    color: #A52D2E !important;
}

.text-green {
    color: #227F5B !important;
}

/***********  Breadcrumb css****************/
.custom-breadcrumb {
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #666;
}

.custom-breadcrumb a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.2s ease-in-out;
}

.custom-breadcrumb a:hover {
    color: #0056b3;
}

.separator {
    margin: 0 8px;
    color: #999;
}

.current {
    font-weight: bold;
    color: #333;
}


.profile-card {
    width: 100%;
    margin: auto;
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}
.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}
.btn-primary-custom {
    background-color: #a31e22;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
}
.label {
    font-weight: bold;
    color: #777;
    font-size: 14px;
}
.value {
    font-weight: bold;
    font-size: 16px;
    min-height: 20px;
}
.highlight-badge {
    background-color: #fff3cd;
    color: #000;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 5px;
}

.my-ul-list {
    list-style-type: none;
    background-color: #adb7ba;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1;
    cursor: pointer;
}

/***** Pagination Start ******************/

.pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
}
.page-item {
    margin-right: 5px;
}
.page-item.active .page-link {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white !important
}
.page-link {
    color: #dc3545 !important;
    font-weight: normal;
}
.page-link:hover {
    background-color: #dc3545 !important;
    color: white !important;
    opacity: 0.5;
}
.page-item.disabled .page-link {
    color: #ccc;
}

/***** Pagination End ******************/


.login-input::placeholder {
    color: white !important;
}

.login-input:-webkit-autofill {
    -webkit-text-fill-color: white !important; /* Prevents autofill from overriding text color */
    caret-color: white; /* Ensures cursor color stays consistent */
    transition: background-color 5000s ease-in-out 0s; /* Prevents quick revert */
}

.my-input:-webkit-autofill::first-line {
    color: white !important; /* Ensures text color changes */
}

/* For Firefox */
.my-input:autofill {
    background-color: yellow !important;
    color: black !important;

}


/****************  Global spinner overlay (START) ******/
#spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7); /* Ημιδιαφανές λευκό background */
    backdrop-filter: blur(5px); /* Θόλωμα του background */
    display: none; /* Κρυφό αρχικά */
    z-index: 1050; /* Υψηλό z-index για να καλύπτει τα πάντα */
}

/****************  Global spinner overlay (END) ******/

/******  Icons for add button  and sorting (START)  *********************/
.button-icon,
.button-add-icon {
    width: 14px !important;  /* Set the width of the image (adjust as needed) */
    height: 14px !important; /* Set the height of the image (adjust as needed) */
    margin-right: 6px !important; /* Adjust the spacing between the icon and the text */
    vertical-align: middle !important; /* Ensure the icon aligns vertically with the text */
}

.add-button {
    background-color: #a52d2e; /* Brownish-red background */
    color: white; /* White text */
}

/******  Icons for add button  and sorting (END)  *********************/

.list-unstyled {
    max-height: 200px !important; /* Limit the height of the list */
    overflow-y: auto !important; /* Enable vertical scrolling when content exceeds 50px */
    padding-left: 0 !important;  /* Remove default padding */
}

/* Custom style for the vertical line */
.border-start {
    border-left: 5px solid #000 ; /* Black border with 2px thickness */
    height: 100% ; /* Full height */
}

/* Progress Bar START */
.skill_wrapper {
	padding: 80px 0;
	background: #1c84cc;
	height: 100vh;
	display: flex;
	align-items: center;
}

.head_text {
	font-size: 45px;
	font-weight: 700;
	color: #000000;
	margin-bottom: 70px;
	color: #ffffff;
}

.box {
    text-align: center;
    padding: 40px;
    box-shadow: rgba(50, 50, 93, 0.25) 0 50px 100px -20px, rgba(0, 0, 0, 0.3) 0 30px 60px -30px;
    margin-bottom: 25px;
}

.circlechart {
	font-weight: 700;
}

.circle-chart__percent, .circle-chart__subline {
	color: #ffffff;
}
/* Progress Bar END */

.bigLabelNumber{
    font-size: 80px;
    font-weight: bold;
    color: #a52d2e;
}