@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
/* Color of the links BEFORE scroll */
.navbar-scroll .nav-link,
.navbar-scroll .navbar-toggler-icon,
.navbar-scroll .navbar-brand {
    color: #fff;
}

/* Color of the links AFTER scroll */
.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-toggler-icon,
.navbar-scrolled .navbar-brand {
    color: #fff;
}

/* Color of the navbar AFTER scroll */
.navbar-scroll,
.navbar-scrolled {
    background-color: #cbbcb1;
}

.mask-custom {
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, .15);
}

.navbar-brand {
    font-size: 1.75rem;
    letter-spacing: 3px;
}

.home-intro {
    background: linear-gradient(to right, rgba(65, 64, 64, 0.5), rgba(198, 244, 195, 0.5), rgba(0, 0, 0, 0.5)),url('../img/main-image.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 70vh;
}
.card-image {
    border-radius: 50%;
    height: 80px;
    width: 80px;
    font-size: 1.3rem;
    padding-top: 24px;
    margin: auto;
    background-color: darkred;
    color: white;
}

.line {
    width: 310px;
    height: 27px;
    border-bottom-right-radius: 32px;
    background-color: darkred;
    border: 3px solid darkred;
}
/* ****************************************************** */
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    width: 100%;
    height: 450px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
@media(max-width:862px) {
    .flip-box {
        background-color: transparent;
        width: 90%;
        margin: auto;
        height: 400px;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
    }
}
/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
@media(max-width:862px) {
    .flip-box-inner {
        width: 90%;
        margin: auto;
        height: 400px;
        perspective: 1000px; /* Remove this if you don't want the 3D effect */
    }
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
    background-color: #bbb;
    color: black;
}

/* Style the back side */
.flip-box-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
}
.max-height {
    height: 220px;
}
.icon-circle {
    font-size: 32px;
    border: 1px solid deepskyblue;
    background-color: deepskyblue;
    color: white;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    align-content: center;
    justify-content: center;
    padding-top: 4px;
}
.bg-white-outline {
    border: 1px solid white;
    padding: 4px;
    height: auto;
    width: auto;
    color: white;
}
@media(max-width:992px) {
    .max-height {
        height: 410px;
        width: 100%;
    }
}
@media(max-width:650px) {
    .max-height {
        height: 380px;
        width: 100%;
    }
}
@media(max-width:340px) {
    .max-height {
        height: 320px;
        width: 100%;
    }
}

.wrapper {
    max-width: 1100px;
    margin: 15px auto;
}

/* Calendar container */
.container-calendar {
    background: #ffffff;
    padding: 15px;
    max-width: 1000px;
    margin: 0 auto;
    overflow: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
}

/* Event section styling */
#event-section {
    padding: 10px;
    background: #f5f5f5;
    margin: 20px 0;
    border: 1px solid #ccc;
}

.container-calendar #left h1 {
    color: green;
    text-align: center;
    background-color: #f2f2f2;
    margin: 0;
    padding: 10px 0;
}

#event-section h3 {
    color: green;
    font-size: 18px;
    margin: 0;
}

#event-section input[type="date"],
#event-section input[type="text"] {
    margin: 10px 0;
    padding: 5px;
    width: 80%;
}

#event-section button {
    background: green;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.event-marker {
    position: relative;
}

.event-marker::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* event tooltip styling */
.event-tooltip {
    position: absolute;
    background-color: rgba(234, 232, 232, 0.763);
    color: black;
    padding: 10px;
    border-radius: 4px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.event-marker:hover .event-tooltip {
    display: block;
}

/* Reminder section styling */
#reminder-section {
    padding: 10px;
    background: #f5f5f5;
    margin: 20px 0;
    border: 1px solid #ccc;
}

#reminder-section h3 {
    color: green;
    font-size: 18px;
    margin: 0;
}

#reminderList {
    list-style: none;
    padding: 0;
}

#reminderList li {
    margin: 5px 0;
    font-size: 16px;
}

/* Style for the delete buttons */
.delete-event {
    background: rgb(237, 19, 19);
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 10px;
    align-items: right;
}

/* Buttons in the calendar */
.button-container-calendar button {
    cursor: pointer;
    background: green;
    color: #fff;
    border: 1px solid green;
    border-radius: 4px;
    padding: 5px 10px;
}

/* Calendar table */
.table-calendar {
    border-collapse: collapse;
    width: 100%;
}

.table-calendar td,
.table-calendar th {
    padding: 5px;
    border: 1px solid #e2e2e2;
    text-align: center;
    vertical-align: top;
}

/* Date picker */
.date-picker.selected {
    background-color: #f2f2f2;
    font-weight: bold;
    outline: 1px dashed #00BCD4;
}

.date-picker.selected span {
    border-bottom: 2px solid currentColor;
}

/* Day-specific styling */
.date-picker:nth-child(1) {
    color: red;
    /* Sunday */
}

.date-picker:nth-child(6) {
    color: green;
    /* Friday */
}

/* Hover effect for date cells */
.date-picker:hover {
    background-color: green;
    color: white;
    cursor: pointer;
}

/* Header for month and year */
#monthAndYear {
    text-align: center;
    margin-top: 0;
}

/* Navigation buttons */
.button-container-calendar {
    position: relative;
    margin-bottom: 1em;
    overflow: hidden;
    clear: both;
}

#previous {
    float: left;
}

#next {
    float: right;
}

/* Footer styling */
.footer-container-calendar {
    margin-top: 1em;
    border-top: 1px solid #dadada;
    padding: 10px 0;
}

.footer-container-calendar label {
    font-size: 0.8em;
    color: #585858;
    margin-right: 10px;
}
.footer-container-calendar select {
    cursor: pointer;
    background: #ffffff;
    color: #585858;
    border: 1px solid #bfc5c5;
    border-radius: 3px;
    padding: 5px 1em;
}

/* made text glow white and on hover make glow brighter */
.glow-white {
    text-shadow: 0 0 11px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 80px #fff!important;
    color: #000000!important;
}
.glow-white:hover {
     text-shadow: 0 0 15px #fff, 0 0 30px #fff, 0 0 45px #fff, 0 0 60px #fff!important;
     color: #000000!important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}