@charset "UFT-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root {
--color-primary-blue: #00378a;
--color-secondary-blue: #003f9c;
--color-primary-yellow: #ffc200;
--color-secondary-yellow: #ffb100;
--color-primary-white: #FFFFFF;
--color-primary-gray: #ccc;
--color-secondary-gray: #888;
--color-primary-black: #333;
} ::-webkit-scrollbar {
width: 5px;
height: 5px;
border: 1px solid #DDD;
}
::-webkit-scrollbar:hover {
width: 15px;
} ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.0);
} ::-webkit-scrollbar-thumb {
background: rgba(145, 145, 145, 0.5);
} ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.2);
}
#masthead {
width: 100%;
height: 80px; box-shadow: 0 1px 4px var(--color-secondary-gray);
background-color: var(--color-primary-white);
position: sticky;
top: 0;
z-index: 300;
}
#masthead .site-branding img {
width: 100%;
max-width: 200px;
}
#masthead nav.site-navbar {
min-width: 300px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#masthead nav.site-navbar>div {
display: flex;
align-items: center;
justify-content: center;
}
#masthead nav.site-navbar>div ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
#masthead nav.site-navbar>div ul li a {
padding: 8px;
border-radius: 4px;
background-color: var(--color-primary-white);
color: var(--color-primary-black);
text-decoration: none;
text-transform: uppercase;
font-weight: 500;
font-size: 0.8rem;
}
#masthead nav.site-navbar>div ul li a:hover {
background-color: var(--color-primary-blue);
color: var(--color-primary-white);
}
#masthead .header-search {
display: block;
width: 100%;
max-width: 280px;
}
#masthead .header-search form {
width: 100%;
max-width: 280px;
}
#masthead .header-search form input {
width: 100%;
max-width: 280px;
background-color: #FAFAFA;
font-size: 0.8rem;
}
div.content-all {
position: relative;
}
div.content-all aside.sidebar {
width: 100%;
min-width: 340px;
min-height: 100vh;
background-color: var(--color-primary-blue);
color: var(--color-primary-gray);
}
div.content-all aside.sidebar nav.site-navbar {
padding: 8px 0;
}
div.content-all aside.sidebar .nav-link {
margin: 2px 8px;
padding: 14px;
border-bottom: 1px solid var(--color-secondary-blue);
border-radius: 0;
z-index: 200;
}
div.content-all aside.sidebar .nav-link:hover {
background-color: var(--color-primary-blue);
border-radius: 8px;
filter: brightness(1.2);
}
div.content-all aside.sidebar span,
div.content-all aside.sidebar p {
margin: 0;
}
div.content-all aside.sidebar-compact {
max-width: 65px !important;
min-width: 65px !important;
white-space: nowrap;
}
div.content-all aside.sidebar-compact p {
display: none;
}
div.content-all aside.sidebar-compact .nav-link:hover {
width: 340px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
div.content-all aside.sidebar-compact .nav-link:hover p {
display: block;
}
div.content-all div.content {
width: 100%;
padding: 8px 16px;
}
div.content-all div.content div.main-search,
div.content-all div.content div.main-search form,
div.content-all div.content div.main-search form input.form-control {
width: 100%;
max-width: 1440px;
height: 50px;
margin: 0 auto;
display: none;
}
div.content-all div.content div.main-search form input.form-control {
border: 1px solid var(--color-primary-gray);
background-color: #FAFAFA;
}
div.content-all div.content div.main-search form .btn-search {
width: 50px;
}
div.content-all div.content section.content {
max-width: 1440px;
margin: 16px auto;
padding-bottom: 32px;
border-bottom: 1px solid #E8E8E8;
flex: 1;
}
div.content-all div.content section.content header h2 {
width: 100%;
padding-bottom: 8px;
display: flex;
align-items: end;
gap: 16px;
color: var(--color-primary-blue);
}
div.content-all div.content section.content header h2 span.material-symbols-outlined {
font-size: 2.1rem !important;
}
div.content-all div.content section.content a {
width: 100%;
text-decoration: none;
}
div.content-all div.content section.content div.card {
padding-left: 16px;
border: 1px solid var(--color-primary-gray);
box-shadow: 0px 0 4px var(--color-primary-gray);
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
div.content-all div.content section.content div.card:hover {
background-color: var(--color-primary-blue);
color: var(--color-primary-white);
}
div.content-all div.content section.content div.card span {
font-weight: 600;
color: var(--color-primary-blue);
}
div.content-all div.content section.content div.card:hover span {
font-weight: 600;
color: var(--color-primary-white);
}
div.content-all div.content section.content div.card img {
width: 32px;
height: 32px;
display: inline;
}
footer {
border-top: 2px solid var(--color-primary-gray);
background-color: var(--color-primary-white);
box-shadow: 0px -2px 4px var(--color-primary-gray);
}
@media screen and (max-width:1024px) {
#masthead .header-search {
display: none;
}
#masthead nav.site-navbar {
display: none;
}
div.content-all div.content {
width: 100%;
padding: 16px;
}
div.content-all div.content div.main-search,
div.content-all div.content div.main-search form,
div.content-all div.content div.main-search form input.form-control {
width: 100%;
max-width: 1440px;
height: 50px;
margin: 0 auto;
display: block;
}
div.content-all aside.sidebar {
height: 100%;
box-shadow: 2px 0 4px var(--color-secondary-gray);
position: absolute;
z-index: 200;
}
div.content-all aside.sidebar-compact {
max-width: 0 !important;
overflow: hidden;
white-space: nowrap;
}
#font-size-more,
#font-size-less {
display: none;
}
} .btn-primary {
background-color: var(--color-primary-blue);
border-color: var(--color-primary-blue);
}
.card {
height: 100%;
} .title-single-page,
.title-category {
padding-bottom: 4px;
border-bottom: 2px solid var(--color-primary-yellow);
}
article iframe {
width: 100%;
min-height: 100vh;
margin: 16px 0;
border-radius: 8px;
border: 1px solid var(--color-secondary-gray);
background-color: var(--color-primary-gray);
overflow: scroll;
}
.hidden {
display: none;
}
.navigation,
.pagination {
width: 100%;
padding: 16px;
display: flex;
align-content: center;
justify-content: center;
}
.navigation .nav-links a {
min-width: 20px;
min-height: 40px;
line-height: 45px;
margin: 2px;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--color-secondary-blue);
color: var(--color-secondary-blue);
}
.navigation .current {
min-width: 20px;
margin: 2px;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--color-secondary-blue);
background-color: var(--color-primary-blue);
color: var(--color-primary-white);
}
.embed_download {
margin-top: 32px;
text-align: center;
}
.embed_download a {
padding: 16px;
display: block;
border-radius: 8px;
background-color: var(--color-primary-blue);
color: var(--color-primary-white);
}
.embed_download a:hover {
background-color: var(--color-primary-yellow);
color: var(--color-primary-blue);
}