/** * Centralized Page-Specific Inline Styles * * This file contains CSS that was previously inline in view files. * Consolidated for better maintainability and caching. * Created to restore styling removed during optimization. *//* ========================================================================== Breadcrumb Styles (Global) ========================================================================== */.breadcrumb-wrapper{background:linear-gradient(135deg, rgba(163,196,243,0.35) 0%, rgba(144,219,244,0.3) 100%);border:1px solid #a3c4f3;border-radius:5px;padding:8px 15px;margin-top:8px;margin-bottom:10px}.breadcrumb-wrapper .breadcrumb,div.breadcrumb{background:transparent;font-size:14px;margin:0;padding:0}.breadcrumb-wrapper .breadcrumb a,div.breadcrumb a{color:#0F5A7E;text-decoration:underline}.breadcrumb-wrapper .breadcrumb a:hover,div.breadcrumb a:hover{color:#1A7BA8}.breadcrumb-wrapper .breadcrumb span,div.breadcrumb span{color:#333}.breadcrumb-separator{color:#666;margin:0 5px}/* ========================================================================== Common H1 Styles (used across multiple pages) Excludes dashboard pages which have their own h1 styling ========================================================================== */body:not(.dashboard-page) h1 { font-size: 2.2rem; line-height: 103%; margin: 2.6rem 0 1.8rem 0; font-family: 'Ultra', sans-serif;}@media only screen and (max-width: 768px) { body:not(.dashboard-page) h1 { font-size: 2.2rem; line-height: 103%; margin: 0.5rem 0 1.8rem 0; } p { text-align: justify; }}/* ========================================================================== Form Elements - Radio & Checkbox Fixes ========================================================================== *//* Note: These rules are page-specific and should only apply to forms that use Bootstrap-style radios/checkboxes, not Materialize styled ones. Scoped to specific form classes to avoid conflicts with Materialize */.form-check-input[type="radio"]:not(:checked),.form-check-input[type="radio"]:checked { position: inherit; opacity: 100; pointer-events: painted;}/* For olympiad-books page radio buttons */.olympiad-books-form [type="radio"]:not(:checked),.olympiad-books-form [type="radio"]:checked { position: inherit; opacity: 100; pointer-events: painted;}form input, form textarea, form button { margin: 3px 0px;}/* ========================================================================== HomeDialog Modal Styles (Books, Registration, etc.) ========================================================================== */.HomeDialog { font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; overflow-y: hidden;}.HomeDialog:target { opacity: 1; pointer-events: auto;}.HomeDialog > .diogbox { width: 37%; position: fixed; margin: 5% auto; margin-top: 2%; padding: 11px 11px 11px 11px; border-radius: 10px; background: #565454; color: #000;}.HomeDialog .modal-body { position: fixed; padding: 10px; background-repeat: no-repeat; background-size: 871px 500px;}.HomeDialog .content { text-align: left; font-size: 36px; line-height: 15px;}.HomeDialog .content > span { display: inline-block; overflow: hidden; margin-top: 0%; text-align: center; font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: 600; line-height: 35px; text-transform: uppercase; position: fixed; top: 10px;}.HomeDialog .close1 { background: #6A040F; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; font-size: 18px;}@media only screen and (max-width: 767px) { .HomeDialog > .diogbox { width: 70% !important; margin-top: 20%; } table.responsive-table { width: 100%; border-collapse: collapse; border-spacing: 0; position: fixed; }}/* ========================================================================== Table Styles ========================================================================== */table { border-collapse: collapse; border-spacing: 0; width: 100%; }table.striped > thead > tr > th { color: #424242; background-color: #F8F9FA !important; font-weight: 600; border-bottom: 2px solid #E0E0E0;}/* Navy header variant - use .navy-header class when navy is needed */table.striped.navy-header > thead > tr > th { color: #fff; background-color: #0F5A7E !important; border-bottom: none;}table.striped > tbody > tr > td { font-weight: 400 !important;}tr.warning { background-color: #e91e630f !important;}tr.danger { background-color: #00bcd41a !important;}/* ========================================================================== Cutoff & Rankers Page Styles ========================================================================== */@media only screen and (min-width: 601px) { .cutoff-page th, .rankers-page th { font-size: 20px; color: #fff; text-align: left; padding: 10px 0px 10px 0px; font-weight: 600; } .cutoff-page tr, .rankers-page tr { border-bottom: none; } .cutoff-page td, .rankers-page td { font-size: 17px; padding-left: 2%; }}@media only screen and (max-width: 600px) { .cutoff-page th, .rankers-page th { font-size: 15px; color: #fff; font-weight: 600; } .cutoff-page tr, .rankers-page tr { border-bottom: none; } .cutoff-page td, .rankers-page td { font-size: 16px; font-weight: 600; }}@media only screen and (min-width: 993px) { .container { width: 80%; }}#menu { margin-top: 0rem !important;}.spacebetweenelements { margin: 0 auto 21px auto; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; max-width: 700px;}.spacebetweenelements a { flex: 0 1 auto;}.spacebetweenelements a img { max-width: 100%; height: auto;}@media only screen and (max-width: 992px) { .spacebetweenelements { max-width: 100%; padding: 0 15px; }}@media only screen and (max-width: 600px) { .spacebetweenelements { flex-wrap: wrap; max-width: 320px; } .spacebetweenelements a { width: 48%; } .selectYear, .select-wrapper { width: 100%; }}/* ========================================================================== Syllabus Menu Styles ========================================================================== */@media only screen and (min-width: 768px) { .syllabus-menu { position: sticky; top: 10px; padding: 0px 10px; } .syllabus-menu .divider { margin-right: 75px; } .syllabus-menu .flow-text { margin-top: 0px; margin-bottom: 10px; } .syllabus-menu ul li { padding: 5px 10px; width: 80%; border-bottom: 2px solid #a3c4f3; transition: all 1s ease; } .syllabus-menu ul li:hover { letter-spacing: 0.5px; border-bottom: 2px solid #0F5A7E; }}/* ========================================================================== Access/Dashboard Page Styles ========================================================================== */.inner-hed { color: #1f1e1e !important; padding-top: 60px;}#text-content { padding-left: 15px;}#text-content ul li { font-family: "Roboto"; font-style: normal; font-weight: 400; font-size: 16px; color: #272528; margin-left: 17px;}.weekly-results button { margin-top: 0px;}/* ========================================================================== Testimonial Styles ========================================================================== */.testimonial_principal .test { padding-top: 40px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: rgba(255,255,255,0.8); word-wrap: break-word;}.testimonial_principal p span { font-family: "Eutemia", sans-serif; font-size: 45px; line-height: 15px;}.testimonial_principal { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); padding: 20px 15px;}.bx-wrapper .bx-controls-direction a.bx-next { left: 100%;}.bx-wrapper .bx-controls-direction a.bx-prev { left: -33px !important;}.bx-wrapper .bx-controls-direction a { top: 75%;}/* ========================================================================== Misc Utility Classes ========================================================================== */.customst { overflow: hidden;}.displayProperty { pointer-events: none; cursor: default; color: cadetblue;}.marquee { display: block; align-items: center; transition: all 0.5s ease;}/* ========================================================================== Sample Questions Page Styles ========================================================================== */.notif { padding: 10px; background-color: #f9f9f9; border-radius: 5px;}.notif ul { margin: 0; padding-left: 20px;}.notif ul li { margin-bottom: 5px;}/* ========================================================================== Registration Form Styles ========================================================================== */.registerboxcrest { padding: 20px; text-align: center; border-radius: 10px; margin: 20px 0;}.registerboxcrest h4 { margin: 10px 0;}.btn-primaryadd a { display: inline-block; padding: 10px 30px; background-color: #0F5A7E; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold;}.btn-primaryadd a:hover { background-color: #0A4560;}/* ========================================================================== Registration Page Specific Styles ========================================================================== */@media only screen and (max-width: 1199px) { #share_buttons { margin-left: 0px !important; margin-right: 0px !important; padding-top: 15px; padding-bottom: 10px; background-color: #fefefe; } .link_to_share { left: 0px !important; top: -3px !important; margin: 0px auto !important; border: 1px solid #000; text-align: center; } #share_buttons button { padding: 5px; } .subjects_div span { font-size: 0.80rem !important; } .row .col.offset-m3 { display: flex; justify-content: center; align-items: center; margin-left: 25px; } .well { padding: 15px; }}@media only screen and (max-width: 786px) { #share_buttons button { font-size: 11px; margin-bottom: 5px; }}.testchk [type="checkbox"]:checked:disabled+span::before { border-right: 2px solid rgba(0, 0, 0, 0.42); border-bottom: 2px solid rgba(0, 0, 0, 0.42);}.testchk [type="checkbox"]:checked+span:not(.lever)::before { top: -4px; left: -5px; width: 12px; height: 22px; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #0F5A7E; border-bottom: 2px solid #0F5A7E; -webkit-transform: rotate(40deg); transform: rotate(40deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%;}/* ========================================================================== Bootstrap Button Styles (for forms) ========================================================================== */.btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a;}.btn-primary { color: #fff; background-color: #0F5A7E; border-color: #0A4560;}.btn-success { color: #fff; background-color: #449d44; border-color: #398439;}/* Registration form checkbox positioning - removed negative left offset that was pushing checkboxes outside container *//* Remove grey border from result pages */#result table { border: none; }/* ========================================================================== Mobile Styles - Clean, Consistent Approach Industry standard: 16px padding (Material Design) ========================================================================== */@media only screen and (max-width: 768px) { /* Base - 16px is Material Design standard */ body { padding-top: 8px; margin: 0; } .navbar { margin-bottom: 0; } /* Container - full width with 16px padding */ .container { width: 100%; max-width: 100%; padding: 0 16px; margin: 0; } /* Grid - zero row padding to prevent compounding in nested layouts */ .row { margin: 0; } /* Top-level rows (pages without .container) get edge padding once */ .all-content > .row, #pjax-container > .row, .all-content > #pjax-container > .row { padding: 0 16px; } /* Forms - consistent spacing */ .input-field { margin: 8px 0; padding: 0; } /* Well/Card containers - no side margins on mobile */ .well, .dashboard-well { padding: 16px; margin: 0 0 16px 0; border-radius: 8px; } /* Clearfix should not take space */ .clearfix { height: 0; margin: 0; padding: 0; } /* Typography */ h1 { margin: 8px 0 16px 0; } /* Dashboard specific */ .hello-section, #hello { margin: 0 0 8px 0; padding: 12px 16px; } #menu { display: none; }}/* ========================================================================== Small Screen Column Reset At <=600px all Materialize columns go full-width (s12). Zero horizontal padding so edge spacing comes solely from .container or .all-content > .row above. Matches Materialize's .row .col specificity (0,2,0) — wins via cascade. ========================================================================== */@media only screen and (max-width: 600px) { .row .col { padding: 0; } .row .col.s10, .row .col.s11 { width: 100%; } .row .col.offset-s1, .row .col.offset-s2, .row .col.offset-s3 { margin-left: 0; }}/* ========================================================================== Login Page Mobile Fix Fix inline width styles (50-60%) that break on small screens ========================================================================== */@media only screen and (max-width: 600px) { .register-now { width: 95% !important; margin-left: auto !important; margin-right: auto !important; }}@media only screen and (max-width: 400px) { .register-now { width: 100% !important; padding: 10px !important; }}/* ========================================================================== Login Page Spacing Fix Reduce excessive margins that combine with body padding-top ========================================================================== */@media only screen and (max-width: 767px) { /* Reduce login container top margin to compensate for body padding */ .login-div { margin-top: 1rem !important; } /* Reduce register-now margins - original values were too large */ .register-now { margin-top: 2rem !important; }}@media only screen and (min-width: 768px) and (max-width: 991px) { .register-now { margin-top: 2rem !important; }}/* Login page - reduce top gap on mobile */@media only screen and (max-width: 767px) { .slider { padding-top: 0 !important; margin-top: 0 !important; } .bradcome-menu, .inner-breadcrumb { margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .responsive-image { padding-top: 0 !important; }}/* ========================================================================== AGGRESSIVE Login Page Gap Fix ========================================================================== */@media only screen and (max-width: 767px) { /* Target the main login container */ body .slider, body .slider .row, body .slider .responsive-image { margin-top: 0 !important; padding-top: 0 !important; } /* Remove any hidden breadcrumb space */ .bradcome-menu { display: none !important; } /* Login form container - minimal top margin */ .login-div { margin-top: 0 !important; padding-top: 10px !important; } /* The h1 "Login" heading */ .login-h1, h1.login-h1 { margin-top: 0 !important; }}/* Final login gap fix - remove remaining whitespace */@media only screen and (max-width: 767px) { /* The white login card container */ .login-txt { padding-top: 1rem !important; } /* Space above Login heading */ .login-div .login-txt h1, .login-div h1 { margin-top: 0 !important; padding-top: 0 !important; } /* The outer flex container */ .col-md-6.login-div { padding-top: 0 !important; margin-top: 0 !important; }}/* ========================================================================== YouTube Videos - Responsive ========================================================================== *//* Make YouTube video containers responsive */.youtube-videos div.embed-responsive { width: 100% !important; max-width: 350px; height: auto; aspect-ratio: 16 / 9;}@media only screen and (max-width: 767px) { .youtube-videos div.embed-responsive { max-width: 100%; height: auto; min-height: 200px; }}@media only screen and (max-width: 400px) { .youtube-videos div.embed-responsive { min-height: 180px; }}/* ========================================================================== Blog Article Images - Responsive with Padding ========================================================================== *//* Base - all images scale to container */.blog-article img,.article-content img,#contentSection img,.featured-image img,.media-left-latest img,.registration-banner img { max-width: 100% !important; height: auto !important; display: block;}/* Desktop (1200px+) */@media only screen and (min-width: 1200px) { .featured-image img { max-width: 800px; margin: 0 auto 20px auto; } .article-content img { margin: 15px 0; }}/* Laptop (992px - 1199px) */@media only screen and (min-width: 992px) and (max-width: 1199px) { .featured-image img { max-width: 700px; margin: 0 auto 15px auto; }}/* Tablet (768px - 991px) */@media only screen and (min-width: 768px) and (max-width: 991px) { .featured-image img { max-width: 100%; margin-bottom: 15px; } .media-left-latest img { max-width: 200px; margin-right: 15px; }}/* Mobile (up to 767px) */@media only screen and (max-width: 767px) { .featured-image img { width: 100% !important; margin-bottom: 10px; } .media-left-latest img { max-width: 150px; margin-right: 10px; margin-bottom: 10px; } .registration-banner img { max-width: 100% !important; margin: 10px 0; }}/* Small mobile (up to 400px) */@media only screen and (max-width: 400px) { .media-left-latest img { max-width: 100px; margin-right: 8px; }}/* ========================================================================== Utility Classes (replacing common inline styles) ========================================================================== *//* Text Colors */.text-danger,.text-red { color: #B71C1C !important;}.text-success,.text-green { color: #2E7D32 !important;}.text-warning,.text-orange { color: #E65100 !important;}.text-info,.text-blue { color: #0F5A7E !important;}.text-muted,.text-gray { color: #757575 !important;}.text-dark { color: #212121 !important;}.text-black { color: #000000 !important;}.text-white { color: #FFFFFF !important;}/* Required Field Indicator */.required-indicator,.required-star { color: #B71C1C !important; font-weight: bold;}/* Text Alignment */.text-center { text-align: center !important;}.text-left { text-align: left !important;}.text-right { text-align: right !important;}.text-justify { text-align: justify !important;}/* Display Utilities */.hidden { display: none !important;}.d-block { display: block !important;}.d-inline { display: inline !important;}.d-inline-block { display: inline-block !important;}.d-flex { display: flex !important;}/* Font Styles */.text-bold,.font-bold { font-weight: bold !important;}.font-semibold { font-weight: 600 !important;}.text-normal,.font-normal { font-weight: normal !important;}.text-larger { font-size: larger !important;}.text-smaller { font-size: smaller !important;}/* Font Size Utilities */.text-xs { font-size: 12px !important; }.text-sm { font-size: 14px !important; }.text-base { font-size: 15px !important; }.text-lg { font-size: 18px !important; }.text-xl { font-size: 20px !important; }.text-underline { text-decoration: underline !important;}/* Spacing Utilities */.mt-0 { margin-top: 0 !important; }.mb-0 { margin-bottom: 0 !important; }.ml-0 { margin-left: 0 !important; }.mr-0 { margin-right: 0 !important; }.pt-0 { padding-top: 0 !important; }.pb-0 { padding-bottom: 0 !important; }.pl-0 { padding-left: 0 !important; }.pr-0 { padding-right: 0 !important; }.mt-1 { margin-top: 5px !important; }.mb-1 { margin-bottom: 5px !important; }.ml-1 { margin-left: 5px !important; }.mr-1 { margin-right: 5px !important; }.pt-1 { padding-top: 5px !important; }.pb-1 { padding-bottom: 5px !important; }.pl-1 { padding-left: 5px !important; }.pr-1 { padding-right: 5px !important; }.mt-2 { margin-top: 10px !important; }.mb-2 { margin-bottom: 10px !important; }.ml-2 { margin-left: 10px !important; }.mr-2 { margin-right: 10px !important; }.pt-2 { padding-top: 10px !important; }.pb-2 { padding-bottom: 10px !important; }.pl-2 { padding-left: 10px !important; }.pr-2 { padding-right: 10px !important; }.p-2 { padding: 10px !important; }.mt-3 { margin-top: 20px !important; }.mb-3 { margin-bottom: 20px !important; }.ml-3 { margin-left: 20px !important; }.mr-3 { margin-right: 20px !important; }/* Float Utilities */.float-left { float: left !important;}.float-right { float: right !important;}.clearfix::after { content: ""; display: table; clear: both;}/* Width Utilities */.w-100 { width: 100% !important; }.w-75 { width: 75% !important; }.w-50 { width: 50% !important; }.w-25 { width: 25% !important; }.w-auto { width: auto !important; }/* Cursor */.cursor-pointer { cursor: pointer !important;}.cursor-default { cursor: default !important;}/* List Styles */.list-alpha { list-style-type: lower-alpha !important;}.list-roman { list-style-type: lower-roman !important;}.list-circle { list-style-type: circle !important;}.list-disc { list-style-type: disc !important;}.list-none { list-style-type: none !important;}/* ========================================================================== Exam Schedule Table Styles ========================================================================== *//* Table header cells - olympiad names */.exam-schedule-header,.exam-table-header { color: #0F5A7E !important; font-size: larger !important;}/* Table data cells */.exam-table-cell { font-size: larger !important; text-align: center !important;}/* Answer key date text (small) */.answer-key-date { font-size: 12.5px !important; font-weight: normal !important;}/* Mobile exam schedule cards */.exam-mobile-card { border-left: 4px solid #0F5A7E; padding: 10px; margin-bottom: 10px; background: #f9f9f9;}.exam-mobile-card .exam-name { color: #0F5A7E; font-weight: bold; font-size: 1.1em; margin-bottom: 5px;}/* ========================================================================== Country Wiselist Styles ========================================================================== *//* Country link style (used extensively in country_wiselist.php) */.country-link { width: 25%; padding-bottom: 8px; text-decoration: underline; color: #978e43; font-weight: bold;}/* ========================================================================== Spellbee Exam Styles ========================================================================== *//* Spellbee question highlight background */.sb-highlight-bg { background-color: #3f51b533;}/* Spellbee width spacer */.sb-spacer { width: 10px;}/* Float right with padding */.float-right-padded { float: right; padding-right: 10px;}/* ========================================================================== Profile & Form Styles ========================================================================== *//* Disabled/inactive state */.pointer-none { pointer-events: none;}.pointer-active { opacity: 1; pointer-events: visible;}/* Muted/disabled text color */.text-muted-light { color: #b6bbb5 !important;}/* Font size utilities */.text-0-9em { font-size: 0.9em !important; }.text-2em { font-size: 2em !important; }/* Min height for content areas */.min-h-347 { min-height: 347px;}/* Margin utilities */.ml-24 { margin-left: 24px !important; }.mt-24 { margin-top: 24px !important; }/* ========================================================================== Green Warrior Styles ========================================================================== *//* GW dark red text */.gw-text-red { color: #940006 !important;}.gw-text-red-lh { color: #940006 !important; line-height: 25px;}/* ========================================================================== Marking Scheme & Registration Form Styles ========================================================================== *//* Top padding for marking scheme tables */.pt-38 { padding-top: 38px !important;}/* Border utilities */.border-bottom-none { border-bottom: none !important;}/* Combined text-danger bold */.text-danger-bold { color: #B71C1C !important; font-weight: bold !important;}/* ========================================================================== Soothing Pastel Accent Utilities Use these sparingly as highlights/borders, not large backgrounds ========================================================================== *//* Accent border-left variants (3px subtle line) */.accent-warm { border-left: 3px solid #fde4cf !important; } /* Powder Petal */.accent-rose { border-left: 3px solid #ffcfd2 !important; } /* Cotton Rose */.accent-orchid { border-left: 3px solid #f1c0e8 !important; } /* Pink Orchid */.accent-lavender { border-left: 3px solid #cfbaf0 !important; } /* Periwinkle */.accent-mint { border-left: 3px solid #98f5e1 !important; } /* Soft Cyan */.accent-aqua { border-left: 3px solid #8eecf5 !important; } /* Electric Aqua *//* Accent border-bottom variants (for cards, sections) */.accent-bottom-warm { border-bottom: 2px solid #fde4cf !important; }.accent-bottom-rose { border-bottom: 2px solid #ffcfd2 !important; }.accent-bottom-orchid { border-bottom: 2px solid #f1c0e8 !important; }.accent-bottom-lavender { border-bottom: 2px solid #cfbaf0 !important; }.accent-bottom-mint { border-bottom: 2px solid #98f5e1 !important; }/* Very subtle pastel backgrounds (for special highlights only) */.bg-subtle-warm { background-color: #fef9f5 !important; } /* 5% Powder Petal */.bg-subtle-rose { background-color: #fff9f9 !important; } /* 5% Cotton Rose */.bg-subtle-lavender { background-color: #faf8fd !important; } /* 5% Periwinkle */.bg-subtle-mint { background-color: #f7fefc !important; } /* 5% Soft Cyan *//* Clean card style - white with subtle shadow */.card-clean { background: #FFFFFF; border: 1px solid #EEEEEE; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);}.card-clean:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}/* Soothing well - neutral background */.well-soothing { background: #FAFAFA; border: 1px solid #EEEEEE; border-radius: 8px; padding: 16px;}