/* 
    Created on : 29. apr. 2024, 19:15:10
    Author     : Abbas
*/

.language-selector {
    display: flex;
    justify-content: center;
    align-items: center; /* This aligns items vertically center if needed */
}

.language-selector a {
    margin-right: 10px; /* Keep your margin for spacing between flags */
    display: inline-block;
}

.language-selector img {
    width: 24px; /* Your specified width */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Cursor changes to pointer to indicate clickable items */
}


.bd-footerarea-1.bd-margins{
    position: fixed;
    bottom: 0;
    width: 100% !important;
    box-sizing: border-box;
}

.login-title{
    padding-left:220px !important;
}

#login-form .control-group {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.login-container{
    padding-top: 20px;
    padding-bottom: 25px;
}

#login-form .input-prepend {
    display: flex;
    align-items: center;
}

#login-form .add-on {
    margin-right: 5px;
}

#login-form .links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 10px;
}

#login-form ul.unstyled {
    padding-left: 0;
    margin-bottom: 0;
}

#login-form ul.unstyled li {
    display: block;
}

#login-form .userdata {
    display: flex;
    justify-content: center;
}

#form-login-submit {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.unstyled{
    padding-top :10px;
}

.unstyled li a:hover{
    text-decoration: none;
    color: #3d46ad;
}

#login-form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

#login-form .control-group.checkbox {
    display: flex;
    align-items: center;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
    #login-form .userdata {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #login-form {
        display: block; /* Stack form components vertically */
        padding: 0 15px; /* Add horizontal padding */
    }

    #login-form .control-group {
        display: block; /* Stack individual fields vertically */
        margin-bottom: 10px; /* Add spacing between fields */
    }

    #login-form .input-prepend {
        display: flex; /* Align input and icon */
        flex-direction: row; /* Keep them inline */
    }

    #form-login-submit {
        gap: 0;
        padding-left: 20px;
    }

    #login-form ul.unstyled {
        padding-top: 30px;
        padding-left: 20px;
    }

    #login-form ul.unstyled li{
        padding-bottom: 8px;
        font-size: 1.7rem;
    }

    .login-title{
        padding-left:20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1368px) {
    .bd-postimage-1 {
        width: 600px;
        margin: 0 auto; /* Center horizontally */
                margin-top: -80px !important;
        display: block; /* Ensure it's treated as a block element */
    }

    .login-container {
        margin: 0 auto; /* Center the login form */
        display: flex;
        justify-content: center; /* Horizontal alignment */
        align-items: center; /* Vertical alignment if the height allows */
        flex-direction: column;
    }

    body {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        justify-content: start; /* Align items vertically */
        align-items: center; /* Align items horizontally */
        height: 70vh; /* Full viewport height */
        margin: 0; /* Remove default margins */
    }

    #login-form {
        max-width: 400px; /* Constrain the width of the form */
        padding: 20px; /* Add padding for spacing */
        background: #fff; /* Optional: Add background color for clarity */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow for visibility */
        border-radius: 8px; /* Optional: Add rounded corners */
    }
}