body {
	background-color: #fafafa;
}

.bg-secondary {
	background-color: #fafafa !important;
}

.card-header {
	background-color: transparent;
}

.custom-card {
	background-color: #fafafa;
	height: 165px;
	background-image: url(order-service.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 12px;
}

.jumbotron {
    position: relative;
    overflow: hidden;
    height: 75vh;
    min-height: 400px;
    background-image: url(slide1.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pointer {
	cursor: pointer;
}

.card-custom {
	border-radius: 0;
}

.card-custom:hover {
	background-color: #ffc107;
}

.custom-input {
	border-radius: 0;
	/** background-color: #ffc107; **/
}

.custom-input:focus {
	border: 1px solid #ffc107 !important;
	outline: none !important;
	box-shadow: none !important;
}

.container {
	padding-right: 20px !important;
	padding-left: 20px !important;
}

.navbar-toggler {
	border: 0;
	color: #ffc107;
	border-radius: 0;
}

.nav-toggler:focus,
.nav-toggler:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg);
    /** filter: invert(70%) sepia(100%) saturate(1000%) hue-rotate(0deg) brightness(100%) contrast(100%); **/
}

#progress-wrapper {
    width: 100%;
    background-color: #ffc107;
    margin-top: 10px;
}

#progress-bar {
    width: 0;
    height: 20px;
    background-color: #4caf50;
    text-align: center;
    line-height: 20px;
    color: white;
}

.dz-image {
	width: 120px !important;
	height: 120px !important;
}

.dz-preview .dz-image {
	border-radius: 0 !important;
}

/* Custom Dropzone CSS */
#my-dropzone {
	max-height: 300px;
    border: 3px dashed #dee2e6;
    padding: 20px;
    border-radius: 0;
    background: #fafafa;
    min-height: 150px;
}

/* Change the color of the focus outline without altering size or shape */
	input:focus, textarea:focus, select:focus {
	    box-shadow: 0 0 0 0.25rem rgb(255, 193, 7) !important; /* Change to your desired color */
	    border-color: #ffc107 !important; /* Ensure border color is also changed */
}
