/* General RTL Styles */
body,div {
    direction: rtl; /* Set body direction */
    text-align: right; /* Right-align text */
}

/* Apply RTL styles for form elements */
input,
textarea,
p,
select {
    text-align: right; /* Align text to the right inside input fields */
    width: 100%; /* Ensure inputs take full width */
    padding: 8px; /* Add padding for better usability */
    box-sizing: border-box; /* Include padding in width calculations */
}
input[type="text"],input[type="date"]{
    direction: rtl; /* Set direction to right-to-left */
    text-align: right; /* Align text to the right */
    padding: 10px; /* Add some padding */
}

/* Adjust styles for checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    margin-left: 10px; /* Space between the checkbox/radio and label */
    margin-right:10px; /* No margin on the right */
    width: auto;
}

.digit_ltr {
    direction: ltr !important; /* Set direction to left-to-right for all degit format (number) */
}

/* Ensure labels are correctly positioned */
label {
    float: right; /* Float labels to the right */
    margin: 0 0 10px 0; /* Vertical margin for spacing */
}

/* Layout adjustments */
.container {
    padding-right: 30px; /* Adjust padding as necessary */
    padding-left: 0;
}

/* Example of aligning navigation */
nav {
    text-align: right; /* Align navigation items to the right */
}

/* Media Queries for RTL */
@media (max-width: 768px) {
    .sidebar {
        position: absolute; /* Adjust Sidebar Position for RTL */
        left: 0; /* Change left if needed — adjust to right if necessary for design */
    }

    /* Example of a responsive button */
    .responsive-button {
        float: right; /* Align button to the right */
    }

    #page-topbar {
        right: 250px !important; /* Adjust for RTL */
    }
    .main-content {
        margin-right: 250px !important; /* Keep the margin consistent */
    }
}

/* More Media Queries as needed */
@media (min-width: 769px) {
    #page-topbar {
        left: 0; /* Keep alignment for larger screens */
        right: 250px; /* Also maintain margin for right side */
    }
    .main-content {
        margin: 0; 
        margin-right: 250px;
    }
    .content {
        margin-right: 20px; 
        margin-left: 10px;
    }
}