/* =========================================================
   IJAMST FUNCTIONAL PAGES
   Submission / Check Status / Admin Login
   ========================================================= */


/* =========================================================
   PAGE LAYOUT
   ========================================================= */

.content {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
    padding: 45px 45px 60px 45px;

    box-sizing: border-box;

    display: grid !important;

    grid-template-columns: 245px minmax(0, 1fr) !important;

    column-gap: 55px;

    align-items: start;
}


/* =========================================================
   JOURNAL SIDEBAR
   ========================================================= */

.content #journalmenu {

    width: 245px !important;

    padding: 5px 0 20px 0 !important;

    margin: 0 !important;

    box-sizing: border-box;
}


.content #journalmenu ul {

    list-style: none;

    padding: 0 !important;

    margin: 0 !important;
}


.content #journalmenu h3 {

    margin: 0 0 28px 0 !important;

    padding: 0 !important;
}


.content #journalmenu h3 .imp {

    display: block;

    font-size: 30px !important;

    line-height: 1.2;

    text-align: left;

    padding: 0 !important;

    margin: 0 !important;

    color: white !important;
}


.content #journalmenu ul li {

    height: auto !important;

    padding: 0 !important;

    margin: 0 0 17px 0 !important;

    box-sizing: border-box;
}


.content #journalmenu ul li a {

    display: block !important;

    padding: 0 !important;

    margin: 0 !important;

    color: white !important;

    font-size: 16px !important;

    line-height: 1.45;

    text-align: left !important;

    text-decoration: none;
}


.content #journalmenu ul li a:hover {

    opacity: 0.7;

}


/* =========================================================
   RIGHT SIDE CONTENT
   ========================================================= */

.form-page-content {

    width: 100%;

    min-width: 0;

    box-sizing: border-box;

    display: flex;

    justify-content: center;

    align-items: flex-start;
}


/* =========================================================
   FORM CONTAINER
   ========================================================= */

.form-container {

    width: 100%;

    max-width: 760px;

    margin: 0 auto;

    padding: 0 10px 30px 10px;

    box-sizing: border-box;
}


.form-container-small {

    max-width: 620px;
}


.form-container-login {

    max-width: 620px;
}


/* =========================================================
   FORM HEADING
   ========================================================= */

.form-heading {

    text-align: center;

    margin: 0 0 30px 0;
}


.form-heading h1 {

    margin: 0 0 10px 0;

    padding: 0;

    color: white !important;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 32px !important;

    line-height: 1.25;

    font-weight: 700;
}


.form-heading p {

    max-width: 650px;

    margin: 0 auto;

    color: rgba(255,255,255,0.78) !important;

    font-family: Arial, sans-serif;

    font-size: 15px !important;

    line-height: 1.6;
}


/* =========================================================
   FORM BOX
   ========================================================= */

