/* =====================================
   ALGEMEEN
===================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:#eef2f7;
  color:#111827;
}

.top{
  background:#0f172a;
  color:white;
  padding:18px 30px;
  font-size:22px;
  font-weight:600;
  position:sticky;
  top:0;
  z-index:1000;
}

.layout{
  display:flex;
  align-items:flex-start;
}

.main{
  flex:1;
  padding:0 30px 30px;
  min-width:0;
}

h1{
  margin-bottom:10px;
  color:#0f172a;
}

h2,
h3{
  margin-bottom:12px;
}

.subtitle{
  color:#475569;
  margin-bottom:25px;
  font-size:18px;
}

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

.sidebar{
  width:270px;
  background:#1e293b;
  min-height:calc(100vh - 62px);
  height:calc(100vh - 62px);
  padding:20px;
  position:sticky;
  top:62px;
  overflow-y:auto;
  flex-shrink:0;
}

.sidebar a{
  display:block;
  text-decoration:none;
  color:#cbd5e1;
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:8px;
  transition:.2s;
}

.sidebar a:hover{
  background:#334155;
  color:white;
}

.sidebar .active,
.sidebar a.active{
  background:#3b82f6;
  color:white;
}

.sidebar .locked,
.sidebar a.locked{
  color:#64748b;
  cursor:not-allowed;
  pointer-events:none;
  opacity:.7;
}

.sidebar a.completed::after{
  content:" ✓";
  color:#22c55e;
  font-weight:bold;
}

.sidebar-footer{
  margin-top:20px;
}

.homebutton{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  padding:12px 14px;
  margin-bottom:8px;
  background:#3b82f6!important;
  color:white!important;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  gap:12px;
  transition:.2s;
}

.homebutton:hover{
  background:#2563eb!important;
  color:white!important;
}

.homeicon{
  font-size:24px;
  font-weight:900;
  line-height:1;
}

/* =====================================
   VOORTGANG / SCORE
===================================== */

.progressbox,
.sidebar-score{
  background:#0f172a;
  color:white;
  border:1px solid #334155;
  border-radius:12px;
  padding:14px;
  margin-bottom:18px;
  line-height:1.5;
}

.progressbox span{
  color:#93c5fd;
  font-weight:600;
}

.sidebar-score-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
  color:#93c5fd;
}

.sidebar-score-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:14px;
  margin-bottom:8px;
}

.sidebar-score-row:last-child{
  margin-bottom:0;
}

.sidebar-score-row strong{
  font-size:15px;
  letter-spacing:1px;
}

.score{
  font-size:40px;
  font-weight:800;
}

.big{
  font-size:34px;
  font-weight:bold;
  margin:10px 0;
}

/* =====================================
   KLEUREN
===================================== */

.orange{color:#ea580c}
.red{color:#dc2626}
.green{color:#16a34a}

.bad{
  color:#dc2626;
  font-weight:bold;
}

.good{
  color:#16a34a;
  font-weight:bold;
}

/* =====================================
   KNOPPEN
===================================== */

button,
.button,
.nextbutton,
.checkbutton{
  display:inline-block;
  margin-top:20px;
  background:#2563eb;
  color:white;
  text-decoration:none;
  padding:14px 24px;
  border-radius:10px;
  font-weight:600;
  border:none;
  cursor:pointer;
  font-size:16px;
  transition:.2s;
}

button:hover,
.button:hover,
.nextbutton:hover,
.checkbutton:hover{
  background:#1d4ed8;
}

.nextbutton.disabled{
  background:#94a3b8;
  pointer-events:none;
}

.resetbutton{
  width:100%;
  margin-bottom:20px;
  background:#dc2626;
  color:white;
  border:none;
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}

.resetbutton:hover{
  background:#b91c1c;
}

/* =====================================
   GRIDS
===================================== */

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:25px;
}

.step-grid,
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:20px 0;
}

.choices-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}

/* =====================================
   KAARTEN EN BOXEN
===================================== */

