body 
{
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: radial-gradient(circle at center, rgba(240,240,240,0.8), rgba(240,240,240,0) 50%);
    background-image: url("images/pxfuel.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Style for the full-width container */
.container 
{
    width: 200%;
    max-width: 1200px; /* Adjust as per your preference */
    margin: 0 auto;
    padding: 30px;
}

/* Style for the card container */
.card-container 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    min-width: 1200px;
    max-width: 1400px; /* Adjust as per your preference */
    padding-top: 6%;
}

/* Style for the card */
.card {
    background-color: transparent !important;
    border-radius: 15px !important;
    padding: 10px;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
    flex: 0 0 25%;
    margin: 10px; /* Add some space between cards */
    border-color: transparent !important;
}

/* Style for the form inside the card */
.form 
{
    /* Width is set to 100% by default */
}

/* Clear the float after the form */
.clearfix::after 
{
    content: "";
    clear: both;
    display: table;
}

/* Media query for smaller devices */
@media screen and (min-width: 768px) and (max-width: 4000px) 
{
    .card 
    {
        flex: 0 0 75%;
    }
    body
    {
        width: 90%;
        justify-content: center;
        background-position: left center;
    }
    .container 
    {
        width: 100%;
        max-width: 100%; /* Adjust as per your preference */
        margin: 0 auto;
        padding: 25px;
    }

    /* Style for the card container */
    .card-container 
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        min-width: 480px;
        max-width: 480px; /* Adjust as per your preference */
        padding-top: 6%;
    }
}

@media screen and (min-width: 50px) and (max-width: 767px) 
{
    .card 
    {
        flex: 0 0 75%;
    }
    body
    {
        width: 90%;
        justify-content: center;
        background-position: left center;
    }
    .container 
    {
        width: 100%;
        max-width: 100%; /* Adjust as per your preference */
        margin: 0 auto;
        padding: 25px;
    }

    /* Style for the card container */
    .card-container 
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        min-width: 480px;
        max-width: 480px; /* Adjust as per your preference */
        padding-top: 8%;
    }
}

img
{
    height: 100px !important;
    width: 135px !important;
    display: block !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: 0 auto !important;
    margin-left: 0 auto !important;
}

form input 
{
    font-family: inherit;
    font-size: 15px !important;
    font-weight: bold !important;
    width: 100%;
    outline: none !important;
    border-color: transparent !important;
    background-color: #fff;
    border-radius: 4px;
    border: none;
    display: block;
    padding: 0.9rem 0.7rem;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    font-size: 13px;
    color: #4A4A4A;
}
form input:hover, form input:focus, form input:active
{
    border-bottom-color: #133861 !important;
}
/* Common Styles */
textarea:hover, textarea:active, textarea:focus,
input:active, input:hover, input:focus,
button:hover, button:active, button:focus,
label:focus, .btn:active,
select:hover, select:active, select:focus
{
    outline: 0px !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
}
.form-control:focus, .form-control-sm:focus
{
    box-shadow: none !important;
    outline: 0px !important;
    -webkit-appearance: none !important;
}
input[type="checkbox"]
{
    height: 10px !important;
    width: 10px !important;
    cursor: pointer !important;
}
/* Common Styles */
.loginCopyright
{
    font-size: 13px !important;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
}
#login
{
    background-color: #133861 !important;
    font-weight: bold !important;
    font-size: 13px !important;
}
.error-msg
{
    font-weight: bold !important;
    font-size: 13px !important;
    color: red !important;
}