/* Container */
.opendirectory-container {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1000px;
    margin-top: 10px;

    h2 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
    }
    /* Form Styles */
    .form-container {
        display: flex;
        flex-direction: column;
    }

    /* Field Container */
    .field-container {
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;

        label {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #555;
        }

        /* Inputs & Select */
        input[type=checkbox] {
            --checkbox-size: 20px;
            width: var(--checkbox-size) !important;
            height: var(--checkbox-size);
            
            position: relative;
        }
        input[type=checkbox]:checked::before {
            content: '';
            margin-right:0!important;
            margin:0!important;
            width: calc(var(--checkbox-size) - 10px);
            height: calc(var(--checkbox-size) - 10px);
            background: #4949af;
            position: absolute;
            top: 50%;
            left: 50%;
            translate: -50% -50%;
        }
        input,select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease-in-out;
        }

        /* Focus Effects */
        input:focus,select:focus {
            border-color: #007bff;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        /* Checkbox */
        input[type="checkbox"] {
            width: auto;
            margin-right: 8px;
        }

        /* Styling Checkbox Label */
        label[for="enable"] {
            display: flex;
            align-items: center;
        }
    }
    .submit-container button {
        padding: 8px 16px;
        border: 1px solid #122112;
        background: #aaa;
        display: block;
        margin-left: auto;
        cursor: pointer;
    }
    .submit-container button:hover {
        background: #999;
    }
    
}


/* Responsive Design */
@media (max-width: 480px) {
    .opendirectory-container {
        max-width: 90%;
    }
}