.journal-form {

    width: 100%;

    margin: 0;

    padding: 30px 32px 32px 32px;

    box-sizing: border-box;

    background: rgba(255,255,255,0.045);

    border: 1px solid rgba(255,255,255,0.16);

    border-radius: 10px;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {

    width: 100%;

    margin: 0 0 21px 0;

    padding: 0;

    box-sizing: border-box;
}


/* =========================================================
   LABEL
   ========================================================= */

.journal-form label {

    display: block;

    margin: 0 0 8px 0;

    padding: 0;

    color: white !important;

    font-family: Arial, sans-serif;

    font-size: 15px !important;

    font-weight: 600;

    line-height: 1.4;

    text-align: left;
}


/* =========================================================
   TEXT INPUTS
   ========================================================= */

.journal-form input[type="text"],
.journal-form input[type="email"],
.journal-form input[type="password"],
.journal-form input[type="tel"],
.journal-form input[type="number"] {

    display: block;

    width: 100% !important;

    height: 48px;

    padding: 11px 14px;

    margin: 0;

    box-sizing: border-box;

    background: #ffffff !important;

    color: #111827 !important;

    -webkit-text-fill-color: #111827 !important;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    outline: none;

    font-family: Arial, sans-serif;

    font-size: 15px !important;

    line-height: 1.4;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.journal-form textarea {

    display: block;

    width: 100% !important;

    min-height: 160px;

    padding: 12px 14px;

    margin: 0;

    box-sizing: border-box;

    background: #ffffff !important;

    color: #111827 !important;

    -webkit-text-fill-color: #111827 !important;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    outline: none;

    resize: vertical;

    font-family: Arial, sans-serif;

    font-size: 15px !important;

    line-height: 1.5;
}


/* =========================================================
   PLACEHOLDER
   ========================================================= */

.journal-form input::placeholder,
.journal-form textarea::placeholder {

    color: #6b7280 !important;

    opacity: 1;
}


/* =========================================================
   FOCUS
   ========================================================= */

.journal-form input:focus,
.journal-form textarea:focus {

    border-color: #536dfe !important;

    box-shadow: 0 0 0 3px rgba(83,109,254,0.16);

}


/* =========================================================
   FILE UPLOAD
   ========================================================= */

.journal-form input[type="file"] {

    display: block;

    width: 100% !important;

    min-height: 48px;

    padding: 7px;

    margin: 0;

    box-sizing: border-box;

    background: #ffffff !important;

    color: #111827 !important;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    font-family: Arial, sans-serif;

    font-size: 14px !important;
}


.journal-form input[type="file"]::file-selector-button {

    padding: 9px 15px;

    margin-right: 12px;

    background: rgb(14,14,40);

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;
}


/* =========================================================
   FILE HELP
   ========================================================= */

.file-help {

    margin: 0 0 8px 0;

    color: rgba(255,255,255,0.65) !important;

    font-family: Arial, sans-serif;

    font-size: 13px !important;
}


/* =========================================================
   BUTTON AREA
   ========================================================= */

.form-submit {

    display: flex;

    justify-content: center;

    margin-top: 30px;
}


/* =========================================================
   BUTTON
   ========================================================= */

.journal-form button {

    display: inline-block;

    min-width: 170px;

    padding: 12px 28px;

    margin: 0;

    background: rgb(14,14,40);

    color: white !important;

    border: 1px solid rgba(255,255,255,0.75);

    border-radius: 6px;

    font-family: Arial, sans-serif;

    font-size: 15px !important;

    font-weight: 600;

    cursor: pointer;
}


.journal-form button:hover {

    background: white;

    color: rgb(14,14,40) !important;
}


/* =========================================================
   AUTOFILL
   ========================================================= */

.journal-form input:-webkit-autofill,
.journal-form input:-webkit-autofill:hover,
.journal-form input:-webkit-autofill:focus {

    -webkit-text-fill-color: #111827 !important;

    box-shadow: 0 0 0 1000px white inset !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .content {

        grid-template-columns: 210px minmax(0,1fr) !important;

        column-gap: 35px;

        padding: 35px 30px 50px 30px;
    }


    .content #journalmenu {

        width: 210px !important;
    }


    .content #journalmenu ul li a {

        font-size: 15px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

    .content {

        display: block !important;

        padding: 30px 20px 45px 20px;
    }


    .content #journalmenu {

        width: 100% !important;

        margin-bottom: 35px !important;
    }


    .content #journalmenu h3 .imp {

        text-align: center;

        font-size: 27px !important;
    }


    .content #journalmenu ul {

        display: grid;

        grid-template-columns: repeat(2,1fr);

        gap: 12px 20px;
    }


    .content #journalmenu ul li {

        margin: 0 !important;
    }


    .content #journalmenu ul li a {

        text-align: center !important;

        font-size: 14px !important;
    }


    .form-container {

        max-width: 100%;
    }


    .journal-form {

        padding: 25px 20px 28px 20px;
    }


    .form-heading h1 {

        font-size: 27px !important;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .content {

        padding-left: 15px;

        padding-right: 15px;
    }


    .content #journalmenu ul {

        grid-template-columns: 1fr;
    }


    .content #journalmenu ul li a {

        text-align: left !important;
    }


    .journal-form {

        padding: 22px 16px 25px 16px;
    }


    .form-heading h1 {

        font-size: 24px !important;
    }


    .journal-form button {

        width: 100%;
    }

}