<!-- This Commentary for Support -->

<div style="display: none;">
<p><a href="https://kursuskerja.org/">https://kursuskerja.org/</a></p>
</div>    :root {
        --header-bg: url(https://eschoolscms.blob.core.windows.net/production/schools/276/template-files/aspire/cHnqVb0ozMtTAuvgADJXvS1YplKuAWZJj4uVS16a.jpg);
        --header-bg-mobile: url(https://eschoolscms.blob.core.windows.net/production/logos/yBvhZEerJCKTiKSNlQH2h2kDiChoTvSacctgjRUP.png);
        --header-height: 239;
        --primary-colour: #2d6aac;
        --secondary-colour: #0f30bd;
        --toolbar-bg: #2d6aac;
        --footer-bg: #2d6aac;
        --footer-border: #1b4067;
        --footer-colour: #ffffff;
        --linkbox-bg: #2d6aac;
        --linkbox-bg-80: #2d6aacCC;
        --linkbox-bg-hover: #24558a;
        --linkbox-color: #f8fafc;
        --linkbox-color-hover: #f8fafc;
    }

    .bg-toolbar {
        background-color: #2d6aac;
        color: #f8fafc;
    }

    .bg-toolbar input::placeholder {
        color: #f8fafc;
    }

    .bg-toolbar input:focus::placeholder {
        color: #f8fafc4D;
    }

    .bg-toolbar .bars {
        background-color: #2d6aac;
    }

    .icon-toolbar {
        background-color: #f8fafc;
        color: #2d6aac;
    }

    #pagenav {
        background-color: #2d6aac;
    }
    #pagenav ul {
        color: #f8fafc;
        font-family: Arial;
    }
    @media screen and (min-width: 1024px) {
        #pagenav ul .nav-item:hover {
            background-color: #f8fafc;
            color: #0f172a;
        }
    }

    #pagenav .nav-dropdown {
        background-color: #fbfcfd;
        color: #0f172a;
    }

    #pagenav .nav-dropdown summary:hover {
        background-color: #c9caca;
        color: #0f172a;
    }

    #sidenav {
        background-color: #2d6aac;
        color: #f8fafc;
        font-family: Arial;
    }

    #sidenav h2 {
        border-bottom-color: #f8fafc;
    }

    #sidenav .subnav-item:hover {
        background-color: #f8fafc;
        color: #0f172a;
    }

    #sidenav .active {
        background-color: #f8fafc;
        color: #0f172a;
    }

    #sidenav .active::before {
        border-inline-start-color: #f8fafc;
    }

    .footer {
        background-color: #2d6aac;
        border-color: #1b4067;
        color: #ffffff;
    }
    .footer a:hover {
        color: #ffffff;
    }
    h1,h2,h3,h4,h5,h6 {
        color: #2d6aac;
    }

    .welcome {
        background-color: #ebf0f6;
        color: #0f172a;
        border-color: #8d9094;
    }
    .welcome-title {
        --welcome-title-colour: #2d6aac;
    }

    .important-message {
        background-color: #0f30bd;
    }

    .important-message i {
        color: #f8fafc;
    }

    .important-message-container {
        background-color: #F8FAFC;
        color: #0f172a;
    }
    .important-message-container::before {
        border-left-color: #0f30bd !important;
    }
    .important-message-container::after {
        border-right-color: #0f30bd !important;
    }

    .linkbox {
        background-color: #2d6aac;
        color: #f8fafc;
    }

    .linkbox:hover {
        background-color: #24558a;
        color: #f8fafc;
    }


    .homeblocks > div > div:nth-child(1) .home-region {
        background-color: #cfd6f2;
        border-color: #7c8091;
    }

    .homeblocks > div > div:nth-child(1) .home-region .heading {
        color: #2d6aac;
    }

    .homeblocks > div > div:nth-child(2) .home-region {
        background-color: #ebf0f6;
        border-color: #8d9094;
    }

    .homeblocks > div > div:nth-child(2) .home-region .heading {
        color: #2d6aac;
    }

    .homeblocks > div > div:nth-child(3) .home-region {
        background-color: #cfd6f2;
        border-color: #7c8091;
    }

    .homeblocks > div > div:nth-child(3) .home-region .heading {
        color: #2d6aac;
    }

    .resource_item {
        background-color: #2d6aac;
        color: #f8fafc;
    }

    .resource_item[href]:hover,
    .resource_item[onclick]:hover {
        background-color: #1b4067;
        color: #f8fafc;
    }

    .resource_item i {
        color: contrast(#f8fafc);
    }

    .fc-toolbar-title {
        color: #2d6aac !important;
    }

    .fc-col-header-cell {
        background: #2d6aac;
        color: #f8fafc;
    }

    .fc-dayGridMonth-view > table {
        background-color: #e5ecf5;
    }

    .fc-daygrid-day-number {
        color: #0f172a;
    }

    .fc-daygrid-day.fc-day-today {
        background-color: #b7bdc4 !important;
    }

    .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
        color: #0f172a;
    }

    .fc-event {
        background: #0f30bd !important;
        border-color: #0c2697 !important;
        color: #f8fafc !important;
    }

    .fc-event:hover {
        background: #0c2697 !important;
        border-color: #0a1e79 !important;
        color: #f8fafc !important;
    }

    .fc-event-title,
    .fc-event-time {
        color: #f8fafc !important;
    }

    .fc-event:hover .fc-event-title,
    .fc-event:hover .fc-event-time
    {
        color: #f8fafc !important;
    }

    header#segmented-header:not(:has(.mob)),
    header#segmented-header > img:not(.mob),
    header#segmented-header > picture:not(.mob),
    header#segmented-header > svg
    {
        height: calc(var(--header-height) * (100 / 1560 * 1vw));
    }

    @media (min-width: 640px) and (max-width: 767.98px) {
        header#segmented-header:not(:has(.mob)),
        header#segmented-header > img:not(.mob),
        header#segmented-header > picture:not(.mob),
        header#segmented-header > svg
        {
            height: calc((var(--header-height) / 100 * 42.6) * 1px);
        }
    }
    @media (min-width: 800px) and (max-width: 1023.98px) {
        header#segmented-header:not(:has(.mob)),
        header#segmented-header > img:not(.mob),
        header#segmented-header > picture:not(.mob),
        header#segmented-header > svg
        {
            height: calc((var(--header-height) / 100 * 51.2) * 1px);
        }
    }
    @media (min-width: 1055px) and (max-width: 1279.98px) {
        header#segmented-header:not(:has(.mob)),
        header#segmented-header > img:not(.mob),
        header#segmented-header > picture:not(.mob),
        header#segmented-header > svg
        {
            height: calc((var(--header-height) / 100 * 68.25) * 1px);
        }
    }
    @media (min-width: 1327px) and (max-width: 1535.98px) {
        header#segmented-header:not(:has(.mob)),
        header#segmented-header > img:not(.mob),
        header#segmented-header > picture:not(.mob),
        header#segmented-header > svg
        {
            height: calc((var(--header-height) / 100 * 85) * 1px);
        }
    }
    @media (min-width: 1536px) {
        header#segmented-header:not(:has(.mob)),
        header#segmented-header > img:not(.mob),
        header#segmented-header > picture:not(.mob),
        header#segmented-header > svg
        {
            height: calc(var(--header-height) * 1px);
        }
    }


.font-motto {
    font-size: 1px;
}.font-title {
    color: #2d6aac;
}
h1, h2, h3, h4, h5, h6 {
    color: #2d6aac;
}