/*
Theme Name: Mijnpersonenalarm dashboard
Author: SimPC
Description: Dashboard in de stijl van Kruiszorgconnect
Version: 1.0.0
*/

@import url(https://fonts.bunny.net/css?family=nunito:800|open-sans:400,700);

:root {
    --font-body: "Open Sans", sans-serif;
    --font-header: "Nunito", sans-serif;
    --bla: #000000;
    --whi: #ffffff;
    --pri: #FFAF00;
    --sec: #3C3C3B;
    --gra: #eeeeee;
    --dgr: #bbbbbb;
}

body {
    background-color: var(--whi);
}

html,
body {
    font-family: var(--font-body);
    scroll-behavior: smooth;
    color: var(--sec);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: var(--font-header);
    text-transform: none;
    line-height: 1.25;
    display: block;
    margin: 0;
}

h1,
.h1 {
    font-size: 2.875rem;
}

h2,
.h2 {
    font-size: 2.0625rem;
}

h3,
.h3 {
    font-size: 1.625rem;
}

h4,
.h4 {
    font-size: 1.5rem;
}

h5,
.h5 {
    font-size: 1.25rem;
}

h6,
.h6 {
    font-size: 1rem;
    padding: 0 0 .25rem;
}

p {
    font-size: 1rem;
    padding: 0;
    margin: 0;
}

a {
    transition: .2s ease-in-out !important;
    color: var(--sec);
}

a:hover {
    color: inherit;
    opacity: .7;
}

a i {
    display: inline-block;
    padding-right: .5rem;
    font-size: 1.25rem;
}

form span[class^="text-"],
form+span[class^="text-"] {
    font-family: var(--font-header);
    margin-top: -.75rem;
    display: block;
}

.btn,
.btn:focus,
.btn:active {
    font-family: var(--font-header);
    background-color: var(--pri);
    transition: .2s ease-in-out;
    background-image: none;
    text-decoration: none;
    display: inline-block;
    border-radius: 7.5px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--sec);
    line-height: 40px;
    padding: 0 40px;
    border: 0;
    flex: 1 1;
    margin: 0;
}

.btn:hover {
    background-color: var(--pri);
    text-decoration: none;
    color: var(--sec);
    opacity: .7;
}

.btn-dark,
.btn-dark:focus,
.btn-dark:active {
    background-color: var(--sec);
    color: var(--whi);
}

.btn-dark:hover {
    background-color: var(--sec);
    text-decoration: none;
    color: var(--whi);
    opacity: .7;
}

.btn[disabled] {
    cursor: not-allowed;
}

input::placeholder,
select::placeholder,
textarea::placeholder {
    color: var(--dgr);
}

input:valid:focus,
select:valid:focus {
    box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

input:invalid:not(:placeholder-shown):not(:focus):not(:required),
select:invalid:not(:placeholder-shown):not(:focus):not(:required) {
    box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%) !important;
}

textarea {
    height: 10rem;
    margin: 1rem 0;
    font-size: 1rem;
    max-width: 100%;
    color: var(--sec);
    border: 0 !important;
    width: 100% !important;
    font-family: var(--font-body);
    padding: 10px 15px !important;
    border-radius: 7.5px !important;
    background-color: var(--whi) !important;
}

input {
    outline: none;
    max-width: 100%;
    min-height: 40px;
    border: 0 !important;
    margin: .15rem 0 1rem;
    line-height: 1 !important;
    color: var(--sec) !important;
    padding: 5px 15px !important;
    font-size: 1.2rem !important;
    font-family: var(--font-header);
    border-radius: 7.5px !important;
    background-color: var(--whi) !important;
}

iframe input,
#map input {
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
}

input::placeholder {
    color: var(--dgr) !important;
}

input[type="checkbox"] {
    appearance: none;
    margin: 0;
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
    min-height: unset;
    position: relative;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: 0.2s ease-in-out;
}

input[type="checkbox"]::after {
    content: "\F26E";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 1;
    color: transparent;
    font-size: 1.25rem;
    position: absolute;
    font-family: bootstrap-icons !important;
}

input[type="checkbox"]:checked::after {
    color: var(--whi);
}

input[type="checkbox"]:hover,
input[type="checkbox"]:checked:hover {
    opacity: .7;
}

input[type="checkbox"]:checked:focus {
    opacity: 1;
}

input[type="checkbox"]:checked {
    background-color: var(--bs-teal) !important;
}

label {
    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
    font-family: var(--font-header);
    font-weight: bold;
    font-size: .95rem;
    color: var(--sec);
    display: block;
}

input+label {
    padding-left: .5rem;
    font-size: 1.2rem;
    line-height: 1.2;
    display: inline;
    cursor: pointer;
}

input:hover+label {
    opacity: .7;
}

.form-switch {
    margin-bottom: .25rem;
    padding-left: 0;
}

.form-switch>.form-check-input {
    border-radius: 50px !important;
    transition: 0.2s ease-in-out;
    margin: .125rem 0 0;
    float: left;
}

.form-switch>.form-check-input:hover {
    background-color: var(--whi);
}

.form-switch>.form-check-input::after {
    content: none;
}

