/* General Styles */
body {
    font-family: Arial, sans-serif;
}

.container {
    margin-top: 20px;
}

/* Navbar Styles */
.navbar-brand {
    color: darkorange !important;
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar-subtitle {
    color: lightgray !important;
    font-size: 1rem;
}

.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav .nav-link:hover {
    color: darkorange !important;
}

/* Button Styles */
.btn-dark-orange {
    background-color: darkorange;
    border: none;
    color: white;
    transition: background-color 0.3s ease;
}

.btn-dark-orange:hover {
    background-color: orange;
    color: white;
}

.btn-dark-orange:active {
    background-color: green;
    color: white;
}

/* Card Styles */
.card-title a {
    color: darkorange;
    text-decoration: none;
}

.card-title a:hover {
    color: #cc8400; /* A darker shade of orange */
}

/* Form Styles */
.form-control {
    margin-bottom: 15px;
}

/* Other Styles */
.mt-5 {
    margin-top: 3rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.text-dark {
    color: #343a40 !important;
}

.text-dark-orange {
    color: darkorange !important;
}

footer {
    background-color: #343a40;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

footer h3 {
    color: darkorange;
}

footer p {
    color: lightgray;
}

.social-btn {
    background-color: #343a40; /* Dark grey background */
    color: #ff8c00; /* Dark orange text and icons */
    border: none;
}
.social-btn:hover {
    background-color: #ff8c00; /* Dark orange background on hover */
    color: #343a40; /* Dark grey text and icons on hover */
}
.social-btn .bi {
    margin-right: 5px;
}

/* Cropper modal for image cropping */

    #cropperModal .modal-dialog {
        max-width: 100%;
        width: auto;
        max-height: 80vh; /* 80% of the viewport height */
    }
    #cropperModal .modal-body {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: calc(80vh - 200px); /* Adjusting for header and footer */
        overflow: auto; /* Allows scrolling if content exceeds max-height */
    }
    #cropperModal .modal-content {
        width: 100%;
        max-height: 80vh; /* 80% of the viewport height */
    }
    #cropperImage {
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

/* resizing images from scan_user_id.php */

.progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.progress-text {
    font-size: 12em;
    color: white;
}



.stats-card {
    margin: 10px;
    padding: 20px;
    border: 2px solid darkorange;
    border-radius: 10px;
    text-align: center;
    background-color: #A9A9A9; /* Dark silver background */
    color: white;
}
.stats-card h3 {
    font-size: 1.3em; /* Adjust font size for card titles */
}
.action-card {
    margin: 10px;
    padding: 20px;
    border: 2px solid darkorange;
    border-radius: 10px;
    text-align: center;
    background-color: #f8f9fa;
    cursor: pointer;
}
.action-card h4 {
    font-size: 1.3em; /* Adjust font size for card titles */
}

/* Override Bootstrap button styles for all buttons */
.btn {
    background-color: #555 !important; /* Dark gray background */
    border-color: #555 !important;     /* Dark gray border */
    color: #c0c0c0 !important;         /* Silver font color */
}

.btn:hover,
.btn:focus,
.btn:active {
    background-color: #333 !important; /* Darker gray on hover */
    border-color: #333 !important;     /* Darker gray border on hover */
    color: #c0c0c0 !important;         /* Silver font color */
}

/* Ensure all buttons, including those in tables and cards, are consistent */
.table .btn,
.card .btn,
.navbar .btn,
.modal .btn {
    background-color: #555 !important; /* Dark gray background */
    border-color: #555 !important;     /* Dark gray border */
    color: #c0c0c0 !important;         /* Silver font color */
}

.table .btn:hover,
.card .btn:hover,
.navbar .btn:hover,
.modal .btn:hover,
.table .btn:focus,
.card .btn:focus,
.navbar .btn:focus,
.modal .btn:focus,
.table .btn:active,
.card .btn:active,
.navbar .btn:active,
.modal .btn:active {
    background-color: #333 !important; /* Darker gray on hover */
    border-color: #333 !important;     /* Darker gray border on hover */
    color: #c0c0c0 !important;         /* Silver font color */
}

/* Override Bootstrap button styles for all buttons */
.btn,
.btn-primary,
.btn-primary.btn-sm,
.btn-danger,
.btn-danger.btn-sm,
.btn-secondary,
.btn-secondary.btn-sm,
.btn-success,
.btn-success.btn-sm,
.btn-info,
.btn-info.btn-sm,
.btn-warning,
.btn-warning.btn-sm,
.btn-light,
.btn-light.btn-sm,
.btn-dark,
.btn-dark.btn-sm,
.btn-link,
.btn-link.btn-sm {
    background-color: #555 !important; /* Dark gray background */
    border-color: #555 !important;     /* Dark gray border */
    color: #c0c0c0 !important;         /* Silver font color */
}

.btn:hover,
.btn:focus,
.btn:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.btn-sm:hover,
.btn-primary.btn-sm:focus,
.btn-primary.btn-sm:active,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.btn-sm:hover,
.btn-danger.btn-sm:focus,
.btn-danger.btn-sm:active,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.btn-sm:hover,
.btn-secondary.btn-sm:focus,
.btn-secondary.btn-sm:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.btn-sm:hover,
.btn-success.btn-sm:focus,
.btn-success.btn-sm:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.btn-sm:hover,
.btn-info.btn-sm:focus,
.btn-info.btn-sm:active,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.btn-sm:hover,
.btn-warning.btn-sm:focus,
.btn-warning.btn-sm:active,
.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.btn-sm:hover,
.btn-light.btn-sm:focus,
.btn-light.btn-sm:active,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active,
.btn-dark.btn-sm:hover,
.btn-dark.btn-sm:focus,
.btn-dark.btn-sm:active,
.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.btn-sm:hover,
.btn-link.btn-sm:focus,
.btn-link.btn-sm:active {
    background-color: #333 !important; /* Darker gray on hover */
    border-color: #333 !important;     /* Darker gray border on hover */
    color: #c0c0c0 !important;         /* Silver font color */
}

.def-tip{position:relative;display:inline-block;cursor:help}
.def-tip .def-tip-text{
  position:absolute;z-index:10000;
  bottom:125%;left:50%;transform:translateX(-50%);
  visibility:hidden;opacity:0;transition:opacity .2s ease-in-out;
  background:#333;color:#fff;border-radius:5px;padding:6px 8px;white-space:nowrap
}
.def-tip:hover .def-tip-text,
.def-tip:focus-within .def-tip-text{visibility:visible;opacity:1}
.def-tip .def-tip-text::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
  border:5px solid transparent;border-top-color:#333
}
/* keyboard focus for accessibility */
.def-tip{outline:0}
.def-tip .def-tip-target{outline:0}
.def-tip .def-tip-target[tabindex]{outline:0}


@media (max-width: 576px) {
    .admin-links .col-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }
}