/* Verbeterde login styling met placeholders en iconen */
/* Container en box model */
 .pnlLogin {
     max-width: 400px;
     font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
     background: white;
}
/* Gele login container */
 .fwLogin {
     background: linear-gradient(145deg, #f7d151 0%, #f4c430 100%);
     padding: 30px;
     border-radius: 10px 10px 0 0;
     position: relative;
}
/* Gebruikers- en wachtwoordvelden */
 .AspNet-Login-UserPanel, .AspNet-Login-PasswordPanel {
     position: relative;
     margin-bottom: 25px;
     display: block;
}
/* Labels verbergen (maar toegankelijk houden voor screenreaders) */
 .AspNet-Login-UserPanel label, .AspNet-Login-PasswordPanel label {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     border: 0;
}
/* Input velden met iconen */
 .AspNet-Login-UserPanel input, .AspNet-Login-PasswordPanel input {
     width: 100%;
     padding: 12px 15px 12px 40px;
    /* Extra padding links voor icoon */
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     font-size: 15px;
     transition: all 0.3s ease;
     background: #ffffff;
     box-sizing: border-box;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.9);
     display: block;
}
 div.fwLogin div.AspNet-Login div.AspNet-Login-UserPanel input, div.fwLogin div.AspNet-Login div.AspNet-Login-PasswordPanel input {
     margin-left: -15px;
     height: 30px;
     width: 277px;
     margin-right: 2px;
     padding-left: 40px;
     font-weight: bold;
     font-size: 14px;
     color: gray;
}
 body div.pnlLogin div.fwLogin div.AspNet-Login div.AspNet-Login-SubmitPanel input {
     margin-top: 20px !important;
     margin-bottom: 20px !important;
}
 body div.fwLogin div.pnlForgot {
     margin-left: 0;
     margin-right: 53px;
}
 body div.pnlMobiel {
     margin-right: 152px;
}
 body div.pnlMobiel label {
     color: #1a3a6c;
     margin-left: 154px;
     width: 183px;
}
/* Placeholder styling */
 .AspNet-Login-UserPanel input::placeholder, .AspNet-Login-PasswordPanel input::placeholder {
     color: #8896ac;
     opacity: 0.7;
}
/* Toevoegen van placeholder attributen via CSS content (werkt in moderne browsers) */
 .AspNet-Login-UserPanel input:not([placeholder])::before, .AspNet-Login-PasswordPanel input:not([placeholder])::before {
     content: attr(placeholder);
}
/* Iconen voor invoervelden */
 .AspNet-Login-UserPanel::before, .AspNet-Login-PasswordPanel::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 18px;
     height: 18px;
     background-size: contain;
     background-repeat: no-repeat;
     z-index: 10;
     opacity: 0.6;
     pointer-events: none;
}
 .AspNet-Login-UserPanel::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a3a6c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z' /%3E%3C/svg%3E");
}
 .AspNet-Login-PasswordPanel::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231a3a6c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z' /%3E%3C/svg%3E");
}
 .AspNet-Login-UserPanel input:focus, .AspNet-Login-PasswordPanel input:focus {
     outline: none;
     border-color: #234f8c;
     box-shadow: 0 0 0 3px rgba(35, 79, 140, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
/* Login knop */
 .AspNet-Login-SubmitPanel {
     display: flex;
     justify-content: center;
     margin-top: 30px;
}
 .AspNet-Login-SubmitPanel input[type="submit"] {
     background: linear-gradient(145deg, #2c5da8 0%, #234f8c 100%);
     color: white;
     border: none;
     border-radius: 8px;
     padding: 14px 30px !important;
     font-size: 16px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 6px rgba(35, 79, 140, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
     width: 60% !important;
     min-width: 180px;
     text-align: center;
     height: auto !important;
     margin: 0 !important;
     position: relative;
     overflow: hidden;
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
 .AspNet-Login-SubmitPanel input[type="submit"]:hover {
     background: linear-gradient(145deg, #234f8c 0%, #1a3a6c 100%);
     transform: translateY(-2px);
     box-shadow: 0 4px 10px rgba(35, 79, 140, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
 .AspNet-Login-SubmitPanel input[type="submit"]:active {
     transform: translateY(0px);
     box-shadow: 0 1px 3px rgba(35, 79, 140, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Wachtwoord vergeten link */
 .pnlForgot {
     text-align: center;
     margin-top: 20px;
     margin-bottom: 15px;
}
 .pnlForgot a {
     color: #234f8c;
     text-decoration: none;
     font-size: 14px;
     transition: color 0.2s;
     padding: 6px 12px;
     border-radius: 20px;
     background: rgba(35, 79, 140, 0.05);
}
 .pnlForgot a:hover {
     color: #1a3a6c;
     background: rgba(35, 79, 140, 0.1);
     text-decoration: none;
}
/* Checkbox voor mobiele versie met FIX */
 .pnlMobiel {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 15px;
     margin-bottom: 15px;
}
 .pnlMobiel input[type="checkbox"] {
     margin-right: 10px;
     appearance: none;
     -webkit-appearance: none;
     width: 18px;
     height: 18px;
     border: 1px solid rgba(35, 79, 140, 0.3);
     border-radius: 4px;
     outline: none;
     transition: all 0.2s ease;
     position: relative;
     cursor: pointer;
     background-color: white;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     flex-shrink: 0;
    /* Voorkomt dat de checkbox krimpt */
}
 .pnlMobiel input[type="checkbox"]:checked {
     background-color: #234f8c;
     border-color: #1a3a6c;
     box-shadow: none;
}
 .pnlMobiel input[type="checkbox"]:checked::before {
     content: '';
     position: absolute;
     top: 4px;
     left: 7px;
     width: 4px;
     height: 8px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
}
 .pnlMobiel label {
     color: #1a3a6c;
     font-size: 14px;
     cursor: pointer;
     flex: 1;
    /* Zorgt ervoor dat de tekst de rest van de ruimte inneemt */
}
/* FIX: Links onder elkaar plaatsen */
 .pnlCertLogin, .pnlHandleiding {
     display: block;
     width: 100%;
     margin: 10px 0;
     text-align: center;
}
/* Links styling */
 .pnlCertLogin a, .pnlHandleiding a, a[href*="certificaat"], a[href*="documentatie"] {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     color: #234f8c;
     text-decoration: none;
     font-size: 14px;
     padding: 12px 16px;
     margin: 5px auto;
     border-radius: 8px;
     transition: all 0.25s ease;
     background: rgba(35, 79, 140, 0.05);
     border: 1px solid rgba(35, 79, 140, 0.08);
     width: 80%;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     box-sizing: border-box;
     position: relative;
     padding-left: 40px;
    /* Ruimte voor icoon */
     text-align: center;
}
 body div.pnlLogin {
     right: 25px;
}
 body div.pnlLogin div.pnlCertLogin {
     width: 300px;
}
 body div.pnlLogin div.pnlCertLogin {
     margin-right: 25px;
}
 body div.pnlLogin div.pnlCertLogin .lnkCertLogin, body div.pnlLogin .lnkHandleiding {
     width: 230px;
}
 body div.pnlLogin .lnkHandleiding {
     margin-bottom: 23px;
     margin-right: 35px;
}
 .pnlCertLogin a:hover, .pnlHandleiding a:hover, a[href*="certificaat"]:hover, a[href*="documentatie"]:hover {
     background: rgba(35, 79, 140, 0.1);
     border-color: rgba(35, 79, 140, 0.15);
     transform: translateY(-1px);
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.08);
}
/* Iconen voor de links - FIX */
 .lnkCertLogin::before, .lnkHandleiding::before, a[href*="certificaat"]::before, a[href*="documentatie"]::before {
     content: '';
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     width: 18px;
     height: 18px;
     background-size: contain;
     background-repeat: no-repeat;
}
 .lnkCertLogin::before, a[href*="certificaat"]::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23234f8c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z' /%3E%3C/svg%3E");
}
 .lnkHandleiding::before, a[href*="documentatie"]::before {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23234f8c'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253' /%3E%3C/svg%3E");
}

body div.fwLogin div.AspNet-Login div.AspNet-Login-TitlePanel,
body div.change_pwd_form span.login_msg_title
{
    margin-bottom: 16px;
}

body div.fwLogin
{
    padding-bottom: 0;
}

div.fwLogin div.AspNet-Login
{
    margin-top: -15px;
}

div.fwLogin div.AspNet-Login div.AspNet-Login-TitlePanel
{
    background: linear-gradient(145deg, #2c5da8 0%, #234f8c 100%);
    width: fit-content;
    padding-left: 13px;
    padding-right: 13px;
    margin-bottom: 16px;
    border-radius: 8px;
}

div.fwLogin div.AspNet-Login div.AspNet-Login-TitlePanel span 
{
    font-size: 16px;
    font-weight: bold;
    color: white;
}

/* Responsive aanpassingen */
 @media (max-width: 450px) {
     .pnlLogin {
         margin: 20px 15px;
         max-width: none;
    }
     .fwLogin {
         padding: 25px 20px;
    }
     .AspNet-Login-SubmitPanel input[type="submit"] {
         width: 100% !important;
    }
     .pnlCertLogin a, .pnlHandleiding a, a[href*="certificaat"], a[href*="documentatie"] {
         width: 90%;
    }
}