/* ---------------------------------- */
/* Main frame adjust margin for small screens	 */

/* Target screens smaller than 768px (Bootstrap's small breakpoint) */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-right: 5px; /* 15px per default */
        padding-left: 1px;  /* 15px per default */
    }
}

/* ---------------------------------- */
/* Pagination */

.pagination {
    display: flex;
    justify-content: center; /* Center pagination links */
    align-items: center;
    padding: 1px 0; /* Add some padding for spacing */
    margin: 1px 0; /* Space out from other elements */
}



.pagination a {
    margin: 0 5px; /* Space out the links */
    /* //padding: 5px 10px; /* Padding inside each link */ */
    text-decoration: none; /* Remove underline */
    /* //color: #333; /* Text color */
    /* //background-color: #f8f8f8; Background color */
    border: 0px solid #ddd; /* Border around each link */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.pagination a:hover {
    color: #fff; /* Text color on hover */
    background-color: #007bff; /* Background color on hover */
}

.pagination a:disabled,
.pagination a.disabled {
    color: #ccc; /* Disabled link color */
    background-color: #f8f8f8;
    pointer-events: none; /* Prevent clicking on disabled links */
    cursor: default;
}
.pagination a {
    color: #007bff; /* Regular link color */
    /* ... other styles ... */
}

.pagination a.active {
    color: #000000; /* Active link color */
    font-weight: bold;
    /* ... other styles for active link ... */
}

/* ---------------------------------- */

/* Style pour les titres des colonnes du tableau */
.table thead th {
    color: orange; /* Couleur orange pour les titres */
}


/* Style pour les liens dans les titres des colonnes pour le tri */
.table thead th a {
    color: orange; /* Assure que les liens dans les titres sont également en orange */
    text-decoration: none; /* Optionnel : supprime le soulignement des liens */
}

.table thead th a:hover {
    text-decoration: underline; /* Optionnel : souligne les liens au survol */
}


/* ---------------------------------- */

#searchInput:focus {
	border-color: #ff851b; /* Orange border color */
	box-shadow: 0 0 0 0.2rem rgba(255, 133, 27, 0.25); /* Light orange shadow */
}
/* ---------------------------------- */
/* Fleche edit c
/* ---------------------------------- */


/* Style for the asterisk to indicate required fields */
.required {
    color: red;
    background-color: transparent; /* Removes the gray background */
    border: none; /* Removes any border */
    padding-right: 0; /* Optional: Adjust padding as needed */
	/* vertical-align: super; */
	margin-left: 3px;
    position: relative;
    top: -10px; 
}

.absolute-status {
    position: absolute;
    top: 0;
    right: 0;
}

/* Optional: Style for the input field itself */
input.required {
    /* Add styles here if you want to style the input field */
}

/* Style for required textarea when it is invalid (empty) */
textarea.required:invalid {
    border-color: orange;
}

/* Style for the asterisk to indicate required fields */
.text-danger {
    color: red;
}



/* Pour asterix sur required telephone edit */
.position-relative {
    position: relative;
}

/* Pour asterix sur required telephone edit */

/* Display the message status */
.status-flag {
    background-color: #FFF; /* Light gray background */
    color: orange; /* Dark text color */
    padding: 5px 10px; /* Some padding around the text */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold; /* Make the text bold */
}

/* Display the message status */

/* arrow next / prev */


.orange-icon {
    color: orange;
}


.disabled-icon {
    color: black; 
    pointer-events: none; /* Disables the link */
    cursor: default;

    opacity: 0.3; /* Adjust the value as needed */
}



table {
    /* width: 100%; */
    /* table-layout: fixed; */
    border: 1px solid #ccc;
}
.select-col, .id-col, .message-col, .destinataire, .telephone-col, .date-envoi-col, .status-col, .date_rdv_col, .utilisateur-col, .date-creation-col {
    text-align: left;
}

.message-col {
    min-width: 300px;
}

/* Media query for larger screens */
@media (min-width: 768px) { /* Adjust this breakpoint as needed */
    .message-col {
        min-width: 400px;
    }
}


.select-col { width: 1%; }
.id-col { width: 2%; }
.destinataire { width: 7%; }
.telephone-col { width: 7%; }
.utilisateur-col { width: 7%; }

/*  archived message id  */
.barrer {
    text-decoration: line-through;
}


.nav-item.dropdown {
    position: relative;
}


.dropdown-menu {
    position: absolute;
    top: 100%; /* Align dropdown directly below the nav-item */
    right: 0; /* Align the right edge of dropdown with the right edge of the nav-item */
    left: auto; /* Override default left alignment */
    transform: translateX(0); /* Remove any unnecessary transformation */
}

.monospace-text {
	font-family: 'Courier New', monospace;
	font-style: normal;
	font-size: 16px;
	text-align: center;
}

.app-name {
    color: orange;
    font-family: fa-robot; /* Choose a nice font that matches your design */
	font-style: normal;
	font-weight: bold; /* For bold text */
	font-size: 16px;
	margin-right: 10px;
}
.app-name-h3 {
	font-size: 28px;	
	color: orange; /* Example to maintain consistency or specify a new color */
    font-family: fa-robot;
    font-weight: bold; 
}