.form-switch>.form-check-input.black {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: var(--dgr) !important;
}

.form-switch>.form-check-input.black:checked {
    background-color: var(--bs-primary) !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    float: none !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    gap: .5rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    margin: 0 !important;
}

select {
    height: 40px;
    outline: none;
    cursor: pointer;
    max-width: 100%;
    margin: .15rem 0 0;
    border: 0 !important;
    color: var(--sec) !important;
    padding: 0 12.5px !important;
    font-size: 1.2rem !important;
    font-family: var(--font-header);
    border-radius: 7.5px !important;
    background-color: var(--whi) !important;
    transition: opacity 0.2s ease-in-out !important;
}

select:hover {
    opacity: .7;
}

select option {
    font-size: 1rem !important;
}

.dataTables_wrapper {
    gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
    justify-content: space-between;
}

.dataTables_wrapper::after {
    content: none !important;
}

.table {
    transition: .5s ease-in-out;
    width: 100% !important;
    border-spacing: 0;
    max-width: 100%;
}

.table.loading {
    cursor: progress !important;
    opacity: .7;
}

.table,
.table * {
    border: 0 !important;
}

.table-dark {
    font-family: var(--font-header);
    --bs-table-bg: var(--sec);
    color: var(--whi);
}

.table tr td {
    line-height: 24px !important;
    padding: 10px !important;
}

.table tbody tr {
    --bs-table-accent-bg: transparent !important;
    background: var(--gra) !important;
}

.table tbody tr:nth-last-child(2n-1) {
    background-color: rgba(255, 255, 255, .5) !important;
}

.table a i {
    font-size: 1rem;
}

.dataTables_wrapper .table~div {
    padding: 0;
}

.dataTables_wrapper .table~.dataTables_paginate {
    overflow: hidden;
    border-radius: 7.5px;
}

.dataTables_wrapper .table~.dataTables_paginate,
.dataTables_wrapper .table~.dataTables_paginate>span {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.dataTables_wrapper .table~.dataTables_paginate>span>.paginate_button {
    min-width: min-content;
    flex: 1;
}

.dataTables_wrapper .table~.dataTables_paginate .paginate_button,
.dataTables_wrapper .table~.dataTables_paginate .paginate_button:hover {
    background: transparent !important;
    background-color: var(--dgr) !important;
    font-weight: bold !important;
    transition: 0.2s ease-in-out;
    color: var(--sec) !important;
    cursor: pointer !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0;
}

.dataTables_wrapper .table~.dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .table~.dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .table~.dataTables_paginate .paginate_button.current,
.dataTables_wrapper .table~.dataTables_paginate .paginate_button.current:hover {
    background-color: var(--dgr) !important;
    color: var(--sec) !important;
    cursor: default !important;
    opacity: .7;
}

.dataTables_wrapper .table~.dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .table~.dataTables_paginate .paginate_button.disabled:hover {
    background-color: var(--dgr) !important;
    cursor: not-allowed !important;
    color: var(--sec) !important;
    opacity: .7;
}

.dataTables_wrapper .table~.dataTables_paginate .paginate_button.current,
.dataTables_wrapper .table~.dataTables_paginate .paginate_button.current:hover {
    background-color: transparent !important;
}

/* ==== MISC ==== */
#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}

/* ==== HEADER ==== */
.navbar.navbar-light {
    background-color: var(--whi);
}

.navbar .navbar-nav .nav-link {
    font-family: var(--font-header);
    font-size: 1.125rem;
    color: var(--sec);
}

.navbar .logo {
    width: 300px;
    max-width: 60vw;
}

.navbar-toggler {
    background-color: var(--sec);
    border-radius: 0;
    padding: .375rem;
    border: 0;
}

.navbar-toggler i {
    font-size: 1.5rem;
    color: var(--whi);
}

/* ==== LAYOUT ==== */
.container {
    max-width: 1400px;
    padding: 0;
}

.container-big {
    max-width: 1650px !important;
}

.row {
    padding: 80px 25px;
}

/* ==== ALERTS ==== */
.alert {
    font-family: var(--font-header);
    align-items: center;
    padding: 15px 20px;
    font-size: 1.1rem;
    color: var(--sec);
    border-radius: 0;
    display: flex;
    border: 0;
}

.alert i.bi {
    padding-right: 1rem;
    font-size: 3rem;
    line-height: 1;
    float: left;
}

.alert .btn-close {
    margin: -15px -20px -15px auto;
    align-self: stretch;
    color: var(--sec);
    position: static;
    height: unset;
    opacity: 1;
    bottom: 0;
}

.alert .btn-close:hover {
    opacity: .7;
}

/* ==== CARDS, MODAL ==== */
.card,
.modal-content {
    background: var(--gra);
    border-radius: 0;
    border: 0;
}

.card {
    background: transparent
}

.modal-content {
    box-shadow: 5px 5px 5px 0 rgb(var(--bla) / 25%);
}

.card .card-header,
.modal-content .modal-header {
    justify-content: center;
    background: var(--sec);
    align-items: center;
    padding: 13px 35px;
    line-height: 51px;
    font-size: 1.5rem;
    color: var(--whi);
    display: flex;
    height: 77px;
    border: 0;
    gap: 1rem;
}

.modal-content .modal-header .modal-title {
    line-height: initial;
    font-size: inherit;
}

.card>*,
.modal-content>* {
    border-radius: 0 !important;
}

.card .card-body {
    background: var(--gra);
    padding: 35px 50px;
}

.modal-content .modal-body {
    padding: 25px 35px 1rem;
}

.modal-content .modal-footer {
    padding: 1rem 35px 25px;
    border-top: 0;
}

.card .row {
    padding: 0;
}

.card .progress {
    background: var(--whi);
    border-radius: 100px;
}

.card .progress>.progress-bar {
    background: rgb(0, 200, 50);
}

/* ==== INCIPIT ==== */
#incipitContent {
    font-family: var(--font-header);
    padding: 1rem;
    gap: 1.5rem;
}

