.logo-border-left{
    border: 3px solid #fff;
    border-radius: 50px;
}
.mylogo{
    border: 3px solid #fff !important;
    border-radius: 50px !important;
}

.is-invalid { border-color: #dc3545 !important; }
.invalid-feedback { display: none; width: 100%; margin-top: .25rem; font-size: .875em; color: #dc3545; }
.is-invalid ~ .invalid-feedback { display: block; }

.table-row-highlight {
    background-color: #e9f5ff !important;
    transition: background-color 0.5s ease-in-out;
}
#groupsTable tbody tr {
    transition: background-color 0.3s ease-in-out;
}
#groupsTable tfoot tr td { 
    vertical-align: middle;
    padding-top: 0.75rem; 
    padding-bottom: 0.75rem;
}

.modal-header .custom-modal-close-btn {
    background-color: transparent !important; border: none !important;
    color: white !important; font-size: 1.2rem !important; line-height: 1 !important;
    padding: 0.5rem 0.75rem !important; margin: -0.5rem -0.75rem -0.5rem auto !important;
    opacity: 0.75 !important; cursor: pointer; text-shadow: none !important;
    -webkit-appearance: none !important; appearance: none !important;
}
.modal-header .custom-modal-close-btn:hover,
.modal-header .custom-modal-close-btn:focus {
    color: white !important; opacity: 1 !important; text-decoration: none !important;
    outline: none !important; box-shadow: none !important; 
}
.status-toggle {
    cursor: pointer;
}



/* Custom styles for modal and collapsible sections */
.collapsible-header {
    font-weight: bold; cursor: pointer; padding: 0.5rem 0; margin-top: 1rem;
    margin-bottom: 0.25rem; position: relative; user-select: none;
}
.collapsible-header:first-of-type { margin-top: 1rem; }
.collapsible-header::after {
    content: '\25BC'; font-size: 0.8em; position: absolute; right: 0;
    top: 50%; transform: translateY(-50%); transition: transform 0.2s ease-in-out;
}
.collapsible-header.open::after { transform: translateY(-50%) rotate(-180deg); }
.collapsible-content { display: none; margin-bottom: 1rem; overflow: hidden; }
.collapsible-content .content-inner-padding { padding-top: 0.75rem; }
#contactModal .modal-body .mb-3 { margin-bottom: 0.75rem !important; }
#contactModal .modal-body hr { margin-top: 0.75rem; margin-bottom: 0.75rem; }
#contactModal .modal-body h6 { margin-bottom: 0.25rem; margin-top: 1rem; }
#contactModal .modal-body h6:first-of-type { margin-top: 0; }
.custom-modal-close-btn {
    background: none; border: none; font-size: 1rem; line-height: 1; color: #000;
    opacity: .5; position: absolute; right: 1rem; top: 1rem; padding: 0;
}
.custom-modal-close-btn:hover { opacity: 0.75 ;  }
.table-responsive { overflow-x: auto !important; }
#contactsTable_wrapper .row:first-child, #contactsTable_wrapper .row:last-child {
    padding: 0;
}
.select2-container--bootstrap-5 .select2-selection__placeholder {
    font-size: 0.75rem; 
    color: #6c757d;      
}
/* Style for Intl-Tel-Input to fit Bootstrap forms */
.iti {
    width: 100%;
}