/* Fancy Tabs */
.fancy-tabs .nav-link {
    color: #fff;
    font-weight: bold;
    border-radius: 10px 10px 0 0; /* Rounded top-left and top-right corners */
    background: linear-gradient(45deg, #020432, #0e014a); /* Gradient background */
    border: 1px solid transparent;
    margin: 2px ;
    border-bottom: 1px solid #ddd; /* Border for the bottom edge to maintain separation from content */
    transition: all 0.3s ease;
}

.fancy-tabs .nav-link:hover {
    background: linear-gradient(45deg,#3232a6,  #3232a6); /* Reverse gradient on hover */
    color: #fff;
    border-color: #868686; /* Border color on hover */
}

.mt-4 {
    margin-top: 1.5rem !important;
}

@media (min-width: 1200px) {
	.container.mt-4 {
		max-width: 100vw;
	}
}	


.modal-custom {
    max-width: 80%; /* Adjust the width as needed */
}

#fileIcon {
    display: none;
    cursor: pointer; /* Optional: change cursor to pointer for better UX */
}

.fancy-tabs .nav-link.active {
    background: linear-gradient(45deg, #4a4748, #4a4748); /* Same gradient as default */
    color: #fff;
    border-color: #868686; /* Border color for active tab */
    border-bottom-color: transparent; /* Hide bottom border for active tab */
}

/* Content Area */
.fancy-content {
    /*background-color: #f1f1f1; */
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Custom Font Awesome Icon Color */
.fas {
    color: #fff;
}

/* Tab Container Style */
.nav-tabs {
    margin-bottom: 20px;
}
    <style>
        body {
            font-size: 14px; /* Smaller font size */
        }
        .highlight {
            font-weight: bold;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
        .yellow-bg {
            background-color: yellow;
        }
        .model-options-header {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .model-options-header i {
            margin-right: 5px;
        }
        .cogwheel-icon {
            font-size: 24px;
            cursor: pointer;
        }
		
		.textarea.form-control {
   			border: 1px rgb(8, 8, 8) solid;
		}
        .icon {
            font-size: 16px;
            cursor: pointer;
        }

        #ModelOptions {
            font-size: 0.8rem; /* Adjust the size as needed */
        }

        #ModelOptions label {
            font-size: 0.8rem; /* Ensure labels have the same small font size */
			margin:0px;
			padding:0px;
        }

        #ModelOptions .form-check-input {
            margin-right: 0.5rem; /* Adjust spacing if needed */
        }
        .form-group {
            width: 100%; /* Ensure the form-group takes up full width */
        }

		.form-control {
			display: block;
			width: 100%;
			height: calc(1.5em + .75rem + 2px);
			padding: .375rem .75rem;
			font-size: 1rem;
			font-weight: 400;
			line-height: 1.5;
			color: #495057;
			background-color: #e8e8e8;
			background-clip: padding-box;
			border: 1px solid #ced4da;
			border-radius: .25rem;
			transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		}
		.icon {
			font-size: 22px;
			cursor: pointer;
			color: black;
		}

		#successIcon {
			color: green;
		}
			
	div#generatedQuestions {
		font-size: 12px;
	}
	
	textarea#chapterTextArea {
		font-size: 10px;
	}
	div#modalBodyContent {
		font
	}	
	table, th, td {
	  border: 1px solid gray;
	}

    </style>