#header {
    padding-top: 0px !important;
}

#guardian-edit {
    background: #fff;
    background-size: cover;
    padding: 60px 0 40px 0;
}


#about div.img-wrapper {
    position: relative
}

#header .header-nav-main nav > ul > li.active > a,
#header .header-nav-main nav > ul > li.active:hover > a {
    background-color: var(--primary) !important;
    color: black !important;
}

.margin-width-45 {
    margin-right: 45px;
}

.login-register-top-padding {
    margin-top: 5em;
}

.nav-link.dropdown-toggle::after {
    display: none !important;
}

.uploaded-files-container {
    max-height: 600px;
    overflow-y: auto;
    padding-right: 10px;
}

    .uploaded-files-container table thead th {
        position: sticky;
        top: 0;
        background: white;
        z-index: 2;
    }

.owl-dots {
    display: none !important;
}

#mainNav {
    list-style: none;
    margin: 0;
    padding: 0;
}

    #mainNav li {
        list-style: none;
    }

#header .header-nav {
    justify-content: flex-start !important;
}

#header .header-column.header-column-grow {
    flex-grow: 0;
}

/* ======================================================
   BUTTON SYSTEM (GLOBAL - FORCE CONSISTENT LOOK)
====================================================== */

.btn,
button,
input[type="button"],
input[type="submit"] {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}

    /* HOVER STATE */
    .btn:hover,
    button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover {
        background-color: #FFCC00 !important;
        border-color: #FFCC00 !important;
        color: #333333 !important;
    }

/* ALL BUTTON TYPES (force override bootstrap/porto) */
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-secondary,
.btn-default {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

    .btn-primary:hover,
    .btn-success:hover,
    .btn-info:hover,
    .btn-warning:hover,
    .btn-danger:hover,
    .btn-secondary:hover,
    .btn-default:hover {
        background-color: #FFCC00 !important;
        border-color: #FFCC00 !important;
        color: #333333 !important;
    }

/* SMALL BUTTONS */
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* REMOVE PORTO EFFECTS */
.btn:focus,
.btn:active {
    box-shadow: none !important;
}

/* =========================================
   DANGER BUTTON (KEEP RED)
========================================= */

.btn-danger,
button.btn-danger {
    background-color: #cc0000 !important;
    border-color: #cc0000 !important;
    color: #ffffff !important;
}

    /* HOVER */
    .btn-danger:hover,
    button.btn-danger:hover {
        background-color: #a30000 !important;
        border-color: #a30000 !important;
        color: #ffffff !important;
    }

/* =========================================
   NAV LOGOUT BUTTON (FIXED)
========================================= */

.btn-logout {
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    padding: 6px 10px;
    font-weight: 500;
}

    /* HOVER (clean, no background bleed) */
    .btn-logout:hover {
        color: #FFCC00 !important;
        background: transparent !important;
        text-decoration: underline;
    }
/* ======================================================
   LOGIN PAGE (FORCE OVERRIDE style.css)
====================================================== */

#login .form button[type="submit"],
#login .form .btn,
#login .form .btn-primary,
#login .form .btn-success {
    background-color: #333333 !important;
    border-color: #333333 !important;
    color: #ffffff !important;
}

    #login .form button[type="submit"]:hover,
    #login .form .btn:hover {
        background-color: #FFCC00 !important;
        border-color: #FFCC00 !important;
        color: #333333 !important;
    }

/* FIX "Forgot password" link */
#login .form a {
    background: none !important;
    color: #333333 !important;
    text-decoration: underline;
}

    #login .form a:hover {
        color: #FFCC00 !important;
    }

/* ======================================================
   TABLE STYLING (GLOBAL)
====================================================== */

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    /* HEADER */
    table thead th {
        background-color: #009900 !important;
        color: #333333 !important;
        font-weight: 600;
        border: none;
        padding: 10px;
    }

    /* BODY */
    table tbody tr {
        background-color: #ffffff;
        border-bottom: 1px solid #e5e5e5;
    }

        table tbody tr:hover {
            background-color: #f7f7f7;
        }

    table td {
        padding: 10px;
        vertical-align: middle;
        color: #333;
    }

/* ======================================================
   DATATABLES (MATCH SAME STYLE)
====================================================== */

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #333333 !important;
    color: #ffffff !important;
    border-radius: 4px;
    border: none;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #FFCC00 !important;
        color: #333333 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #009900 !important;
        color: #ffffff !important;
    }

.dataTables_wrapper .dataTables_filter input {
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 4px 7px;
}

/* =========================================
   GLOBAL FORM TEXT CONSISTENCY
========================================= */

/* All inputs, selects, textareas */
input,
select,
textarea,
.form-control {
    font-family: "Segoe UI", Arial, sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    font-weight: 400;
}

/* Placeholder text */
::placeholder {
    color: #9aa0a6 !important;
    opacity: 1;
}

/* Dropdowns specifically */
select.form-control,
select {
    height: calc(2.25rem + 2px);
    padding: 6px 12px;
}

/* Textareas */
textarea.form-control {
    resize: vertical;
}

/* Disabled fields */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

/* =========================================
   SELECT2 FIX (IMPORTANT - YOU ARE USING IT)
========================================= */

.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    border-radius: 4px;
    border: 1px solid #ced4da;
    font-size: 14px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.select2-container--default .select2-selection__rendered {
    line-height: 2.25rem;
    color: #333333;
}

.select2-container--default .select2-selection__arrow {
    height: 100%;
}

/* Focus state aligned with your green */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #009900 !important;
    box-shadow: 0 0 0 0.15rem rgba(0,153,0,0.15);
}
@media (max-width: 768px) {
    #main {
        padding-top: 110px; /* slightly more for mobile stack */
    }
}