/* ====================================================================================================== @VERSION : 1.1.20 @CREATED : 14 OCT 2021 @MODIFIED : 27 JUN 2025 @DESIGNER : Daniel C. K. Tan (danielcktan[at]gmail.com) @DESIGNER URI : @FILE : ~/css/template.css @TYPE : Style Sheet @DESCRIPTION : Default Stylesheet for CMS Template ====================================================================================================== CONTENT ------------------------------------------------------------------------------------------------------ #00 VARIABLES STYLES #01 BASE STYLES #02 LAYOUT STYLES #03 SITE COMPONENTS STYLES #04 UI COMPONENT STYLES #05 HELPER STYLES #06 CMS STYLES ====================================================================================================== */ /* ---------------------------------------------------------------------------------------------------- #00 VARIABLES STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Tokens: Colour, Shadow, Border Radius, Transition, Opacity and Font Size /* ---------------------------------------------------------------------------------------------------- */ :root, [data-bs-theme=light] { /* COLOURS (https://webpixels.io/) TINTS AND SHADES GENERATOR (https://maketintsandshades.com) */ --base-col-white: #fff; --base-col-black: #000; --base-col-gray-50: #fafafa; --base-col-gray-100: #f5f9fc; --base-col-gray-200: #e7eaf0; --base-col-gray-300: #cfd6df; --base-col-gray-400: #abb6c5; --base-col-gray-500: #8898a9; --base-col-gray-600: #6b7b93; --base-col-gray-700: #525f7f; --base-col-gray-800: #2d3748; --base-col-gray-900: #16192c; --base-col-gray-1000: #0d0f1b; --base-col-warm-gray-50:#f7f7f8; --base-col-warm-gray-100:#ebeaeb; --base-col-warm-gray-200:#d7d5d7; --base-col-warm-gray-300:#bdbbbf; --base-col-warm-gray-400:#a29ea3; --base-col-warm-gray-500:#8b868d; --base-col-warm-gray-600:#6f6a71; --base-col-warm-gray-700:#5a575c; --base-col-warm-gray-800:#48454a; --base-col-warm-gray-900:#343135; --base-col-warm-gray-1000:#242325; --base-col-cool-gray-50:#f3f5f7; --base-col-cool-gray-100:#e0e5eb; --base-col-cool-gray-200:#c5ced8; --base-col-cool-gray-300:#a9b7c6; --base-col-cool-gray-400:#889baf; --base-col-cool-gray-500:#6f869f; --base-col-cool-gray-600:#5a6f87; --base-col-cool-gray-700:#475b71; --base-col-cool-gray-800:#32475d; --base-col-cool-gray-900:#22374f; --base-col-cool-gray-1000:#0d233a; --base-col-pink-100: #ffddeb; --base-col-pink-200: #ffbcd7; --base-col-pink-300: #ff9ac2; --base-col-pink-400: #ff79ae; --base-col-pink-500: #FF579A; --base-col-pink-600: #cc467b; --base-col-pink-700: #99345c; --base-col-pink-800: #66233e; --base-col-pink-900: #33111f; --base-col-magenta-100: #fcd6ff; --base-col-magenta-200: #f8adff; --base-col-magenta-300: #f585ff; --base-col-magenta-400: #f15cff; --base-col-magenta-500: #EE33FF; --base-col-magenta-600: #be29cc; --base-col-magenta-700: #8f1f99; --base-col-magenta-800: #5f1466; --base-col-magenta-900: #300a33; --base-col-red-100: #ffd6e0; --base-col-red-200: #ffadc2; --base-col-red-300: #ff85a3; --base-col-red-400: #ff5c85; --base-col-red-500: #FF3366; --base-col-red-600: #cc2952; --base-col-red-700: #991f3d; --base-col-red-800: #661429; --base-col-red-900: #330a14; --base-col-orange-100: #ffe8cc; --base-col-orange-200: #ffd199; --base-col-orange-300: #ffba66; --base-col-orange-400: #ffa333; --base-col-orange-500: #FF8C00; --base-col-orange-600: #cc7000; --base-col-orange-700: #995400; --base-col-orange-800: #663800; --base-col-orange-900: #331c00; --base-col-yellow-100: #fff1cc; --base-col-yellow-200: #ffe499; --base-col-yellow-300: #ffd666; --base-col-yellow-400: #ffc933; --base-col-yellow-500: #FFBB00; --base-col-yellow-600: #cc9600; --base-col-yellow-700: #997000; --base-col-yellow-800: #664b00; --base-col-yellow-900: #332500; --base-col-green-100:#d0f6b1; --base-col-green-200:#acf075; --base-col-green-300:#86e935; --base-col-green-400:#71dc18; --base-col-green-500:#67ca16; --base-col-green-600:#57aa13; --base-col-green-700:#42810e; --base-col-green-800:#366a0c; --base-col-green-900:#284e09; --base-col-lime-100:#f5fdaa; --base-col-lime-200:#e7f471; --base-col-lime-300:#d8ea3e; --base-col-lime-400:#c9dc18; --base-col-lime-500:#b4c70a; --base-col-lime-600:#9eae09; --base-col-lime-700:#818f00; --base-col-lime-800:#657000; --base-col-lime-900:#373d00; --base-col-teal-100: #d3f8f8; --base-col-teal-200: #a7f1f1; --base-col-teal-300: #7aebeb; --base-col-teal-400: #4ee4e4; --base-col-teal-500: #22DDDD; --base-col-teal-600: #1bb1b1; --base-col-teal-700: #148585; --base-col-teal-800: #0e5858; --base-col-teal-900: #072c2c; --base-col-cyan-100: #ccf6ff; --base-col-cyan-200: #99eeff; --base-col-cyan-300: #66e5ff; --base-col-cyan-400: #33ddff; --base-col-cyan-500: #00D4FF; --base-col-cyan-600: #00aacc; --base-col-cyan-700: #007f99; --base-col-cyan-800: #005566; --base-col-cyan-900: #002a33; --base-col-azure-100:#c2dfff; --base-col-azure-200:#c2dfff; --base-col-azure-300:#66b0ff; --base-col-azure-400:#3d9bff; --base-col-azure-500:#1486ff; --base-col-azure-600:#0071eb; --base-col-azure-700:#005bbd; --base-col-azure-800:#004085; --base-col-azure-900:#002347; --base-col-blue-100: #ccebff; --base-col-blue-200: #99d6ff; --base-col-blue-300: #66c2ff; --base-col-blue-400: #33adff; --base-col-blue-500: #0099FF; --base-col-blue-600: #007acc; --base-col-blue-700: #005c99; --base-col-blue-800: #003d66; --base-col-blue-900: #001f33; --base-col-indigo-100: #dedffd; --base-col-indigo-200: #bebffb; --base-col-indigo-300: #9da0f9; --base-col-indigo-400: #7d80f7; --base-col-indigo-500: #5C60F5; --base-col-indigo-600: #4a4dc4; --base-col-indigo-700: #373a93; --base-col-indigo-800: #252662; --base-col-indigo-900: #121331; --base-col-purple-100: #e7ddff; --base-col-purple-200: #d0bcff; --base-col-purple-300: #b89aff; --base-col-purple-400: #a179ff; --base-col-purple-500: #8957FF; --base-col-purple-600: #6e46cc; --base-col-purple-700: #523499; --base-col-purple-800: #372366; --base-col-purple-900: #1b1133; --base-col-violet-100:#efd6fa; --base-col-violet-200:#e0b4f3; --base-col-violet-300:#ce91e8; --base-col-violet-400:#bb70db; --base-col-violet-500:#ac50d3; --base-col-violet-600:#9b32c8; --base-col-violet-700:#7c12a5; --base-col-violet-800:#5d0085; --base-col-violet-900:#320047; /* DARK MODE COLOURS (https://colorffy.com/dark-theme-generator) */ --base-col-dark-100: #0a0a0a; --base-col-dark-200: #1e1e1e; --base-col-dark-300: #212121; --base-col-dark-400: #292929; --base-col-dark-500: #3f3f3f; --base-col-dark-600: #4d4d4d; --base-col-dark-700: #575757; --base-col-dark-800: #8b8b8b; --base-col-dark-900: #9f9f9f; --base-col-light-100: #f9f9f9; --base-col-light-200: #f3f3f3; --base-col-light-300: #ededed; --base-col-light-400: #e1e1e1; --base-col-light-500: #dedede; --base-col-light-600: #d5d5d5; --base-col-light-700: #cfcfcf; --base-col-light-800: #c8c8c8; --base-col-light-900: #c0c0c0; /* ALERT + NOTE BOX COLOURS */ --bs-primary-bg-subtle : #e2eaf7; --bs-primary-border-subtle : #b1c6ea; --bs-primary-text-emphasis : #2f5aa2; --bs-secondary-bg-subtle : #f1f2f3; --bs-secondary-border-subtle: #d9dbe0; --bs-secondary-text-emphasis: #404247; --bs-success-bg-subtle : #dcf1e4; --bs-success-border-subtle : #a1dbb8; --bs-success-text-emphasis : #0c622e; --bs-info-bg-subtle : #e5f4f8; --bs-info-border-subtle : #bbe1ed; --bs-info-text-emphasis : #3b7e94; --bs-warning-bg-subtle : #fbf1dd; --bs-warning-border-subtle : #f4d9a4; --bs-warning-text-emphasis : #896110; --bs-danger-bg-subtle : #fae4e8; --bs-danger-border-subtle : #f1b7c1; --bs-danger-text-emphasis : #b03d50; --bs-light-bg-subtle : #f5f5f5; --bs-light-border-subtle : #eeeeee; --bs-light-text-emphasis : #616161; --bs-dark-bg-subtle : #262626; --bs-dark-border-subtle : #9e9e9e; --bs-dark-text-emphasis : #eeeeee; /* SHADOWS */ --base-shadow-none : 0 1px 2px 0 rgba(0,0,0,.07); --base-box-shadow : 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --base-box-shadow-xs : 0 1px 3px 0 rgba(0,0,0,.07),0 1px 2px 0 rgba(0,0,0,.05); --base-box-shadow-sm : 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.05); --base-box-shadow-md : 0 10px 15px -3px rgba(0,0,0,.07),0 4px 6px -2px rgba(0,0,0,.05); --base-box-shadow-lg : 0 20px 25px -5px rgba(0,0,0,.07),0 10px 10px -5px rgba(0,0,0,.05); --base-box-shadow-xl : 0 25px 50px -12px rgba(0,0,0,.21); /* BORDER RADIUS */ --base-border-radius-none : 0; --base-border-radius : 0.25rem; --base-border-radius-xs : .25rem; --base-border-radius-sm : .375rem; --base-border-radius-md : .5rem; --base-border-radius-lg : .75rem; --base-border-radius-xl : 1.25rem; --base-border-radius-circle : 50%; /* TRANSITIONS */ --base-transition-xs : all .2s ease-in-out; --base-transition-sm : all .4s ease-in-out; --base-transition-md : all .6s ease-in-out; --base-transition-lg : all .8s ease-in-out; --base-transition-xl : all 1s ease-in-out; --base-transition-text-color: color .3s ease-in-out; /* OPACITY */ --base-opacity-none : 0; --base-opacity-5 : .05; --base-opacity-10 : .1; --base-opacity-15 : .15; --base-opacity-20 : .2; --base-opacity-30 : .3; --base-opacity-40 : .4; --base-opacity-60 : .6; --base-opacity-70 : .7; --base-opacity-80 : .8; --base-opacity-90 : .9; /* TEXT ALIGNMENT */ --base-text-align-left : left; --base-align-center : center; --base-text-align-right : right; /* TEXT TRANSFORM */ --base-text-transform-none : none; --base-text-transform-lowercase : lowercase; --base-text-transform-uppercase : uppercase; --base-text-transform-capitalize: capitalize; /* Accordions */ --base-accordion-color : var(--base-col-dark-500); --base-accordion-bg : var(--base-col-white); --base-accordion-btn-color : var(--base-col-dark-500); --base-accordion-btn-bg : var(--base-col-light-200); --base-accordion-active-bg : var(--base-col-light-200); --base-accordion-btn-focus-box-shadow : 0 0 0 0.25rem rgba (0, 0, 0, 0.15); } /* Dark Theme Styles /* ---------------------------------------------------------------------------------------------------- */ [data-bs-theme=dark] { /* DOCUMENT COLOURS */ --brand-doc-background-color : var(--base-col-dark-400); --brand-doc-font-color : var(--base-col-light-500); --brand-col-primary-light : var(--base-col-light-900); --base-col-link : var(--base-col-light-500); --base-col-link-hover : var(--base-col-light-500); /* ALERT + NOTE BOX COLOURS */ --bs-primary-bg-subtle : #0c1728; --bs-primary-border-subtle : #234479; --bs-primary-text-emphasis : #628dd5; --bs-secondary-bg-subtle : #202124; --bs-secondary-border-subtle : #5f646b; --bs-secondary-text-emphasis : #d9dbe0; --bs-success-bg-subtle : #04210f; --bs-success-border-subtle : #0c622e; --bs-success-text-emphasis : #72c894; --bs-info-bg-subtle : #11242a; --bs-info-border-subtle : #326c7f; --bs-info-text-emphasis : #87cbe0; --bs-warning-bg-subtle : #2e2005; --bs-warning-border-subtle : #896110; --bs-warning-text-emphasis : #efc776; --bs-danger-bg-subtle : #2c0f14; --bs-danger-border-subtle : #842e3c; --bs-danger-text-emphasis : #e37083; --bs-light-bg-subtle : #4f4f4f; --bs-light-border-subtle : #616161; --bs-light-text-emphasis : #f5f5f5; --bs-dark-bg-subtle : #262626; --bs-dark-border-subtle : #4f4f4f; --bs-dark-text-emphasis : #eeeeee; /* Accordions */ --base-accordion-color : var(--base-col-light-500); --base-accordion-bg : var(--base-col-dark-200); --base-accordion-btn-color : var(--base-col-light-500); --base-accordion-btn-bg : var(--base-col-dark-500); --base-accordion-active-bg : var(--base-col-dark-500); --base-accordion-btn-focus-box-shadow : 0 0 0 0.25rem rgba (0, 0, 0, 0.15); } [data-bs-theme=dark] img { filter: brightness(70%) contrast(120%); } /* ---------------------------------------------------------------------------------------------------- #01 BASE STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Viewport Styles /* ---------------------------------------------------------------------------------------------------- */ @-ms-viewport { width: device-width; max-zoom: 1; min-zoom: 1; user-zoom: fixed; } @-o-viewport { width: device-width; max-zoom: 1; min-zoom: 1; user-zoom: fixed; } @viewport { width: device-width; max-zoom: 1; min-zoom: 1; user-zoom: fixed; } /* Scrollbar Styles /* ---------------------------------------------------------------------------------------------------- */ * { --scrollbar-color-thumb: rgba(0, 0, 0, 0.35); /* color of the scroll thumb */ --scrollbar-color-track: transparent; /* color of the tracking area */ --scrollbar-width: thin; /* "auto" or "thin" */ --scrollbar-width-legacy: 8px; /* width of the entire scrollbar */ } /* Modern browsers with 'scrollbar-*' support */ @supports (scrollbar-width: auto) { * { scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track); scrollbar-width: var(--scrollbar-width); } } /* Legacy browsers with '::-webkit-scrollbar-*' support */ @supports selector(::-webkit-scrollbar) { *::-webkit-scrollbar { max-width: var(--scrollbar-width-legacy); max-height: var(--scrollbar-width-legacy); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-color-thumb); } *::-webkit-scrollbar-track { background: var(--scrollbar-color-track); } } /* Document Styles /* ---------------------------------------------------------------------------------------------------- */ html { font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300))); line-height: 1.6; scroll-behavior: smooth; } html, body { width: 100%; height: 100%; } @media screen and (max-width: 992px) { body { overflow-x: hidden; } } body { margin-top: 0; /* allocation for menu */ padding-top: 0; position: relative; /* Required for ScrollSpy */ overflow: overlay; overflow-x: hidden; /* Prevent Horizontal Sweeping in iOS */ text-rendering: optimizelegibility; text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(255,255,255,.2); -webkit-font-smoothing: antialiased; transition: font-size .8s ease-in-out, background-color .3s ease-in-out, var(--base-transition-text-color); } [data-bs-theme=dark] a:not(.btn, .dropdown-item) { color: var(--base-col-link); } [data-bs-theme=dark] a:not(.btn, .dropdown-item):hover, a:not(.btn, .dropdown-item):focus, a:not(.btn, .dropdown-item):active, a.active { color: var(--base-col-link-hover); } /* Headings Styles /* ---------------------------------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; color: inherit; text-transform: uppercase; transition: var(--base-transition-text-color); } h1, h2 { font-weight: var(--font-weight-light); } h3, h4 { font-weight: var(--font-weight-medium); } h5, h6 { font-weight: var(--font-weight-bold); } /* Image Styles /* ---------------------------------------------------------------------------------------------------- */ img { margin: 0; padding: 0; display: inline-block; position: relative; zoom: 1; transition: filter .3s ease-in-out; /* Protech Image */ user-drag: none; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -moz-user-select: none; } img.left { float: left; margin: 0 10px 5px 0; } img.right { float: right; margin: 0 0 5px 10px; } .img-fluid, img-responsive { max-width: 100%; width:100%; height: auto; } /* Image Caption Styles /* ---------------------------------------------------------------------------------------------------- */ .figure-caption { background-color: #f2f2f2; border-left: 5px solid #ff6600; color: #767676; font-size: 0.8em; line-height: 1.4285714286 !important; text-align: left; padding: 10px; min-height: 45px; } .figure-caption .credits { color: #969696; display: block; font-size: 0.85em; margin-top: 10px; } /* Paragraph Styles /* ---------------------------------------------------------------------------------------------------- */ p { font-weight: var(--font-weight-regular); margin-top: 0; margin-bottom: 1rem; line-height: 1.6; text-align: justify; } /* List Styles /* ---------------------------------------------------------------------------------------------------- */ ol li, ul li { font-size: var(-base-font-size-body); margin-bottom: 1rem; margin-left: 1rem; padding-left: 0.8rem; } ol li ol li, ul li ul li { font-size: 0.9em; margin-top: 0.8rem; margin-bottom: 0.8rem; margin-left: 0.8rem; padding-left: 0.8rem; } /* Reset margins for nav-links and list groups */ .list-group { margin-top: 0 !important; margin-bottom: 0 !important; } .list-group-item { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; } .nav-item { margin-top: 0.3rem !important; margin-bottom: 0.3rem !important; margin-left: 0 !important; padding-left: 0 !important; } .nav-item .dropdown-item, .nav-item .dropdown-item:hover { background-color: transparent; } /* Generic Table Styles /* ---------------------------------------------------------------------------------------------------- */ table, .table { border-collapse: collapse; margin-bottom: 20px; width: 100% !important; } .table { --bs-table-bg: transparent; --bs-table-border-color: #ccc; --bs-table-accent-bg: transparent; --bs-table-striped-bg: #f9f9f9; --bs-table-active-bg: #f5f5f5; --bs-table-hover-bg: #ffffcc; } [data-bs-theme=dark] .table { --bs-table-bg: transparent; --bs-table-accent-bg: transparent; --bs-table-striped-color: var(--bs-emphasis-color); --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05); --bs-table-active-color: var(--bs-emphasis-color); --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1); --bs-table-hover-color: var(--bs-emphasis-color); --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075); } /* Recolour Header Bottom Border */ .table > :not(:first-child) { border-top: 1; border-color: #ccc; } table th { text-align: left; text-transform: uppercase; } table th.text-center, table tr.text-center, table td.text-center { text-align: center !important; } .table .thead-light th { background-color: #e9ecef; border-color: var(--bs-table-border-color); } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bs-table-striped-bg); } .table-hover > tbody > tr:hover { background-color: var(--bs-table-hover-bg) !important; } /* Equal Column Width*/ .table-fixed { table-layout: fixed !important; } /* Responsive Table Styles (Default) /* ---------------------------------------------------------------------------------------------------- */ .table-responsive, .table-responsive-xs, .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl, .table-responsive-xxl { overflow-x: auto; max-width: 100%; border-collapse: collapse; border-spacing: 0; position: relative; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .table-responsive .table, .table-responsive-xs .table, .table-responsive-sm .table, .table-responsive-md .table, .table-responsive-lg .table, .table-responsive-xl .table, .table-responsive-xxl .table, .card .table, .card .table-responsive .table, .card .table-responsive-xs .table, .card .table-responsive-sm .table, .card .table-responsive-md .table, .card .table-responsive-lg .table, .card .table-responsive-xl .table, .card .table-responsive-xxl .table { width: calc(100% + 20px); border-collapse: collapse; margin-bottom: 0px; } @media (min-width: 768px) { /* Disable horizontal scrolling on large screen */ .table-responsive, .table-responsive-xs, .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl, .table-responsive-xxl { overflow-x: hidden; } } /* Adjust the scrollbar breakpoint */ @media (max-width: 768px) { .table-responsive, .table-responsive-xs, .table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl, .table-responsive-xxl { overflow-x: auto; } .table-responsive th, .table-responsive-xs th, .table-responsive-sm th, .table-responsive-md th, .table-responsive-lg th, .table-responsive-xl th, .table-responsive-xxl th { min-width: 100px; } } /* Remove Table Border for Card Table Styles */ .card .table-responsive, .card .table-responsive-xs, .card .table-responsive-sm, .card .table-responsive-md, .card .table-responsive-lg, .card .table-responsive-xl, .card .table-responsive-xxl { border: none; } /* Responsive Table Styles (Fixed First Column) /* ---------------------------------------------------------------------------------------------------- */ .table.table-fix-first-col th:first-child, .table.table-fix-first-col td:first-child { background-color: #efefef; border: 1px solid #dee2e6; position: sticky; left: 0; } /* Responsive Table Styles (Stackable) /* ---------------------------------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { table.table-stacked { border: 0; } table.table-stacked thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } table.table-stacked tr { border-color: #ccc; display: block; margin-bottom: 0.625em; } table.table-stacked th, table.table-stacked td { display: block; text-align: left; } table.table-stacked td::before { content: attr(data-th); float: left; font-weight: bold; text-transform: uppercase; } table.table-stacked td:last-child { border-bottom: 0; } .card-table table.table-stacked tr { border-top: transparent; border-left: transparent; border-bottom: 1px solid #ccc; border-right: transparent; display: block; margin-bottom: 0; } } /* ---------------------------------------------------------------------------------------------------- #02 LAYOUT STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Grid Smooth Animated Effect Styles /* ---------------------------------------------------------------------------------------------------- */ [class="container"], [class="row"], [class="col"], [class^="col-"], #mainNav, .sidebar { transition: all .6s ease-in-out; } /* Grid Column Bottom Margin Styles /* ---------------------------------------------------------------------------------------------------- */ [class|="col"] { margin-bottom: 1.5rem !important; } /* BS CSS Grid Styles /* ---------------------------------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--bs-gap, 1.5rem); grid-template-columns: repeat(var(--bs-columns, 12), 1fr); grid-template-rows: repeat(var(--bs-rows, 1), 1fr); } .grid .g-col-1 { grid-column: auto/span 1; } .grid .g-col-2 { grid-column: auto/span 2; } .grid .g-col-3 { grid-column: auto/span 3; } .grid .g-col-4 { grid-column: auto/span 4; } .grid .g-col-5 { grid-column: auto/span 5; } .grid .g-col-6 { grid-column: auto/span 6; } .grid .g-col-7 { grid-column: auto/span 7; } .grid .g-col-8 { grid-column: auto/span 8; } .grid .g-col-9 { grid-column: auto/span 9; } .grid .g-col-10 { grid-column: auto/span 10; } .grid .g-col-11 { grid-column: auto/span 11; } .grid .g-col-12 { grid-column: auto/span 12; } .grid .g-start-1 { grid-column-start: 1; } .grid .g-start-2 { grid-column-start: 2; } .grid .g-start-3 { grid-column-start: 3; } .grid .g-start-4 { grid-column-start: 4; } .grid .g-start-5 { grid-column-start: 5; } .grid .g-start-6 { grid-column-start: 6; } .grid .g-start-7 { grid-column-start: 7; } .grid .g-start-8 { grid-column-start: 8; } .grid .g-start-9 { grid-column-start: 9; } .grid .g-start-10 { grid-column-start: 10; } .grid .g-start-11 { grid-column-start: 11; } @media (min-width: 576px) { .grid .g-col-sm-1 { grid-column: auto/span 1; } .grid .g-col-sm-2 { grid-column: auto/span 2; } .grid .g-col-sm-3 { grid-column: auto/span 3; } .grid .g-col-sm-4 { grid-column: auto/span 4; } .grid .g-col-sm-5 { grid-column: auto/span 5; } .grid .g-col-sm-6 { grid-column: auto/span 6; } .grid .g-col-sm-7 { grid-column: auto/span 7; } .grid .g-col-sm-8 { grid-column: auto/span 8; } .grid .g-col-sm-9 { grid-column: auto/span 9; } .grid .g-col-sm-10 { grid-column: auto/span 10; } .grid .g-col-sm-11 { grid-column: auto/span 11; } .grid .g-col-sm-12 { grid-column: auto/span 12; } .grid .g-start-sm-1 { grid-column-start: 1; } .grid .g-start-sm-2 { grid-column-start: 2; } .grid .g-start-sm-3 { grid-column-start: 3; } .grid .g-start-sm-4 { grid-column-start: 4; } .grid .g-start-sm-5 { grid-column-start: 5; } .grid .g-start-sm-6 { grid-column-start: 6; } .grid .g-start-sm-7 { grid-column-start: 7; } .grid .g-start-sm-8 { grid-column-start: 8; } .grid .g-start-sm-9 { grid-column-start: 9; } .grid .g-start-sm-10 { grid-column-start: 10; } .grid .g-start-sm-11 { grid-column-start: 11; } } @media (min-width: 768px) { .grid .g-col-md-1 { grid-column: auto/span 1; } .grid .g-col-md-2 { grid-column: auto/span 2; } .grid .g-col-md-3 { grid-column: auto/span 3; } .grid .g-col-md-4 { grid-column: auto/span 4; } .grid .g-col-md-5 { grid-column: auto/span 5; } .grid .g-col-md-6 { grid-column: auto/span 6; } .grid .g-col-md-7 { grid-column: auto/span 7; } .grid .g-col-md-8 { grid-column: auto/span 8; } .grid .g-col-md-9 { grid-column: auto/span 9; } .grid .g-col-md-10 { grid-column: auto/span 10; } .grid .g-col-md-11 { grid-column: auto/span 11; } .grid .g-col-md-12 { grid-column: auto/span 12; } .grid .g-start-md-1 { grid-column-start: 1; } .grid .g-start-md-2 { grid-column-start: 2; } .grid .g-start-md-3 { grid-column-start: 3; } .grid .g-start-md-4 { grid-column-start: 4; } .grid .g-start-md-5 { grid-column-start: 5; } .grid .g-start-md-6 { grid-column-start: 6; } .grid .g-start-md-7 { grid-column-start: 7; } .grid .g-start-md-8 { grid-column-start: 8; } .grid .g-start-md-9 { grid-column-start: 9; } .grid .g-start-md-10 { grid-column-start: 10; } .grid .g-start-md-11 { grid-column-start: 11; } } @media (min-width: 992px) { .grid .g-col-lg-1 { grid-column: auto/span 1; } .grid .g-col-lg-2 { grid-column: auto/span 2; } .grid .g-col-lg-3 { grid-column: auto/span 3; } .grid .g-col-lg-4 { grid-column: auto/span 4; } .grid .g-col-lg-5 { grid-column: auto/span 5; } .grid .g-col-lg-6 { grid-column: auto/span 6; } .grid .g-col-lg-7 { grid-column: auto/span 7; } .grid .g-col-lg-8 { grid-column: auto/span 8; } .grid .g-col-lg-9 { grid-column: auto/span 9; } .grid .g-col-lg-10 { grid-column: auto/span 10; } .grid .g-col-lg-11 { grid-column: auto/span 11; } .grid .g-col-lg-12 { grid-column: auto/span 12; } .grid .g-start-lg-1 { grid-column-start: 1; } .grid .g-start-lg-2 { grid-column-start: 2; } .grid .g-start-lg-3 { grid-column-start: 3; } .grid .g-start-lg-4 { grid-column-start: 4; } .grid .g-start-lg-5 { grid-column-start: 5; } .grid .g-start-lg-6 { grid-column-start: 6; } .grid .g-start-lg-7 { grid-column-start: 7; } .grid .g-start-lg-8 { grid-column-start: 8; } .grid .g-start-lg-9 { grid-column-start: 9; } .grid .g-start-lg-10 { grid-column-start: 10; } .grid .g-start-lg-11 { grid-column-start: 11; } } @media (min-width: 1200px) { .grid .g-col-xl-1 { grid-column: auto/span 1; } .grid .g-col-xl-2 { grid-column: auto/span 2; } .grid .g-col-xl-3 { grid-column: auto/span 3; } .grid .g-col-xl-4 { grid-column: auto/span 4; } .grid .g-col-xl-5 { grid-column: auto/span 5; } .grid .g-col-xl-6 { grid-column: auto/span 6; } .grid .g-col-xl-7 { grid-column: auto/span 7; } .grid .g-col-xl-8 { grid-column: auto/span 8; } .grid .g-col-xl-9 { grid-column: auto/span 9; } .grid .g-col-xl-10 { grid-column: auto/span 10; } .grid .g-col-xl-11 { grid-column: auto/span 11; } .grid .g-col-xl-12 { grid-column: auto/span 12; } .grid .g-start-xl-1 { grid-column-start: 1; } .grid .g-start-xl-2 { grid-column-start: 2; } .grid .g-start-xl-3 { grid-column-start: 3; } .grid .g-start-xl-4 { grid-column-start: 4; } .grid .g-start-xl-5 { grid-column-start: 5; } .grid .g-start-xl-6 { grid-column-start: 6; } .grid .g-start-xl-7 { grid-column-start: 7; } .grid .g-start-xl-8 { grid-column-start: 8; } .grid .g-start-xl-9 { grid-column-start: 9; } .grid .g-start-xl-10 { grid-column-start: 10; } .grid .g-start-xl-11 { grid-column-start: 11; } } @media (min-width: 1400px) { .grid .g-col-xxl-1 { grid-column: auto/span 1; } .grid .g-col-xxl-2 { grid-column: auto/span 2; } .grid .g-col-xxl-3 { grid-column: auto/span 3; } .grid .g-col-xxl-4 { grid-column: auto/span 4; } .grid .g-col-xxl-5 { grid-column: auto/span 5; } .grid .g-col-xxl-6 { grid-column: auto/span 6; } .grid .g-col-xxl-7 { grid-column: auto/span 7; } .grid .g-col-xxl-8 { grid-column: auto/span 8; } .grid .g-col-xxl-9 { grid-column: auto/span 9; } .grid .g-col-xxl-10 { grid-column: auto/span 10; } .grid .g-col-xxl-11 { grid-column: auto/span 11; } .grid .g-col-xxl-12 { grid-column: auto/span 12; } .grid .g-start-xxl-1 { grid-column-start: 1; } .grid .g-start-xxl-2 { grid-column-start: 2; } .grid .g-start-xxl-3 { grid-column-start: 3; } .grid .g-start-xxl-4 { grid-column-start: 4; } .grid .g-start-xxl-5 { grid-column-start: 5; } .grid .g-start-xxl-6 { grid-column-start: 6; } .grid .g-start-xxl-7 { grid-column-start: 7; } .grid .g-start-xxl-8 { grid-column-start: 8; } .grid .g-start-xxl-9 { grid-column-start: 9; } .grid .g-start-xxl-10 { grid-column-start: 10; } .grid .g-start-xxl-11 { grid-column-start: 11; } } @media (min-width: 1200px) { .grid-margin { padding-right: calc(4rem * .5); padding-left: calc(4rem * .5); } } @media (min-width: 1400px) { .grid-margin { padding-right: calc(9rem * .5); padding-left: calc(9rem * .5); } } @media (min-width: 1800px) { .grid-margin { padding-right: calc(29rem * .5); padding-left: calc(29rem * .5); } } /* ---------------------------------------------------------------------------------------------------- #03 SITE COMPONENT STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Announcement Bar Styles /* ---------------------------------------------------------------------------------------------------- */ #announcement-bar { width: 100%; transition: all .2s ease-in-out; margin-bottom: 0; } #announcement-bar .alert { margin-bottom: 0; } #announcement-bar .alert div[class^="col-"] { margin-bottom: 0 !important; } #announcement-bar.bg-danger { background-color: #F04770 !important; } #announcement-bar.bg-info { background-color: #3BAFDA !important; } #announcement-bar.bg-warning { background-color: #FAC005 !important; } .alert-container { display: flex; line-height: 1.5; } .alert-icon { display: flex; opacity: 0.9; padding: 0; font-size: 22px; margin-right: 12px; } .alert-message { padding: 0; } /* Global & MainNavbar Styles /* ---------------------------------------------------------------------------------------------------- */ #globalNav .navbar-nav, #mainNav .navbar-nav { margin: 0; } /* Global Navbar Styles /* ---------------------------------------------------------------------------------------------------- */ #globalNav .nav-item { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-left: 0 !important; } #globalNav .nav-link { color: rgba(255, 255, 255, 0.55); text-transform: uppercase; font-size: 0.75rem; font-weight: 400; padding: 0rem 0.5rem; transition: all .2s ease-in-out; } #globalNav .nav-link:hover, #globalNav .nav-link:active { color: rgba(255, 255, 255, 0.75); } #globalNav .navbar-toggler-globalnav { background-color: transparent; border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); border-radius: var(--bs-navbar-toggler-border-radius); transition: var(--bs-navbar-toggler-transition); border-color: #fff; color: #fff; font-size: 90%; padding: 0.5rem; } #globalNav .navbar-toggler-globalnav:focus, #globalNav .navbar-toggler-globalnav:active { outline: none !important; box-shadow: none; } @media (min-width: 1200px) { #globalNav .navbar-toggler-globalnav { display: none; } } @media (max-width: 1199px) { #globalNav .nav-item { padding-top: .5rem !important; padding-bottom: .5rem !important; } #globalNav .nav-item .nav-link { font-size: 1.2rem; } /* On Mobile Devices */ #globalNav .dropdown-menu li .dropdown-item { color: rgba(255, 255, 255, 0.55); } #globalNav .dropdown-menu li .dropdown-item:active, #globalNav .dropdown-menu li .dropdown-item:hover, #globalNav .dropdown-menu li .dropdown-item:focus, #globalNav .dropdown-menu li .dropdown-item.active, #globalNav .dropdown-menu li .dropdown-menu .dropdown-item.active { color: rgba(255, 255, 255, 0.75); } } /* Main Navbar Styles /* ---------------------------------------------------------------------------------------------------- */ #mainNav { border-bottom: none; margin-top: 0; padding-top: 0; padding-bottom: 0; transition: all .2s ease-in-out; } #mainNav .navbar-collapse.show { padding-top: 0; padding-bottom: 0; transition: all .2s ease-in-out; } #mainNav .navbar-toggler { border-color: #fff; color: #fff; font-size: 90%; padding: 0.75rem; } #mainNav .navbar-toggler:focus, #mainNav .navbar-toggler:active { outline: none !important; box-shadow: none; } #mainNav .navbar-brand { padding: 0.5rem 0; color: #fff; } #mainNav .navbar-brand img { max-height: 70px; height: 70px; transition: all .2s ease-in-out; } [data-bs-theme=dark] #mainNav .navbar-brand img { filter: brightness(100%) contrast(100%); } #mainNav .nav-item { margin-top: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-left: 0 !important; } #mainNav .nav-link { color: #fff; text-transform: uppercase; font-size: 0.9rem; font-weight: 700; padding: 1.8rem 1rem; transition: all .2s ease-in-out; } #mainNav .nav-link:hover, #mainNav .nav-link:active, #mainNav .nav-link:visited { color: #fff; } #mainNav.navbar-scrolled { border-bottom: none; box-shadow: 0 3px 10px 0 rgba(0, 0 ,0 , 0.3); margin-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #mainNav.navbar-scrolled .navbar-brand { color: #fff; } #mainNav.navbar-scrolled .nav-link { color: #fff; font-size: 0.9rem; padding: 0.9rem 1rem; } #mainNav.navbar-scrolled .nav-link:hover, #mainNav.navbar-scrolled .nav-link:active, #mainNav.navbar-scrolled .nav-link:visited { color: #fff; } #mainNav.navbar-scrolled .nav-link:hover, #mainNav.navbar-scrolled .nav-link.active { outline: none; } @media (min-width: 1200px) { #mainNav .dropdown-menu, #mainNav .dropdown-menu .dropdown-menu { border: none; border-radius: 0px 0px 5px 5px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); animation-name: fadeIn; animation-duration: 0.4s; animation-fill-mode: both; } #mainNav .dropdown-menu .dropdown-item.active, #mainNav .dropdown-menu .dropdown-menu .dropdown-item.active, #mainNav .dropdown-menu .dropdown-item:active, #mainNav .dropdown-menu .dropdown-menu .dropdown-item:active { color: var(--base-col-primary); font-weight: 700; } .dropdown-menu[data-bs-popper] { margin-top: 0; } /* On Desktop Devices */ #mainNav .dropdown-menu li .dropdown-item:hover, #mainNav .dropdown-menu li .dropdown-item:focus { color: var(--base-col-primary); } [data-bs-theme=dark] #mainNav .dropdown-menu li .dropdown-item:hover, [data-bs-theme=dark] #mainNav .dropdown-menu li .dropdown-item:focus { color: var(--base-col-yellow-500); } [data-bs-theme=dark] #mainNav .dropdown-menu .dropdown-item.active, [data-bs-theme=dark] #mainNav .dropdown-menu .dropdown-menu .dropdown-item.active { color: var(--base-col-yellow-500); font-weight: 700; } } @media (max-width: 1199px) { .navbar-expand-xl .navbar-nav .dropdown .dropdown-menu { background-color: transparent; border: 0; } .navbar-expand-xl .navbar-nav .dropdown .dropdown-menu.show { background-color: transparent; border: 0; animation-name: fadeIn; animation-duration: 0.4s; animation-fill-mode: both; } #mainNav { padding-top: 0.8em !important; padding-bottom: 0.8em !important; } #mainNav.navbar-scrolled { padding-top: 0.5em !important; padding-bottom: 0.5em !important; } #mainNav .navbar-brand img { max-height: 50px; height: 50px; transition: all .2s ease-in-out; } #mainNav .navbar-collapse .navbar-nav .nav-link { color: #fff; font-size: 1.2rem; padding: 0.5rem 0; transition: none; } #mainNav .dropdown-menu li { padding-top: .2rem !important; padding-bottom: .2rem !important; } #mainNav .dropdown-menu li .dropdown-item { font-size: 1rem; padding-left: 0.6rem; } /* On Mobile Devices */ #mainNav .dropdown-menu li .dropdown-item, #mainNav .dropdown-menu li .dropdown-item:active, #mainNav .dropdown-menu li .dropdown-item:hover, #mainNav .dropdown-menu li .dropdown-item:focus { color: #fff; } #mainNav .dropdown-menu li .dropdown-item.active, #mainNav .dropdown-menu li .dropdown-menu .dropdown-item.active { color: var(--base-col-yellow-500); font-weight: 700; } } /* Submenu Style */ #mainNav .dropdown-menu li { font-size: 0.85em; margin-top: 0.2rem; margin-bottom: 0.2rem; margin-left: 0; padding-left: 0; } /* Support Multiple Levels */ .dropdown-menu .dropdown-toggle::after { display: inline-block; margin-left: .255em; vertical-align: .155em; content: ""; border-top: .3em solid transparent; border-right: 0; border-bottom: .3em solid transparent; border-left: .3em solid; } /* Show Submenu onHover on Desktop /* https://stackoverflow.com/a/18024991 */ @media (min-width: 1200px) { .dropdown-menu { position: relative; } .dropdown-menu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } .navbar-nav li:hover > ul.dropdown-menu { display: block; } } /* Navbar Downdown Menu FadeIn Animation (Desktop) */ @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Dark Mode Switcher Styles /* ---------------------------------------------------------------------------------------------------- */ .toggleTheme { opacity: 0; position: absolute; } .toggleTheme-switch { background-color:var(--base-col-blue-500); width:50px; height:26px; border-radius:50px; position:relative; padding:5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background-color .8s ease-out; } .bi-moon-stars-fill, .bi-sun-fill { color: var(--base-col-yellow-500); } .toggleTheme-switch .ball { background-color:#fff; width:22px; height:22px; position:absolute; left:2px; top:2px; border-radius:50%; transition:transform .2s linear; } .toggleTheme:checked+.toggleTheme-switch { background-color: var(--base-col-indigo-800); } .toggleTheme:checked+.toggleTheme-switch .ball { transform: translateX(24px); } .toggleTheme-label { color: #fff; } /* Section General Styles /* ---------------------------------------------------------------------------------------------------- */ section { width: 100%; padding-top: calc(6rem + 50px); padding-bottom: calc(6rem + 50px); } @media (min-width: 992px) { section { padding-top: calc(6rem + 80px); padding-bottom: calc(6rem + 80px); } } section.list-articles { padding-top: 0; padding-bottom: 0; } section.full-width-section { position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* Section: Map Styles /* ---------------------------------------------------------------------------------------------------- */ section.map { width: 100%; position: relative; padding-top: 0; padding-bottom: 0; } section.map .maps { height: 25rem; position: relative; } section.map .maps iframe { height: 100%; width: 100%; } /* Breadcumbs Component Styles /* ---------------------------------------------------------------------------------------------------- */ .breadcrumb { background-color: rgba(0, 0, 0, 0.03); margin-bottom: 0; } /* Breadcrumbs Styles /* ---------------------------------------------------------------------------------------------------- */ .breadcrumbs, .breadcrumbs ol.breadcrumb { background-color: var(--base-col-light-200); flex-wrap: unset; white-space: nowrap; transition: background-color .3s ease-in-out; margin: 0; } [data-bs-theme=dark] .breadcrumbs, [data-bs-theme=dark] .breadcrumbs ol.breadcrumb { background-color: var(--base-col-dark-500); } .breadcrumbs ol.breadcrumb li.breadcrumb-item { font-size: 0.95em; margin-top: 0.8rem !important; margin-bottom: 0.8rem !important; margin-left: 0.2rem; padding-left: 0 !important; } .breadcrumbs ol.breadcrumb li.breadcrumb-item .fa-home { width: 1.5em; } @media (max-width: 620px) { .breadcrumbs ol.breadcrumb li.breadcrumb-item .fa-home { width: .5em; } } .breadcrumb-item+.breadcrumb-item::before { color: #bbb; font-family: bootstrap-icons !important; content: "\F285"; line-height: 1.6; } .breadcrumb-item+.breadcrumb-item:nth-child(2)::before { content: ""; } .breadcrumbs ol.breadcrumb li.breadcrumb-item a, .breadcrumbs ol.breadcrumb li.breadcrumb-item a:active, .breadcrumbs ol.breadcrumb li.breadcrumb-item a:visited, .breadcrumbs ol.breadcrumb li.breadcrumb-item a:hover { color: #666; text-decoration: none; } [data-bs-theme=dark] .breadcrumbs ol.breadcrumb li.breadcrumb-item a, [data-bs-theme=dark] .breadcrumbs ol.breadcrumb li.breadcrumb-item a:active, [data-bs-theme=dark] .breadcrumbs ol.breadcrumb li.breadcrumb-item a:visited, [data-bs-theme=dark] .breadcrumbs ol.breadcrumb li.breadcrumb-item a:hover { color: #bbb; text-decoration: none; } .breadcrumbs ol.breadcrumb li.breadcrumb-item.active { color: var(--base-col-primary-dark); font-weight: bold; margin-left: 0.6rem; } [data-bs-theme=dark] .breadcrumbs ol.breadcrumb li.breadcrumb-item.active { color: var(--light-600); } /* Truncate Breadcrumbs */ .breadcrumbs ol.breadcrumb > li:not(:first-child):not(:last-child) { overflow: hidden; text-overflow: ellipsis; } @media (max-width: 620px) { .breadcrumbs ol.breadcrumb > li:not(:first-child):not(:last-child){ visibility: hidden; width: 0; padding: 0; } .breadcrumbs ol.breadcrumb > li:last-child:before { content: var(--bs-breadcrumb-divider, "/ ... /"); } .breadcrumbs ol.breadcrumb > li:last-child { overflow: hidden; text-overflow: ellipsis; } } /* Homepage Hero Styles /* ---------------------------------------------------------------------------------------------------- */ .hero { padding-top: 0; padding-bottom: 0; width: 100%; } .hero-background-overlay { background-repeat: no-repeat; background-attachment: scroll; background-position: center, center; background-size: cover; width: 100%; height: 85vh; } .hero-background-overlay .hero-text-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: left; } @media screen and (max-height: 992px) { .hero-background-overlay { background-position: left, center;} } /* Carousel Styles (Homepage Slideshow) /* ---------------------------------------------------------------------------------------------------- */ #carousel-homepage .carousel-indicators { padding: .2rem 0; background: rgba(255,255,255,.1); border-radius: 1.25rem; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px; margin-right: 45%; margin-left: 45%; } @media screen and (max-width : 992px) { #carousel-homepage .carousel-indicators { padding: 0; margin-right: 35%; margin-left: 35%; } } #carousel-homepage .carousel-indicators [data-bs-target] { width: .5rem; height: .5rem; background-color:#fff !important; border-radius: 50%; margin-right: 0.5rem; margin-left: 0.5rem; opacity: 1; position: relative; transition: transform .2s linear; } #carousel-homepage .carousel-indicators [data-bs-target]:focus-within { width: .5rem; height: .5rem; border-radius: 50%; outline:none; } #carousel-homepage .carousel-indicators .active { background-color:#ff6600 !important; transform: scale(1.5); } #carousel-homepage .carousel-indicators [data-bs-target]:hover { transform: scale(1.5); } #carousel-homepage .carousel-indicators .active:hover { transform: scale(1.5); } #carousel-homepage .carousel-control-prev { background-image: linear-gradient(to right,rgba(0,0,0,.15) 0,rgba(0,0,0,.0001) 100%); background-repeat: repeat-x; } #carousel-homepage .carousel-control-next { background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.15) 100%); background-repeat: repeat-x; } #carousel-homepage .carousel-control-prev, #carousel-homepage .carousel-control-next { opacity: 0; } #carousel-homepage:hover .carousel-control-prev, #carousel-homepage:hover .carousel-control-next { opacity: 1; } #carousel-homepage:hover .carousel-control-prev { animation: FadeInPrev 0.3s linear; } #carousel-homepage:hover .carousel-control-next { animation: FadeInNext 0.3s linear; } /* Carousel Styles (Article Slideshow) /* ---------------------------------------------------------------------------------------------------- */ #carousel-article .carousel-indicators { padding: .2rem 0; background: rgba(0,0,0,.5); border-radius: 1.25rem; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px; margin-right: 45%; margin-left: 45%; } @media screen and (max-width : 992px) { #carousel-article .carousel-indicators { padding: 0; margin-right: 35%; margin-left: 35%; } } #carousel-article .carousel-indicators [data-bs-target] { width: .5rem; height: .5rem; background-color:#fff !important; border-radius: 50%; margin-right: 0.5rem; margin-left: 0.5rem; opacity: 1; position: relative; transition: transform .2s linear; } #carousel-article .carousel-indicators [data-bs-target]:focus-within { width: .5rem; height: .5rem; border-radius: 50%; outline:none; } #carousel-article .carousel-indicators .active { background-color:#ff6600 !important; transform: scale(1.5); } #carousel-article .carousel-indicators [data-bs-target]:hover { transform: scale(1.5); } #carousel-article .carousel-indicators .active:hover { transform: scale(1.5); } #carousel-article .carousel-control-prev { background-image: linear-gradient(to right,rgba(0,0,0,.15) 0,rgba(0,0,0,.0001) 100%); background-repeat: repeat-x; -webkit-border-radius: .5rem 0 0 .5rem; -moz-border-radius: .5rem 0 0 .5rem; border-radius: .5rem 0 0 .5rem; } #carousel-article .carousel-control-next { background-image: linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.15) 100%); background-repeat: repeat-x; -webkit-border-radius: 0 .5rem .5rem 0; -moz-border-radius: 0 .5rem .5rem 0; border-radius: 0 .5rem .5rem 0; } #carousel-article .carousel-control-prev, #carousel-article .carousel-control-next { opacity: 0; } #carousel-article:hover .carousel-control-prev, #carousel-article:hover .carousel-control-next { opacity: 1; } #carousel-article:hover .carousel-control-prev { animation: FadeInPrev 0.3s linear; } #carousel-article:hover .carousel-control-next { animation: FadeInNext 0.3s linear; } /* Carousel Styles (Homepage Slideshow + Article Slideshow Fade Effect) /* ---------------------------------------------------------------------------------------------------- */ @keyframes FadeInPrev { 0% { padding-left: 60px; } 100% { padding-left: 0px; } } @keyframes FadeInNext { 0% { padding-right: 60px; } 100% { padding-right: 0px; } } @keyframes FadeOut { 0% {opacity: 1; } 100% {opacity: 0; } } /* Main Styles /* ---------------------------------------------------------------------------------------------------- */ main { width: 100%; padding-top: 0; padding-bottom: 0; } /* Page Header Styles /* ---------------------------------------------------------------------------------------------------- */ .page-header { margin-bottom: 50px; padding-top: calc(50px + 1.5rem); padding-bottom: calc(50px + 1.5rem); width: 100%; min-height: 250px; position: relative; } .page-header [class|="col"] { margin-bottom: 0 !important; } /* Page Title Styles /* ---------------------------------------------------------------------------------------------------- */ .page-header h1 { color: #fff; font-size: 2.75rem; font-weight: var(--font-weight-bold); } .page-header h6 { color: #fff; } @media (max-width: 992px) { .page-header h1, .page-header h6 { text-align: center; } } /* Sidebar and Sidebar Navbar Styles /* ---------------------------------------------------------------------------------------------------- */ .sidebar-left.card .card-header, .sidebar-right.card .card-header { font-size: 1.1rem; text-transform: capitalize; } .sidebar-left.card .card-body, .sidebar-right.card .card-body { padding: 0.3rem 0.3rem; } .sidebar-left.card .card-body .nav .nav-item .nav-link, .sidebar-right.card .card-body .nav .nav-item .nav-link, .sidebar-left.no-card .nav .nav-item .nav-link, .sidebar-right.no-card .nav .nav-item .nav-link { color: inherit; padding: .2rem 1rem; } .sidebar-left.card .card-body .nav .nav-item .nav-link.active, .sidebar-right.card .card-body .nav .nav-item .nav-link.active, .sidebar-left.no-card .nav .nav-item .nav-link.active, .sidebar-right.no-card .nav .nav-item .nav-link.active { color: #ff5722; font-weight: bold; } .sidebar-left.no-card h3, .sidebar-right.no-card h3 { border-bottom: 1px solid #ddd; font-size: 1.1rem; text-transform: capitalize; padding: 0.8rem 0.5rem; } /* Section Cards Styles /* ---------------------------------------------------------------------------------------------------- */ .card-section .card-img-overlay { background-color: rgba(0,0,0,0.4); border-radius: .375rem .375rem 0px 0px; margin-bottom: 65px; } @media (max-width: 992px) { .card-section .card-img-overlay { margin-bottom: 58px; } } .card-section .card-body { min-height: 120px; } .card-section .card-body .card-title { font-weight: var(--font-weight-semibold); font-size: 1.25rem; } .card-section .card-footer { padding: 0; } .card-section .card-footer .btn-card { border-radius: 0px 0px .375rem .375rem; padding: 1rem .5rem; } .card-section:hover { transform: scale(1.025); transition: all 1s ease; z-index: 999; } .card-header { font-size: 1.25rem; font-weight: var(--font-weight-semibold); } .card-img-middle { border-top-left-radius: 0; border-top-right-radius: 0 !important; } /* Footer Styles /* ---------------------------------------------------------------------------------------------------- */ footer { background-color: var(--base-col-dark-500); color: #eee; font-size: 95%; padding: 5rem 0 1rem; } [data-bs-theme=dark] footer { background-color: var(--base-col-dark-300); color: var(--base-col-light-500); } footer p { color: #eee; font-size: 0.8rem !important; } footer .nav.footer { justify-content: center; } footer .nav.footer .nav-link, footer .nav.footer .nav-link:hover, footer .nav.footer .nav-link:visited { color: #eee; font-size: 0.85rem !important; text-decoration: none; } footer .copyright { color: #eee; font-size: 0.75rem; display: block; margin-top: -15px; } /* Social Buttons Styles /* ---------------------------------------------------------------------------------------------------- */ a.btn-social, .btn-social { padding-left: 4px; border-radius:50%;color:#ffffff!important; display:inline-block; height:54px ;line-height:54px; margin:8px 4px; text-align:center; text-decoration:none; transition:background-color .3s; webkit-transition:background-color .3s; width:54px; } .btn-social .fa, .btn-social i, .btn-social span { text-align: center; backface-visibility:hidden; moz-backface-visibility:hidden; ms-transform:scale(1); o-transform:scale(1); transform:scale(1); transition:all .25s; webkit-backface-visibility:hidden; webkit-transform:scale(1); webkit-transition:all .25s; } .btn-social:hover, .btn-social:focus { color: #fff; outline: none; text-decoration: none; } .btn-social:hover .fa, .btn-social:focus .fa, .btn-social:hover i, .btn-social:focus i, .btn-social:hover span, .btn-social:focus span { ms-transform: scale(1.3); o-transform: scale(1.3); transform: scale(1.3); webkit-transform: scale(1.3); } .btn-social.btn-xs { font-size: 9px; height: 24px; line-height: 13px; margin: 6px 2px; width: 24px; } .btn-social.btn-sm { font-size: 13px; height: 36px; line-height: 18px; margin: 6px 2px; width: 36px; } .btn-social.btn-lg { font-size: 22px; height: 72px; line-height: 40px; margin: 10px 6px; width: 72px; } .btn-facebook { background-color: #3b5998; } .btn-facebook:hover { background-color: #4c70ba; } .btn-instagram { background-color: #e1306c; } .btn-instagram:hover { background-color: #e8499c; } .btn-linkedin { background-color: #0976b4; } .btn-linkedin:hover { background-color: #0b96e5; } /* Preloader Styles /* ---------------------------------------------------------------------------------------------------- */ #preloader { background: #0079c4; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; overflow: hidden; opacity: 0.9; } #preloader:before { content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #0079c4; border-top-color: #fff; border-bottom-color: #fff; border-radius: 50%; width: 60px; height: 60px; -webkit-animation: animate-preloader 1s linear infinite; animation: animate-preloader 1s linear infinite; } @-webkit-keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-preloader { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Scroll Progress Bar Styles /* ---------------------------------------------------------------------------------------------------- */ /* Fixed position (always stay at the bottom of mainNav) */ .scroll-progress { position: absolute; bottom: -3px; z-index: 999; width: 100%; background-color: transparent; } /* The progress bar container */ .page-scroll-progress { width: 100%; height: 3px; background-color: transparent; } /* The progress bar (scroll indicator) */ .page-scroll-progress-bar { height: 3px; background: #32c728; width: 0%; } /* Back to Top /* ---------------------------------------------------------------------------------------------------- */ #toTop { background: #0099ff; cursor:pointer; display:none; color:#fff; font-size: 1em; text-align:center; text-transform: capitalize; padding: 3px 2px; width: 40px; height: 40px; position:fixed; bottom:15px; right:15px; z-index: 1021; transition: background 0.5s; -webkit-border-radius: 50px !important; -moz-border-radius: 50px !important; border-radius: 50px !important; } #toTop i { font-weight: 800; padding: 0; padding-top: 8px; } [data-bs-theme=dark] #toTop { background: rgba(0, 0, 0, 0.2); } /* ---------------------------------------------------------------------------------------------------- #04 UI COMPONENT STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Default HR Styles /* ---------------------------------------------------------------------------------------------------- */ hr { border-top: 1.5px solid #444; margin-top: 1rem !important; margin-bottom: 3rem !important; } /* Blockquote Styles /* ---------------------------------------------------------------------------------------------------- */ blockquote { border-left: 5px solid #e0e0e0; padding: 0.5rem 1rem; } blockquote p { font-size: 1.25rem; margin-bottom: 0.5rem !important; } blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child { margin-bottom: 0; } blockquote .blockquote-footer { display: block; font-size: 0.85rem; line-height: 1.42857143; color: #909090;; margin-top: 0.5rem; } blockquote .blockquote-footer:before { content: '\2014 \00A0'; } blockquote.blockquote-quoted { font-family: 'Open Sans' serif; font-size: 1.25em; line-height: 1.5em; padding-left: 20px; position: relative; } blockquote.blockquote-quoted .blockquote-footer { font-family: 'Open Sans', sans-serif !important; font-size: 0.85em; font-weight: 300; color: #bbb; float: right; } blockquote.blockquote-quoted .blockquote-footer:before { content: '\2015'; } blockquote.blockquote-quoted:after { content: '\201D'; position: absolute; top: 0.28em; right: 0; font-size: 6em; font-style: italic; color: #eee; z-index: -1; } /* Bootstrap Alert Styles (v5.1.1) /* ---------------------------------------------------------------------------------------------------- */ .alert h4 { font-size: 1.25rem; font-weight: var(--font-weight-bold); } .alert p:last-child, .alert ul:last-child, .alert ol:last-child { margin-bottom: 0; } /* Bootstrap Callout Styles (v3.4.1) /* ---------------------------------------------------------------------------------------------------- */ .note { padding: 20px; margin: 20px 0; border: 1px; border-left: 5px solid; border-radius: 5px; } .note + .note { margin-top: -5px; } .note h3, .note h4, .note h5, .note h6 { margin-top: 0; margin-bottom: 5px; font-weight: var(--font-weight-bold); } .note strong { font-weight:500; } .note p:last-child { margin-bottom: 0; } .note-primary { background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); color: var(--bs-primary-text-emphasis); } .note-primary h3, .note-primary h4, .note-primary h5, .note-primary h6 { color: var(--bs-primary-text-emphasis) } .note-primary .note-link { color: var(--bs-primary-text-emphasis); } .note-secondary { background-color: var(--bs-secondary-bg-subtle); border-color: var(--bs-secondary-border-subtle); color: var(--bs-secondary-text-emphasis); } .note-secondary h3, .note-secondary h4, .note-secondary h5, .note-secondary h6 { color: var(--bs-secondary-text-emphasis); } .note-secondary .note-link { color: var(--bs-secondary-text-emphasis); } .note-success { background-color: var(--bs-success-bg-subtle); border-color: var(--bs-success-border-subtle); color: var(--bs-success-text-emphasis); } .note-success h3, .note-success h4, .note-success h5, .note-success h6 { color: var(--bs-success-text-emphasis) } .note-success .note-link { color: var(--bs-success-text-emphasis); } .note-info { background-color: var(--bs-info-bg-subtle); border-color: var(--bs-info-border-subtle); color: var(--bs-info-text-emphasis); } .note-info h3, .note-info h4, .note-info h5, .note-info h6 { color: var(--bs-info-text-emphasis); } .note-info .note-link { color: var(--bs-info-text-emphasis); } .note-warning { background-color: var(--bs-warning-bg-subtle); border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); } .note-warning h3, .note-warning h4, .note-warning h5, .note-warning h6 { color: var(--bs-warning-text-emphasis); } .note-warning .note-link { color: var(--bs-warning-text-emphasis); } .note-danger { background-color: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); color: var(--bs-danger-text-emphasis); } .note-danger h3, .note-danger h4, .note-danger h5, .note-danger h6 { color: var(--bs-danger-text-emphasis); } .note-danger .note-link { color: var(--bs-danger-text-emphasis); } .note-light { background-color: var(--bs-light-bg-subtle); border-color: var(--bs-light-border-subtle); color: var(--bs-light-text-emphasis) } .note-light h3, .note-light h4, .note-light h5, .note-light h6 { color: var(--bs-light-text-emphasis); } .note-light .note-link { color: var(--bs-light-text-emphasis); } .note-dark { background-color: var(--bs-dark-bg-subtle); border-color: var(--bs-dark-border-subtle); color: var(--bs-dark-text-emphasis);} .note-dark h3, .note-dark h4, .note-dark h5, .note-dark h6 { color: var(--bs-dark-text-emphasis); } .note-dark .note-link { color: var(--bs-dark-text-emphasis); } /* Bootstrap Circle Button /* ---------------------------------------------------------------------------------------------------- */ .btn-circle.btn-sm { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle, .btn-circle.btn-md { width: 50px; height: 50px; padding: 10px 5px; font-size: 20px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-lg { width: 70px; height: 70px; padding: 10px 5px; font-size: 32px; line-height: 1.4; border-radius: 35px; } /* Styled Video Embed /* ---------------------------------------------------------------------------------------------------- */ .card .video-container { -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); -webkit-transform: rotate(0.000001deg); -webkit-border-radius: 0.375rem; -moz-border-radius: 0.375rem; border-radius: 0.375rem; overflow: hidden; display: inline-flex; } /* Accordion Styles /* ---------------------------------------------------------------------------------------------------- */ .accordion .accordion-item { border: 0; box-shadow: 0px 0 5px rgba(0, 0, 0, 0.25); } .accordion .accordion-item + .accordion-item { margin-top: 1em; } .accordion .accordion-item .accordion-header { background-color: var(--base-accordion-btn-bg);; border-bottom: 0 !important; } .accordion .accordion-item .accordion-header, .accordion .accordion-item h2.accordion-header, .accordion .accordion-item h3.accordion-header, .accordion .accordion-item h5.accordion-header { font-size: 1.15em; position: relative; } .accordion-button, .accordion-button.collapsed { background-color: transparent; color: var(--base-accordion-btn-color); text-decoration: none !important; } .accordion-button:not(.collapsed) { color: var(--base-accordion-btn-color); background-color: transparent; } .accordion .accordion-item .accordion-header a.accordion-button, .accordion .accordion-item h2.accordion-header a.accordion-button, .accordion .accordion-item h3.accordion-header a.accordion-button, .accordion .accordion-item h5.accordion-header a.accordion-button { background-color: var(--base-accordion-btn-bg); color: var(--base-accordion-btn-color); font-weight: bold; text-align: left; text-transform: none; } .accordion .accordion-item .accordion-header a.accordion-button.collapsed, .accordion .accordion-item h2.accordion-header a.accordion-button.collapsed, .accordion .accordion-item h3.accordion-header a.accordion-button.collapsed, .accordion .accordion-item h5.accordion-header a.accordion-button.collapsed { background-color: var(--base-accordion-btn-bg); color: var(--base-accordion-btn-color); text-decoration: none !important; text-transform: none; } .accordion .accordion-item .accordion-header a.accordion-button.collapsed:not(.collapsed), .accordion .accordion-item h2.accordion-header a.accordion-button.collapsed:not(.collapsed), .accordion .accordion-item h3.accordion-header a.accordion-button.collapsed:not(.collapsed), .accordion .accordion-item h5.accordion-header a.accordion-button.collapsed:not(.collapsed) { background-color: var(--base-accordion-active-bg); color: var(--base-accordion-btn-color); text-decoration: none !important; } /* Accordion Default Chevon Icon */ .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } /* Accordion Plus Minus Icon */ .accordion-plus .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e"); transform: scale(.7) !important; } .accordion-plus .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");} .accordion .accordion-item .accordion-body, .accordion .accordion-item .accordion-body p { color: var(--base-accordion-color); font-size: .95rem; line-height: 30px; } .accordion .accordion-item .collapse.show { background: var(--base-accordion-bg); } /* Tabs Styles /* ---------------------------------------------------------------------------------------------------- */ .nav-tabs .nav-item { padding-left: 0.5rem; margin-bottom: 0 !important; } .nav-tabs .nav-link { background-color: #eee; border-color: #dee2e6 #dee2e6 #eee; color: #444; } [data-bs-theme=dark] .nav-tabs .nav-link { background-color: var(--base-col-dark-300); border-color: var(--base-col-dark-300); color: var(--base-col-light-500); } .nav-tabs .nav-link.active, .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active:hover { background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; border-top: 3px solid #ff6600; color: #444; } [data-bs-theme=dark] .nav-tabs .nav-link.active, [data-bs-theme=dark] .nav-tabs .nav-link.active:focus, [data-bs-theme=dark] .nav-tabs .nav-link.active:hover { background-color: var(--base-col-dark-500); border-color: var(--base-col-dark-500) var(--base-col-dark-500) var(--base-col-dark-500); border-top: 3px solid #ff6600; color: var(--base-col-light-500); } .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover { background-color: #ddd; border-color: #ddd; } [data-bs-theme=dark] .nav-tabs .nav-link:focus, [data-bs-theme=dark] .nav-tabs .nav-link:hover { background-color: var(--base-col-dark-100); border-color: var(--base-col-dark-100); } .tab-content { background: #fff; line-height: 25px; color:#333; border-radius:0; transition:background 0.20s linear; padding-top: 20px; padding-bottom: 30px; padding-left: 1rem; padding-right: 1rem; } [data-bs-theme=dark] .tab-content { background: var(--base-col-dark-500); line-height: 25px; color: var(--base-col-light-500); border-radius:0; transition:background 0.20s linear; padding-top: 20px; padding-bottom: 30px; padding-left: 1rem; padding-right: 1rem; } /* Generic Responsive Tab Styles /* ---------------------------------------------------------------------------------------------------- */ @media (max-width: 992px) { /* Responsive Tabs */ .nav-tabs { border-bottom: none; display: flex; flex-direction: column; width: 100%; } .nav-tabs .nav-item .nav-link { border-radius: var(--bs-nav-tabs-border-radius); width: 100%; margin: 0.1rem 0; } .nav-tabs .nav-item .nav-link.active { border-color: #dee2e6; border-top: 3px solid orange; } } /* Custom Form Styles /* ---------------------------------------------------------------------------------------------------- */ .form-control, .form-select { color: #888; background: #fff; font-weight: 400; padding: 6px 12px; border-radius: 5px; border: 2px solid #e7e7e7; box-shadow: 0 0 5px #efefef; } .form-control:focus, .form-select:focus { box-shadow: 0 0 10px #dcdcdc; } .btn:focus { color: var(--base-col-white); } .btn-block { display: block; width: 100%; } /* ---------------------------------------------------------------------------------------------------- #05 HELPER STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Ripple Click Effect Styles /* https://github.com/mladenplavsic/css-ripple-effect /* ---------------------------------------------------------------------------------------------------- */ .ripple { position: relative; overflow: hidden; transform: translate3d(0, 0, 0); } .ripple:after { content: ""; display: block; position: absolute; width: 100%; height: 120%; top: 0; left: 0; pointer-events: none; background-image: radial-gradient(circle, #fff 10%, transparent 10%); background-repeat: no-repeat; background-position: 50%; transform: scale(10, 10); opacity: 0; transition: transform .5s, opacity 1s; } .ripple:active:after { transform: scale(0, 0); opacity: .2; transition: 0s; } /* Mask Effect Styles /* ---------------------------------------------------------------------------------------------------- */ .mask-container { position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50%; } .mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-attachment: fixed; } .mask.mask-dark { background-color: rgba(0, 0, 0, 0.6); } /* Hover Overlay Styles /* ---------------------------------------------------------------------------------------------------- */ .hover-overlay .mask { opacity: 0; transition: all .3s ease-in-out; } .hover-overlay .mask:hover { opacity: 1; } .hover-overlay .mask.mask-overlay { background-color: rgba(57, 192, 237, 0.2); } /* Responsive Embeds Styles: add .ratio before the following classes /* ---------------------------------------------------------------------------------------------------- */ .embed-responsive-doc, .ratio-doc { padding-bottom: 100vh; } .embed-responsive-ppt, .ratio-ppt { padding-bottom: 56.25%; } .embed-responsive-cal, .ratio-cal { padding-bottom: 75%; } .embed-responsive-map, .ratio-map { padding-bottom: 90%; } .embed-responsive-map, .ratio-fb { padding-bottom: 120%; } /* Shadow Styles /* ---------------------------------------------------------------------------------------------------- */ .shadow, .shadow-md { box-shadow: var(--base-box-shadow-md) !important; } .shadow-0 { box-shadow: var(--base-box-shadow-none) !important; } .shadow-xs { box-shadow: var(--base-box-shadow-xs) !important; } .shadow-sm { box-shadow: var(--base-box-shadow-sm) !important; } .shadow-lg { box-shadow: var(--base-box-shadow-lg) !important; } .shadow-xl { box-shadow: var(--base-box-shadow-xl) !important; } .card.hover-shadow, .hover-shadow { box-shadow:none; transition:all .3s ease-in-out } .card.hover-shadow:hover, .hover-shadow:hover { box-shadow: 0 .3rem 0.8rem rgba(0,0,0,.3)!important; transition:all .3s ease-in-out } /* Rounded Corners Styles /* ---------------------------------------------------------------------------------------------------- */ .rounded, .rounded-md { border-radius: var(--base-border-radius-md) !important; } .rounded-0 { border-radius: var(--base-border-radius-none) !important; } .rounded-xs { border-radius: var(--base-border-radius-xs) !important; } .rounded-sm { border-radius: var(--base-border-radius-sm) !important; } .rounded-lg { border-radius: var(--base-border-radius-lg) !important; } .rounded-xl { border-radius: var(--base-border-radius-xl) !important; } .rounded-circle { border-radius: var(--base-border-radius-circle) !important; } .rounded-pill { border-radius: 50rem !important; min-width: 250px; } /* Transitions Styles /* ---------------------------------------------------------------------------------------------------- */ .transition, .transition-md { transition: var(--base-transition-md) !important; } .transition-xs { transition: var(--base-transition-xs) !important; } .transition-sm { transition: var(--base-transition-sm) !important; } .transition-lg { transition: var(--base-transition-lg) !important; } .transition-xl { transition: var(--base-transition-xl) !important; } /* Opacity Styles /* ---------------------------------------------------------------------------------------------------- */ .opacity-0 { opacity: var(--base-opacity-none) !important; } .opacity-5 { opacity: var(--base-opacity-5) !important; } .opacity-10 { opacity: var(--base-opacity-10) !important; } .opacity-15 { opacity: var(--base-opacity-15) !important; } .opacity-20 { opacity: var(--base-opacity-20) !important; } .opacity-30 { opacity: var(--base-opacity-30) !important; } .opacity-40 { opacity: var(--base-opacity-40) !important; } .opacity-60 { opacity: var(--base-opacity-60) !important; } .opacity-70 { opacity: var(--base-opacity-70) !important; } .opacity-80 { opacity: var(--base-opacity-80) !important; } .opacity-90 { opacity: var(--base-opacity-90) !important; } .img-fluid-75 { width: 100%; } .img-fluid-50 { width: 100%; } @media (min-width: 992px) { .img-fluid-75 { width: 75%; /*display: block; margin-left: auto; margin-right: auto;*/ } .img-fluid-50 { width:50%; /*display: block; margin-left: auto; margin-right: auto;*/ } } /* Enhance Bootstrap Card Overlay Style /* ---------------------------------------------------------------------------------------------------- */ .card-img-overlay { background-color: rgba(0, 0, 0, 0.4); } /* Square Box Style /* ---------------------------------------------------------------------------------------------------- */ .square { background-color: #fbfbfb; text-align: center; display: inline-block; width: 130px; height: 130px; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.14); margin: 20px; padding-top: 50px; } /* Font Styles /* ---------------------------------------------------------------------------------------------------- */ /* -- Strikedthrough and Mark ----------------------- */ s { color: #b94a48; } ins { color: #3a87ad; } mark, .mark, .highlighted { background-color: #ffff99; padding: 0.3em 0.25em; } /* -- Font Alignment -------------------------------- */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } /* -- Font Formating -------------------------------- */ .text-bold, .font-bold, strong, b { font-weight: 600 !important; } .text-italics, .font-italics, em, i:not(.bi):not(.fa):not(.fas):not(.fab):not(.far) :not(.fa-solid):not(.fa-regular):not(.fa-light):not(.fa-thin):not(.fa-brands):not(.fa-dutone) { font-style: italic !important; } .text-light, .font-light { font-weight: 300 !important; } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } /* Date and Time Picker Style Override /* ---------------------------------------------------------------------------------------------------- */ .bootstrap-datetimepicker-widget.dropdown-menu { margin: 2px 0; padding: 3px; width: 18rem; } /* ---------------------------------------------------------------------------------------------------- #06 CMS STYLES /* ---------------------------------------------------------------------------------------------------- */ /* Homepage Slideshow Custom Fields Styles /* ---------------------------------------------------------------------------------------------------- */ .fields-container, .com-content-article .fields-container, .fields-container .field-entry, .com-content-article .fields-container .field-entry, .com-content-category-blog.blog .fields-container .field-entry { background-image: none !important; list-style: none !important; margin: 0; padding-left: 0; } .com-content-article .fields-container .field-entry::marker, .com-content-category-blog.blog .fields-container .field-entry::marker { content: ""; } /* Navigation Menu Component Styles /* ---------------------------------------------------------------------------------------------------- */ .container-component nav { position: relative; } .mod-menu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mod-list { -webkit-padding-start: 0; list-style: none; padding-inline-start: 0; } /* Article Component Category List Table Styles /* ---------------------------------------------------------------------------------------------------- */ .com-content-category__articles { margin-bottom: 100px; } .com-content-category__pagination { margin-bottom: 1em; } .form-select, .custom-select { appearance: none; background: var(--base-col-light-400) url(../images/select-bg.svg) 100%/116rem no-repeat; border: 1px solid var(--base-col-light-800); border-radius: .25rem; color: var(--brand-doc-font-color); cursor: pointer; display: block; font-size: 1rem; font-weight: 400; line-height: 1.5; padding: .6rem 3rem .6rem 1rem; max-width: 100%; width: 100%; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } [data-bs-theme=dark] .form-select, [data-bs-theme=dark] .custom-select { background: var(--base-col-light-400) url(../images/select-bg.svg) 100%/116rem no-repeat; border: 1px solid var(--base-col-dark-800); border-radius: .25rem; color: var(--base-col-dark-800); } .com-content-category__table.table thead.table-light { --bs-table-bg: var(--base-col-light-300); } [data-bs-theme=dark] .com-content-category__table.table thead.table-light { --bs-table-bg: var(--base-col-dark-300); } .com-content-category__table.table thead th, .com-content-category__table.table thead th a { text-decoration: none; } [data-bs-theme=dark] .com-content-category__table.table thead th, [data-bs-theme=dark] .com-content-category__table.table thead th a { color: var(--brand-doc-font-color); text-decoration: none; } .com-content-category__table.table tbody th, .com-content-category__table.table tbody th a { font-weight: var(--font-weight-medium); text-decoration: none; text-transform: capitalize; } [data-bs-theme=dark] .com-content-category__table.table tbody th, [data-bs-theme=dark] .com-content-category__table.table tbody th a { color: var(--brand-doc-font-color); font-weight: var(--font-weight-medium); text-decoration: none; text-transform: capitalize; } /* Article Component Category Description Styles /* ---------------------------------------------------------------------------------------------------- */ .com-content-category-blog.blog .category-desc, .com-content-category-blog.blog .category-desc p { } /* Article Component Category Blog Item Styles /* ---------------------------------------------------------------------------------------------------- */ .com-content-category-blog__item.blog-item h3, .com-content-category-blog__item.blog-item h3 a, .com-content-category-blog__item.blog-item h3 a:hover, .com-content-category-blog__item.blog-item h3 a:visited { color: var(--base-col-dark-500); font-size: 1.6rem; font-weight: var(--font-weight-bold); text-decoration: none; margin-bottom: 2rem; } [data-bs-theme=dark] .com-content-category-blog__item.blog-item h3, [data-bs-theme=dark] .com-content-category-blog__item.blog-item h3 a, [data-bs-theme=dark] .com-content-category-blog__item.blog-item h3 a:hover, [data-bs-theme=dark] .com-content-category-blog__item.blog-item h3 a:visited { color: var(--base-col-light-800); font-size: 1.6rem; font-weight: var(--font-weight-bold); text-decoration: none; margin-bottom: 2rem; } .com-content-category-blog__item.blog-item p, .com-content-category-blog__item.blog-item li { color: var(--base-col-dark-800); font-size: 0.95rem; font-weight: var(--font-weight-regular); line-height: 1.4; text-decoration: none; margin-bottom: 0.8rem; } .com-content-category-blog__item.blog-item .readmore { margin-top: 2rem; } .com-content-category-blog__item.blog-item .fields-container { margin-top: calc(3rem + 5px); margin-bottom: calc(1rem + 5px); } /* Article Component Category Blog Item Links Styles /* ---------------------------------------------------------------------------------------------------- */ .items-more .com-content-blog__links { margin-top: calc(3rem + 5px); margin-bottom: calc(1rem + 5px); } .items-more .com-content-blog__links.card .card-header { font-weight: var(--font-weight-bold); } [data-bs-theme=dark] .items-more .com-content-blog__links.card .list-group .list-group-item, [data-bs-theme=dark] .items-more .com-content-blog__links.card .list-group .list-group-item:hover { color: var(--brand-doc-font-color); } /* Article Info Styles /* ---------------------------------------------------------------------------------------------------- */ .article-info-term { display: none;} /* Article Tag Styles /* ---------------------------------------------------------------------------------------------------- */ .tags li { margin-bottom: 0; margin-left: 0; padding-left: 0; } .tags li:not(:last-child) { margin-right: .5rem; } /* Article Gallery Styles /* ---------------------------------------------------------------------------------------------------- */ .article-gallery .gallery-image .gallery-overlay { position: relative; display: block; overflow: hidden; } .article-gallery .gallery-image .gallery-overlay:before { position: absolute; top: 50%; left: 50%; margin-top: -1rem; margin-left: -1rem; opacity: 0; color: #fff; font-family: 'Font Awesome 6 Free'; font-size: 2rem; font-weight: 900; content: '\f002'; display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; pointer-events: none; z-index: 9000; transition: 0.4s; } .article-gallery .gallery-image .gallery-overlay:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; background-color: rgba(17, 17, 17, 0.5); content: ''; transition: 0.4s; } .article-gallery .gallery-image .gallery-overlay:hover:after, .article-gallery .gallery-image .gallery-overlay:hover:before { opacity: 1; } .gallery-image { object-fit: cover; transform: scale(1.05); transition: transform .5s; } .gallery-overlay:hover .gallery-image { transform: scale(1.2); } /* Lightbox Hover Cursor Style /* ---------------------------------------------------------------------------------------------------- */ .lightbox:hover { cursor: zoom-in; } /* Pagination Styles /* ---------------------------------------------------------------------------------------------------- */ .pagination { padding: 20px 0; } .page-item { margin-bottom: 0; margin-left: 0; padding-left: 0; } .page-item.active .page-link, .page-item.active .page-link:hover { background-color: #145889; color: var(--base-col-white) } .com-content-category-blog__navigation { font-size: 0.95rem; } .com-content-category-blog__counter { color: #888; } /* Pager Styles /* ---------------------------------------------------------------------------------------------------- */ .pagenavigation, .pager { clear:both; } .com-content-category-blog__navigation { margin-top: 3rem; } .com-content-category-blog__navigation, .pagenavigation { border-top: 1px solid var(--base-col-light-500); width: 100%; padding-top: 1rem; padding-bottom: calc(3rem + 5px); } .pagenavigation .pagination, .pager .pagination { justify-content:space-between; margin:1em 0; padding:0 } .pagenavigation .pagination .next:only-child, .pager .pagination .next:only-child { margin-left:auto; } .page-link, .page-link:hover { color:var(--link-color); } [data-bs-theme=dark] .page-link, [data-bs-theme=dark] .page-link:hover { color:var(--base-col-light-300) !important; }