#incipitContent p {
    font-size: 1.2rem;
    margin-top: 0;
}

#incipitContent .progress {
    background-color: var(--gra);
    border-radius: 100px;
    max-width: 500px;
    height: 2rem;
    width: 100%;
}

@keyframes progress {
    23% {
        width: 0%;
    }

    33% {
        width: 50%;
    }

    56% {
        width: 50%;
    }

    66% {
        width: 75%;
    }

    90% {
        width: 75%;
    }

    100% {
        width: 100%;
    }
}

@keyframes progress1 {
    10.5% {
        width: 0;
    }

    12.5% {
        width: 12.5%;
    }

    23% {
        width: 12.5%;
    }

    25% {
        width: 25%;
    }

    35.5% {
        width: 25%;
    }

    37.5% {
        width: 37.5%;
    }

    48% {
        width: 37.5%;
    }

    50% {
        width: 50%;
    }

    60.5% {
        width: 50%;
    }

    62.5% {
        width: 62.5%;
    }

    73% {
        width: 62.5%;
    }

    75% {
        width: 75%;
    }

    85.5% {
        width: 75%;
    }

    87.5% {
        width: 87.5%;
    }

    98% {
        width: 87.5%;
    }

    100% {
        width: 100%;
    }
}

/* ==== FOOTER ==== */
.footer {
    font-family: var(--font-header);
}

.bg-primary {
    background-color: var(--pri) !important;
}

.bg-secondary,
.bg-dark {
    background-color: var(--sec) !important;
}

@media (max-width: 1199px) {
    .btn,
    .btn:hover,
    .btn:focus {
        padding: 8px 40px !important;
        line-height: 1.6;
    }

    .table {
        width: 100% !important;
    }

    .table,
    .table thead,
    .table tbody {
        flex-direction: column;
        display: flex;
    }

    .table thead>tr>td,
    .table tbody>tr>td {
        text-align: left !important;
        display: block;
    }

    .table tbody>tr>td.d-none~td:not(#test) {
        background-color: transparent !important;
    }

    .table tbody>tr>td:not(.table-dark):not(.d-none) {
        background-color: var(--gra);
    }

    .table tbody>tr>td:not(.table-dark):nth-child(2n-1) {
        background-color: rgba(255, 255, 255, .5) !important;
    }

    .table tbody>tr>td:empty {
        display: none;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_length label {
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }

    .dataTables_wrapper .table~.dataTables_paginate>* {
        flex: 0 0 100%;
    }

    .alert {
        font-size: 1rem;
    }

    .alert i.bi {
        display: none;
    }
}

@media (max-width: 1023px) {
    .row {
        padding: 40px 25px;
    }

    .card .alert {
        display: none;
    }

    .card .card-header {
        font-size: 1.25rem;
        line-height: 1.5;
        min-height: 65px;
        height: unset;
    }

    .card .card-body {
        padding: 25px 35px;
    }

    .alert.alert-dismissible {
        padding-right: calc(20px + 48px);
    }
}

@media (max-width: 991px) {
    body:has(.navbar-collapse.show) {
        overflow-y: hidden;
    }

    .navbar,
    .navbar-collapse {
        box-shadow: 0 5px 5px 0px rgb(0 0 0 / 19%);
    }

    .navbar-collapse {    
        transform: translateY(100%);
        background: var(--whi);
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .navbar-nav .nav-item .nav-link {
        font-family: var(--font-header);
        padding: 20px 30px;
        font-size: 1.1rem;
        color: var(--sec);
    }

    .navbar-nav .nav-item .nav-link:hover {
        background-color: var(--gra);
    }

    .navbar-nav .nav-item .nav-link i {
        padding-right: 1rem;
        line-height: 1;
    }

    .dataTables_wrapper .table~.dataTables_paginate,
    .dataTables_wrapper .table~.dataTables_paginate span {
        gap: .5rem;
    }

    .dataTables_wrapper .table~.dataTables_paginate .paginate_button {
        border-radius: 7.5px !important;
    }
}

@media (max-width: 767px) {
    .btn,
    .btn:hover,
    .btn:focus {
        padding: 8px 30px !important;
        font-size: 1.1rem;
    }

    label,
    input+label {
        font-size: 1.1rem;
        line-height: 1.15;
    }
}