body {
    background: none;
}

.OpretMedlemHeader {
    max-width: 1200px;
    margin: 0 auto 0 auto;
    padding-left: 20px;
    box-sizing: border-box;
    padding-top: 20px;
    /*border-bottom: solid black 1px;*/
}

    .OpretMedlemHeader h2 {
        margin-top: 0;
        margin-bottom: 24px;
        border-bottom: solid black 1px;
    }


/*.divOpretSideContainer {
    display: flex;
    padding: 20px;
    width: auto;
    margin: 30px auto 30px;
    box-sizing: border-box;
    background-color: var(--secondary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}*/


/*select {
    -moz-appearance: base-select;
    -webkit-appearance: base-select;
    appearance: base-select;
}
*/
.form-style {
    border-bottom: 2px solid #0396c2;
}

.form-select, .form-control, .form-floating {
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
}

    .form-control:focus, .form-floating:focus:active, .form-select:focus {
        box-shadow: none;
        outline: none;
    }

    .form-select option {
        padding: 8px 10px;
        background-color: var(--secondary-color);
        border-bottom: 1px solid #eee;
    }

        /* Selected/highlighted option */
        .form-select option:checked,
        .form-select option:hover,
        .form-select option:focus {
            border-color: var(--button-color) !important;
        }

.form-select {
    background-color: var(--secondary-color);
}


.form-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


    .form-col input[type="text"],
    .form-col input[type="password"],
    .form-col input[type="email"],
    .form-col select,
    .form-col .aspNetTextBox,
    .form-col .aspNetDropDownList {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 8px 10px;
        font-size: 1rem;
        margin-bottom: 0;
    }

    .form-col small {
        display: block;
        margin-bottom: 4px;
        color: #666;
        font-size: 0.95em;
    }

    /*.form-col > *:not(:last-child) {
    margin-bottom: 8px;
}*/

    /* Remove default margin from asp:Label */
    .form-col .aspNetLabel {
        margin-bottom: 2px;
        display: block;
    }

    .form-col small,
    .form-col .form-help {
        display: block;
        min-height: 1em;
        margin-bottom: 4px;
        color: #666;
        font-size: 0.95em;
    }

    .form-col select,
    .form-col .aspNetDropDownList {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        font-size: 1rem;
        height: 38px; /* Match the textbox height */
        appearance: none; /* Remove default arrow styling for consistency */
    }
    /* Remove top padding from the submit button */
    .form-col input[type="submit"],
    .form-col .aspNetButton {
        padding-top: 0 !important;
        width: 100%;
        bottom: 0;
    }

#AddUserBtn {
    margin-top: 15px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.Btn {
    background-color: #0396c2;
    color: #fff;
    border-radius: 8px;
    border: none;
    width: 100%;
    margin-top: 15px;
}

.outercontainer {
    display: flex;
    padding: 20px;
    max-width: 1200px;
    margin: 30px auto 30px;
    box-sizing: border-box;
    gap: 40px; /* was 10% */
}

/* Parent side containers */
#divOpretSideContainerForm {
    flex: 0 0 60%; /* fixed 70% width */
    max-width: 70%;
}

#divOpretSideContainerInfo {
    flex: 1 1 0; /* take the remaining space */
    min-width: 0; /* prevent overflow from long content */
}

.divOpretSideContainer {
    padding: 20px;
    width: auto;
    margin: 0; /* margin handled by outer container already */
    background-color: var(--secondary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 20px;
    box-sizing: border-box;
}

/* Let inner containers fill their parent side container */
.FormContainer,
.divInfoContainer {
    width: 100%; /* was 50% */
    box-sizing: border-box;
}

/* If you want a little different padding between the two, override individually */
#FormContainer {
    padding: 32px 24px 32px 32px;
}

#divInfoContainer {
    padding: 32px 32px 32px 40px;
}

@media (max-width: 768px) {
    .outercontainer {
        flex-direction: column;
        gap: 20px;
    }

    #divOpretSideContainerForm,
    #divOpretSideContainerInfo {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .form-columns {
        grid-template-columns: 1fr;
    }

    .form-col {
        width: 100%;
    }

    /* Hvis du vil reducere paddings på mobil */
    #FormContainer,
    #divInfoContainer {
    }

    .form-wrapper {
        width: auto;
    }

    .OpretMedlemHeader h2 {
        width: 95%;
    }
}
.req-list {
    margin: 0 0 0;
    padding-left: 18px;
    font-size: small;
}

    .req-list li {
        list-style: disc;
    }

.ok {
    color: var(--success-color);
}

.fail {
    color: var(--error-color);
}

.login-error {
    color: red;
    font-size: larger;
}