.card,
.box,
.scorebox,
.missionbox,
.status-panel{
  background:white;
  border-radius:14px;
  padding:22px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.card{
  border-left:6px solid #3b82f6;
  text-decoration:none;
  color:#111827;
  transition:.2s;
}

.card:hover{
  transform:translateY(-4px);
}

.card.warning{
  border-left-color:#dc2626;
}

.card.ok{
    border-left-color:#16a34a;
}

/* Casussenoverzicht Les 8 */

.card.completed{
    border-color:#16a34a;
    box-shadow:0 0 18px rgba(34,197,94,.25);
}

.card.completed::after{
    content:"AFGEROND";
    position:absolute;
    top:16px;
    right:16px;
    background:#16a34a;
    color:white;
    font-size:11px;
    font-weight:bold;
    padding:6px 10px;
    border-radius:999px;
}

.locked-card{
    opacity:.45;
    cursor:not-allowed;
    pointer-events:none;
    filter:grayscale(100%);
}

.infobox,
.footerbox{
  background:#fff7ed;
  border-left:6px solid #f97316;
  border-radius:12px;
  padding:18px;
  margin-bottom:25px;
}

.note{
  background:#fee2e2;
  border-left:6px solid #dc2626;
  border-radius:12px;
  padding:18px;
  margin-bottom:25px;
}

.kd{
  margin-top:20px;
  background:#ecfeff;
  border-left:6px solid #06b6d4;
  border-radius:12px;
  padding:18px;
}

.leerbox,
.opdrachtbox,
.questionbox{
  background:white;
  padding:25px;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  border-left:6px solid #2563eb;
  margin-top:25px;
  margin-bottom:25px;
}

.leerbox h2{
  margin-top:0;
  font-size:18px;
  font-weight:700;
}

/* =====================================
   STAP- EN CASEKAARTEN
===================================== */

.step-card,
.case-card{
  display:block;
  text-decoration:none;
  color:#111827;
  background:#f8fafc;
  border:1px solid #dbe3ef;
  border-radius:12px;
  padding:16px;
  transition:all .2s ease;
}

.step-card:hover,
.case-card:hover{
  background:#e0f2fe;
  border-color:#3b82f6;
  transform:translateY(-2px);
}

.step-card.locked,
.case-card.locked{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
  background:#e5e7eb;
}

.step-card.completed::after,
.case-card.completed::after{
  content:" ✓ afgerond";
  display:block;
  color:#16a34a;
  font-weight:bold;
  margin-top:8px;
}

.step-card strong,
.case-card strong{
  display:block;
  margin-bottom:8px;
}

/* =====================================
   VRAGEN
===================================== */

.question-card{
  background:#f8fafc;
  border:1px solid #dbe3ef;
  border-radius:14px;
  padding:20px;
  margin-top:20px;
}

.question-card h3{
  margin-top:0;
}

.question-card p{
  color:#475569;
  margin-bottom:10px;
}

.choice{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:white;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:14px;
  margin-top:10px;
  cursor:pointer;
  line-height:1.4;
  transition:.2s;
}

.choice:hover{
  background:#e0f2fe;
  border-color:#3b82f6;
}

.choice input{
  margin-right:10px;
  margin-top:3px;
}

/* =====================================
   FEEDBACK
===================================== */

.feedback{
  margin-top:15px;
  padding:15px;
  border-radius:10px;
  font-weight:600;
}

.feedback.success,
.status-success{
  background:#dcfce7;
  color:#166534;
}

.feedback.error,
.status-error{
  background:#fee2e2;
  color:#991b1b;
}

/* =====================================
   FORMULIEREN
===================================== */

input,
select,
textarea{
  font-size:16px;
}

input[type="text"],
input[type="password"],
select,
textarea{
  width:100%;
  max-width:520px;
  padding:14px;
  border:2px solid #cbd5e1;
  border-radius:10px;
  margin-top:8px;
}

textarea{
  max-width:100%;
  min-height:120px;
}

/* =====================================
   TABELLEN
===================================== */

table,
.account-table,
.file-table,
.mail-table{
  width:100%;
  border-collapse:collapse;
}

table,
.account-table,
.file-table{
  background:white;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  margin-top:20px;
}

th,
.account-table th,
.file-table th{
  background:#f1f5f9;
  text-align:left;
  padding:14px;
}

td,
.account-table td,
.file-table td{
  padding:14px;
  border-top:1px solid #e5e7eb;
}

/* =====================================
   BADGES
===================================== */

.badge,
.badge-red,
.badge-orange,
.badge-green{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  font-size:13px;
  font-weight:bold;
}

.badge{
  background:#dbeafe;
  color:#1d4ed8;
}

.badge-red{
  background:#dc2626;
  color:white;
}

.badge-orange{
  background:#ea580c;
  color:white;
}

.badge-green{
  background:#16a34a;
  color:white;
}

/* =====================================
   STATUS / PANELEN
===================================== */

.panel{
  background:white;
  border-radius:14px;
  padding:24px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  max-width:760px;
  border-left:6px solid #2563eb;
}

.row,
.status-row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #e5e7eb;
  padding:14px 0;
}

