/*.custom-form .form-group {
    display: flex;
    flex-wrap: wrap;
}

    .custom-form .form-group .input-container {
        flex: 1;
        margin-right: 5px;
    }

.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;*/ /* Add margin to separate the input and error message */
/*}

.is-invalid,
.is-duplicate,
.is-duplicate-role,
.is-empty-error {
    border: 1px solid red !important;
}

#colorPicker,
.pcr-button {
    border: 1px solid #ccc !important;*/ /* Add a light grey border */
    /*display: inline-block;*/ /* Make the color picker inline */
    /*vertical-align: middle;*/ /* Align it vertically with the text box */
    /*width: 40px;*/ /* You can adjust the width */
    /*height: 40px;*/ /* Adjust the height as needed */
    /*margin-right: 10px;*/ /* Add some space between the picker and the text box */
/*}

#jerseyOneColour {
    display: inline-block;*/ /* Make the text box inline */
    /*vertical-align: middle;*/ /* Align it vertically with the color picker */
    /*width: calc(100% - 60px);*/ /* Adjust width to take into account the picker's width and margin */
/*}

.color-picker-container {
    display: flex;*/ /* Use flexbox to align items inline */
    /*align-items: center;*/ /* Center-align items vertically */
/*}*/

/* Custom styles for mobile view */
/*@media (max-width: 992px) {
    #players .table-responsive {
        overflow-x: unset;
        margin-bottom: 0;
    }

    #players table {
        width: 100%;
        border-collapse: collapse;*/ /* Add this line */
    /*}

        #players table th,
        #players table td {
            display: block;
            width: 100%;
            text-align: left;*/ /* Adjust alignment as needed */
        /*}

        #players table thead {
            display: none;*/ /* Hide table header on mobile */
        /*}

        #players table tbody tr {
            margin-bottom: 1rem;
            display: block;
            border: 1px solid #ccc;*/ /* Add a border to separate rows */
            /*padding: 10px;*/ /* Add padding for better spacing */
        /*}

        #players table td::before {
            content: attr(data-label);
            font-weight: bold;
            display: inline-block;
            width: 50%;*/ /* Adjust width as needed */
            /*margin-right: 10px;
        }
}


@media (max-width: 767.98px) {
    #players .table-responsive {
        overflow-x: unset;
        margin-bottom: 0;
    }

    #players table {
        width: 100%;
        border-collapse: collapse;*/ /* Add this line */
    /*}

        #players table th,
        #players table td {
            display: block;
            width: 100%;
            text-align: left;*/ /* Adjust alignment as needed */
        /*}

        #players table thead {
            display: none;*/ /* Hide table header on mobile */
        /*}

        #players table tbody tr {
            margin-bottom: 1rem;
            display: block;
            border: 1px solid #ccc;*/ /* Add a border to separate rows */
            /*padding: 10px;*/ /* Add padding for better spacing */
        /*}

        #players table td::before {
            content: attr(data-label);
            font-weight: bold;
            display: inline-block;
            width: 50%;*/ /* Adjust width as needed */
            /*margin-right: 10px;
        }*/

    /*.tablesaw-cell-label {
        display: none;
    }

    .tablesaw-cell-label,
    .tablesaw-cell-content label,
    .tablesaw-cell-content input,
    .tablesaw-cell-content select {
        width: 100%;
        display: block;
        margin-bottom: 5px;*/ /* Add some spacing between fields */
    /*}*/
/*}

@media (max-width: 480px) {
    #players .table-responsive {
        overflow-x: unset;
        margin-bottom: 0;
    }

    #players table {
        width: 100%;
        border-collapse: collapse;*/ /* Add this line */
    /*}

        #players table th,
        #players table td {
            display: block;
            width: 100%;
            text-align: left;*/ /* Adjust alignment as needed */
        /*}

        #players table thead {
            display: none;*/ /* Hide table header on mobile */
        /*}

        #players table tbody tr {
            margin-bottom: 1rem;
            display: block;
            border: 1px solid #ccc;*/ /* Add a border to separate rows */
            /*padding: 10px;*/ /* Add padding for better spacing */
        /*}

        #players table td::before {
            content: attr(data-label);
            font-weight: bold;
            display: inline-block;
            width: 50%;*/ /* Adjust width as needed */
            /*margin-right: 10px;
        }

    .tablesaw-cell-label {
        display: none !important;
    }

    .tablesaw-cell-label,
    .tablesaw-cell-content {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        margin-bottom: 5px;*/ /* Add some spacing between fields */
    /*}

    ;
}*/

/* Ensure the input group has no additional internal spacing */
/*.input-group.mb-3 {
    flex-wrap: nowrap;*/ /* Prevent wrapping of elements inside the input group */
/*}*/

/* Style the pickr container */
/*.input-group .pickr {
    display: flex;*/ /* Use flexbox for alignment */
    /*align-items: center;*/ /* Center align vertically */
    /*border: 1px solid #ced4da;*/ /* Bootstrap-like border */
    /*border-radius: .25rem 0 0 .25rem;*/ /* Rounded corners on the left */
    /*margin-right: -1px;*/ /* Aligns the pickr flush with the input */
    /*height: 38px;*/ /* Adjust height to match your input */
