:root {
    --ds-red: #d00000;
    --ds-red-dark: #9f0000;
    --ds-ink: #15171b;
    --ds-panel: #ffffff;
    --ds-muted: #667085;
    --ds-line: #d9dee7;
    --ds-soft: #f4f6f9;
    --ds-success: #168a55;
    --ds-warning: #b7791f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ds-ink);
    background:
        radial-gradient(circle at 10% -10%, rgba(208, 0, 0, .13), transparent 28rem),
        linear-gradient(135deg, #f7f8fb 0%, #eef1f5 52%, #f8fafc 100%) !important;
    font-family: Inter, "Segoe UI", Arial, Helvetica, sans-serif !important;
    min-height: 100vh;
}

.topbar {
    background: linear-gradient(90deg, var(--ds-red-dark), var(--ds-red)) !important;
    color: #fff !important;
    letter-spacing: .02em;
    font-weight: 700;
    text-transform: uppercase;
}

.header {
    background: rgba(21, 23, 27, .96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 45px rgba(12, 18, 30, .18);
    gap: 18px;
}

.header img,
.logo img {
    width: auto;
    max-width: 190px;
    object-fit: contain;
}

.header strong,
.header [style*="color:#d00000"],
.header [style*="color: #d00000"] {
    color: #ff4b4b !important;
}

.layout {
    background:
        linear-gradient(90deg, rgba(21, 23, 27, .04), transparent 28rem),
        transparent;
}

.sidebar {
    background: #191c21 !important;
    border-right: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 16px 0 40px rgba(12, 18, 30, .08);
}

.sidebar h5 {
    color: #aeb7c5 !important;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar a {
    border-left: 4px solid transparent !important;
    color: #eef2f7 !important;
    font-weight: 650;
    transition: background .16s ease, border-color .16s ease, padding-left .16s ease;
}

.sidebar a:hover,
.sidebar a:focus {
    background: rgba(255, 255, 255, .07) !important;
    border-left-color: var(--ds-red) !important;
    padding-left: 24px;
}

.content,
.container-box,
.panel {
    position: relative;
}

.card,
.panel {
    border: 1px solid rgba(18, 28, 45, .08) !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .12) !important;
}

.card .card {
    box-shadow: none !important;
    border: 1px solid var(--ds-line) !important;
}

h1,
h2,
h3,
h4,
h5 {
    color: #18202b;
    font-weight: 800;
    letter-spacing: 0;
}

p {
    color: #4d5968;
}

.hero {
    min-height: 330px;
    background:
        linear-gradient(120deg, rgba(10, 12, 16, .88), rgba(10, 12, 16, .55)),
        url("https://d-scan.nl/wp-content/uploads/2022/05/DSC_0848-scaled.jpg") center / cover no-repeat !important;
    justify-content: flex-start !important;
    padding: 48px clamp(22px, 7vw, 86px);
    text-align: left !important;
}

.hero h1 {
    max-width: 680px;
    color: #fff;
    font-size: clamp(2rem, 4vw, 4rem) !important;
    line-height: 1;
}

.hero h1::after {
    content: "X-Ray, EDD en cargo statements in een beveiligd klantportaal.";
    display: block;
    max-width: 520px;
    margin-top: 16px;
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.section {
    padding: 0 18px 34px;
}

.section .card {
    max-width: 440px !important;
}

label,
.form-label {
    color: #2d3748 !important;
    font-weight: 700;
}

input,
select,
textarea,
.form-control,
.form-select {
    border-color: #cdd5df !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--ds-red) !important;
    box-shadow: 0 0 0 .22rem rgba(208, 0, 0, .12) !important;
}

button,
.btn {
    border-radius: 8px !important;
    font-weight: 800 !important;
}

.btn-danger,
button[type="submit"],
button:not(.nav-link):not(.btn-close) {
    background: linear-gradient(135deg, var(--ds-red), var(--ds-red-dark)) !important;
    border-color: var(--ds-red-dark) !important;
}

.btn-secondary {
    background: #2f3743 !important;
    border-color: #2f3743 !important;
}

.btn-outline-primary {
    color: var(--ds-red) !important;
    border-color: var(--ds-red) !important;
}

.btn-outline-primary:hover {
    background: var(--ds-red) !important;
    color: #fff !important;
}

.dropzone {
    border-color: var(--ds-red) !important;
    background:
        linear-gradient(135deg, rgba(208, 0, 0, .07), rgba(21, 23, 27, .03)) !important;
    border-radius: 8px !important;
}

.dropzone:hover,
.dropzone.dragover {
    background: rgba(208, 0, 0, .1) !important;
}

.nav-tabs {
    border-bottom-color: var(--ds-line);
    gap: 6px;
}

.nav-tabs .nav-link {
    border-radius: 8px 8px 0 0 !important;
    color: #344054;
    font-weight: 750;
}

.nav-tabs .nav-link.active {
    color: var(--ds-red);
    border-top: 3px solid var(--ds-red);
}

.table {
    border-color: var(--ds-line) !important;
}

.table thead th,
thead th {
    background: #1b1f26 !important;
    color: #fff !important;
    border-color: #2f3743 !important;
    font-size: .84rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.table td,
.table th {
    vertical-align: middle;
}

.alert {
    border-radius: 8px !important;
}

.footer {
    color: #7a8494 !important;
}

iframe {
    border: 1px solid var(--ds-line) !important;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .12);
}

#forgotModal > div {
    border-radius: 8px !important;
}

@media (max-width: 992px) {
    .header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .content,
    .container-box {
        padding: 18px !important;
        margin: 18px auto !important;
    }

    .sidebar {
        width: 100% !important;
        display: flex;
        overflow-x: auto;
        padding: 8px;
    }

    .sidebar h5 {
        display: none;
    }

    .sidebar a {
        white-space: nowrap;
        border-left: 0 !important;
        border-bottom: 3px solid transparent;
        padding: 10px 14px;
    }

    .hero {
        min-height: 300px;
        padding: 36px 22px;
    }
}

@media (max-width: 640px) {
    .hero h1 {
        font-size: 2.1rem !important;
    }

    .card,
    .panel {
        padding: 20px !important;
    }

    .table {
        font-size: .9rem;
    }
}