:root {
    --primary: #1E3A8A;
    --secondary: #2563EB;
    --accent: #3B82F6;
    --surface: #ffffff;
    --surface-2: #F8FAFC;
    --border: #DCE4EC;
    --text: #1F2937;
    --muted: #64748B;
    --radius: 18px;
}

/* Background & Viewport */
html, body {
    height: 100%;
    margin: 0;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    min-height: 100vh;
    width: 100%;
    font-family: "Segoe UI", Roboto, sans-serif;

    background:
        radial-gradient(circle at top right,#60A5FA 0%,transparent 40%),
        radial-gradient(circle at bottom left,#1D4ED8 0%,transparent 35%),
        linear-gradient(135deg,#0F172A,#1E3A8A,#2563EB);

    background-attachment: fixed;
    background-size: cover;

    display:flex;
    align-items:center;
    justify-content:center;
    padding:1rem;
}


/* Login Card */
.card,
.scFormPage,
.login-container,
div.scFormBorder {

    width:100% !important;
    max-width:460px !important;

    background:rgba(255,255,255,.96) !important;

    border:none !important;
    border-radius:24px !important;

    padding:40px 30px !important;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25) !important;

    margin:auto !important;

    position:relative !important;
}


/* Scriptcase layout */
table.scFormTable,
table.scFormBorder,
.form-signin {

    width:100% !important;
    max-width:100% !important;
    background:transparent !important;
}


td.scFormDataOdd,
td.scFormDataEven {

    width:100% !important;
    display:block !important;

    padding:8px 0 !important;

    background:transparent !important;
    border:none !important;
}



/* ================================
   SCRIPTCASE ERROR MESSAGE
   Hidden until called
================================ */


/* Hide empty error containers */
.scFormErrTable:empty,
.scFormErrorMessage:empty,
#id_error_display:empty,
tr[id*="error"]:empty {

    display:none !important;
}


/* Hide inactive error containers */
.scFormErrTable,
.scFormErrorMessage,
#id_error_display,
tr[id*="error"] {

    max-width:460px !important;
    width:100% !important;

    margin:0 auto 15px auto !important;

    border-radius:12px !important;
}


/* Logo */
.profile-img-card {

    width:80px;
    height:80px;

    border-radius:50%;

    margin:0 auto 15px;

    display:block;

    padding:10px;

    background:white;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);
}



/* Title */
.profile-name-card {

    font-size:26px;

    font-weight:600;

    color:var(--text);

    margin-bottom:25px;

    text-align:center;
}


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


input[type="text"],
input[type="email"],
input[type="password"],
select,
.form-signin input,
.form-signin select,
.scFormObjectOdd {


    height:50px !important;

    width:100% !important;


    border-radius:14px !important;

    border:1px solid var(--border) !important;


    background:#F8FAFC !important;


    padding-left:16px !important;


    font-size:15px !important;


    color:var(--text) !important;


    transition:.25s !important;

}



input[type="password"] {

    padding-right:55px !important;

}



input:hover,
select:hover {

    background:white !important;

    border-color:#93C5FD !important;

}



input:focus,
select:focus {

    background:white !important;

    border-color:var(--secondary) !important;


    box-shadow:
        0 0 0 4px rgba(37,99,235,.15) !important;


    outline:none !important;

}



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


button[type="submit"],
input[type="submit"],
.btn-signin,
.scButton_default,
input.sc-button-image {


    background:
        linear-gradient(135deg,#2563EB,#1D4ED8) !important;


    color:white !important;


    border:none !important;


    border-radius:14px !important;


    height:50px !important;


    width:100% !important;


    font-size:15px !important;


    font-weight:600 !important;


    cursor:pointer !important;


    display:flex !important;


    align-items:center !important;


    justify-content:center !important;


    margin-top:12px !important;


    box-shadow:
        0 10px 25px rgba(37,99,235,.25) !important;


    transition:.25s ease !important;

}



button[type="submit"]:hover,
input[type="submit"]:hover,
.btn-signin:hover,
.scButton_default:hover {


    background:
        linear-gradient(135deg,#1D4ED8,#1E40AF) !important;


    transform:translateY(-2px);


    box-shadow:
        0 18px 35px rgba(37,99,235,.35) !important;

}



/* Links */

.forgot-password,
.class-links a {

    color:#2563EB;

    text-decoration:none;

}


.forgot-password:hover,
.class-links a:hover {

    color:#1E40AF;

}



/* Checkbox */

input[type="checkbox"] {


    accent-color:var(--secondary) !important;


    width:18px !important;

    height:18px !important;


    margin-right:8px !important;


}



/* Mobile */

@media(max-width:480px){


.card {

    padding:25px 20px !important;

    border-radius:20px !important;

}


input[type="text"],
input[type="email"],
input[type="password"],
select,
button[type="submit"],
input[type="submit"],
.btn-signin {


    height:46px !important;

}


}