@charset "ISO-8859-1";


.card-sh {
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
}

.cat-div {
	box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.error {
	color: red;
}

.background-color {
	color: rgb(255, 128, 0);
}


body, html {
    height: 100%;
    font-family:sans-serif;
    text-transform: none;
    display: flex;
    flex-direction: column;
}

.content {
    min-height: 100vh; /* Ensures content takes up at least full height of the screen */
    padding-bottom: 50px; /* Footer height to prevent overlap */
}
 


 /* Change the background color of the select box */
 		.modal-header {
			background-color: #EA7615;
			color: white;
			border-bottom: 2px solid #d66b13;
		}

        select.form-select {
            background-color: #EA7615;
            color: white;
            border-color: #EA7615;
        }

        /* Change the background color of the options in the dropdown */
        select.form-select option {
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
        }

        /* Change the background and color when focused */
        select.form-select:focus {
            border-color: #EA7615;
            box-shadow: 0 0 0 0.25rem rgba(234, 118, 21, 0.25);
        }
        
        /* Style for the success message */
        #successMessage {
            background-color: #d4edda;
            color: #155724;
            padding: 10px;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            margin-bottom: 10px;
            opacity: 1; /* Fully visible */
            transition: opacity 2s ease-out; /* Fade-out effect */
        }
        #successMessage.hidden {
            opacity: 0; /* Fully transparent */
        }
        
         /* Style for the success message */
        #errorMessage {
            background-color: rgb(255, 200, 200);
            color: rgb(255, 0, 0);
            padding: 10px;
            border: 1px solid rgb(255, 200, 200);
            border-radius: 5px;
            margin-bottom: 10px;
            opacity: 1; /* Fully visible */
            transition: opacity 2s ease-out; /* Fade-out effect */
            text-align: center;
        }
        #errorMessage.hidden {
            opacity: 0; /* Fully transparent */
        }
        
         /* Keyframes for fade-out animation */
        @keyframes fadeOut {
            0% {
                opacity: 1; /* Fully visible */
            }
            90% {
                opacity: 0.1; /* Almost invisible */
            }
            100% {
                opacity: 0; /* Fully transparent */
                display: none; /* Hide the element */
            }
        }