recreate project
This commit is contained in:
root
@@ -0,0 +1,443 @@
|
||||
/* ========== RESET & BASE LAYOUT ========== */
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
padding-bottom: 50px;
|
||||
/* adds space above footer */
|
||||
}
|
||||
|
||||
/* ========== CONTAINER & FLEX LAYOUT ========== */
|
||||
/* Avoid overriding Bootstrap's .container-fluid globally, which can break layouts on laptops.
|
||||
If a full-height flex container is needed, prefer a dedicated utility class (e.g., .app-flex). */
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 5px;
|
||||
background-color: #f1f3f4;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 50px;
|
||||
/* <-- add this */
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #fff;
|
||||
padding-top: 10px;
|
||||
border-right: 1px solid #ddd;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: #333;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
background-color: #f1f1f1;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.sidebar a.active {
|
||||
background-color: #007bff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ========== FOOTER ========== */
|
||||
.footer {
|
||||
background-color: #f1f1f1;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
/* prevents overlap */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ========== TABLE STYLING ========== */
|
||||
.table-responsive {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
font-size: 1rem;
|
||||
table-layout: auto;
|
||||
/* Allow tables to shrink on smaller screens; the responsive wrapper will handle overflow when needed. */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Keep headers compact but allow cell content to wrap for better adaptability */
|
||||
th { white-space: nowrap; }
|
||||
td {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere; /* wrap long words/URLs/emails */
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background-color: lightgray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* ========== ALIGNMENT HELPERS ========== */
|
||||
.text-left {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.right-align {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
/* ========== DASHBOARD TITLE ========== */
|
||||
.dashboard-title {
|
||||
/*border-bottom: 4px solid #007bff; */
|
||||
padding-bottom: 10px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dashboard-title h2 {
|
||||
margin: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* ========== FORMS & BUTTONS ========== */
|
||||
.disabled-select,
|
||||
.disabled-checkbox {
|
||||
background-color: #e9ecef;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.custom-button {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.support-form {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
#message {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
/* ========== MESSAGES ========== */
|
||||
.message {
|
||||
text-align: center;
|
||||
margin-top: 20%;
|
||||
}
|
||||
|
||||
.message img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.message-list,
|
||||
.message-form-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* ========== CALENDAR ========== */
|
||||
#calendar-container {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
overflow-x: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* FullCalendar force 100% width */
|
||||
.fc {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fc-scrollgrid,
|
||||
.fc-view,
|
||||
.fc-daygrid,
|
||||
.fc-daygrid-body {
|
||||
width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.fc-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.fc-col-header-cell,
|
||||
.fc-daygrid-day-number,
|
||||
.fc-event {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-frame {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*================DISPLAY ERROR RECTANGLE================*/
|
||||
.alert-error {
|
||||
background-color: #f8d7da;
|
||||
border: 1px solid #f5c2c7;
|
||||
color: #842029;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0 0 5px rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
/*================NAVBAR================*/
|
||||
.custom-navbar {
|
||||
background: linear-gradient(to right,
|
||||
#ffffff 0%, /* almost white */
|
||||
#d8f5d0 40%,
|
||||
#9cd88f 100%
|
||||
);
|
||||
color: #080808;
|
||||
|
||||
padding-top: 0.3rem;
|
||||
padding-bottom: 0.3rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1050;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Toggler icon override */
|
||||
.navbar-toggler {
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Ensure proper spacing for nav links */
|
||||
.nav-link {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Fix collapse dropdown for mobile */
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar-collapse {
|
||||
background: linear-gradient(to right,
|
||||
#c6f7c5 0%,
|
||||
#b6d490 30%,
|
||||
#359f04 100%);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1051;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.navbar .btn {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-logo {
|
||||
height: 80px !important;
|
||||
width: auto !important;
|
||||
object-fit: contain;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.logout-btn {
|
||||
font-weight: bold;
|
||||
padding: 0.25rem 0.75rem; /* smaller height */
|
||||
font-size: 0.95rem; /* slightly smaller text */
|
||||
line-height: 1.2; /* tighter vertical alignment */
|
||||
}
|
||||
|
||||
|
||||
/* ================= PROFILE DROPDOWN ================= */
|
||||
|
||||
.account-btn {
|
||||
background-color: #28a745;
|
||||
border: none;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-menu-custom {
|
||||
right: 0;
|
||||
left: auto;
|
||||
transform: translateX(-75%);
|
||||
width: 1px !important;
|
||||
max-width: 300px !important;
|
||||
background-color: chartreuse;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 0 auto 20px auto;
|
||||
color: rgb(6, 126, 14);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sign-out-btn {
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #2c9b09;
|
||||
background-color: #2c9b09;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dropdown-hover:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 200px;
|
||||
}
|
||||
.menu-title{
|
||||
color: rgba(248, 76, 8, 0.842)
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
animation: flash 1.2s ease-in-out;
|
||||
border: 2px solid red !important;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { background-color: #ffe6e6; }
|
||||
50% { background-color: #ffcccc; }
|
||||
100% { background-color: #fff; }
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
border-color: red !important;
|
||||
}
|
||||
.invalid-feedback {
|
||||
color: red;
|
||||
font-size: 0.875rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.invalid-feedback {
|
||||
color: red;
|
||||
font-size: 0.875em;
|
||||
display: none;
|
||||
}
|
||||
.is-invalid {
|
||||
border-color: red;
|
||||
}
|
||||
@@ -0,0 +1,332 @@
|
||||
/* Inside /css/landing_page.css */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Force Arial font in hero welcome */
|
||||
.welcome-message,
|
||||
.welcome-message h1,
|
||||
.welcome-message h2,
|
||||
.welcome-message h3,
|
||||
.welcome-message h4 {
|
||||
font-family: Arial, sans-serif !important;
|
||||
font-style: normal !important;
|
||||
font-weight: normal !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: white;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
/* Adjust the height as needed */
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
/* Ensures the text stands out against the background */
|
||||
}
|
||||
|
||||
.custom-hero-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 0.5;
|
||||
/* Adjust to make sure the background image doesn't overshadow the text */
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #000000;
|
||||
font: normal;
|
||||
/* White text for better contrast */
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
/* Add shadow for text clarity */
|
||||
}
|
||||
|
||||
.welcome-message h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
/* Adds space after the <h1> */
|
||||
}
|
||||
|
||||
.welcome-message h2 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
/* Adds space after the <h1> */
|
||||
}
|
||||
|
||||
.welcome-message p {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
/* Adds space after the <h1> */
|
||||
}
|
||||
|
||||
.hero-section .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(46, 46, 46, 0.5);
|
||||
/* Adjust the opacity as needed */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-section .slideshow img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.hero-section .welcome-message {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.navigation,
|
||||
aside {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.navigation div,
|
||||
aside div {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #2c9b09;
|
||||
/* Changed background color */
|
||||
color: #fff;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #fff;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footer .social-media img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: black !important;
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
.dropbtn {
|
||||
background-color: #343a40;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropbtn:hover,
|
||||
.dropbtn:focus {
|
||||
background-color: #23272b;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-brand img {
|
||||
height: 40px;
|
||||
/* Adjust height as needed */
|
||||
}
|
||||
|
||||
.secondary-header {
|
||||
background-color: #f8f9fa;
|
||||
padding: 10px 20px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.secondary-header .dropdown {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.secondary-header .dropbtn {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.secondary-header .dropbtn:hover,
|
||||
.secondary-header .dropbtn:focus {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.custom-hero-image {
|
||||
width: 100%;
|
||||
/* Adjust the width as needed */
|
||||
height: 600px;
|
||||
/* Adjust the height as needed */
|
||||
object-fit: fill;
|
||||
/* Ensures the image covers the whole section */
|
||||
}
|
||||
|
||||
/* Ensure header and header are properly positioned */
|
||||
header,
|
||||
.header-menu {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-section img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
/* base footer style; final colors come from .custom-footer override */
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Custom styles for the navbar */
|
||||
.navbar-nav .nav-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
float: left;
|
||||
min-width: 10rem;
|
||||
padding: .5rem 0;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Legacy helper; if used anywhere, adopt selected menu palette */
|
||||
.navbar-custom {
|
||||
background-color: var(--mgmt-menu-bg) !important;
|
||||
color: var(--mgmt-menu-text) !important;
|
||||
}
|
||||
|
||||
/* Footer follows selected menu palette like admin */
|
||||
.custom-footer {
|
||||
background-color: var(--mgmt-menu-bg) !important;
|
||||
color: var(--mgmt-menu-text) !important;
|
||||
}
|
||||
|
||||
.custom-footer a { color: var(--mgmt-menu-text) !important; }
|
||||
|
||||
.custom-footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*footer*/
|
||||
.custom-footer .info-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.custom-footer .info-list li {
|
||||
margin-bottom: .35rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
/* titles */
|
||||
.custom-footer .info-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: .35rem;
|
||||
}
|
||||
|
||||
/* PDF links: inline-block on small (so they center naturally),
|
||||
block + full width on md+ (so text-align: right works) */
|
||||
.custom-footer .pdf-link {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.custom-footer .pdf-link {
|
||||
/*border-left: 1px dashed red;*/
|
||||
display: block;
|
||||
/* make it fill the container */
|
||||
width: 100%;
|
||||
/* ensure full width for alignment */
|
||||
text-align: right;
|
||||
/* align text to the right */
|
||||
}
|
||||
|
||||
.custom-footer .info-title {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* icon baseline alignment */
|
||||
.custom-footer i.fa,
|
||||
.custom-footer i.fas {
|
||||
width: 18px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ensure top alignment of the row */
|
||||
.custom-footer .row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* remove leftover p margins in footer */
|
||||
.custom-footer p {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #90EE90;
|
||||
/* Light green background */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 60px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
/* Align text inside the input to the left */
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #008000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-actions button:hover {
|
||||
background-color: #2a27cf;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forgot-password a {
|
||||
color: #008000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forgot-password a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
/* Navbar styles */
|
||||
.navbar {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-item .nav-link:hover {
|
||||
color: orange !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
width: auto;
|
||||
min-width: 207px;
|
||||
max-width: 100%;
|
||||
padding: 5px;
|
||||
white-space: nowrap;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu .dropdown-item {
|
||||
padding: 8px 10px;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Dropdown on large screens */
|
||||
@media (min-width: 992px) {
|
||||
.navbar-nav .dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive dropdown for smaller screens */
|
||||
@media (max-width: 991px) {
|
||||
.navbar-nav .dropdown:hover .dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar-nav .dropdown-item {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Top right positioning */
|
||||
.top-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* Dropdown hover container */
|
||||
.dropdown-hover {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-hover .dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: white;
|
||||
min-width: 160px;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown-hover:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Profile picture style */
|
||||
.profile-picture {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Dropdown items */
|
||||
.dropdown-item {
|
||||
color: black;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.sign-out-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Form and body styling */
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.btn,
|
||||
.alert {
|
||||
background-color: #f8f9fa;
|
||||
color: #000000;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: #e9ecef;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
label,
|
||||
h1 {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
color: #ffffff;
|
||||
}
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
.circle-box {
|
||||
position: relative;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.3s ease;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
/* Allow Bootstrap bg-* utilities to control color per card */
|
||||
/* background-color intentionally not set here */
|
||||
}
|
||||
|
||||
.circle-box:hover {
|
||||
transform: scale(1.07);
|
||||
}
|
||||
|
||||
/* Ensure readable text even if Bootstrap text-dark was used in markup */
|
||||
/* Respect text utility classes (let text-dark render dark text when present) */
|
||||
|
||||
/* Headings and subtext inside the circle */
|
||||
.circle-box h4 { color: #fff; margin-bottom: .25rem; }
|
||||
.circle-box small { color: rgba(255,255,255,0.9); }
|
||||
|
||||
.hover-popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: white;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
width: 220px;
|
||||
z-index: 9999; /* make sure it's above all */
|
||||
font-size: 0.85rem;
|
||||
margin-top: 10px;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.circle-box:hover .hover-popup {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 992px) {
|
||||
.circle-box { width: 160px; height: 160px; }
|
||||
.hover-popup { width: 200px; }
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.circle-box { width: 120px; height: 120px; font-size: 0.85rem; }
|
||||
.hover-popup { width: 180px; font-size: 0.8rem; }
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-header .logo {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.modal-body h1 {
|
||||
font-size: 1.8em;
|
||||
color: #28a745;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
font-size: 1rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.modal-content {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modal-body h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-header .logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,626 @@
|
||||
:root {
|
||||
--primary-color: #2e7d32;
|
||||
--secondary-color: #4caf50;
|
||||
--accent-color: #1b5e20;
|
||||
--light-bg: #f9f9f9;
|
||||
--text-color: #333;
|
||||
--container-bg: #fff;
|
||||
--shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
--border-radius: 10px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background-color: var(--light-bg);
|
||||
color: var(--text-color);
|
||||
line-height: 1.7;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
|
||||
color: white;
|
||||
padding: 20px 15px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.school-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
max-width: none;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: block;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
padding: 12px 15px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Mobile modal styles - positioned relative to viewport, not parent */
|
||||
/* Hide desktop nav on mobile */
|
||||
@media (max-width: 991px) {
|
||||
.desktop-nav {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide mobile nav on desktop */
|
||||
@media (min-width: 992px) {
|
||||
#policyNav {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.policy-nav {
|
||||
display: none !important;
|
||||
background: white !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
max-width: 100vw !important;
|
||||
max-height: 100vh !important;
|
||||
min-width: 100vw !important;
|
||||
min-height: 100vh !important;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
z-index: 99999 !important;
|
||||
overflow-y: auto !important;
|
||||
overflow-x: hidden !important;
|
||||
box-sizing: border-box !important;
|
||||
transform: none !important;
|
||||
border: none !important;
|
||||
/* Break out of parent container */
|
||||
margin-left: calc(-50vw + 50%) !important;
|
||||
margin-right: calc(-50vw + 50%) !important;
|
||||
}
|
||||
|
||||
.policy-nav.active {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
/* Content wrapper inside modal */
|
||||
.policy-nav > * {
|
||||
padding: 20px 15px !important;
|
||||
width: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Navigation list */
|
||||
.policy-nav ul {
|
||||
list-style: none !important;
|
||||
flex: 1 !important;
|
||||
min-height: calc(100vh - 120px) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 15px 20px 15px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* Ensure nav title has proper spacing */
|
||||
.policy-nav .nav-title {
|
||||
margin-top: 50px !important;
|
||||
margin-bottom: 20px !important;
|
||||
padding: 0 15px !important;
|
||||
}
|
||||
|
||||
/* Close button positioning */
|
||||
.nav-close {
|
||||
position: fixed !important;
|
||||
top: 15px !important;
|
||||
right: 15px !important;
|
||||
z-index: 100000 !important;
|
||||
}
|
||||
|
||||
/* Hide other content when modal is active */
|
||||
body.modal-open .header,
|
||||
body.modal-open .footer,
|
||||
body.modal-open .policy-content {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Ensure modal covers everything */
|
||||
body.modal-open .policy-nav.active {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Close button for mobile modal */
|
||||
.nav-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* Adjust nav title spacing for mobile modal */
|
||||
.policy-nav .nav-title {
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Prevent body scroll when modal is open */
|
||||
body.modal-open {
|
||||
overflow: hidden !important;
|
||||
position: fixed !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
color: var(--primary-color);
|
||||
font-size: 1.2rem;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid var(--secondary-color);
|
||||
}
|
||||
|
||||
.policy-nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.policy-nav li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.policy-nav a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
display: block;
|
||||
padding: 10px 12px;
|
||||
border-left: 4px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: #f8f8f8;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.policy-nav a:hover,
|
||||
.policy-nav a.active {
|
||||
color: var(--primary-color);
|
||||
border-left-color: var(--primary-color);
|
||||
background: #e8f5e9;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.policy-content {
|
||||
background: white;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 25px 20px;
|
||||
box-shadow: var(--shadow);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.policy-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--primary-color);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 35px;
|
||||
scroll-margin-top: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--secondary-color);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h2 i {
|
||||
margin-right: 12px;
|
||||
color: var(--accent-color);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.0rem;
|
||||
margin: 25px 0 15px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h3 i {
|
||||
margin-right: 10px;
|
||||
font-size: 1.0rem;
|
||||
}
|
||||
|
||||
.policy-body {
|
||||
text-align: left;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.policy-body p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.policy-body ul {
|
||||
margin: 15px 0;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.policy-body li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
text-align: left;
|
||||
white-space: normal;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #f1f8e9;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 40px;
|
||||
padding-top: 25px;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 14px 20px;
|
||||
background-color: var(--primary-color);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background-color: var(--accent-color);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.action-btn.print {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.action-btn.print:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px 15px;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 12px 45px 12px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 30px;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.policy-image {
|
||||
max-width: none;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
margin: 15px 0;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Tablet styles */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.policy-nav a {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop styles */
|
||||
@media (min-width: 992px) {
|
||||
.header {
|
||||
padding: 25px 40px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mobile-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
flex-direction: row;
|
||||
padding: 25px;
|
||||
gap: 30px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
/* Override mobile modal styles for desktop */
|
||||
.policy-nav {
|
||||
display: block !important;
|
||||
position: static !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
flex: 0 0 280px;
|
||||
max-height: calc(150vh - 50px);
|
||||
position: sticky !important;
|
||||
top: 25px;
|
||||
align-self: flex-start;
|
||||
border-radius: var(--border-radius) !important;
|
||||
z-index: auto !important;
|
||||
padding: 20px 15px !important;
|
||||
}
|
||||
|
||||
.policy-nav ul {
|
||||
flex: none !important;
|
||||
min-height: auto !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.policy-content {
|
||||
flex: 1;
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Hide close button on desktop */
|
||||
.nav-close {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Reset nav title margin on desktop */
|
||||
.policy-nav .nav-title {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
.policy-nav,
|
||||
.actions-container,
|
||||
.header,
|
||||
.footer,
|
||||
.mobile-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.policy-content {
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,267 @@
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-color: #deffe1;
|
||||
/* original background */
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Optional centering for login-specific pages */
|
||||
body.centered {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #90EE90;
|
||||
/* optional light green for login */
|
||||
}
|
||||
|
||||
/* Registration form */
|
||||
.registration-form {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.registration-form form {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 60px;
|
||||
border-radius: 30px;
|
||||
margin: auto;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.registration-form .form-icon {
|
||||
background-color: #fefefef6;
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: auto auto 50px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.registration-form .form-icon img {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
object-fit: contain;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.registration-form .item {
|
||||
border-radius: 20px;
|
||||
margin-bottom: 25px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.registration-form .create-account {
|
||||
border-radius: 30px;
|
||||
padding: 10px 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background-color: #099909;
|
||||
border: none;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.home-button {
|
||||
border-radius: 30px;
|
||||
padding: 10px 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
background-color: #6d7179;
|
||||
border: none;
|
||||
color: white;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.registration-form .social-media {
|
||||
max-width: 600px;
|
||||
background-color: #fff;
|
||||
margin: auto;
|
||||
padding: 35px 0;
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
color: #9fadca;
|
||||
border-top: 1px solid #dee9ff;
|
||||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.registration-form .social-icons {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.registration-form .social-icons a {
|
||||
font-size: 23px;
|
||||
margin: 0 3px;
|
||||
color: #5691ff;
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
width: 45px;
|
||||
display: inline-block;
|
||||
height: 45px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.registration-form .social-icons a:hover {
|
||||
text-decoration: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Login container */
|
||||
.login-container {
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
padding: 60px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Form elements */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #008000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-actions button:hover {
|
||||
background-color: #006400;
|
||||
}
|
||||
|
||||
.forgot-password {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forgot-password a {
|
||||
color: #008000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forgot-password a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Validation styles */
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
input.is-invalid,
|
||||
select.is-invalid {
|
||||
border: 2px solid #dc3545 !important;
|
||||
background-color: white !important;
|
||||
box-shadow: none !important;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.is-invalid:focus {
|
||||
box-shadow: 0 0 4px 1px rgba(220, 53, 69, 0.5);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Animation for invalid fields */
|
||||
@keyframes flashBorder {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 2px red;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0 0 6px 4px rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-error {
|
||||
animation: flashBorder 0.8s ease-in-out 2;
|
||||
}
|
||||
|
||||
/* Responsive padding */
|
||||
@media (max-width: 576px) {
|
||||
|
||||
.registration-form form,
|
||||
.login-container {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.registration-form .form-icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 30px;
|
||||
line-height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-with-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-with-icon .form-control {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
|
||||
.input-with-icon .toggle-password {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.75rem;
|
||||
transform: translateY(-50%);
|
||||
cursor: pointer;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
|
||||
.alert-danger {
|
||||
background-color: #fff3f3;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
.btn-outline-danger:hover {
|
||||
background-color: #dc3545;
|
||||
color: #fff;
|
||||
}
|
||||
.policy-label::after {
|
||||
content: " *";
|
||||
color: red;
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
/* General styles */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
/* Base font size */
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.left-side,
|
||||
.right-side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.left-side .logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
flex: 1;
|
||||
max-width: 50%;
|
||||
background-color: #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
max-width: 90%;
|
||||
font-size: 1.2rem;
|
||||
/* Increased text size */
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.success-message h1 {
|
||||
color: #4CAF50;
|
||||
font-size: 2.2rem;
|
||||
/* Larger heading */
|
||||
}
|
||||
|
||||
.success-message .highlight-email {
|
||||
font-weight: bold;
|
||||
color: #007BFF;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.success-message .important-note {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
margin-top: 25px;
|
||||
color: #fff;
|
||||
background-color: #007BFF;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.left-side,
|
||||
.right-side {
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.left-side,
|
||||
.right-side {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
max-width: 100%;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.success-message h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.session-timeout-modal {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.session-timeout-modal button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.session-timeout-modal button:hover {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.session-timeout-modal button:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
color: #e74c3c;
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
.left-side .logo {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
/* Adjustable maximum size */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.left-side .logo {
|
||||
max-width: 300px;
|
||||
/* Reduce size on smaller screens */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.left-side .logo {
|
||||
max-width: 150px;
|
||||
/* Further reduce size for very small screens */
|
||||
}
|
||||
}
|
||||
|
||||
/* General styles */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
max-width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-right: 2px solid #ccc;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.left-side .logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.password-reset-container {
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.password-reset-container h2 {
|
||||
font-size: 1.8em;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
color: #555;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.form-actions button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-actions button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
border-right: none;
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.left-side .logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.password-reset-container {
|
||||
margin: 20px 0;
|
||||
max-width: 100%;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,813 @@
|
||||
/********** Template CSS **********/
|
||||
:root {
|
||||
--primary: #008000;
|
||||
--light: #FFF5F3;
|
||||
--dark: #103741;
|
||||
}
|
||||
|
||||
.text-green {
|
||||
color: #008000 !important;
|
||||
}
|
||||
|
||||
.breadcrumb-item.text-green a {
|
||||
color: #008000 !important;
|
||||
}
|
||||
|
||||
.breadcrumb-item.text-green a:hover {
|
||||
color: #006400 !important;
|
||||
}
|
||||
|
||||
.green-title {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
display: none;
|
||||
right: 45px;
|
||||
bottom: 45px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/*** Spinner ***/
|
||||
#spinner {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity .5s ease-out, visibility 0s linear .5s;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#spinner.show {
|
||||
transition: opacity .5s ease-out, visibility 0s linear 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*** Button ***/
|
||||
.btn {
|
||||
font-weight: 500;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: white;
|
||||
border-color: #008000;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #90EE90;
|
||||
border-color: #006400;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.btn-sm-square {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.btn-lg-square {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.btn-square,
|
||||
.btn-sm-square,
|
||||
.btn-lg-square {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.bg-light-green {
|
||||
background-color: #e8f7e8;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
/*** Heading ***/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4,
|
||||
.display-5,
|
||||
.display-6 {
|
||||
font-family: 'Lobster Two', cursive;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-secondary {
|
||||
font-family: 'Lobster Two', cursive;
|
||||
}
|
||||
|
||||
/*** Navbar ***/
|
||||
.navbar .navbar-nav .nav-link {
|
||||
padding: 30px 15px;
|
||||
color: var(--dark);
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.navbar .navbar-nav .nav-link:hover,
|
||||
.navbar .navbar-nav .nav-link.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.navbar.sticky-top {
|
||||
top: -100px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navbar .dropdown-toggle::after {
|
||||
border: none;
|
||||
content: "\f107";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navbar .dropdown-toggle[aria-expanded=true]::after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.navbar .navbar-nav .nav-link {
|
||||
margin-right: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.navbar .navbar-nav {
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid #EEEEEE;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.navbar .nav-item .dropdown-menu {
|
||||
display: block;
|
||||
top: calc(100% - 15px);
|
||||
margin-top: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.navbar .nav-item:hover .dropdown-menu {
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
transition: .5s;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Header - Fixed Version ***/
|
||||
.header-carousel::before,
|
||||
.header-carousel::after,
|
||||
.page-header::before,
|
||||
.page-header::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.header-carousel::before,
|
||||
.page-header::before {
|
||||
top: 0;
|
||||
height: 10px;
|
||||
background: url(../images/bg-header-top.png) center top repeat-x;
|
||||
}
|
||||
|
||||
.header-carousel::after,
|
||||
.page-header::after {
|
||||
height: 19px;
|
||||
bottom: 0;
|
||||
background: url(../images/bg-header-bottom.png) center top repeat-x;
|
||||
}
|
||||
|
||||
.header-carousel .position-absolute {
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.header-carousel .owl-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 8%;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header-carousel .owl-nav .owl-prev,
|
||||
.header-carousel .owl-nav .owl-next {
|
||||
margin: 7px 0;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
background: transparent;
|
||||
border: 1px solid #FFFFFF;
|
||||
border-radius: 45px;
|
||||
font-size: 22px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.header-carousel .owl-nav .owl-prev:hover,
|
||||
.header-carousel .owl-nav .owl-next:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), url(../images/carousel-1.jpg) center center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.breadcrumb-item+.breadcrumb-item::before {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
/*** Header Carousel - Mobile Fix ***/
|
||||
.header-carousel {
|
||||
position: relative;
|
||||
height: 900px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-carousel .owl-carousel-item {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-carousel .owl-carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.header-carousel {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.header-carousel .owl-carousel-item img {
|
||||
position: relative; /* Changed from absolute to relative */
|
||||
min-height: 500px; /* Ensure minimum height */
|
||||
}
|
||||
|
||||
.header-carousel .owl-nav {
|
||||
display: none; /* Optional: hide nav arrows on mobile */
|
||||
}
|
||||
|
||||
.header-carousel .position-absolute {
|
||||
padding: 20px; /* Add padding for mobile content */
|
||||
}
|
||||
|
||||
.header-carousel h1 {
|
||||
font-size: 28px !important;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.header-carousel p {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*** Facility ***/
|
||||
.facility-item .facility-icon {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.facility-item .facility-icon::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, .9);
|
||||
transition: .5s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.facility-item .facility-icon span {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 15px;
|
||||
height: 30px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.facility-item .facility-icon span:last-child {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.facility-item .facility-icon i {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.facility-item .facility-text {
|
||||
position: relative;
|
||||
min-height: 250px;
|
||||
padding: 30px;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.facility-item .facility-text::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(255, 255, 255, .9);
|
||||
transition: .5s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.facility-item .facility-text * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.facility-item:hover .facility-icon::before,
|
||||
.facility-item:hover .facility-text::before {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.facility-item * {
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.facility-item:hover * {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
/*** About ***/
|
||||
.about-img img {
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.about-img img:hover {
|
||||
background: var(--primary) !important;
|
||||
}
|
||||
|
||||
/*** Classes ***/
|
||||
.classes-item {
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.classes-item:hover {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/*** Team ***/
|
||||
.team-item .team-text {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background: #FFFFFF;
|
||||
border: 17px solid var(--light);
|
||||
border-radius: 250px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.team-item:hover .team-text {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/*** Forms ***/
|
||||
.form-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #008000;
|
||||
}
|
||||
|
||||
.form-check-input:checked::before {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
color: #008000;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-check a {
|
||||
color: #008000;
|
||||
text-decoration: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.form-check a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
border-color: red !important;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
font-size: 0.9em;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
/*** Testimonial ***/
|
||||
.testimonial-carousel {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.testimonial-carousel {
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-carousel .testimonial-item .border {
|
||||
border: 1px dashed rgba(0, 185, 142, .3) !important;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-nav {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-nav .owl-prev,
|
||||
.testimonial-carousel .owl-nav .owl-next {
|
||||
position: relative;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
background: var(--primary);
|
||||
border-radius: 45px;
|
||||
font-size: 20px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.testimonial-carousel .owl-nav .owl-prev:hover,
|
||||
.testimonial-carousel .owl-nav .owl-next:hover {
|
||||
background: var(--dark);
|
||||
}
|
||||
|
||||
/*** Footer ***/
|
||||
.footer .btn.btn-social {
|
||||
margin-right: 5px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 45px;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.footer .btn.btn-social:hover {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.footer .btn.btn-link {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
text-transform: capitalize;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.footer .btn.btn-link::before {
|
||||
position: relative;
|
||||
content: "\f105";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
font-weight: 900;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.footer .btn.btn-link:hover {
|
||||
color: var(--primary) !important;
|
||||
letter-spacing: 1px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.footer .form-control {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.footer .copyright {
|
||||
padding: 25px 0;
|
||||
font-size: 15px;
|
||||
border-top: 1px solid rgba(256, 256, 256, .1);
|
||||
}
|
||||
|
||||
.footer .copyright a {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.footer .footer-menu a {
|
||||
margin-right: 15px;
|
||||
padding-right: 15px;
|
||||
border-right: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.footer .copyright a:hover,
|
||||
.footer .footer-menu a:hover {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.footer .footer-menu a:last-child {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/*** User Registration ***/
|
||||
.user-registration {
|
||||
color: #FFFFFF;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.user-registration:hover {
|
||||
color: #008000;
|
||||
}
|
||||
|
||||
/*** Custom Colors ***/
|
||||
.text-purple {
|
||||
color: #6f42c1 !important;
|
||||
}
|
||||
|
||||
.text-teal {
|
||||
color: #20c997 !important;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
color: #fd7e14 !important;
|
||||
}
|
||||
|
||||
.text-pink {
|
||||
color: #e83e8c !important;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #f00e0e !important;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background-color: #6f42c1 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-teal {
|
||||
background-color: #20c997 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
background-color: #fd7e14 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-pink {
|
||||
background-color: #e83e8c !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: #f8f9fa !important;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* Image Container Styles */
|
||||
.image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 600px; /* Increased container width */
|
||||
height: 400px; /* Adjusted height for 4 images */
|
||||
margin: 30px auto;
|
||||
padding-bottom: 40px; /* Footer spacing */
|
||||
}
|
||||
|
||||
/* Base Image Styles */
|
||||
.overlapping-image {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
border: 5px solid white;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Individual Image Positioning */
|
||||
.image1 {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
|
||||
.image2 {
|
||||
top: 30px;
|
||||
left: 180px;
|
||||
z-index: 3;
|
||||
transform: rotate(17deg);
|
||||
}
|
||||
|
||||
.image3 {
|
||||
top: 120px;
|
||||
left: 30px;
|
||||
z-index: 2;
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
.image4 {
|
||||
top: 150px;
|
||||
left: 200px;
|
||||
z-index: 1;
|
||||
transform: rotate(9deg);
|
||||
}
|
||||
|
||||
/* Hover Effects */
|
||||
.overlapping-image:hover {
|
||||
z-index: 10;
|
||||
transform: scale(1.05) rotate(0deg);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Tablet and Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.image-container {
|
||||
height: 700px; /* Taller container for 4 images */
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* Adjusted positioning for tablet */
|
||||
.image1 {
|
||||
top: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.image2 {
|
||||
top: 40px;
|
||||
left: calc(50% - 100px);
|
||||
}
|
||||
|
||||
.image3 {
|
||||
top: 280px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.image4 {
|
||||
top: 280px;
|
||||
left: calc(50% - 90px);
|
||||
}
|
||||
|
||||
.overlapping-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness (smaller devices) */
|
||||
@media (max-width: 500px) {
|
||||
.image-container {
|
||||
height: 800px; /* Even taller for small screens */
|
||||
}
|
||||
|
||||
.overlapping-image {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.image1 {
|
||||
top: 30px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.image2 {
|
||||
top: 30px;
|
||||
left: calc(50% - 75px);
|
||||
}
|
||||
|
||||
.image3 {
|
||||
top: 200px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.image4 {
|
||||
top: 200px;
|
||||
left: calc(50% - 75px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Very small mobile devices */
|
||||
@media (max-width: 400px) {
|
||||
.image-container {
|
||||
height: 650px;
|
||||
}
|
||||
|
||||
.overlapping-image {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.image2, .image4 {
|
||||
left: calc(50% - 65px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user