/*
Bootstrap 5 uses CSS variables. You can use app-related variables in this file. The standard Bootstrap values are used as a fallback 
Check our Docs for more information: https://go.2sxc.org/app-theme
*/

:root {
  --bs-primary-fallback-app-content: #0060AC;
  --bs-body-color-fallback-app-content: #222222;
  --bs-dark-fallback-app-content: #6c757d;
  --bs-link-color-fallback-app-content: #0060AC;
}

.flip-card {
    background-color: transparent;
    height: 300px;
    perspective: 1000px;
    margin-bottom: 30px;
    border-radius: 4%;
    border: 1px solid #ccc;
    padding: 27px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flip-card:hover {
    box-shadow: rgb(204, 204, 204) 1px 1px 2px;
    cursor: pointer;
    transition: 0.5s;
    text-decoration: none !important;
}

 .flip-card__icon-circle {
    margin-left: auto;
    background-color: #F2F3F5;
    margin-right: auto;
    width: 120px;
    height: 120px;
    text-align: center;
    border-radius: 100px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flip-card__icon--groen {
    color: #5FAD4E !important; /* Approximate green from filter */
}

.flip-card__icon--rood {
    color: #ff0000 !important; /* Approximate red from filter */
}

.flip-card__icon--blauw {
    color: #4A95CC !important;
}

.flip-card__icon--geel {
    color: #FFD447 !important; /* Approximate yellow from filter */
}

.flip-card__icon--orange {
    color: #F28C35 !important; /* Approximate orange from filter */
}

.flip-card h3 {
    font-family: Raleway, Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: 1.31;
    letter-spacing: 1px;
    font-style: normal;
    color: #a2a2a2!important;
    font-size: 16px;
    overflow: hidden!important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.flip-card p {
    color: #333;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}

.flip-card__icon-wrapper {
  display:flex;
  justify-content: center;
  align-items:center;
  flex-column:column;
}

.flip-card__content-wrapper {
    overflow: hidden !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}