.status-row:last-child{
  border-bottom:none;
}

.value{
  font-weight:bold;
}

.setting-row{
  background:#f8fafc;
  border:1px solid #dbe3ef;
  border-radius:12px;
  padding:16px;
  margin:12px 0;
}

/* =====================================
   ROUTER - APPARATEN
===================================== */

.device-check{
    transform:scale(1.3);
}

/* =====================================
   ROUTER - SELECTIES
===================================== */

.selected,
tr.selected{
    background:#fff7ed;
}

/* =====================================
   ROUTER - VERKEER
===================================== */

.high{
    color:#dc2626;
    font-weight:bold;
}

.traffic-check{
    transform:scale(1.3);
}

/* =====================================
   LOGBOEK
===================================== */

.log{
  background:#111827;
  color:#d1d5db;
  border-radius:14px;
  padding:22px;
  font-family:Consolas,monospace;
  line-height:1.7;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  margin-top:20px;
}

.log .bad{
  color:#f87171;
}

.log .good{
  color:#86efac;
}

/* =====================================
   ROUTER - LOGBOEK
===================================== */

.logregel{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:6px;
    cursor:pointer;
    transition:.2s;
}

.logregel:hover{
    background:#1f2937;
}

.logregel.selected{
    background:#78350f;
}

.log-check{
    margin-right:10px;
    transform:scale(1.2);
}

/* =====================================
   MAIL / PHISHING
===================================== */

.mail-preview{
  background:#fff;
  border:1px solid #d6dce5;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
  margin-top:20px;
}

.mail-header{
  background:#f3f4f6;
  border-bottom:1px solid #d6dce5;
  padding:20px 24px;
}

.mail-subject{
  font-size:24px;
  font-weight:700;
  margin-bottom:18px;
  color:#0f172a;
}

.mail-table td{
  padding:4px 0;
  vertical-align:top;
  border-top:none;
}

.mail-table .label,
.label{
  width:100px;
  font-weight:700;
  color:#475569;
}

.mail-body{
  padding:28px;
  line-height:1.6;
  font-size:17px;
}

.mail-body p{
  margin:0 0 12px;
}

.mail-body ul{
  padding-left:35px;
  margin:8px 0 14px;
}

.mail-body li{
  margin-bottom:4px;
}

.mail-body .extra-space{
  margin-bottom:18px;
}

