/* commonstyles.css */ /* Form controls and buttons default to the browser's system UI font, which clashes with the Plus Jakarta Sans used everywhere else. Force them to inherit so inputs, selects, textareas and buttons match the page font. */ input, select, textarea, button, optgroup { font-family: inherit; } /* select2 builds its own widget/dropdown markup outside the form control (the dropdown is appended to ), so it inherits neither the page font nor the 13.5px control size — force both */ .select2-container, .select2-container .select2-selection__rendered, .select2-container .select2-search__field, .select2-results__option { font-family: inherit; font-size: 13.5px; } html, body { height: 100%; margin: 0; } body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; } .main-container { flex: 1 0 auto; } #footer { flex-shrink: 0; width: 100%; } .navbar-logo { max-height: 53px; width: auto; } .navbar>.d-flex { min-width: 100% } .login-box { max-width: 600px; /* width: 100%; */ /* padding: 20px; */ /* border: 1px solid #ddd; */ /* border-radius: 5px; */ } /* .login-box-container { height: calc(80vh - 92px); display: flex; align-items: center; justify-content: center; } */ #login-accordion .accordion-button { font-size: 1em; } #login-accordion .accordion-body { font-size: 1.2em; } .input_icon { height: 40px; width: auto; } /* #doc_accordion label { font-weight: bold; } */ .docview { max-width: 100%; height: auto; max-height: 300px; border: 1px solid #aaa; /* Border color */ border-radius: 10px; /* Border radius for rounded corners */ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Box shadow */ } .fileupload_description { padding-left: 10px; } .form-label.no_bottom_margin { margin-bottom: 0rem; } ul.navbar-nav { font-size: 1.5rem; text-align: center; } .offcanvas-title { font-size: 1.5rem; } .menu_logo { width: 80%; } ul.navbar-nav>li { border: 1px solid #fff; /* Border color */ } ul.navbar-nav>li:hover { border: 1px solid #e9e5e5; /* Border color */ background-color: #7ba2f5; } .form-floating>label { color: #69707c; } input[type="checkbox"].\ { /* Enlarge checkboxes.from https://stackoverflow.com/a/29359421/4355695 */ transform: scale(1.5, 1.5); } .fullname { font-weight: bold; } #application_id { text-align: right; } input[type="file"].upload_input_tag { display: none; } /* Interview Slots page */ /* #slots-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } */ #slots-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Initial grid setup */ gap: 16px; /* Gap between grid items */ justify-content: center; } @media (max-width: 600px) { #slots-container { grid-template-columns: 0.9fr; /* Collapse to 1 item per row on smaller screens */ } } .slot-box { border: 1px solid #ccc; padding: 10px; text-align: center; cursor: pointer; /* margin-top: 10px; margin-bottom: 10px; */ /* width: 70%; */ transition: 0.3s; /* magic! */ } .slot-box.disabled { background-color: lightgray; cursor: not-allowed; border: 1px solid gray; } .slot-box.selected { background-color: lightgreen; border: 1px solid green; } #slot_request { font-size: 1.2em; } #positive_flow_holder { transition: 0.3s; } .tabulator-menu { padding: 10px; background-color: #fdbe15; } .academic-detail-photo { width: 175px; height: 225px; object-fit: cover; } .acad-remarks { background-color: rgb(228, 245, 255); } #academic-details-table { background-color: rgb(255, 245, 186); } .large-checkbox{ transform: scale(1.5); } .g_id_signin iframe { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; } #announcements-container { pointer-events: none; max-width: 500px; margin-right: 15px; margin-top: 94px; width: 95%; z-index: 1050; } #announcements-container .alert { pointer-events: auto; box-shadow: 0 4px 8px rgba(0,0,0,0.1); animation: slideInFromRight 0.5s ease forwards; margin-bottom: 10px; } #announcements-container .slide-out { animation: slideOutToRight 0.3s ease forwards; } @keyframes slideInFromRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutToRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @media (max-width: 768px) { #announcements-container { max-width: 90%; margin-right: 5%; margin-top: 90px; } } @media (max-width: 576px) { #announcements-container { max-width: 95%; margin-right: 2.5%; right: 0; } } .select2-dropdown { max-height: 400px !important; } .select2-results__options { max-height: 350px !important; overflow-y: auto !important; } /* Accordion headings — one unified light-blue scheme across all pages: primary-soft background with black text in both states, darker-blue hover. No margin below the button — the old .5rem gap left a white strip. */ .accordion-button { border: none; margin-bottom: 0; border-radius: 0.375rem !important; background-color: var(--primary-soft, #eaf1fb); color: var(--ink, #16202b); } .accordion-button:not(.collapsed) { background-color: var(--primary-soft, #eaf1fb); color: var(--ink, #16202b); box-shadow: none; } .accordion-button:hover { background-color: #dce8fa; } /* crisp darker light-blue edge on every accordion item, app-wide */ .accordion-item { border: 1.5px solid #8fb2e6; } .dashboard-card { transition: all 0.3s ease; border: none; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border-radius: 15px; overflow: hidden; } .dashboard-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .dashboard-card .card-body { padding: 2rem; text-align: center; } .dashboard-icon { font-size: 3rem; margin-bottom: 1rem; display: block; } .card-profile .dashboard-icon { color: #007bff; } .card-academic .dashboard-icon { color: #28a745; } .card-documents .dashboard-icon { color: #dc3545;} .card-scholarships .dashboard-icon {color: #ffc107; } .card-applications .dashboard-icon { color: #6f42c1; } .card-verification .dashboard-icon { color: #17a2b8; } .welcome-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 1.25rem 2rem; margin-bottom: 2rem; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .welcome-section h2 { color: white; margin-bottom: 0; } .welcome-section .name_welcome { color: #ffd700; } .dashboard-grid { gap: 2rem; } .section-title { color: #2c3e50; font-weight: 600; margin-bottom: 2rem; text-align: center; } @media (max-width: 768px) { .dashboard-grid { gap: 1.5rem; } .welcome-section { padding: 2rem 1.5rem; } .dashboard-icon { font-size: 2.5rem; } } #nprogress .bar { height: 6px !important; background: #0d6efd } .zammad-form { color: #000 !important; } #zammad-form-agreement-inline { transform: scale(1.5); } .zammad-form .btn { background-color: #0056b3 !important; border-color: #0056b3 !important; color: white !important; padding: 8px 16px !important; } .zammad-form .btn:hover { background-color: #004494 !important; border-color: #004494 !important; } #zammad-contact-form .zammad-form-group input[name="email"] { display: none !important; } #zammad-contact-form .zammad-form-group label[for="zammad-form-email-inline"] { display: none !important; } /* documents page accordion — unified light-blue (no rotating palette) */ .documents-accordion .accordion-item .accordion-button { background-color: var(--primary-soft, #eaf1fb) !important; color: var(--ink, #16202b) !important; } .documents-accordion .accordion-item .accordion-button:hover { background-color: #dce8fa !important; } /* one consistent light-blue header for the profile + scholarship-form accordions (design-system primary-soft), with a darker blue hover — no rainbow palette */ .profile-shell .accordion-item .accordion-button, .sd-detail .accordion-item .accordion-button { background-color: var(--primary-soft, #eaf1fb) !important; color: var(--ink, #16202b) !important; } .profile-shell .accordion-item .accordion-button:hover, .sd-detail .accordion-item .accordion-button:hover { background-color: #dce8fa !important; } #__printArea { display: none; } @media print { .no-print { display: none !important; } body > *:not(#__printArea) { display: none !important; } #__printArea { display: block !important; padding: 20px; font-family: Arial, sans-serif; font-size: 12px; line-height: 1.4; } #__printArea .print-header { text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #333; } #__printArea .print-header h4 { margin: 0; font-size: 18px; color: #333; } #__printArea .print-header p { margin: 5px 0; font-size: 12px; color: #666; } #__printArea .section-block { margin-bottom: 15px; page-break-inside: avoid; break-inside: avoid; } #__printArea .section-header { background-color: #f8f9fa !important; padding: 8px 10px; border-left: 4px solid #0d6efd; margin-bottom: 8px; } #__printArea .section-header h5, #__printArea .section-header h6 { margin: 0; font-size: 14px; font-weight: bold; } #__printArea .section-content { padding-left: 10px; } #__printArea .detail-row { margin-bottom: 5px; } #__printArea .subsection { padding: 8px 0; page-break-inside: avoid; break-inside: avoid; } #__printArea .text-success { color: #198754 !important; } #__printArea .text-muted { color: #6c757d !important; } @page { margin: 1.5cm; size: A4; } body { print-color-adjust: exact; -webkit-print-color-adjust: exact; } .card { page-break-inside: avoid; break-inside: avoid; } } .custom-logout-btn { background-color: #dc3545; color: white; border: 1px solid #dc3545; } .custom-logout-btn:hover { background-color: transparent; color: #dc3545; } /* ============================================================ SITE FOOTER ============================================================ */ .sf-footer { background: #f4f6f8; border-top: 1px solid #ebeef1; font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif; color: #16202b; } .sf-footer-inner { max-width: 1320px; margin: 0 auto; padding: 36px 28px 0; } .sf-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; align-items: start; } .sf-footer-logo { max-height: 44px; width: auto; } .sf-footer-tagline { font-size: 12px; color: #9aa3b0; font-weight: 600; margin-top: 8px; margin-bottom: 0; } .sf-footer-col-heading { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #9aa3b0; margin-bottom: 14px; } .sf-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; } .sf-footer-links a { font-size: 13.5px; font-weight: 600; color: #5b6573; text-decoration: none; transition: color .14s, padding-left .14s; } .sf-footer-links a:hover { color: #2f5fc0; padding-left: 3px; } .sf-footer-qr-link { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; text-decoration: none; color: #198754; font-size: 12.5px; font-weight: 700; } .sf-footer-qr-link img { border-radius: 10px; background: #fff; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .18s; } .sf-footer-qr-link:hover img { transform: scale(1.03); } .sf-footer-help-text { font-size: 12.5px; color: #5b6573; margin-bottom: 10px; line-height: 1.5; } .sf-footer-mail { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #2f5fc0; text-decoration: none; word-break: break-all; } .sf-footer-mail:hover { text-decoration: underline; } .sf-footer-note { font-size: 11.5px; color: #9aa3b0; margin-top: 8px; margin-bottom: 0; } .sf-footer-bottom { margin-top: 28px; border-top: 1px solid #ebeef1; padding: 14px 0; text-align: center; font-size: 12px; color: #9aa3b0; font-weight: 600; } @media (max-width: 992px) { .sf-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 576px) { .sf-footer-cols { grid-template-columns: 1fr; } .sf-footer-inner { padding: 28px 16px 0; } } /* ============================================================ LANGUAGE SELECTOR (Google Website Translator) Mounted by js/google-translate.js into the dashboard topbar or the auth navbar. Mirrors the main website's language picker; the hidden Google widget does the actual translation of all page text. ============================================================ */ /* hide Google's injected banner / tooltip / iframe chrome and the body offset it tries to add */ .goog-te-banner-frame, .goog-te-gadget-icon, .goog-tooltip, .goog-tooltip:hover, .goog-text-highlight, .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .skiptranslate, iframe.goog-te-banner-frame { display: none !important; } #google_translate_element { display: none !important; } body { top: 0 !important; position: static !important; } .sd-gt { position: relative; } .sd-gt-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid #e2e6ea; border-radius: 11px; background: #fff; color: #5b6573; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .14s, color .14s; } .sd-gt-btn:hover { background: #f4f6f9; color: #16202b; } .sd-gt-btn .bi-globe2 { font-size: 16px; color: #2f5fc0; } .sd-gt-chev { font-size: 10px; transition: transform .2s ease; } .sd-gt.open .sd-gt-chev { transform: rotate(180deg); } .sd-gt-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200; min-width: 220px; display: none; } .sd-gt.open .sd-gt-menu, .sd-gt-menu.open { display: block; } .sd-gt-menu-inner { background: #fff; border: 1px solid #ebeef1; border-radius: 14px; box-shadow: 0 10px 40px rgba(20,30,45,.15), 0 4px 12px rgba(20,30,45,.08); overflow: hidden; } .sd-gt-head { padding: 11px 16px; font-size: 11px; font-weight: 700; color: #9aa3b0; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid #f0f2f5; background: #fafbfc; } .sd-gt-list { max-height: 320px; overflow-y: auto; padding: 6px 0; } .sd-gt-list::-webkit-scrollbar { width: 6px; } .sd-gt-list::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } .sd-gt-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 16px; background: transparent; border: none; border-left: 3px solid transparent; font-family: inherit; cursor: pointer; transition: background .15s; text-align: left; } .sd-gt-item:hover { background: #f0f7ff; border-left-color: #2f5fc0; } .sd-gt-item.on { background: #eaf1fb; border-left-color: #2f5fc0; } .sd-gt-item.on .en { color: #2f5fc0; font-weight: 700; } .sd-gt-item .en { font-size: 13.5px; color: #16202b; font-weight: 600; } .sd-gt-item .nv { font-size: 13px; color: #9aa3b0; } .sd-gt-auth { margin-left: auto; padding-right: 8px; } /* mobile: full-screen bottom sheet, matching the website. The menu is portaled to while open (see google-translate.js) so position:fixed escapes the topbar's backdrop-filter containing block. */ body.sd-gt-lock { overflow: hidden; } @media (max-width: 576px) { .sd-gt-btn { padding: 0 10px; } .sd-gt-btn .sd-gt-cur { display: none; } /* globe + chevron only */ .sd-gt-menu { position: fixed; inset: 0; width: 100%; height: 100%; min-width: 0; display: none; background: rgba(0,0,0,.5); z-index: 99999; } .sd-gt.open .sd-gt-menu, .sd-gt-menu.open { display: flex; flex-direction: column; justify-content: flex-end; } .sd-gt-menu-inner { border-radius: 20px 20px 0 0; animation: sd-gt-sheet-up .26s cubic-bezier(.2,.7,.3,1); } .sd-gt-head { padding: 18px 16px; text-align: center; font-size: 13px; } .sd-gt-list { max-height: 60vh; padding: 8px 0 28px; } .sd-gt-item { padding: 15px 20px; border-left: none; border-bottom: 1px solid #f5f5f5; } .sd-gt-item .en { font-size: 16px; } .sd-gt-item .nv { font-size: 14px; } } @keyframes sd-gt-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }