/*
|--------------------------------------------------------------------------
| Gebruiker detailpagina
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-page,
.snooc-gebruiker-page *,
.snooc-gebruiker-page *::before,
.snooc-gebruiker-page *::after {
    box-sizing: border-box;
}

.snooc-gebruiker-page {
    display: grid;
    gap: 20px;

    width: 100%;
    min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 24px 26px;

    border: 1px solid var(--sn-border);
    border-radius: 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(159, 29, 53, 0.12),
            transparent 300px
        ),
        #ffffff;

    box-shadow:
        0 14px 36px rgba(79, 13, 27, 0.075);
}

.snooc-gebruiker-heading {
    display: flex;
    align-items: center;
    gap: 17px;

    min-width: 0;
}

.snooc-gebruiker-avatar {
    display: flex;
    flex: 0 0 62px;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--sn-red),
            var(--sn-red-dark)
        );

    color: #ffffff;

    font-size: 20px;
    font-weight: 850;

    box-shadow:
        0 12px 26px rgba(159, 29, 53, 0.22);
}

.snooc-gebruiker-heading > div {
    min-width: 0;
}

.snooc-gebruiker-eyebrow {
    margin: 0 0 5px;

    color: var(--sn-red);

    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.snooc-gebruiker-heading h1 {
    margin: 0;

    color: var(--sn-text);

    font-size: clamp(20px, 3vw, 27px);
    font-weight: 850;
    line-height: 1.15;

    overflow-wrap: anywhere;
}

.snooc-gebruiker-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 9px;
}

.snooc-gebruiker-status-badge,
.snooc-gebruiker-trainer-badge,
.snooc-gebruiker-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    min-height: 27px;
    padding: 5px 8px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.snooc-gebruiker-status-badge.is-active {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;
    color: #15803d;
}

.snooc-gebruiker-status-badge.is-inactive {
    border: 1px solid #fecdd3;

    background: #fff1f2;
    color: #be123c;
}

.snooc-gebruiker-trainer-badge {
    border: 1px solid #bfdbfe;

    background: #eff6ff;
    color: #1d4ed8;
}

.snooc-gebruiker-id-badge {
    border: 1px solid #e7d7db;

    background: #fbf7f8;
    color: #76505a;
}

.snooc-gebruiker-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

/*
|--------------------------------------------------------------------------
| Knoppen
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-secondary-button,
.snooc-gebruiker-password-button,
.snooc-gebruiker-danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 9px 13px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;
}

.snooc-gebruiker-secondary-button {
    border: 1px solid var(--sn-border-strong);

    background: #ffffff;
    color: var(--sn-text);
}

.snooc-gebruiker-secondary-button:hover,
.snooc-gebruiker-secondary-button:focus-visible {
    border-color: #d5aeb8;

    outline: 0;

    background: #fff8fa;
}

.snooc-gebruiker-password-button {
    border: 1px solid #e2bdc6;

    background: var(--sn-red-soft);
    color: var(--sn-red);
}

.snooc-gebruiker-password-button:hover,
.snooc-gebruiker-password-button:focus-visible {
    border-color: var(--sn-red);

    outline: 0;

    background: #f8e4e9;
}

.snooc-gebruiker-danger-button {
    border: 1px solid #be123c;

    background: #be123c;
    color: #ffffff;
}

.snooc-gebruiker-danger-button:hover,
.snooc-gebruiker-danger-button:focus-visible {
    border-color: #9f1239;

    outline: 0;

    background: #9f1239;
}

.snooc-gebruiker-danger-button:disabled {
    opacity: 0.65;

    cursor: wait;
}

/*
|--------------------------------------------------------------------------
| Paginastatus
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-page-status {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 11000;

    display: flex;
    align-items: center;
    gap: 8px;

    max-width: min(520px, calc(100vw - 30px));
    padding: 11px 14px;

    border-radius: 11px;

    font-size: 11px;
    font-weight: 750;

    box-shadow:
        0 14px 40px rgba(37, 23, 27, 0.22);

    transform: translateX(-50%);
}

.snooc-gebruiker-page-status[hidden] {
    display: none !important;
}

.snooc-gebruiker-page-status.is-success {
    border: 1px solid #bbf7d0;

    background: #f0fdf4;
    color: #15803d;
}

.snooc-gebruiker-page-status.is-error {
    border: 1px solid #fecdd3;

    background: #fff1f2;
    color: #be123c;
}

.snooc-gebruiker-page-status.is-info {
    border: 1px solid #bfdbfe;

    background: #eff6ff;
    color: #1d4ed8;
}

/*
|--------------------------------------------------------------------------
| Informatiebalk
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid #bfdbfe;
    border-radius: 14px;

    background: #eff6ff;
    color: #1e40af;
}

.snooc-gebruiker-intro > i {
    margin-top: 2px;
}

.snooc-gebruiker-intro strong {
    font-size: 11px;
    font-weight: 850;
}

.snooc-gebruiker-intro p {
    margin: 4px 0 0;

    font-size: 10px;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Indeling
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.snooc-gebruiker-card {
    min-width: 0;
    padding: 22px;

    border: 1px solid var(--sn-border);
    border-radius: 19px;

    background: #ffffff;

    box-shadow:
        0 12px 32px rgba(79, 13, 27, 0.065);
}

.snooc-gebruiker-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 20px;
    padding-bottom: 16px;

    border-bottom: 1px solid var(--sn-border);
}

.snooc-gebruiker-card-header > div {
    min-width: 0;
}

.snooc-gebruiker-card-header span {
    color: var(--sn-red);

    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.snooc-gebruiker-card-header h2 {
    margin: 4px 0 0;

    color: var(--sn-text);

    font-size: 18px;
    font-weight: 850;
}

.snooc-gebruiker-card-header p {
    margin: 6px 0 0;

    color: var(--sn-muted);

    font-size: 11px;
    line-height: 1.5;
}

.snooc-gebruiker-card-header > i {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: var(--sn-red-soft);
    color: var(--sn-red);
}

/*
|--------------------------------------------------------------------------
| Velden
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-fields {
    display: grid;
    gap: 15px;
}

.snooc-gebruiker-two-columns {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 13px;
}

.snooc-gebruiker-field {
    display: grid;
    align-content: start;
    gap: 7px;

    min-width: 0;
}

.snooc-gebruiker-field label {
    color: #49363c;

    font-size: 10px;
    font-weight: 800;
}

/*
|--------------------------------------------------------------------------
| Wrapper heeft altijd exact dezelfde hoogte
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-input-wrap {
    position: relative;

    display: block;

    width: 100%;
    min-width: 0;
    height: 45px;
    min-height: 45px;
    max-height: 45px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: 11px;

    background: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Icoon heeft een vaste hoogte en kan niet meer uitrekken
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-input-wrap > i:first-child {
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: auto;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    width: 43px;
    min-width: 43px;
    max-width: 43px;

    height: 43px;
    min-height: 43px;
    max-height: 43px;

    margin: 0;
    padding: 0;

    border: 0;
    border-right: 1px solid #ead1d7;
    border-radius: 10px 0 0 10px;

    background: #fbf1f3;
    color: var(--sn-red);

    font-size: 14px;
    line-height: 1;

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-input-wrap input {
    appearance: none;
    -webkit-appearance: none;

    display: block;

    box-sizing: border-box;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;

    margin: 0 !important;
    padding:
        0
        39px
        0
        55px !important;

    border: 1px solid #e2bdc6 !important;
    border-radius: 11px !important;

    outline: 0 !important;

    background: #ffffff !important;
    color: #34292c !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 43px !important;

    vertical-align: top !important;

    box-shadow: none !important;
}

/*
|--------------------------------------------------------------------------
| Selects
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-input-wrap select {
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;

    margin: 0 !important;
    padding:
        0
        38px
        0
        55px !important;

    border: 1px solid #e2bdc6 !important;
    border-radius: 11px !important;

    outline: 0 !important;

    background-color: #ffffff !important;
    background-image: none !important;

    color: #34292c !important;

    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: normal !important;

    vertical-align: top !important;

    box-shadow: none !important;

    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Browser- en frameworkcorrecties voor selects
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-input-wrap select::-ms-expand {
    display: block;
}

.snooc-gebruiker-input-wrap .dropdown.icon,
.snooc-gebruiker-input-wrap .select-icon {
    display: none !important;
}

.snooc-gebruiker-input-wrap::before,
.snooc-gebruiker-input-wrap::after {
    display: none !important;
    content: none !important;
}

/*
|--------------------------------------------------------------------------
| Focus
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-input-wrap input:focus,
.snooc-gebruiker-input-wrap select:focus {
    border-color: var(--sn-red) !important;

    box-shadow:
        inset 0 0 0 1px var(--sn-red),
        0 0 0 3px rgba(159, 29, 53, 0.10) !important;
}

.snooc-gebruiker-input-wrap input:disabled,
.snooc-gebruiker-input-wrap select:disabled {
    opacity: 0.7;

    cursor: wait;
}

/*
|--------------------------------------------------------------------------
| Inline opslagstatus
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-field-status {
    position: absolute;
    top: 50%;
    right: 13px;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    font-size: 9px;

    transform: translateY(-50%);

    pointer-events: none;
}

.snooc-gebruiker-field-status.is-saving {
    color: #6b7280;
}

.snooc-gebruiker-field-status.is-saved {
    color: #15803d;
}

.snooc-gebruiker-field-status.is-error {
    color: #be123c;
}

/*
|--------------------------------------------------------------------------
| Koppelingen
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-links {
    display: grid;
    gap: 13px;
}

.snooc-gebruiker-link-card {
    display: grid;
    grid-template-columns:
        44px
        minmax(0, 1fr)
        38px;
    align-items: center;
    gap: 14px;

    padding: 15px;

    border: 1px solid #eadde0;
    border-radius: 14px;

    background: #fffafb;
}

.snooc-gebruiker-link-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    background: var(--sn-red-soft);
    color: var(--sn-red);
}

.snooc-gebruiker-link-fields {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.3fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr);
    align-items: start;
    gap: 12px;

    min-width: 0;
}

/*
|--------------------------------------------------------------------------
| Lege toestand
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 35px 20px;

    border: 1px dashed var(--sn-border-strong);
    border-radius: 14px;

    background: #fffafb;

    color: var(--sn-muted);
    text-align: center;
}

.snooc-gebruiker-empty > i {
    color: var(--sn-red);

    font-size: 24px;
}

.snooc-gebruiker-empty strong {
    color: var(--sn-text);

    font-size: 13px;
}

.snooc-gebruiker-empty p {
    margin: 0;

    font-size: 11px;
    line-height: 1.5;
}

/*
|--------------------------------------------------------------------------
| Modal
|--------------------------------------------------------------------------
*/

body.snooc-modal-open {
    overflow: hidden;
}

.snooc-gebruiker-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;
}

.snooc-gebruiker-modal[hidden] {
    display: none !important;
}

.snooc-gebruiker-modal-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 0;

    border: 0;

    background: rgba(37, 23, 27, 0.58);

    cursor: default;

    backdrop-filter: blur(3px);
}

.snooc-gebruiker-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 430px);
    padding: 25px;

    border: 1px solid var(--sn-border);
    border-radius: 18px;

    background: #ffffff;

    text-align: center;

    box-shadow:
        0 24px 70px rgba(37, 23, 27, 0.28);
}

.snooc-gebruiker-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin: 0 auto 14px;

    border-radius: 15px;

    background: var(--sn-red-soft);
    color: var(--sn-red);

    font-size: 20px;
}

.snooc-gebruiker-modal-dialog h2 {
    margin: 0;

    color: var(--sn-text);

    font-size: 19px;
    font-weight: 850;
}

.snooc-gebruiker-modal-dialog > p {
    margin: 8px 0 5px;

    color: var(--sn-muted);

    font-size: 12px;
    line-height: 1.5;
}

.snooc-gebruiker-modal-email {
    display: block;

    color: var(--sn-text);

    font-size: 12px;

    overflow-wrap: anywhere;
}

.snooc-gebruiker-modal-warning {
    margin: 17px 0;

    padding: 10px;

    border: 1px solid #fecdd3;
    border-radius: 10px;

    background: #fff1f2;
    color: #9f1239;

    font-size: 10px;
    font-weight: 750;
}

.snooc-gebruiker-modal-actions {
    display: flex;
    justify-content: center;
    gap: 9px;
}

/*
|--------------------------------------------------------------------------
| Koppelingenkaart-header
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-card-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.snooc-gebruiker-card-header-actions
.snooc-gebruiker-card-main-icon {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    background: var(--sn-red-soft);
    color: var(--sn-red);
}

.snooc-gebruiker-add-link-button,
.snooc-gebruiker-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 9px 13px;

    border: 1px solid var(--sn-red);
    border-radius: 10px;

    background: var(--sn-red);
    color: #ffffff !important;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(159, 29, 53, 0.18);

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.snooc-gebruiker-add-link-button i,
.snooc-gebruiker-add-link-button span,
.snooc-gebruiker-primary-button i,
.snooc-gebruiker-primary-button span {
    color: #ffffff !important;
}

.snooc-gebruiker-add-link-button:hover,
.snooc-gebruiker-add-link-button:focus-visible,
.snooc-gebruiker-primary-button:hover,
.snooc-gebruiker-primary-button:focus-visible {
    border-color: var(--sn-red-dark);

    outline: 0;

    background: var(--sn-red-dark);
    color: #ffffff !important;

    box-shadow:
        0 9px 20px rgba(159, 29, 53, 0.25);

    transform: translateY(-1px);
}

.snooc-gebruiker-primary-button:disabled {
    opacity: 0.65;

    cursor: wait;
    transform: none;
}

/*
|--------------------------------------------------------------------------
| Schoolkoppeling-modal
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-link-modal-dialog {
    width: min(100%, 590px);

    max-height: calc(100vh - 36px);

    overflow-y: auto;

    text-align: left;
}

.snooc-gebruiker-link-modal-dialog
.snooc-gebruiker-modal-icon {
    margin-left: auto;
    margin-right: auto;
}

.snooc-gebruiker-link-modal-dialog > h2,
.snooc-gebruiker-link-modal-dialog > p {
    text-align: center;
}

.snooc-gebruiker-modal-form {
    display: grid;
    gap: 14px;

    margin-top: 20px;
}

.snooc-gebruiker-modal-form
.snooc-gebruiker-field[hidden],
.snooc-gebruiker-snooc-link-info[hidden],
.snooc-gebruiker-modal-form-error[hidden] {
    display: none !important;
}

.snooc-gebruiker-snooc-link-info {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px 12px;

    border: 1px solid #bfdbfe;
    border-radius: 10px;

    background: #eff6ff;
    color: #1e40af;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
}

.snooc-gebruiker-snooc-link-info i {
    flex: 0 0 auto;

    margin-top: 2px;
}

.snooc-gebruiker-modal-form-error {
    padding: 10px 12px;

    border: 1px solid #fecdd3;
    border-radius: 10px;

    background: #fff1f2;
    color: #be123c;

    font-size: 10px;
    font-weight: 750;
    line-height: 1.45;
}

.snooc-gebruiker-link-modal-dialog
.snooc-gebruiker-modal-actions {
    margin-top: 20px;
}

/*
|--------------------------------------------------------------------------
| Trainerknoppen
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-trainer-button,
.snooc-gebruiker-trainer-confirm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;
    padding: 9px 13px;

    border: 1px solid #2563eb;
    border-radius: 10px;

    background: #2563eb;
    color: #ffffff !important;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;

    cursor: pointer;

    box-shadow:
        0 7px 16px rgba(37, 99, 235, 0.18);

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.snooc-gebruiker-trainer-button i,
.snooc-gebruiker-trainer-button span,
.snooc-gebruiker-trainer-confirm-button i,
.snooc-gebruiker-trainer-confirm-button span {
    color: #ffffff !important;
}

.snooc-gebruiker-trainer-button:hover,
.snooc-gebruiker-trainer-button:focus-visible,
.snooc-gebruiker-trainer-confirm-button:hover,
.snooc-gebruiker-trainer-confirm-button:focus-visible {
    border-color: #1d4ed8;

    outline: 0;

    background: #1d4ed8;
    color: #ffffff !important;

    box-shadow:
        0 9px 20px rgba(37, 99, 235, 0.25);

    transform: translateY(-1px);
}

.snooc-gebruiker-trainer-button.is-existing {
    border-color: #bfdbfe;

    background: #eff6ff;
    color: #1d4ed8 !important;

    box-shadow: none;
}

.snooc-gebruiker-trainer-button.is-existing i,
.snooc-gebruiker-trainer-button.is-existing span {
    color: #1d4ed8 !important;
}

.snooc-gebruiker-trainer-button.is-existing:hover,
.snooc-gebruiker-trainer-button.is-existing:focus-visible {
    border-color: #93c5fd;

    background: #dbeafe;
    color: #1e40af !important;
}

.snooc-gebruiker-trainer-button.is-existing:hover i,
.snooc-gebruiker-trainer-button.is-existing:hover span,
.snooc-gebruiker-trainer-button.is-existing:focus-visible i,
.snooc-gebruiker-trainer-button.is-existing:focus-visible span {
    color: #1e40af !important;
}

.snooc-gebruiker-trainer-confirm-button:disabled {
    opacity: 0.65;

    cursor: wait;
    transform: none;
}

/*
|--------------------------------------------------------------------------
| Koppeling verwijderen
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-link-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.snooc-gebruiker-link-delete-button {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    width: 32px;
    min-width: 32px;
    max-width: 32px;

    height: 32px;
    min-height: 32px;
    max-height: 32px;

    padding: 0 !important;
    margin: 0;

    border: 1px solid #fda4af;
    border-radius: 8px;

    background: #fff1f2;
    color: #be123c;

    font-family: inherit;
    line-height: 1;

    cursor: pointer;

    box-shadow: none;
}

.snooc-gebruiker-link-delete-button i {
    margin: 0;
    padding: 0;

    border: 0;

    color: #be123c;

    font-size: 11px;
    line-height: 1;
}

.snooc-gebruiker-link-delete-button:hover,
.snooc-gebruiker-link-delete-button:focus-visible {
    border-color: #fb7185;

    outline: 0;

    background: #ffe4e6;

    box-shadow:
        0 4px 10px rgba(190, 18, 60, 0.14);
}

.snooc-gebruiker-link-delete-button:hover i,
.snooc-gebruiker-link-delete-button:focus-visible i {
    color: #9f1239;
}

/*
|--------------------------------------------------------------------------
| Modalvarianten
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-modal-icon.is-trainer {
    background: #eff6ff;
    color: #2563eb;
}

.snooc-gebruiker-modal-icon.is-danger {
    background: #fff1f2;
    color: #be123c;
}

.snooc-gebruiker-modal-warning.is-info {
    border-color: #bfdbfe;

    background: #eff6ff;
    color: #1e40af;
}

/*
|--------------------------------------------------------------------------
| Trainerstatus
|--------------------------------------------------------------------------
*/

.snooc-gebruiker-trainer-badge.is-inactive {
    border: 1px solid #fecdd3;

    background: #fff1f2;
    color: #be123c;
}

.snooc-gebruiker-trainer-badge.is-inactive i,
.snooc-gebruiker-trainer-badge.is-inactive span {
    color: #be123c;
}

/*
|--------------------------------------------------------------------------
| Gebruiker toevoegen
|--------------------------------------------------------------------------
*/

.snooc-addgebruiker-page
.snooc-gebruiker-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
}

.snooc-addgebruiker-page
.snooc-gebruiker-avatar i {
    margin: 0;
    padding: 0;

    border: 0;

    color: inherit;

    font-size: 18px;
}

.snooc-gebruiker-field-help {
    display: block;

    margin: 5px 0 0;
    padding: 0;

    color: var(--sn-muted);

    font-size: 9px;
    line-height: 1.4;
}

.snooc-gebruiker-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;

    padding: 18px 0 5px;
}

.snooc-addgebruiker-page
.snooc-gebruiker-page-status ul {
    margin: 7px 0 0;
    padding-left: 18px;
}

.snooc-addgebruiker-page
.snooc-gebruiker-page-status li {
    margin: 3px 0;

    line-height: 1.45;
}

.snooc-addgebruiker-page
.snooc-gebruiker-primary-button,
.snooc-addgebruiker-page
.snooc-gebruiker-primary-button i,
.snooc-addgebruiker-page
.snooc-gebruiker-primary-button span {
    color: #ffffff !important;
}

/*
|--------------------------------------------------------------------------
| Addgebruiker: globale select-regels volledig overschrijven
|--------------------------------------------------------------------------
*/

.snooc-addgebruiker-page
.snooc-gebruiker-input-wrap {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;

    overflow: hidden !important;
}

.snooc-addgebruiker-page
.snooc-gebruiker-input-wrap > i:first-child {
    top: 1px !important;
    bottom: auto !important;

    width: 43px !important;
    min-width: 43px !important;
    max-width: 43px !important;

    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
}

.snooc-addgebruiker-page
.snooc-gebruiker-input-wrap input,
.snooc-addgebruiker-page
.snooc-gebruiker-input-wrap select {
    display: block !important;

    box-sizing: border-box !important;

    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;

    vertical-align: top !important;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {
    .snooc-gebruiker-grid {
        grid-template-columns: 1fr;
    }

    .snooc-gebruiker-link-fields {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .snooc-gebruiker-link-fields
    .snooc-gebruiker-field:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .snooc-gebruiker-header {
        align-items: flex-start;
        flex-direction: column;

        padding: 19px;
    }

    .snooc-gebruiker-heading {
        align-items: flex-start;
    }

    .snooc-gebruiker-avatar {
        flex-basis: 49px;

        width: 49px;
        height: 49px;

        border-radius: 14px;

        font-size: 16px;
    }

    .snooc-gebruiker-header-actions {
        align-items: stretch;
        flex-direction: column;

        width: 100%;
    }

    .snooc-gebruiker-header-actions > * {
        width: 100%;
    }

    .snooc-gebruiker-card {
        padding: 17px;
    }

    .snooc-gebruiker-two-columns {
        grid-template-columns: 1fr;
    }

    .snooc-gebruiker-link-card {
        grid-template-columns:
            minmax(0, 1fr)
            38px;
    }

    .snooc-gebruiker-link-number {
        display: none;
    }

    .snooc-gebruiker-link-fields {
        grid-column: 1;

        grid-template-columns: 1fr;
    }

    .snooc-gebruiker-link-fields
    .snooc-gebruiker-field:first-child {
        grid-column: auto;
    }

    .snooc-gebruiker-link-actions {
        grid-column: 2;
        grid-row: 1;

        align-self: start;
    }

    .snooc-gebruiker-modal-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .snooc-gebruiker-modal-actions button {
        width: 100%;
    }

    .snooc-gebruiker-card-header-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .snooc-gebruiker-card-header-actions
    .snooc-gebruiker-card-main-icon {
        align-self: flex-end;
    }

    .snooc-gebruiker-add-link-button,
    .snooc-gebruiker-trainer-button,
    .snooc-gebruiker-trainer-confirm-button {
        width: 100%;
    }

    .snooc-gebruiker-link-modal-dialog {
        max-height: calc(100vh - 24px);

        padding: 20px 16px;
    }

    .snooc-gebruiker-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .snooc-gebruiker-form-actions
    .snooc-gebruiker-secondary-button,
    .snooc-gebruiker-form-actions
    .snooc-gebruiker-primary-button {
        width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Addgebruiker verborgen schoolvelden
|--------------------------------------------------------------------------
*/

.snooc-addgebruiker-page
.snooc-gebruiker-field[hidden],
.snooc-addgebruiker-page
[data-add-bestuur-field][hidden],
.snooc-addgebruiker-page
[data-add-school-field][hidden],
.snooc-addgebruiker-page
[data-add-snooc-info][hidden] {
    display: none !important;
}

/*
|--------------------------------------------------------------------------
| Addtrainer
|--------------------------------------------------------------------------
*/

.snooc-addtrainer-page
[data-addtrainer-bestuur-field][hidden],
.snooc-addtrainer-page
[data-addtrainer-school-field][hidden],
.snooc-addtrainer-page
[data-addtrainer-snooc-info][hidden],
.snooc-addtrainer-page
.snooc-gebruiker-field[hidden] {
    display: none !important;
}

.snooc-addtrainer-page
.snooc-gebruiker-grid {
    align-items: start;
}