.request-box{
  display:flex;
  gap:22px;
  align-items:flex-start;
  margin:32px 0;
  padding:26px 28px;
  background:linear-gradient(135deg,#fff7ed,#fffbeb);
  border:1px solid #fed7aa;
  border-left:8px solid #f97316;
  border-radius:16px;
  box-shadow:
    0 8px 22px rgba(249,115,22,.12),
    inset 0 0 0 1px rgba(255,255,255,.65);
}

.request-icon{
  flex:0 0 54px;
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f97316;
  color:white;
  border-radius:50%;
  font-size:32px;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 14px rgba(249,115,22,.35);
}

.request-content{
  flex:1;
}

.request-title{
  font-size:21px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:10px;
}

.request-content p{
  margin:0 0 16px;
  color:#334155;
}

.request-items{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.request-item{
  background:white;
  border:1px solid #fed7aa;
  border-radius:12px;
  padding:14px 16px;
  font-weight:700;
  color:#111827;
}

.request-item::before{
  content:"›";
  color:#f97316;
  font-size:24px;
  font-weight:900;
  margin-right:10px;
}

.deadline{
  color:#991b1b;
  font-weight:700;
}

.mail-footer{
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  padding:16px 24px;
  color:#64748b;
  font-size:13px;
}

/* =====================================
   AI / PRIVACY
===================================== */

.ai-shell{
  max-width:900px;
  margin:0 auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.10);
  overflow:hidden;
}

.ai-header{
  background:#0f172a;
  color:white;
  padding:18px 24px;
  font-weight:600;
}

.chat-area{
  padding:28px;
  background:#f8fafc;
}

.chat-label{
  font-weight:bold;
  color:#475569;
  margin-bottom:8px;
}

.prompt-message{
  background:white;
  border:1px solid #cbd5e1;
  border-radius:16px;
  padding:22px;
  line-height:1.6;
  white-space:pre-wrap;
  font-size:16px;
}

.inputbar{
  border-top:1px solid #dbe3ef;
  padding:20px;
  background:white;
}

.sendbutton{
  background:#10a37f;
  color:white;
  border:none;
  border-radius:12px;
  padding:14px 24px;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
}

.sendbutton:hover{
  background:#0f8f70;
}

.warningline{
  margin-top:12px;
  color:#64748b;
  font-size:14px;
}

.preview{
  display:none;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:18px;
  margin-top:20px;
}

.preview img{
  max-width:100%;
  border-radius:8px;
  border:1px solid #cbd5e1;
  margin-top:12px;
}

.message{
  background:white;
  border-radius:14px;
  padding:22px;
  margin-bottom:20px;
  line-height:1.6;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.ai{
  border-left:6px solid #10a37f;
}

.warning{
  border-left:6px solid #ef4444;
}

.safe{
  border-left:6px solid #22c55e;
}

.privacy-alert,
.good-alert{
  padding:12px 16px;
  border-radius:10px;
  margin-bottom:20px;
  font-weight:bold;
}

.privacy-alert{
  background:#fee2e2;
  color:#991b1b;
}

.good-alert{
  background:#dcfce7;
  color:#166534;
}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:1100px){

  .layout{
    flex-direction:column;
  }

  .sidebar{
    width:100%;
    min-height:auto;
    height:auto;
    position:static;
    top:auto;
    overflow:visible;
  }

  .grid,
  .step-grid,
  .case-grid,
  .choices-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:800px){

  .request-box{
    flex-direction:column;
  }

  .request-items{
    grid-template-columns:1fr;
  }

}

/* =====================================
   AFRONDINGSPAGINA
===================================== */

.completion-card{
    width:720px;
    margin:50px auto;

    background:white;
    border-radius:20px;
    padding:50px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.completion-icon{
    font-size:80px;
    margin-bottom:20px;
}

.completion-card h1{
    color:#0f172a;
    margin-bottom:10px;
}

.completion-subtitle{
    color:#64748b;
    margin-bottom:30px;
    font-size:18px;
}

.checklist{
    text-align:left;
    background:#f8fafc;
    border-radius:14px;
    padding:20px;
    margin:25px 0;
    line-height:1.8;
}

@media (max-width:800px){

    .completion-card{
        width:95%;
        padding:30px;
    }

}

/* =====================================
   DOCUMENTEN (FACTUREN, PDF'S, E-MAILS)
===================================== */

.document-view{
    max-width:800px;
    margin:40px auto;
    background:white;
    padding:40px;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,.15);
}

.document-warning{
    background:#fff7ed;
    border-left:6px solid #f97316;
    padding:18px;
    border-radius:10px;
    margin-bottom:25px;
}

.fakebutton{
    display:inline-block;
    background:#f59e0b;
    color:white;
    padding:12px 18px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;
    transition:.2s;
}

.fakebutton:hover{
    background:#d97706;
}

@media (max-width:850px){

    .document-view{
        width:95%;
        padding:25px;
    }

}

/* =====================================
   WAARSCHUWINGSPAGINA'S
===================================== */

.warning-card{
    max-width:760px;
    margin:40px auto;

    background:white;
    border-left:8px solid #dc2626;
    border-radius:18px;

    padding:40px;

    text-align:center;

    box-shadow:0 8px 30px rgba(0,0,0,.15);
}

.warning-icon{
    font-size:72px;
    margin-bottom:20px;
}

.warning-card h1{
    color:#dc2626;
}

.warning-text{
    margin:20px 0;
    font-size:18px;
    line-height:1.7;
}

.tipbox{
    background:#fff7ed;
    border-left:6px solid #f97316;
    border-radius:12px;
    padding:18px;
    margin-top:25px;
    text-align:left;
}

.backbutton{
    display:inline-block;
    margin-top:25px;

    background:#2563eb;
    color:white;

    padding:14px 24px;

    border-radius:10px;

    text-decoration:none;
    font-weight:600;

    transition:.2s;
}

.backbutton:hover{
    background:#1d4ed8;
}

@media (max-width:800px){

    .warning-card{
        width:95%;
        padding:30px;
    }

}

/* =====================================
   DONKERE WAARSCHUWINGSPAGINA
===================================== */

.dark-warning-page{
    background:#111827;
    color:white;
    font-family:Arial,sans-serif;
    padding:50px;
}

.dark-warning-box{
    max-width:750px;
    margin:0 auto;

    background:#1f2937;

    padding:35px;

    border:2px solid #ef4444;
    border-radius:16px;

    text-align:center;
}

.dark-warning-box h1{
    color:#f87171;
}

/* =====================================
   FAKE MAILCLIENT - LES 8 MISSIE 3
===================================== */

.mail-client{
    background:white;
    border:1px solid #d1d5db;
    border-radius:14px;
    box-shadow:0 4px 18px rgba(0,0,0,.12);
    overflow:hidden;
    margin-bottom:35px;
}

.mail-toolbar{
    display:flex;
    gap:28px;
    padding:16px 20px;
    border-bottom:1px solid #d1d5db;
    background:#f8fafc;
    color:#334155;
}

.mail-subjectline{
    display:flex;
    align-items:center;
    gap:14px;
    padding:24px 28px 10px;
}

.mail-subjectline h2{
    margin:0;
}

.mail-label{
    background:#e5e7eb;
    color:#475569;
    padding:4px 8px;
    border-radius:6px;
    font-size:13px;
}

.mail-sender{
    display:flex;
    align-items:center;
    gap:16px;
    padding:14px 28px 24px;
    border-bottom:1px solid #e5e7eb;
}

.mail-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#2563eb;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:20px;
}

