:root {
    /* Color palet */
    --blue: var(--ch-blue);
    --green: var(--ch-green);
    --grey: var(--ch-grey);
    --pink: var(--mp-pink);
    --red: var(--ch-red);
    --yellow: var(--ch-yellow);

    /* Meetpoint palet */
    --mp-blue: #356E9E;
    --mp-green: #67B045;
    --mp-orange: #F06636;
    --mp-pink: #D991B8;
    --mp-purple: #A8498C;
    --mp-yellow: #F1DE2B;

    /* Fresh palet */
    --mp-fresh-blue: #4a90e2;
    --mp-fresh-green: #9bdc6e;
    --mp-fresh-purple: #d38fce;
    --mp-fresh-yellow: #f7e678;

    /* Colorhunt palet */
    --ch-blue: #4D96FF;
    --ch-green: #2a9134;
    --ch-grey: #ededed;
    --ch-red: #FF6B6B;
    --ch-yellow: #FFD93D;
}


@font-face {
    font-family: "Archivo-Regular";
    src: url('fonts/Archivo/Archivo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Heebo-Regular";
    src: url('fonts/Heebo/Heebo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url('fonts/Inter/Inter_28pt-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

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

body {
    font-family: 'Inter', "Comic Sans MS", sans-serif !important;
}

.container {
    width: 100vw !important;
    max-width: 100vw !important;
}

.btn-primary {
    background-color: var(--blue) !important;
    border: none !important;
}

.btn-success {
    background-color: var(--green) !important;
    border: none !important;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    25% {
        transform: scale(1.1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    75% {
        transform: scale(1.1);
        opacity: 0.9;
    }
}

.heartbeat {
    display: inline-block; /* of inline of block, afhankelijk van je behoefte */
    animation: heartbeat 1.5s ease-in-out infinite;
}

.notif {
    padding: 15px;
    border-radius: 5px;
    position: absolute;
    top: -35px;
    right: 10px;
    z-index: 9;
    box-shadow: 2px 6px 5px -1px rgba(0, 0, 0, 0.32);
}

.notif-success {
    background-color: var(--green) !important;
    color: white;
}

.notif-danger {
    background-color: #ff2e2e !important;
    color: white;
}

.notif-show {
    animation: moveDown 0.5s ease-in-out forwards;
}

.notif-hide {
    animation: moveUp 0.3s ease-in-out forwards;
}

/* Definieer de animatie */
@keyframes moveDown {
    0% {
        transform: translateY(0); /* Startpositie */
    }
    100% {
        transform: translateY(100px); /* Verplaats de div 300px naar beneden */
    }
}

/* Definieer de animatie */
@keyframes moveUp {
    0% {
        transform: translateY(100px); /* Startpositie */
    }
    100% {
        transform: translateY(-35px); /* Verplaats de div 300px naar beneden */
    }
}

.empty-img {
    width: 300px !important;
    border-radius: 50px !important; /* Optioneel voor afgeronde hoeken */
}

.btn-xl {
    padding: 20px !important;
    font-size: 15pt !important;
}

.spinner-border {
    height: 25px !important;
    width: 25px !important;
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}