.markup-circle {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: large;
    font-weight: 600;
    color: #fff;
    height: 25px;
    width: 25px;
    text-align: center;
    background-color: #5090C1;
    border: 2px solid;
    border-radius: 50%;
    display: inline-block;
}

.information-card:hover {
    background-color: #426988;
    border-bottom: #426988;
}

.holiday-entry {
    border: 1px solid lightgrey;
}


/* Request Table */

.highlight-row {
    background-color: #5090C1;
    color: #fff;
}


/* custom calendar */

.calendar-frame {
    width: 50vw;
    overflow-x: scroll;
    overflow-y: clip;
}

.month {
    padding-left: 13% !important;
}

.day {
    display: flex;
    justify-content: center;
    border: 1px solid black;
    height: 30px;
    min-width: 40px;
}

.week {
    display: flex;
    justify-content: center;
    background-color: lightgrey;
    color: grey;
    border: 1px solid black;
    height: 30px;
    min-width: 50px;
}

.day:hover {
    background-color: lightgrey !important;
    color: black !important;
}

.header-row {
    height: 86px;
}

.legend {
    height: 86px;
    border: 1px solid black;
}

.request-list-item {
    border: 1px solid lightgrey;
}

#requestDetails {
    background-color: rgb(247, 247, 247);
}

.overview-month {
    display: flex;
    justify-content: center;
    border: 1px solid white !important;
    height: 30px;
    min-width: 40px;
}

.overview-user {
    display: flex;
    justify-content: flex-start;
    border: 1px solid white !important;
    height: 30px;
    min-width: 230px;
    padding-left: 5px;
}

.overview-remaining-days {
    display: flex;
    justify-content: flex-end;
    border: 1px solid white !important;
    height: 30px;
    min-width: 100px;
    padding-right: 8px;
}

.overview-day {
    display: flex;
    justify-content: center;
    border: 1px solid lightgray;
    height: 30px;
    min-width: 40px;
}

.month-frame {
    width: fit-content;
}