.fake-mail{
    max-width:850px;
    margin:28px auto;
    padding:34px;
    border:1px solid #d1d5db;
    background:white;
    text-align:left;
}

.fake-mail-logo{
    font-size:26px;
    font-weight:bold;
    color:#64748b;
    margin-bottom:28px;
}

.fake-mail h2{
    color:#0755b8;
    font-size:28px;
    margin-bottom:25px;
}

.fake-mail p{
    margin-bottom:18px;
    line-height:1.6;
}

.urgent{
    color:red;
    font-weight:600;
}

.fake-mail-button{
    display:block;
    width:max-content;
    margin:26px auto;
    background:#0067d1;
    color:white;
    text-decoration:none;
    padding:16px 42px;
    font-weight:bold;
    border-radius:2px;
}

.fake-link{
    text-align:center;
    color:#0755b8;
    font-weight:600;
}

.attachment{
    padding:0 28px 28px;
}

.attachment-box{
    display:flex;
    align-items:center;
    gap:16px;

    width:320px;
    margin-top:12px;

    background:#f8fafc;
    border:1px solid #d1d5db;
    border-radius:10px;

    padding:14px 18px;

    text-decoration:none;
    color:#111827;

    transition:.2s;
}

.attachment-box:hover{
    background:#dcfce7;
    border-color:#22c55e;
    box-shadow:0 4px 12px rgba(34,197,94,.25);
    transform:translateY(-2px);
}