/*}*/

    /* Style the color picker button */
    /*.input-group .pickr .pcr-button {
        border: none;*/ /* Remove border from the button */
        /*height: 100%;*/ /* Full height of the container */
        /*background-color: var(--pcr-color);*/ /* Color from inline style */
        /*border-radius: .25rem 0 0 .25rem;*/ /* Rounded corners on the left */
        /*margin: 0;*/ /* Reset margin */
        /*padding: 0;*/ /* Reset padding */
    /*}*/

/* Style the input field to align with the color picker */
/*.input-group .form-control {
    border-radius: 0 .25rem .25rem 0 !important;*/ /* Rounded corners on the right */
    /*border-left: none !important;*/ /* Remove the left border to blend with the pickr */
    /*height: 38px;*/ /* Ensure height matches the pickr */
/*}*/

/* Overriding styles to ensure visibility and alignment */
/*.input-group .pcr-button {
    box-shadow: none !important;*/ /* Remove any box shadows */
    /*outline: none !important;*/ /* Remove outline */
/*}*/

/* Ensure the input group text doesn't wrap or hide overflow */
/*.input-group-text {
    white-space: nowrap;*/ /* Prevent wrapping of content */
    /*overflow: hidden;*/ /* Hide overflow */
/*}

.pickr .pcr-button {*/
    /*border: 1px solid #808080 !important;*/
    /*border: var(--bs-border-width) solid var(--bs-border-color) !important;
}*/

#suggestionsContainer {
    position: absolute;
    width: calc(100% - 30px); /* Adjust 30px based on Bootstrap's padding */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1000;
    background: #fff;
    max-height: 300px;
    overflow-y: auto;
    top: 100%;
    left: 15px; /* Half of the total padding to center it */
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}

    .suggestion-item:hover {
        background-color: #f0f0f0;
    }

@media (min-width: 768px) { /* Adjust for medium screens and up */
    #suggestionsContainer {
        width: calc(100% - 30px); /* Example: Adjust based on actual padding */
        left: 15px; /* Example: Adjust based on actual padding */
    }
}

/* Style the file preview element */
.dz-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Style the thumbnail image to make sure it's centered */
.dz-image {
    display: block;
    margin: 0 auto; /* Center the thumbnail */
}

/* Style the details to be in a column, centered, and take full width */
.dz-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%; /* Ensure the details container takes full width */
}

/* Style the filename and filesize to display as blocks and center */
.dz-filename,
.dz-size {
    display: block;
    width: 100%;
}

/* Style the label input to match the thumbnail width and center text */
.file-label-input {
    width: 150px; /* Set the width of the input */
    margin-top: 10px; /* Space between the thumbnail and the input */
    text-align: center;
    display: block; /* Ensure input behaves as a block for alignment */
    margin-left: auto;
    margin-right: auto;
}

/* Style the remove link to be centered below the input */
.dz-remove {
    text-align: center;
    display: block;
    width: 100%;
    margin-top: 10px;
}

/* Unchecked state styles */
.form-check-input:not(:checked) {
    border-color: red; /* Red border for the switch */
    background-color: lightpink; /* Blue background for the switch */
}

    .form-check-input:not(:checked)::before {
        background-color: red; /* Red background for the switch handle (spot) */
    }

/* Checked state styles */
.form-check-input:checked {
    background-color: #0095DA; /* Blue background for the switch */
    border-color: #0095DA; /* Blue border for the switch */
}

    .form-check-input:checked::before {
        background-color: #fff; /* White color for the switch handle (spot) to make it stand out */
    }

/* Optional: Change the box shadow to a matching color when the switch is focused */
.form-check-input:not(:checked):focus {
    box-shadow: 0 0 0 .25rem rgba(255, 0, 0, .5); /* Red glow effect for unchecked state */
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 .25rem rgba(0, 149, 218, .5); /* Blue glow effect for checked state */
}
/* Ensures form-switch checkboxes within #userInvitation do not turn red when unchecked */
#userInvitation .form-check-input {
    /* Reset to default appearance settings */
    background-color: #fff !important; /* Default background color */
    border-color: #adb5bd !important; /* Default border color */
    appearance: none !important; /* Reset custom appearances */
}

    #userInvitation .form-check-input:checked {
        background-color: #0d6efd !important; /* Bootstrap default checked background color */
        border-color: #0d6efd !important; /* Bootstrap default checked border color */
    }

    /* Focus states within #userInvitation to maintain visibility without red color */
    #userInvitation .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Blue shadow for focus */
    }

    /* Specific overrides for unchecked states to avoid red appearance */
    #userInvitation .form-check-input:not(:checked) {
        border-color: #adb5bd !important; /* Revert to default or neutral border color */
        background-color: #fff !important; /* Ensure background stays white or neutral */
    }

        /* Optionally, handle the focus state of unchecked inputs to avoid red glow */
        #userInvitation .form-check-input:not(:checked):focus {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important; /* Example: Adjust to a neutral or matching focus shadow */
        }