.attachment-icon{
    font-size:34px;
}

.attachment-info strong{
    display:block;
    margin-bottom:4px;
}

.attachment-info small{
    color:#64748b;
}

/* =====================================
   RANSOMWARE SIMULATIE
===================================== */

.ransom-page{
    background:#111827;
    color:white;
    font-family:"Segoe UI",Arial,sans-serif;
    padding:40px;
}

.ransom-card{
    max-width:850px;
    margin:0 auto;
    background:#1f2937;
    border:2px solid #dc2626;
    border-radius:18px;
    padding:40px;
    box-shadow:0 0 35px rgba(220,38,38,.35);
    text-align:center;
}

.ransom-alert{
    display:inline-block;
    background:#dc2626;
    color:white;
    padding:10px 18px;
    border-radius:999px;
    font-weight:bold;
    margin-bottom:25px;
    letter-spacing:1px;
}

.ransom-card h1{
    color:#f87171;
    font-size:42px;
    margin-bottom:15px;
}

.ransom-subtitle{
    color:#d1d5db;
    font-size:18px;
    margin-bottom:30px;
}

.ransom-screen{
    background:#000;
    color:#22c55e;
    border:1px solid #374151;
    border-radius:12px;
    padding:25px;
    margin:30px 0;
    font-family:Consolas,monospace;
    font-size:17px;
    line-height:1.7;
    text-align:left;
    box-shadow:inset 0 0 20px rgba(34,197,94,.15);
}

.ransom-danger{
    color:#f87171;
    font-weight:bold;
}

.ransom-page .tipbox{
    background:#fff7ed;
    color:#111827;
    border-left:6px solid #f97316;
    border-radius:12px;
    padding:20px;
    text-align:left;
    line-height:1.7;
}

.ransom-page .tipbox ul{
    margin-top:10px;
    margin-left:24px;
}

.ransom-page .backbutton{
    margin-top:25px;
}

}/* =====================================
   CASUS 1 - VASTE LAYOUT
===================================== */

.casus1-page{
  overflow:hidden;
}

.casus1-page .top{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
}

.casus1-page .layout{
  display:block;
}

.casus1-page .sidebar{
  position:fixed;
  top:62px;
  left:0;
  width:270px;
  height:calc(100vh - 62px);
  min-height:auto;
  overflow-y:auto;
  z-index:900;
}

.casus1-page .main{
  margin-left:270px;
  margin-top:62px;
  padding:20px 30px 30px;
  height:calc(100vh - 62px);
  overflow:hidden;
}

.casus-layout-fixed{
  display:grid;
  grid-template-columns:520px minmax(420px,1fr);
  gap:30px;
  align-items:start;
  height:100%;
}

.casus-linkerkolom-fixed{
  height:100%;
  overflow:hidden;
}

.casus-linkerkolom-fixed .subtitle{
  margin-bottom:25px;
}

.casus-linkerkolom-fixed .mail-preview{
  margin-top:0;
}

.casus-rechterkolom-fixed{
  height:100%;
  overflow-y:auto;
  padding-right:8px;
}

.casus-vragenbox{
  margin-top:0;
}

@media (max-width:1100px){
  .casus1-page{
    overflow:auto;
  }

  .casus1-page .top{
    position:static;
  }

  .casus1-page .sidebar{
    position:static;
    width:100%;
    height:auto;
    overflow:visible;
  }

  .casus1-page .main{
    margin-left:0;
    margin-top:0;
    height:auto;
    overflow:visible;
    padding:30px;
  }

  .casus-layout-fixed{
    grid-template-columns:1fr;
    height:auto;
  }

  .casus-linkerkolom-fixed,
  .casus-rechterkolom-fixed{
    height:auto;
    overflow:visible;
  }
}