/**
 * @file
 * Subtheme specific CSS.
 */
/**
 * Place your custom styles here.
 */

html {
    overflow-x: hidden;
}

body {
    font-size: 14px !important;
    font-weight: normal;
    margin: 0;
    color: #414244 !important;
    font-family: 'Open Sans' !important;
    /* overflow-x: hidden; */
    background: none !important;
    line-height: 25px !important;
    animation-name: loader;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    /* background: #CCCCCC !important; */
}

body:after {
    content: "dev version | screen: mobile";
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.7);
    position: fixed;
    bottom: 5px;
    right: 5px;
    font-size: 11px;
    z-index: 9999;
    display: none;
}

.row {
    --bs-gutter-x: 0;
}

@keyframes loader {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

:target {
    background: rgb(255, 226, 0);
    background: linear-gradient(90deg, rgba(211, 244, 0, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 10px 10px;
    position: relative;
}

:target::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: -15px;
    font-family: 'Font Awesome 5 Pro';
    font-weight: 600;
    content: "\f02e";
    color: #EEEEEE;
    transform: rotate(90deg);
}

a,
.link {
    text-decoration: none !important;
    outline: none;
    transition: color 0.3s ease-out;
    color: #0d54ac;
    /* color: #243569; */
}

a:hover,
a:focus,
.link:hover,
.link:focus {
    color: #374785;
}

select:focus-visible {
    outline: none;
}

.page-link,
.page-link:hover {
    color: #374785;
}

.btn-primary {
    background-color: #374785;
    border-color: #374785;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #374785;
}


ul,
ol {
    margin: 0 0 0 0;
    padding: 0;
}

li {
    padding-left: 20px;
    margin-bottom: 15px;
    margin-left: 20px;
}

.toolbar-menu li {
    margin-bottom: 0;
}

h1 {
    font-size: 22px;
}

h1.title {
    color: #333333;
    border: 0;
    font-size: 1.92em;
    /* font-size: 27px; */
    font-weight: 500;
    text-transform: capitalize;
}

h2 {
    font-size: 20px;
}

h3 {
    font-weight: bold;
    font-size: 17px;
}

.node--type-custom-page h3 {
    margin-bottom: 30px;
    font-size: 20px;
}

button {
    outline: none;
}

:target {
    /* background: yellow; */
}

/* Table */
.table thead th {
    border-bottom: 0;
    border-top: 0;
    padding: 15px;
    background: #808080;
    border-width: 2px;
}

table.table tr:nth-child(odd) td {
    background: #f7f7f7;
}

table.table tr:nth-child(even) td {
    background: #EEEEEE;
}

/* Table (view) */

.view table {
    font-size: 15px;
}

.view table tr {}

.view table th {
    padding: 10px 20px;
    background: #206a87;
    /* border: 1px solid #CCCCCC; */
    color: #FFFFFF;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.view table td {
    padding: 10px 20px;
    /* border: 1px solid #CCCCCC; */
    font-size: 14px;
}

.view table tr:nth-child(odd) td {
    background: #f5f8fd;
}

.view table tr:nth-child(even) td {
    background: #FFFFFF;
}

.view table td a {
    color: #333333;
}
.view table caption{
    caption-side: top;
    font-size: #000000;
    font-weight: bold;
    font-size: 30px;
    margin: 0 0 10px 0;
    text-align: right;
}


/* Nav tabs */
nav.tabs {
    margin: 7px 0 20px 0;
    position: relative;
}

nav.tabs ul {}

nav.tabs ul li {
    margin: 0;
    padding: 0;
}

nav.tabs ul li a {
    color: rgba(0, 0, 0, 0.7);
}

nav.tabs .nav-item.active a {}

/* Paragraph */
.field--name-field-paragraphs>.field__item {
    /* margin-bottom: 30px; */
}

/* Paragraph: Directory */
.paragraph--type--directory .field--name-field-group-name{
    font-weight: bold;
    margin: 20px 0 30px 0;
    font-size: 20px;
}
.paragraph--type--directory .field--name-field-members{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.paragraph--type--directory .field--name-field-members > .field__item{
    width: 48%;
}
        @media(max-width:550px){
        /*************************************************************/
        .paragraph--type--directory .field--name-field-members > .field__item{
            width: 98%;
        } 
        /*************************************************************/
        }

.paragraph--type--directory .field--name-field-members .field__item.break{
    flex-basis: 100%;
}

    /* Paragraph: Directory member */
    .paragraph--type--directory-member{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0 0 10px 0;
    }
    .paragraph--type--directory-member .field--name-field-member-photo{

    }
    .paragraph--type--directory-member .field--name-field-member-photo img{
        object-fit: contain;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        border: 2px solid #206987;
    } 
    .paragraph--type--directory-member .field--name-field-member-name{
        font-weight: bold;
        text-transform: uppercase;
        font-size: 13px;
        line-height: 17px;
        margin: 0 0 0 0;
        display: flex;
        min-height: 50px;
        justify-content: center;
        align-items: center;
    }
    .paragraph--type--directory-member .field--name-field-member-position{
        margin: 0 0 20px 0;
        font-size: 13px;
        padding: 0 5%;
        line-height: 18px;
    }
    .paragraph--type--directory-member .field--name-field-member-position:before{
        content: "";
        display: block;
        width: 40%;
        height: 2px;
        margin: 5px auto 10px auto;
        background: #c73c42;
    }

/* Paragraph: Collapsible (FAQ) */
.paragraph--type--toggle{
    
}
.field--name-field-toggle-trigger-rich{
    font-weight: 600;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
    border-radius: 7px;
    padding: 20px 20px;
    margin: 0 0 20px 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
}
.field--name-field-toggle-trigger-rich:before{
    font-family: 'Font Awesome 5 Pro';
    content: "\f067";
    font-weight: 500;
    margin-right: 20px;
    color: #008373;
}
.field--name-field-toggle-trigger-rich p{
    margin: 0;
    padding: 0;
}
.field--name-field-toggle-trigger-rich img{
    position: absolute;
    top: -50%;
    right: 0;
    object-fit: cover;
    width: 30%;
    height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
  mask-image: linear-gradient(to right, transparent 0%, black 35%);

}
    .field--name-field-toggle-trigger-rich.is-active:before{
        content: "\f068";
    }
.paragraph--type--toggle-item .field--name-field-toggle-answer{
    display: none;
    margin: 20px 0 0 0;
    padding: 0 20px 20px 50px;
}
.paragraph--type--toggle .field--name-field-toggle-answer.is-active{
    animation: faq-reveal 0.4s ease-in-out;
}

@keyframes faq-reveal {
      0% { opacity: 0; transform: translateY(-10px);}
    100% { opacity: 1; transform: translateY(0px);}
}
.field--name-field-toggle-cover{

}
.field--name-field-toggle-cover img{
    
}

/* Toggle on/off */
.toggle-off-container{
    display: flex;
    flex-direction: row;
    margin: 20px 0;
    justify-content: flex-end;
}
.toggle-off-container button.toggle-open{
    border: 1px solid #808080;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}
.toggle-off-container button.toggle-close{
    border: 1px solid #808080;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Paragraph: Custom page */
.paragraph--type--rich-text table {

    margin-bottom: 40px;
}

.paragraph--type--rich-text table thead tr {
    height: auto !important;
}

.paragraph--type--rich-text table thead tr th {
    padding: 10px 20px;
    background: #206a87;
    /* border: 1px solid #CCCCCC; */
    color: #FFFFFF;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
}

.paragraph--type--rich-text table thead tr th p {
    margin: 0;
}


.paragraph--type--rich-text table tbody td {
    padding: 10px 20px;
    /* border: 1px solid #CCCCCC; */
    font-size: 14px;
}

.paragraph--type--rich-text table.table tr:nth-child(even) td {
    background: #CCCCCC;
}

.paragraph--type--rich-text table.table tr:nth-child(odd) td {
    background: #EEEEEE !important;
}

.paragraph--type--rich-text hr {
    border-bottom: 1px solid #FFFFFF;
    width: 50%;
    margin: 20px auto;
}
.paragraph--type--rich-text h2{
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 30px 0;
    color: #103643;
}
.paragraph--type--rich-text h3{
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: #103643;
}

.paragraph--type--rich-text ul{
    margin: 20px 0;
}

/* Paragraph: Two-column */
.paragraph--type--two-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    margin: 30px 0 0 0;
}

.paragraph--type--two-column .field--name-field-column-one {
    padding: 20px 20px 20px 0;
}

.paragraph--type--two-column .field--name-field-column-two {
    padding: 20px 0 20px 20px;
}

.paragraph--type--two-column.left-50-right-50 .field--name-field-column-one,
.paragraph--type--two-column.left-50-right-50 .field--name-field-column-two,
.paragraph--type--two-column.left-25-right-75 .field--name-field-column-one,
.paragraph--type--two-column.left-25-right-75 .field--name-field-column-two,
.paragraph--type--two-column.left-75-right-25 .field--name-field-column-one,
.paragraph--type--two-column.left-75-right-25 .field--name-field-column-two,
.paragraph--type--two-column.left-60-right-40 .field--name-field-column-one,
.paragraph--type--two-column.left-60-right-40 .field--name-field-column-two,
.paragraph--type--two-column.left-40-right-60 .field--name-field-column-one,
.paragraph--type--two-column.left-40-right-60 .field--name-field-column-two {
    width: 100%;
}

.paragraph--type--two-column.valign-middle .field--name-field-column-one {
    align-content: center;
}

.paragraph--type--two-column.valign-middle .field--name-field-column-two {
    align-content: center;
}

.paragraph--type--two-column.swap-on {
    flex-direction: row-reverse;
}
.paragraph--type--two-column.col-first-bgshade-on,
.paragraph--type--two-column.col-second-bgshade-on{
    margin-bottom: 30px;
}
.paragraph--type--two-column.col-first-bgshade-on .field--name-field-column-one,
.paragraph--type--two-column.col-second-bgshade-on .field--name-field-column-two {
    background: #EEEEEE;
    padding: 20px 20px;
    border-radius: 10px;
}

/* Paragraph: Timeline */
.paragraph--type--timeline {}

.paragraph--type--timeline .field--name-field-timeline-items {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.paragraph--type--timeline .field--name-field-timeline-items>.field__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-one {
    order: 0;
    width: 45%;
}

.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-two {
    order: 1;
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.paragraph--type--timeline .field__item:not(.swap)>.timeline-layout-two:before {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    left: 0;
    top: 22px;
    position: absolute;
    background: #206987;
}

.paragraph--type--timeline .field__item.swap>.timeline-layout-two:after {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    right: 0;
    top: 22px;
    position: absolute;
    background: #206987;
}

.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-two .branch-center {
    width: 10px;
    height: 10px;
    position: relative;
    top: 18px;

    border-radius: 50%;
    background: #206987;

}

.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-two .branch-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: #206987;
}

.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-three {
    order: 2;
    width: 45%;
}

.paragraph--type--timeline .paragraph--type--timeline-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.paragraph--type--timeline .field__item.swap .paragraph--type--timeline-item {
    align-items: flex-start;
}

/* timeline date */
.paragraph--type--timeline .field--name-field-timeline-date {
    display: inline-block;
    background: #206987;
    padding: 10px 20px;
    border-radius: 7px;
    color: #FFFFFF;
    font-size: 13px;
    text-transform: uppercase;
}

/* timeline content */
.paragraph--type--timeline .field--name-field-timeline-content {
    font-size: 13px;
    padding: 10px 0;
}

.paragraph--type--timeline .field__item.swap .timeline-layout-one {
    order: 2;
}

.paragraph--type--timeline .field__item.swap .timeline-layout-two {
    order: 1;
}

.paragraph--type--timeline .field__item.swap .timeline-layout-three {
    order: 0;
}

/* Paragraph: Two-column
.paragraph--type--two-column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    margin: 30px 0 0 0;
}

.paragraph--type--two-column .field--name-field-column-one {
    padding: 20px;
}

.paragraph--type--two-column .field--name-field-column-two {
    padding: 20px;
}

.paragraph--type--two-column.left-50-right-50 .field--name-field-column-one,
.paragraph--type--two-column.left-50-right-50 .field--name-field-column-two,
.paragraph--type--two-column.left-25-right-75 .field--name-field-column-one,
.paragraph--type--two-column.left-25-right-75 .field--name-field-column-two,
.paragraph--type--two-column.left-75-right-25 .field--name-field-column-one,
.paragraph--type--two-column.left-75-right-25 .field--name-field-column-two,
.paragraph--type--two-column.left-60-right-40 .field--name-field-column-one,
.paragraph--type--two-column.left-60-right-40 .field--name-field-column-two,
.paragraph--type--two-column.left-40-right-60 .field--name-field-column-one,
.paragraph--type--two-column.left-40-right-60 .field--name-field-column-two {
    width: 100%;
}

.paragraph--type--two-column.valign-top .field--name-field-column-one {
    align-content: flex-start;
}

.paragraph--type--two-column.valign-top .field--name-field-column-two {
    align-content: flex-start;
}

.paragraph--type--two-column.valign-middle .field--name-field-column-one {
    align-content: center;
}

.paragraph--type--two-column.valign-middle .field--name-field-column-two {
    align-content: center;
}

.paragraph--type--two-column.valign-bottom .field--name-field-column-one {
    align-content: flex-end;
}

.paragraph--type--two-column.valign-bottom .field--name-field-column-two {
    align-content: flex-end;
}

.paragraph--type--two-column.swap-on {
    flex-direction: row-reverse;
} */

/* Paragraph: Header */
.paragraph--type--header {
    font-weight: bold;
    font-size: 18px;
    margin: 20px 0 50px 0;
}

.paragraph--type--header.left {
    text-align: left;
}

.paragraph--type--header.middle {
    text-align: center;
}

.paragraph--type--header.right {
    text-align: right;
}

/* Paragraph: Image box */
.paragraph--type--image-box-group .field--name-field-image-boxes{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.paragraph--type--image-box-group .field--name-field-image-boxes > .field__item{
    width: 100%;
    margin: 10px 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #EEEEEE;
    border-radius: 10px;
}
.paragraph--type--image-box{
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #EEEEEE;
    border-radius: 7px; */
}
.paragraph--type--image-box .field--name-field-imgbox-img{
    
}
.paragraph--type--image-box .field--name-field-imgbox-img img{
    width: 200px;
    height: 200px;
}
.paragraph--type--image-box .field--name-field-imgbox-img{
    margin: 0;
}
    /* image style - round */
    .paragraph--type--image-box.img-style-round{
        margin-top: 100px;
    }
    .paragraph--type--image-box.img-style-round .field--name-field-imgbox-img{
        text-align: center;
        margin: -80px 0 0 0;
    }
    .paragraph--type--image-box.img-style-round .field--name-field-imgbox-img img{
        border-radius: 50%;
        object-fit: contain;
        width: 200px;
        height: 200px;
    }

    /* image style - rectangle */
    .paragraph--type--image-box.img-style-rectangle .field--name-field-imgbox-img img{
        object-fit: cover;
        width: 100%;
        height: 150px;
        border-radius: 7px 7px 0 0;
    }

.paragraph--type--image-box .field--name-field-imgbox-header{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 23px;
    text-align: center;
    letter-spacing: -1px;
    margin: 10px 0 10px 0;
    padding: 0 5%;

    min-height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.paragraph--type--image-box .field--name-field-imgbox-body{
    text-align: justify;
    padding: 10px 10% 10% 10%;
}
.paragraph--type--image-box .field--name-field-imgbox-link a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.paragraph--type--image-box .field--name-field-imgbox-link a span{
    visibility: hidden;
}

/* Main */
body:not(.path-frontpage) #main {
    padding: 20px 10px 20px 10px;
}

/* Hamburger menu */
.hamburger-menu-block {
    background: #0d59b1;
    position: fixed;
    top: 10px;
    right: 30px;
    z-index: 600;
    border-radius: 7px;
    width: 57px;
    height: 57px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    transition: top 0.3s ease-out, right 0.3s ease-out, background 0.5s ease-out, transform 0.3s ease-out;
}

        @media(max-width:500px){
        /*************************************************************/
        
        /* Hamburger menu */
        .hamburger-menu-block {
            z-index: 700;
        }       

        /*************************************************************/
        }

.hamburger-menu-block.is-active {
    background: #e06a5c;
    z-index: 800;
    /* right: 50%;
    transform: translateX(50%); */
}

body.toolbar-horizontal .hamburger-menu-block {
    margin-top: 39px;
}

body.toolbar-horizontal.toolbar-tray-open .hamburger-menu-block {
    margin-top: 79px;
}

body.toolbar-vertical .hamburger-menu-block {
    margin-top: 39px;
}

/* front page */
body.path-frontpage .hamburger-menu-block {
    top: 30px;
    /* top: 90px;
        right: calc(60px + 20px); */
}

/* inner page */
body.path-frontpage.menu-open .hamburger-menu-block {
    top: 30px;
}

/* inner page */
body:not(.path-frontpage) .hamburger-menu-block {
    top: 20px;
}

/* inner page scrolled */
body:not(.path-frontpage).scrolled .hamburger-menu-block {
    top: 20px;
}


.hamburger-menu-block .hamburger-label {
    display: none;
}

.hamburger-menu-block .hamburger-inner,
.hamburger-menu-block .hamburger-inner:after,
.hamburger-menu-block .hamburger-inner:before {
    background-color: #FFFFFF;
    width: 17px;
    height: 3px;
    border-radius: 2px;
}

.hamburger-menu-block .hamburger {
    padding: 0;
}

.hamburger-menu-block .hamburger-box {
    width: 25px;

    padding: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hamburger-menu-block .field--type-text-with-summary {
    height: 63px;
    width: 63px;
}

.hamburger-menu-block .hamburger-inner {
    margin: 0;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
    background-color: #FFFFFF !important;
}

.hamburger.is-active:hover,
.hamburger:hover {
    opacity: 1 !important;
}

.hamburger-menu-block .hamburger-inner:before {
    top: -8px;
}

.hamburger-menu-block .hamburger-inner:after {
    bottom: -8px
}

.hamburger-menu-block .field__item {
    margin: 0;
}

/* Overlay */
.menu-open-overlay.is-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(255,255,255,0.8); */
    background: rgba(0, 0, 0, 0.67);
    animation-name: overlay-fade-in;
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
    z-index: 210;
}

@keyframes overlay-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

#header {
    position: relative;
}

.header-content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 250;
}

/* Main header */
.main-header-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    /* background: black !important; */
    width: 100%;
    box-sizing: border-box;
}

/* Main header first */
.main-header-container .main-header-first {
    width: 0;
    /* display: none; */
}

/* Main header second */
.main-header-container .main-header-second {
    width: 100%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    text-align: center;
}

/* Malaysia crest */
.malaysia-crest-block {
    display: flex;
    align-items: flex-end;
    margin: 5px 2px;
    position: relative;
    top: 2px;
}

.malaysia-crest-block img {
    object-fit: contain;
    width: auto;
    height: 35px;
}

.malaysia-crest-block p {
    margin: 0;
}

/* Sabah crest */
.sabah-crest-block {
    display: flex;
    align-items: flex-end;
    margin: 5px 5px;
    position: relative;
    top: 3px;
}

.sabah-crest-block p {
    margin: 0;
}

.sabah-crest-block img {
    object-fit: contain;
    width: auto;
    height: 45px;
}

/* Site name */
.sitename-block {
    flex-basis: 100%;
    margin-top: 10px;
    margin-left: 5px;
}

.sitename-container {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2;
}

.sitename-container h2 {
    color: #0D2846;
    margin: 0;
}

.sitename-container span {
    display: block;
}

.sitename-container span.the-official-website-text {
    font-size: 15px;
}

.sitename-container span.sabah-state-gov-text {
    font-weight: 700;
    font-size: 20px;
}

@media(max-width:400px) {
    /*************************************************************/

    .main-header-container .main-header-second {
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        text-align: left;
    }

    .sitename-block {
        display: none;
    }

    .main-header-container .main-header-second {
        justify-content: center;
    }

    .sitename-container span.the-official-website-text {
        font-size: 13px;
    }

    .sitename-container span.sabah-state-gov-text {
        font-size: 16px;
    }

    .sabah-crest-block img {
        height: 35px;
    }

    .malaysia-crest-block img {
        height: 25px;
    }

    /*************************************************************/
}

/* Main header third */
.main-header-container .main-header-third {
    display: none;
}

/* Language switcher */
body.scrolled .language-switcher-block.desktop-view{
    position: fixed;
    top: 25px;
    right: 20px;
    z-index: 50;
    display: none;
}
    body.scrolled.toolbar-horizontal .language-switcher-block.desktop-view{
        margin-top: 39px;
    }
    body.scrolled.toolbar-horizontal.toolbar-tray-open .language-switcher-block.desktop-view{
        margin-top: 79px;
    }
.language-switcher-block .nav-link.en,
.language-switcher-block .nav-link.ms {
    padding: 0;
}

.language-switcher-block .nav-link.en a,
.language-switcher-block .nav-link.ms a {
    background: #FFFFFF;
    color: #000000;
    padding: 5px 15px;
    font-size: 12px;
    transition: background 0.3s ease-out, color 0.2s ease-out;
}
.language-switcher-block .nav-link.en a.is-active,
.language-switcher-block .nav-link.ms a.is-active {
    background: #0d59b1;
    color: #FFFFFF;
}
.language-switcher-block .nav-link.en a.is-active:hover,
.language-switcher-block .nav-link.ms a.is-active:hover {
    background: #0d59b1;
    color: #FFFFFF;
}

.language-switcher-block .nav-link.en a {
    border-radius: 5px 0 0 5px;
}

.language-switcher-block .nav-link.ms a {
    border-radius: 0 5px 5px 0;
}

.language-switcher-block .nav-link.en a:hover,
.language-switcher-block .nav-link.ms a:hover {
    background: #CCCCCC;
}

/* Google translate */
.gtranslate-block{
    font-size: 12px;
    margin-left: 5px;
    background: #FFFFFF;
    border-radius: 5px;
    padding: 0 2px;
}
.gtranslate-block select{
    border: 0;
}

/* Site wide search block *

/* Search icon */
.search-home-block{
    margin-left: 5px;
}
.search-home-block span.label{
    display: none;
}
.search-home-block a{
    color: #FFFFFF;
    font-size: 16px;
    background: #0d59b1;
    border-radius: 5px;
    display: inline-block;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Site wide search - listing */
.view-site-wide-search .view-content ul li{
    margin: 0 0 20px 0;
}
.view-site-wide-search .view-content ul li .views-field-search-api-language{
    display: inline-block;
    background: #EEEEEE;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 5px;
}

/* Search block on Search page */
.sitewide-search-block.views-exposed-form.search-page{
    padding: 20px 20px;
    margin: 0 0 20px 0;
}
.sitewide-search-block.views-exposed-form.search-page .mb-3{
    margin: 0 !important;
}
.sitewide-search-block.views-exposed-form.search-page .form-actions button{
    position: relative;
    top: -2px;
}


    /* Search block on Home page */
    /* .site-wide-search-block.views-exposed-form.home-page {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 990;
        padding: 2%;
        display: block;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }
    .site-wide-search-block.views-exposed-form.home-page .mb-3{
        margin: 0 !important;
    }
    .site-wide-search-block.views-exposed-form.home-page .form-actions button{
        position: relative;
        top: -2px;
    } */

    /* Search block on the Search page */
    /* .site-wide-search-block.views-exposed-form.search-page{
        padding: 20px 20px;
        margin: 0 0 20px 0;
    }
    .site-wide-search-block.views-exposed-form.search-page .mb-3{
        margin: 0 !important;
    }
    .site-wide-search-block.views-exposed-form.search-page .form-actions button{
        position: relative;
        top: -2px;
    } */

/* .view-site-wide-search .view-content ul{
    margin: 0;
    padding: 0;
}
.view-site-wide-search .view-content ul li{
    margin: 0 0 20px 0;
} */



/* Main menu */
.main-menu-block {
    text-align: center;
    position: relative;
    z-index: 30;
}

.main-menu-block ul.nav {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.main-menu-block ul.nav li {}

.main-menu-block ul.nav li a,
.main-menu-block ul.nav li span {
    text-transform: uppercase;
    color: #FFFFFF;
    font-size: 15px;
}

.main-menu-block ul.nav li a.active {
    font-weight: bold;
    color: #FFFFFF;
}

.main-menu-container {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
    height: 100%;
}

/* Main menu Megamenu */
.main-menu-megamenu-block {
    /* border: 1px dashed red; */
    background: none;
    position: relative;
    z-index: 50;
    display: none;
}
.main-menu-megamenu-block:after{
    content: "";
    border-bottom: 1px solid rgba(255,255,255,0.3);
    width: 70%;
    margin: 0 auto;
    display: block;
    opacity: 1;
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.main-menu-megamenu-block.is-hovered:after{
    opacity: 0;
    width: 0;
}

.main-menu-megamenu-block .tbm-main {
    background: none;
}

.main-menu-megamenu-block ul.tbm-nav {
    margin: 0;
    padding: 0;
    justify-content: center;
}

.main-menu-megamenu-block ul.tbm-nav li {
    margin: 0;
    padding: 0;
}
.main-menu-megamenu-block ul.tbm-nav li.active a.active-trail,
.main-menu-megamenu-block ul.tbm-nav li.active span.no-link.active-trail {
    background: #195290;
}
.main-menu-megamenu-block ul.tbm-nav li.active span.no-link.tbm-group-title.active-trail{
    background: none;
}
.main-menu-megamenu-block ul.tbm-nav li.active ul.tbm-subnav a.tbm-link.active-trail{
    background: none;
    color: #195290;
    font-weight: bold;
}

.main-menu-megamenu-block ul.tbm-nav li.tbm-item {
    border: 0;
}

.main-menu-megamenu-block ul.tbm-nav li a {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 600;
    /* padding: 1rem 2rem; */
    transition: background 0.3s ease-out;
    border-radius: 7px;
}

.main-menu-megamenu-block ul.tbm-nav li span.no-link {
    color: #FFFFFF;
    text-transform: uppercase;
    font-weight: 600;
    padding: 1rem 2rem;
    transition: background 0.3s ease-out;
    border-radius: 7px;
}

.main-menu-megamenu-block .tbm-link.level-1:hover {
    background: rgb(255, 255, 255, 0.2);
}

.main-menu-megamenu-block .tbm-link.level-1:focus {
    background: #195290;

}

.main-menu-megamenu-block .tbm-submenu {
    /* border: 1px solid red; */
    width: auto;
    left: auto;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    padding: 30px;
}

.main-menu-megamenu-block .tbm-subnav>.tbm-item>.tbm-link-container>.tbm-link {
    padding: 5px 30px;
    font-weight: 700;
    font-size: 14px;
}

.main-menu-megamenu-block .tbm-submenu-toggle {
    width: auto;
    padding: 0;
    color: #FFFFFF;
    font-size: 10px;
}

.main-menu-megamenu-block .tbm-submenu-toggle:before {
    border: none;
    font-family: 'Font Awesome 5 Pro';
    content: "\f107";
    margin-left: -20px;
    margin-top: 1px;
    color: gold;
    /* border-left: 0.2rem solid transparent;
    border-right: 0.2rem solid transparent;
    border-top: 0.2rem solid currentColor; */
}

.main-menu-megamenu-block .tbm-subnav>.tbm-item>.tbm-link-container>.tbm-link.no-link.tbm-group-title {
    color: #002c7f !important;
    font-weight: 700 !important;
    margin-bottom: 10px;
    padding: 0;
    text-shadow: 0 0 3px rgba(255,255,255,1);
}

.main-menu-megamenu-block .tbm-group-container {
    border: 0 !important;
}

    /* sub menu icons */
    .main-menu-megamenu-block li.sub-menu-icon a:before{
        font-family: 'Font Awesome 5 Pro';
        margin-right: 10px;
        color: #195290;
    }

    /* About Sabah */
    .main-menu-megamenu-block li.menu-introduction.sub-menu-icon a:before{
        content: "\f129";
    }
    .main-menu-megamenu-block li.menu-people.sub-menu-icon a:before{
        content: "\f0c0";
    }
    .main-menu-megamenu-block li.menu-geography.sub-menu-icon a:before{
        content: "\f57e";
    }
    .main-menu-megamenu-block li.menu-economy.sub-menu-icon a:before{
        content: "\f200";
    }
    .main-menu-megamenu-block li.menu-facilities.sub-menu-icon a:before{
        content: "\f1e6";
    }
    .main-menu-megamenu-block li.menu-shopping.sub-menu-icon a:before{
        content: "\f290";
    }
    .main-menu-megamenu-block li.menu-restaurants.sub-menu-icon a:before{
        content: "\f2e7";
    }

    /* Government */
    .main-menu-megamenu-block li.menu-tyt.sub-menu-icon a:before{
        content: "\f19c";
    }
    .main-menu-megamenu-block li.menu-dun.sub-menu-icon a:before{
        content: "\f0c0";
    }
    .main-menu-megamenu-block li.menu-span.sub-menu-icon a:before{
        content: "\f508";
    }
    .main-menu-megamenu-block li.menu-cabinet.sub-menu-icon a:before{
        content: "\f0e8";
    }

    /* Quicklinks */
    .main-menu-megamenu-block li.menu-ministry-dept-policy.sub-menu-icon a:before{
        content: "\f02d";
    }
    .main-menu-megamenu-block li.menu-malaysia-gov.sub-menu-icon a{
        background: url("../images/malaysia-crest-xs.png") no-repeat 26px 12px;
        background-size: 20px;
        padding-left: 59px !important;
    }
    .main-menu-megamenu-block li.menu-cdo.sub-menu-icon a:before{
        content: "\f2bd";
    }
    .main-menu-megamenu-block li.menu-state-library.sub-menu-icon a:before{
        content: "\f5db";
    }
    .main-menu-megamenu-block li.menu-budget-speech.sub-menu-icon a:before{
        content: "\f0b1";
    }


/* Sticky menu */
body.scrolled .main-menu-megamenu-block{
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    padding: 10px 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 10;
}
body.scrolled .main-menu-megamenu-block:after{
    display: none;
}
    body.scrolled.toolbar-horizontal .main-menu-megamenu-block{
        margin-top: 39px;
    }
    body.scrolled.toolbar-horizontal.toolbar-tray-open .main-menu-megamenu-block{
        margin-top: 79px;
    }

/* Sabah and Malaysia crests (mobile) */
.sabah-malaysia-crest-mobile-block{
    display: none;
    position: fixed;
    top: 10px;
    left: 20px;
    z-index: 20;
}
body.scrolled .sabah-malaysia-crest-mobile-block{
    /* display: block; */
}
    body.scrolled.toolbar-horizontal .sabah-malaysia-crest-mobile-block{
        margin-top: 39px;
    }
    body.scrolled.toolbar-horizontal.toolbar-tray-open .sabah-malaysia-crest-mobile-block{
        margin-top: 79px;
    }
.sabah-malaysia-crest-mobile-block .sabah-malaysia-crests-container img{
    object-fit: contain;
    height: 50px;
    width: auto;
    margin-right: 5px;
}
.sabah-malaysia-crest-mobile-block .sabah-malaysia-crests-container .malaysia-crest img{
    height: 40px;
}
.sabah-malaysia-crests-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
}

/* Sub menu (sub menu below the Hero banner) */
.sub-menu-block{
    position: relative;
    z-index: 20;
}
.sub-menu-block ul.navbar-nav{
    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
.sub-menu-block ul.navbar-nav li{
    margin: 0;
    padding: 0;
}
.sub-menu-block ul.navbar-nav li a.nav-link{
    padding: 20px 20px;
    color: #002a50;
    font-weight: 600;
}
.sub-menu-block ul.navbar-nav li a.nav-link.is-active:after{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: gold;
    transform: translateY(3px);
}

/* Sub menu grouping */
.services-sub-menu-container{
    margin: 0 5%;
    
}
.main-menu-megamenu-block .tbm-submenu.services-sub-menu-container {
    padding: 0;
}
.main-menu-megamenu-block ul.tbm-nav li .tbm-group.level-3{
    /* background: #f5f5f5;
    border: 1px solid #EEEEEE; */
    border-radius: 10px;
    /* padding: 20px 20px !important; */
    margin: 0 0 10px 0;
}
/* .tbm-group ul.tbm-subnav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
} */
.tbm-group ul.tbm-subnav .tbm-link-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-grow: 2;
    margin: 0 0 5px 0;
    height: auto;
}
.tbm-group ul.tbm-subnav .tbm-link-container a.tbm-link{
    /* padding: 5px 0 !important; */
    margin: 0;
    display: block;
}
    /* intranet apps menu group */
    .menu-mgmt-admin ul.tbm-subnav,
    .menu-finance ul.tbm-subnav{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .tbm-group ul.tbm-subnav .menu-mgmt-admin ul li a.tbm-link,
    .tbm-group ul.tbm-subnav .menu-finance ul li a.tbm-link{
        border-radius: 3px;
        background: #195290;
        color: #FFFFFF;
        margin: 0 2px;
        padding: 0 10px !important;
        display: block;
        flex-grow: 2;
        text-align: center;
        font-weight: 500;
    }
    .tbm-group ul.tbm-subnav .menu-mgmt-admin ul li,
    .tbm-group ul.tbm-subnav .menu-finance ul li{
        flex-grow: 2;
    }

    /* Intranet App */
    .menu-intranet-app > .tbm-column-inner{
        border-right: 1px solid #CCCCCC;
        /* margin: -30px 30px -30px -30px; */
        padding: 30px;
        background: url(../images/intranet-apps-bg.jpg) no-repeat center center;
        border-radius: 10px 0 0 10px;
    }
    .menu-intranet-app ul.tbm-subnav li a{
        font-size: 11px !important;
        font-weight: normal !important;
    }
    .menu-intranet-app .tbm-group-title{
        /* display: none !important; */
    }
    .menu-intranet-app .tbm-subnav > li a{
        transition: background 0.3s ease-out, color 0.2s ease-out;
    }
    .menu-intranet-app .tbm-subnav > li a:hover{
        background: #e26859 !important;
        color: #FFFFFF !important;
    }

    /* Highlighted service */
    .menu-highlighted-service {
        margin-right: 30px;
        padding: 20px 0;
    }
    .menu-highlighted-service .tbm-group-title{
        /* visibility: hidden; */
        display: none !important;
    }
    .menu-highlighted-service > .tbm-column-inner{
        height: 100%;
    }
    .menu-highlighted-service > .tbm-column-inner > ul.tbm-subnav{
        height: 100%;
    }
    .menu-highlighted-service > .tbm-column-inner > ul.tbm-subnav > li{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .menu-highlighted-service > .tbm-column-inner > ul.tbm-subnav > li > .tbm-link-container{
        height: auto;
    }
    .menu-highlighted-service > .tbm-column-inner > ul.tbm-subnav > li > .tbm-group-container{
        height: 100%;
        flex-grow: 2;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        height: 100%;
        gap: 5px;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav > li{
        margin: 0;
        flex-grow: 2;
    }
    .menu-highlighted-service > .tbm-column-inner > ul.tbm-subnav > li > .tbm-group-container div{
        height: 100%;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li a.tbm-link{
        transition: background 0.3s ease-out;
        border-radius: 0;
        padding: 0 20px;
        display: block;
        align-content: center;
        border-radius: 7px;
        font-size: 16px;
        font-weight: bold;
        text-transform: capitalize;
        transition: box-shadow 0.3s ease-out;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li a.tbm-link:hover{
        /* background: #EEEEEE; */
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav .tbm-caption{
        margin-left: 64px;
        font-weight: 500;
        margin-top: 0;
        line-height: 20px;
        display: none;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav a.tbm-link{
        /* background: #EEEEEE; */
        padding: 0px 20px !important;
    }

    /* icons */
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li a.tbm-link:before{
        font-weight: bold;
        font-size: 18px;
        /* background: #CCCCCC; */
        padding: 7px 7px;
        border-radius: 5px;
        margin-right: 20px;
        position: relative;
        top: 10px;
        border: 1px solid #195290;
        text-align: center;
        width: 40px;
        display: inline-block;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-webmail a.tbm-link:before{
        font-family: 'Font Awesome 5 Pro';
        content: "\f0e0";
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-sabah-net a.tbm-link:before{
        content: "";
        display: block;
        width: 42px;
        height: 35px;
        background: url(../images/snet-logo-name-white-fr.png) no-repeat 0 50%;
        background-size: contain;
        float: left;
        padding: 3px;
        position: relative;
        top: 6px;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-public-complaint a.tbm-link:before{
        font-family: 'Font Awesome 5 Pro';
        content: "\f086";;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-pekeliling a.tbm-link:before{
        font-family: 'Font Awesome 5 Pro';
        content: "\f70e";;
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-egazette a.tbm-link:before{
        font-family: 'Font Awesome 5 Pro';
        content: "\f15c";
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-bayucloud a.tbm-link:before{
        font-family: 'Font Awesome 5 Pro';
        content: "\f0c2";
    }
    .menu-highlighted-service .tbm-group-container ul.tbm-subnav li.menu-sgcsirt a.tbm-link:before{
        font-family: 'Font Awesome 5 Pro';
        content: "\f132";
    }
    .menu-highlighted-service ul.tbm-subnav li a.tbm-link{
        color: #195290 !important;
    }
    

    /* Other Services */
    .menu-other-services .tbm-group-title{
        display: none !important;
    }
    .menu-other-services > .tbm-column-inner{
        /* border: 1px solid blue !important; */
        height: 100%;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav{
        /* border: 1px dashed red !important; */
        height: 100%;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group{
        /* border: 1px dashed orangered; */
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-link-container{
        height: auto;
        /* background: #808080; */
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container{
        /* background: #EEEEEE; */
        flex-grow: 2;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container ul.tbm-subnav{
        /* border: 2px solid red; */
        display: flex;
        height: 100%;
        flex-direction: column;
        /* flex-wrap: wrap;
        gap: 2px; */
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container ul.tbm-subnav li{
        /* width: 47%; */
        flex-grow: 2;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row{
        height: 100%;
        /* border: 2px solid green; */
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner{
        height: 100%;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner .tbm-link-container{
        height: 100%;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner .tbm-link-container a{
        display: flex;
        justify-content: center;
        align-items: center;
        background: #195290;
        border-radius: 0px;
        color: #FFFFFF;
        /* text-shadow: 0 0 4px rgba(0,0,0,1); */
        font-size: 14px;
    }

    /* .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner li:nth-child(1) .tbm-link-container a{
        border-radius: 7px 0 0 0;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner li:nth-child(2) .tbm-link-container a{
        border-radius: 0 7px 0 0;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner li:nth-child(5) .tbm-link-container a{
        border-radius: 0 0 0 7px;
    }
    .menu-other-services > .tbm-column-inner > ul.tbm-subnav > li.tbm-group > .tbm-group-container .tbm-row .tbm-column-inner li:nth-child(6) .tbm-link-container a{
        border-radius: 0 0 7px 0;
    } */

    .menu-other-services li.menu-prayer-times a.tbm-link{
        background: #1B5E20 !important;
        border-radius: 0 10px 0 0 !important;
    }
        .menu-other-services li.menu-prayer-times a.tbm-link:before{
            font-family: 'Font Awesome 5 Pro';
            margin-right: 20px;
            content: "\f678";
        }
    .menu-other-services li.menu-public-holidays a.tbm-link{
        background: #B45F06 !important;
    }
        .menu-other-services li.menu-public-holidays a.tbm-link:before{
            font-family: 'Font Awesome 5 Pro';
            margin-right: 20px;
            content: "\f5ca";
        }
    .menu-other-services li.menu-sabah-jobs a.tbm-link{
        background: #00695C !important;
    }
        .menu-other-services li.menu-sabah-jobs a.tbm-link:before{
            font-family: 'Font Awesome 5 Pro';
            margin-right: 20px;
            content: "\f508";
        }
    .menu-other-services li.menu-lawnet a.tbm-link{
        background: #263238 !important;
        border-radius: 0 0 10px 0 !important;
    }
        .menu-other-services li.menu-lawnet a.tbm-link:before{
            font-family: 'Font Awesome 5 Pro';
            margin-right: 20px;
            content: "\f0e3";
        }
    .menu-other-services li.menu-school-terms a.tbm-link{
        background: #0277BD !important;
    }
        .menu-other-services li.menu-school-terms a.tbm-link:before{
            font-family: 'Font Awesome 5 Pro';
            margin-right: 20px;
            content: "\f5da";
        }
    .menu-other-services li.menu-scholarship a.tbm-link{
        background: #4A148C !important;
    }
        .menu-other-services li.menu-scholarship a.tbm-link:before{
            font-family: 'Font Awesome 5 Pro';
            margin-right: 20px;
            content: "\f5f3";
        }
    .menu-other-services li a.tbm-link:before{
        display: none;
    }
    .menu-other-services li a.tbm-link{
        text-align: center !important;
    }
    .menu-other-services li .tbm-link-container a.tbm-link:hover{
        background: #FFFFFF !important;
        color: #000000 !important;
    }


    /* Quicklinks */
    .menu-quicklinks .tbm-submenu{
        margin-right: 20px;
    }
    .menu-quicklinks .tbm-group-title{
        display: none !important;
    }
    .menu-cm-sabah-container .tbm-link-container a{
        padding: 20px 20px 20px 50px !important;
        display: block;
        
    }

    .menu-cm-sabah .tbm-link-container a{
        background: #195290 url("../images/sabah-crest-xs.png") no-repeat 10px 50%;
        background-size: 23px;
        color: #FFFFFF !important;
    }

    .menu-halatuju-smj .tbm-link-container a{
        background: #195290 url("../images/halatuju-smj-xs.png") no-repeat 10px 50%;
        background-size: 30px;
        color: #FFFFFF !important;;
    }

    /* .menu-other-services li.menu-prayer-times a.tbm-link{
        background: url("../images/prayer-times-bg-rv2.jpg") no-repeat 50% 50% !important;
        background-size: cover !important;
    }
    .menu-other-services li.menu-public-holidays a.tbm-link{
        background: url("../images/public-holidays-bg.jpg") no-repeat 50% 50% !important;
        background-size: cover !important;
    }
    .menu-other-services li.menu-sabah-jobs a.tbm-link{
        background: url("../images/job-portal-bg.jpg") no-repeat 50% 50% !important;
        background-size: cover !important;
    }
    .menu-other-services li.menu-lawnet a.tbm-link{
        background: url("../images/sabah-law-bg.jpg") no-repeat 50% 50% !important;
        background-size: cover !important;
    } */


/* Main menu container */
.mobile-slider-container{
    position: relative;
    z-index: 700;
    width: 60%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-110%);
    transition: transform 0.3s ease-out;
    display: flex;
    align-items: center;
}

        @media(max-width:500px){
        /*************************************************************/
        
        /* Main menu container */
        .mobile-slider-container{
            width: 100%;

        }         
                    
        /*************************************************************/
        }

    .mobile-slider-container.is-active{
        transform: translateX(0%);
    }
.mobile-slider-container .wrapper{
    background: #1a5191 url(../images/kinabalu-forest-tp-rv2.png) no-repeat 0 100%;
    background-size: contain;
    /* background: #1a5191; */
    /* background: rgb(255, 255, 255, 0.7); */
    /* background: rgba(0, 0, 0, 0.7); */
    /* backdrop-filter: blur(2px); */
    padding: 5% 10%;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.1);
    border-left: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 700;
    overflow-y: scroll;
}

/* Mobile menu block */
.main-menu-mobile-block{
    width: 100%;
}
.main-menu-mobile-block ul.nav{
    width: 100%;
    margin: 0;
    padding: 0;
}
.main-menu-mobile-block ul.nav li{
    margin: 0;
    padding: 0;
    
}
.main-menu-mobile-block ul.nav li a.nav-link,
.main-menu-mobile-block ul.nav li span.nav-link{
   color: #FFFFFF;
   text-shadow: 0 0 5px rgba(0,0,0,0.2);
   font-size: 16px;
   display: block;
   padding: 20px 0;
   width: 100%;
   text-transform: uppercase;
   font-weight: 600;
}
.main-menu-mobile-block ul.nav li .nav-link:before{
    font-family: 'Font Awesome 5 Pro';
    margin-right: 20px;
}
.main-menu-mobile-block ul.nav li.menu-home .nav-link:before{
    content: "\f015";
}
.main-menu-mobile-block ul.nav li.menu-about .nav-link:before{
    content: "\f05a";
}
.main-menu-mobile-block ul.nav li.menu-government .nav-link:before{
    content: "\f19c";
}
.main-menu-mobile-block ul.nav li.menu-directory .nav-link:before{
    content: "\f2b9";
}
.main-menu-mobile-block ul.nav li.menu-services .nav-link:before{
    content: "\f2b5";
}
.main-menu-mobile-block ul.nav li.menu-quicklinks .nav-link:before{
    content: "\f0e7";
}
.main-menu-mobile-block .dropdown-menu{
    position: relative !important;
    transform: none !important;
    padding: 10px 20px 10px 35px;
    font-size: 15px;
    border-radius: 5px;
}

/* Close button */
.close-button-block{
    position: absolute;
    top: 20px;
    right: 20px;
}
.close-button-block span{
    visibility: hidden;
    width: 0;
    height: 0;
}
.close-button-block i{
    font-size: 30px;
    color: #FFFFFF;
    text-shadow: 0 0 7px rgba(0,0,0,0.9);
}

/* Menu on and off */
.desktop-only{
    display: none;
}

/* Hero container */
.hero-container {
    /* overflow: hidden; */
    position: relative;
}

/* Hero banner */
body:not(.path-frontpage) .hero-banner {
    height: 65vh;
    overflow: hidden;
    position: relative;
}
.hero-banner div{
    height: 100%;
}
.hero-banner .paragraph--type--rich-text *{
    height: 100%;
}

.hero-banner-block {
    position: relative;
    display: none;
}

.hero-banner-block img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
.hero-container .hero-banner{
    display: none;
}

/* Hero text */
.hero-text-block {
    color: #FFFFFF;
    text-align: center;
    padding: 20px 15%;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -50px;
    font-size: 15px;
    line-height: 20px;
    display: none;

    animation-name: hero-text-appear;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.hero-text-block h2 {
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 10px 0;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
}

.hero-text-block p {
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
}

.hero-text-block a {
    color: #FFFFFF;
    display: inline-block;
    border-bottom: 1px solid #FFFFFF;
    font-size: 16px;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
}

@keyframes hero-text-appear{
    0%   { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Hero Slideshow */
.hero-slideshow-block{
    margin: 20px 0;
    flex-grow: 2;
    align-content: center;
}
.hero-slideshow-block .views-field-field-slide-image,
.hero-slideshow-block .view-slideshow .slide-container{
    text-align: center;
}
.hero-slideshow-block .views-field-field-slide-image img,
.hero-slideshow-block .view-slideshow .slide-container img{
    object-fit: contain;
    width: 60%;
    height: auto;
    border-radius: 7px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

/* Inner banner default */
.inner-banner-default-block {
    position: relative;
    z-index: 10;
    height: 100%;
}

.inner-banner-default-block .paragraph--type--rich-text .field--name-field-body img {
    object-fit: cover;
    /* object-fit: contain; */
    width: 100%;
    height: 100%;
}

/* Inner page banner */
.inner-page-banner-block {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
}

.inner-page-banner-block img {
    object-fit: cover;
    height: auto;
    width: 100%;
    /* border: 2px solid magenta; */
}

/* Page title */
.block-page-title-block {
    color: #0c3a4a;
    text-align: center;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 15px;
    line-height: 20px;
}

.block-page-title-block h1 {
    color: #0c3a4a;
    font-size: 25px;
    font-weight: bold;
}

/* Audience wrapper */
.audience-options-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background: #ebebeb;
    flex-direction: column;
    position: relative;
    z-index: 20;
}

/* Audience / Topic tagline */
.audience-tagline-block {
    width: 100%;
    background: #1a5191;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;

}

.audience-tagline-block .content h2 {
    font-size: 14px;
    text-align: center;
    margin: 0;
    color: #FFFFFF;
}

.audience-tagline-block .content h2 strong {
    font-size: 20px;
    display: inline-block;
}

/* Audience / Topic selector */
.audience-block {
    width: 100%;
}

.view-audience .view-content ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: space-between;
    justify-content: center;
}

.view-audience .view-content ul li {
    text-align: center;

    padding: 0;
    margin: 20px 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.view-audience .view-content ul li .views-field-edit-node {
    position: absolute;
    bottom: 0;
    right: 0;
}

.view-audience .view-content ul li .views-field-edit-node a {
    border-radius: 0 0 8px 0;
    position: relative;
    top: -2px;
    left: -2px;
}

.view-audience .view-content ul li .audience-box i {
    font-size: 35px;
    margin-bottom: 10px;
}

.view-audience .view-content ul li .audience-box .title {
    font-weight: bold
}

.view-audience .view-content ul li .audience-box a {
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid #1b518d;
    color: #0d2846;
    transition: background 0.3s ease-out, color 0.2s ease-out;
}

.view-audience .view-content ul li .audience-box a:hover {
    background: #1b518d;
    color: #FFFFFF;
}

/* Audience menu block */
.audience-menu-block {
    width: 100%;
}
.audience-menu-block ul.nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: space-between;
    justify-content: center;
}
.audience-menu-block ul.nav li {
    text-align: center;
    padding: 0;
    margin: 20px 10px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.audience-menu-block ul.nav li a {
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    border-radius: 10px;
    border: 2px solid #1b518d;
    color: #0d2846;
    font-weight: bold;
    transition: background 0.3s ease-out, color 0.2s ease-out;
    font-size: 13px;
}
/* .audience-menu-block ul.nav li a:after{
    content: ".";
    font-size: 20px;
    display: inline-block;
    position: relative;
    top: -1px;
    left: 1px;
} */
.audience-menu-block ul.nav li a:hover {
    background: #1b518d;
    color: #FFFFFF;
}
.audience-menu-block ul.nav li a:before{
    flex-basis: 100%;
    margin: 0;
    font-family: 'Font Awesome 5 Pro';
    font-size: 35px;
    margin-bottom: 15px;
}
.audience-menu-block ul.nav li.menu-business a:before{
    content: "\f1ad";
}
.audience-menu-block ul.nav li.menu-education a:before{
    content: "\f19d";
}
.audience-menu-block ul.nav li.menu-government a:before{
    content: "\f19c";
}
.audience-menu-block ul.nav li.menu-residents a:before{
    content: "\f0c0";
}
.audience-menu-block ul.nav li.menu-visitors a:before{
    content: "\f5ab";
}

/* Frontpage first */
.frontpage-first-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    padding: 5% 5%;
}

.frontpage-first-container .frontpage-first-a {
    width: 100%;
    box-sizing: border-box;
    /* border: 2px dashed magenta; */
    margin-bottom: 20px;
}

.frontpage-first-container .frontpage-first-b {
    width: 100%;
    box-sizing: border-box;
    /* border: 2px dashed green; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Frontpage second */
.frontpage-second-container {
    background: url("../images/sunset-frontpage.png") no-repeat center center;
    padding: 5% 10%;
    
}

/* Popular contents */
.popular-content-block{
    padding: 5% 5%;
    background: rgba(255,255,255,0.5);
    border-radius: 7px;
    border-top: 10px solid #f7a01f;
}
.popular-content-block > h2{
    color: #000000;
    font-size: 30px;
    font-weight: 600;
}
.popular-content-block > h2:after{
    content: ".";
    font-weight: 30px;
}

.view-popular-contents .view-content table{
    border: 0;
    background: none;
}

/* Announcement + System Status - common style */
.announcement-system-status-block {
    height: 100%;
}

.announcement-system-status-block .content {
    height: 100%;
}

.announcement-system-status-block .content>div {
    height: 100%;
}

.announcement-system-status-block .view-announcement-systemstatus {
    height: 100%;
}

.announcement-system-status-block .system-status-container {}

.announcement-system-status-block .announcement-container {}

.view-announcement-systemstatus {}

.view-announcement-systemstatus .view-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
}

.view-announcement-systemstatus .view-content .views-row {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}

    /* Announcement styling */
    .view-announcement-systemstatus .view-content .views-row .announcement-container {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        border: 1px solid #EEEEEE;
        border-radius: 10px;
        overflow: hidden;
        padding-bottom: 10%;
        background: #0D2846;
    }
    .view-announcement-systemstatus .view-content .views-row .announcement-container .hover-layer{
        background: #0D2846;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .view-announcement-systemstatus .view-content .views-row:hover .announcement-container .hover-layer{
        opacity: 1;
    }
    .view-announcement-systemstatus .view-content .views-row .announcement-container .title {
        position: relative;
        z-index: 30;
        color: #FFFFFF;
        margin: 10px 20px 10px 20px;
        font-size: 13px;
        line-height: 20px;
        font-weight: 100;
    }
    .view-announcement-systemstatus .view-content .views-row .announcement-container .category {
        position: relative;
        z-index: 30;
        color: #FFFFFF;
        margin: 0 20px 20px 20px;
        padding-top: 10px;
        font-weight: 600;
        border-top: 1px solid #FFFFFF;
    }

    .view-announcement-systemstatus .view-content .views-row .announcement-container img {
        border-radius: 10px;
    }

    .view-announcement-systemstatus .view-content .views-row .announcement-container .poster {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        height: 100%;
        width: 100%;
        display: none;
    }

    .view-announcement-systemstatus .view-content .views-row .announcement-container .poster:after {
        content: "";
        width: 100%;
        height: 90%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #0D2846;
background: linear-gradient(0deg, rgba(13, 40, 70, 1) 33%, rgba(13, 40, 70, 0.41) 74%, rgba(13, 40, 70, 0) 100%);
        z-index: 11;
        border-radius: 0 0 10px 10px;
    }

    .view-announcement-systemstatus .view-content .views-row .announcement-container .poster img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        opacity: 0.4;
    }

    .view-announcement-systemstatus .view-content .views-row .views-field-views-conditional-field {
        height: 100%;
    }
    .view-announcement-systemstatus .view-content .read-more a{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 30;
        display: block;
    }
    .view-announcement-systemstatus .view-content .read-more a span{
        visibility: hidden;
    }
    
    /* System Status styling */
    .view-announcement-systemstatus .view-content .views-row .system-status-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .view-announcement-systemstatus .view-content .views-row .system-status-container .title {
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 20px;
    }

    .view-announcement-systemstatus .view-content .views-row .system-status-container .category {
        color: #0d54ac;
        font-weight: bold;
        margin-bottom: 30px;
        border-top: 2px solid #0D2846;
        padding-top: 10px;
    }

    .view-announcement-systemstatus .view-content .views-row .system-status-container .title .red-text {
        color: #cc4526;
    }

    .view-announcement-systemstatus .view-content .views-row .system-status-container a {
        font-weight: bold;
        display: inline-block;
        border-bottom: 1px dotted #333333;
        color: #555555;
        align-self: flex-start;
    }

/* Node type Announcement */
.node--type-announcement .node__content fieldset{
    border: 1px solid #CCCCCC;
    padding: 10px 20px;
    font-size: 12px;
}

/* Latest Update (page) */
.view-announcement-systemstatus.latest-update-listing .views-field-title .title{
    display: inline-block;
}
.view-announcement-systemstatus.latest-update-listing .views-field-nothing{
    width: 15%;
    text-align: center;
}
.view-announcement-systemstatus.latest-update-listing .views-field-nothing a{
    font-size: 12px;
    display: inline-block;
    /* background: #e74747; */
    color: #e74747;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background 0.3s ease-out;
}
.view-announcement-systemstatus.latest-update-listing .dept-tag{
    display: inline-block;
    font-size: 10px;
    background: #EEEEEE;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 0px 5px;
    margin-right: 5px;
}
.view-announcement-systemstatus.latest-update-listing .views-field-field-announcement-category{
    text-align: center;
}

/* exposed filter */
.views-exposed-form{
    background: #EEEEEE;
    padding: 5px 20px;
    border-radius: 10px;
    justify-content: flex-end;
}
.views-exposed-form .flex-wrap{
    justify-content: flex-start;
}
.views-exposed-form select{
    font-size: 13px;
}
.views-exposed-form button.form-submit{
    font-size: 13px;
    padding: 6px 15px 6px 15px;
    background: #0d59b1;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease-out;
    text-transform: uppercase;
    transform: translateY(-1px);
    margin-left: 5px;
}
.views-exposed-form label{
    font-size: 11px;
    margin-left: 1px;
    transform: translateY(2px);
}

/* Announcement */
/* .announcement-item-block{
    width: 50%;
    box-sizing: border-box;
    flex-grow: 2;
    padding: 20px 0px 0px 20px;
}
.announcement-item-block .content{
    height: 100%;
    display: flex;
}
.announcement-item-block .content > div{
    width: 100%;
} */

/* Latest update: Announcement */
/* .announcement-item-block .content .view-announcement{
        padding: 20px;
        font-size: 14px;
        line-height: 22px;
        color: #FFFFFF;
        position: relative;
    }
    
    .announcement-item-block .content .view-announcement .view-content a{
        color: #FFFFFF;
    }
    .announcement-item-block .content .view-announcement .views-field-title{
        position: relative;
        z-index: 30;
    }
    .announcement-item-block .content .view-announcement .views-field-field-date-start{
        position: relative;
        z-index: 30;
    }
    .announcement-item-block .content .view-announcement .views-field-field-announcement-category{
        padding: 10px 0 0 0;
        font-size: 14px;
        font-weight: bold;
        border-top: 1px solid #FFFFFF;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
        position: relative;
        z-index: 20;
    }
    .announcement-item-block .content .view-announcement .views-field-field-announcement-category .field-content:after{
        content: ".";
        font-weight: bold;
        color: #FFFFFF;
        display: inline-block;
        margin-left: 2px;
    }
    .announcement-item-block .content .announcement-01,
    .announcement-item-block .content .announcement-02{
        background: #0d2846;
        height: 100%;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .announcement-item-block .content .view-announcement .poster{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .announcement-item-block .content .view-announcement .poster:after{
        content: "";
        width: 100%;
        height: 90%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #0D2846;
        background: linear-gradient(0deg, rgba(13, 40, 70, 1) 44%, rgba(255, 255, 255, 0) 100%);
        z-index: 11;
    }
    .announcement-item-block .content .view-announcement .poster img{
        object-fit: contain;
        width: 100%;
        height: 100%;
        opacity: 0.4;
    } */

/* Latest update: System status */
/* .announcement-item-block .content .view-system-status{
        font-size: 13px;
        color: #474747;
        font-weight: bold;
        height: 100%;
    }
    .announcement-item-block .content .view-system-status a{
        color: #474747;
        font-weight: bold;
    }
    .announcement-item-block .content .view-system-status .views-field-title{
        margin-bottom: 10px;
        line-height: 18px;
    }
    .announcement-item-block .content .view-system-status .views-field-title .red-text{
        color: #cc4526;
    }
    .announcement-item-block .content .view-system-status .views-field-field-body{
        text-align: justify;
        text-align-last: left;
        line-height: 20px;
        font-weight: normal;
    }
    .announcement-item-block .content .view-system-status .views-field-field-announcement-category{
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
        width: 100%;
        color: #0d59b1;
        border-top: 2px solid #0d2846;
        margin-bottom: 30px;
    }
    .announcement-item-block .content .view-system-status .views-field-field-announcement-category .field-content:after{
        content: ".";
        font-weight: bold;
        color: #0d59b1;
        display: inline-block;
        margin-left: 2px;
    }
    .announcement-item-block .content .system-status-02 .views-field-field-announcement-category{
        
    }
    .announcement-item-block .content .view-system-status .views-field-view-node{
        position: absolute;
        bottom: 0;
    }
    .announcement-item-block .content .view-system-status .views-field-view-node a{
        text-transform: capitalize;
        border-bottom: 1px solid #474747;
        font-size: 13px;
    }
    .announcement-item-block .content .view-system-status .views-field-view-node a:after{
        content: ".";
        font-weight: bold;
        display: inline-block;
        margin-left: 2px;
    } */

/* Latest Update header */
.latest-update-header-block {
    text-align: center;
}

.latest-update-header-block h2 {
    color: #221d1d;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 40px;
}

.latest-update-header-block a {
    color: #000000;
    display: inline-block;
    border-bottom: 1px dotted;
    text-align: right;
}
.latest-update-header-block .text-align-right{
    text-align: center;
}

/* E-Gov News */
.egov-news-block {
    border-radius: 10px;
    overflow: hidden;
}

.egov-news-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    height: 435px;
    border-radius: 10px;
    padding: 45px 30px;
}

.egov-news-container .background {
    background: url("../images/egov-bg.jpg") no-repeat 50% 50%;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* border-radius: 10px; */
}

.egov-news-container .dept-tag.dept-tag-JANS {
    background: #FFFFFF url(../images/logo-jans-2025-xs.png) no-repeat 5px 50%;
    background-size: 25px;
    padding-left: 60px;
    padding: 5px 10px 5px 40px;
    font-weight: bold;
}
.egov-news-container .dept-tag.dept-tag-MZM {
    background: #FFFFFF url(../images/logo-museum-xs.png) no-repeat 5px 50%;
    background-size: 25px;
    padding-left: 60px;
    padding: 5px 10px 5px 40px;
    font-weight: bold;
}
.egov-news-container .dept-tag.dept-tag-KSTI {
    background: #FFFFFF url(../images/logo-ksti-xs.png) no-repeat 5px 50%;
    background-size: 25px;
    padding-left: 60px;
    padding: 5px 10px 5px 40px;
    font-weight: bold;
}
.egov-news-container .background.dept-tag-KSTI {
    /* background: url("../images/egov-bg-ksti.png") no-repeat 50% 50%; */
}
.egov-news-container .background.dept-tag-MZM {

}

.egov-news-container .content {
    display: flex;
    width: 100%;
    font-size: 14px;
    min-height: 100px;
    z-index: 20;
    border-top: 2px solid #FFFFFF;
    padding-top: 10px;
}

.egov-news-container .type {
    position: relative;
    width: 40%;
    color: #FFFFFF;
    font-weight: bold;
    display: inline-block;
}

.egov-news-container .type:after {
    content: ".";
    font-weight: bold;
    margin-left: 2px;
}

.egov-news-container .title {
    position: relative;
    width: 60%;
    color: #FFFFFF;
    line-height: 18px;
}

.egov-news-container .title a {
    color: #FFFFFF;
}

.egov-news-container .dept-tag {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #FFFFFF;
    padding: 3px 10px;
    border-radius: 7px;
}

.egov-news-container .dept-tag.dept-tag-KSTI {
    background: #FFFFFF url("../images/ksti-dept-tag.png") 4px 50% no-repeat;
    display: inline-block;
    background-size: 25px;
    padding-left: 35px;
    font-weight: bold;
}

/* Public Holidays */
.view-public-holidays .view-content{
    flex-direction: column;
}

/* SChool Terms */
.view-school-terms .view-content{
    flex-direction: column;
}

/* Site footer */
.site-footer {
    padding: 0 !important;
    margin: 0 !important;
    /* font-family: "Ubuntu" !important; */
    background: none !important;
}

.site-footer .block {
    border: 0 !important;
    padding: 20px !important;
    margin: 0 !important
}

.site-footer .content {
    color: #0c3a4a !important;
}

/* Footer first */
.footer-first{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    background: rgba(0,0,0,0.8);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    padding: 0;
}

/* language switcher  */
.language-switcher-block.mobile-view{
    padding: 10px !important
}

/* Search home block */
.search-home-block.mobile-view{
    padding: 10px !important
}

/* Footer second */
.footer-second {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.footer-second h2 {
    color: #1b3b4a;
    font-size: 15px;
    font-weight: bold;
    margin: 0 0 30px 0;
}

.footer-second ul {
    margin: 0;
    padding: 0;
}

.footer-second ul li {
    margin: 0;
    padding: 0;
}

.footer-second ul li a {
    padding: 0;
    color: #1b3b4a;
    font-size: 15px;
}

/* Sabah crest footer */
.sabah-crest-footer-block {
    text-align: center;
    width: 100%;
    background: #FFFFFF;
    position: relative;
}

.sabah-crest-footer-block img {
    object-fit: contain;
    width: auto;
    height: 120px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
    background: #FFFFFF;
    padding: 0 50px;
}

.sabah-crest-footer-block:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #CCCCCC;
    z-index: 10;
}

/* QR code */
.qr-code-block.block {
    /* border: 1px solid red !important; */
}

.qr-code-block.block img {
    object-fit: contain;
    width: auto;
    height: 150px;
}

/* Footer menu */
.footer-menu-block.block {
    /* border: 1px solid blue !important; */
}

.footer-menu-block.block ul {
    display: flex;
    flex-direction: column !important;
}


/* Footer third */
.footer-third {
    border-top: 1px solid #CCCCCC;
    display: flex;
    flex-wrap: wrap;
}

/* Disclaimer */
.disclaimer-block {
    width: 70%;
    font-size: 15px;
}

/* Copyright */
.copyright-block {
    width: 30%;
    text-align: right;
    font-size: 15px;
}

/* Edit button */
.views-field-edit-node {
    position: relative;
    z-index: 20;
}

.views-field-edit-node a {
    display: inline-block;
    background: gold;
    color: #000000;
    border-radius: 5px;
    font-size: 12px;
    padding: 1px 10px;
    border: 1px solid gold;
    transition: background 0.3s ease-out, border-color 0.2s ease-out;
}

.views-field-edit-node a:hover {
    background: #FFFFFF;
    border-color: #000000;
    color: #000000;
}

/* Pager */
ul.pagination {
    text-align: center;
    display: flex;
    justify-content: center;
    /* display: inline-block !important; */
    /* float: right; */
}

ul.pagination li {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

ul.pagination li a {
    color: #333333;
    font-size: 11px;
    transition: background 0.3s ease-out;
}

ul.pagination li:hover a {
    color: #333333;
}

ul.pagination .page-item.active .page-link {
    background: #206a87 !important;
    border: 1px solid #206a87;
    color: #FFFFFF;
    font-size: 11px;
}

/* Slick dots */
.slick-dots {
    text-align: center;
    margin: 10px 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    padding: 5px 1px;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li:before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f111";
    cursor: pointer;
    font-size: 9px;
    transition: content 0.3s ease-out;
    color: #FFFFFF;
    transition: color 0.3s ease-out;
}

.slick-dots li.slick-active:before {
    content: "\f192";
    transition: color 0.3s ease-out;
}

.slick-dots li:hover:before {
    content: "\f111";
    color: #808080;
}

/* Arrows */
.arrow-left {
    position: absolute;
    top: 35%;
    /* left: -1%; */
    /* background: rgba(255,255,255,1); */
    /* padding: 5px 12px !important; */
    z-index: 5;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.3s ease-out;
    /* border-radius: 50%; */
    /* padding: 10px 17px; */
    /* box-shadow: 0 0 10px rgba(0,0,0,0.2); */
    /* width: auto !important; */
    /* width: 40px; */
    /* height: 40px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border: 2px solid #CCCCCC; */
    transition: border 0.3s ease-out;

    /* background: url("../images/arrow-blue-left.png") 50% 50% no-repeat; */
    border: 0;
    width: 35px;
    height: 70px;
    background-size: contain;
    padding: 0 !important;
    border-radius: 0;
    left: 0;

    transform: scale(0.4);
}

.arrow-left span {
    visibility: hidden;
    display: inline-block;
    width: 0;
}

.arrow-left span.first-arrow {
    position: absolute;
    background: url("../images/slider-arrow-left-dark.png");
    display: block;
    height: 73px;
    width: 36px;
    z-index: 10;
    visibility: visible;
    left: 0;
    transition: left 0.2s ease-out;
}

.arrow-left span.second-arrow {
    position: absolute;
    background: url("../images/slider-arrow-left-light.png");
    display: block;
    height: 73px;
    width: 40px;
    visibility: visible;
    left: 10px;
    z-index: 5;

}

.arrow-left:hover span.first-arrow {
    left: -5px;
}

.arrow-right {
    position: absolute;
    top: 35%;
    /* right: -1%; */
    /* background: rgba(255,255,255,1); */
    /* padding: 5px 12px !important; */
    z-index: 5;
    cursor: pointer;
    font-size: 15px;
    transition: background 0.3s ease-out, color 0.3s ease-out;
    /* border-radius: 50%; */
    /* padding: 10px 17px; */
    /* box-shadow: 0 0 10px rgba(0,0,0,0.2); */
    /* width: auto !important; */
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* border: 2px solid #CCCCCC; */
    transition: border 0.3s ease-out;

    /* background: url("../images/arrow-blue-right.png") 50% 50% no-repeat; */
    border: 0;
    width: 35px;
    height: 70px;
    background-size: contain;
    padding: 0 !important;
    border-radius: 0;
    right: 0;
    transition: height 0.3s ease-out;

    transform: scale(0.4);
}

.arrow-right span {
    visibility: hidden;
    display: inline-block;
    width: 0;
}

.arrow-right span.first-arrow {
    position: absolute;
    background: url("../images/slider-arrow-right-dark.png");
    display: block;
    height: 73px;
    width: 36px;
    z-index: 10;
    visibility: visible;
    right: 0;
    transition: right 0.2s ease-out;
}

.arrow-right span.second-arrow {
    position: absolute;
    background: url("../images/slider-arrow-right-light.png");
    display: block;
    height: 73px;
    width: 40px;
    visibility: visible;
    right: 10px;
    z-index: 5;
}

.arrow-right:hover span.first-arrow {
    right: -5px;
}


/* Slick dots */
ul.slick-dots {
    margin: 10px 0;
    padding: 0;
}

ul.slick-dots li {
    padding: 0 5px;
}

ul.slick-dots li:before {
    color: #CCCCCC;
    font-weight: bold;
}

ul.slick-dots li.slick-active:before {
    color: #354b84;
    font-weight: bold;
    content: "\f111";
}

/* Breadcrumb */
.block-system-breadcrumb-block{
    display: none;
}
ol.breadcrumb {
    justify-content: center;
    margin-left: 12px;
    margin: 20px 0 20px 10px;
    padding: 20px 15%;
    font-size: 13px;
    color: #FFFFFF;
}

ol.breadcrumb li {
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,0.9) !important;
    font-weight: 600;
}

ol.breadcrumb li a {
    color: #FFFFFF;
    font-size: 13px;
}

.breadcrumb-item+.breadcrumb-item::before {
    padding: 0 10px !important;
    font-family: 'Font Awesome 5 Pro';
    content: "\f105";
    color: #FFFFFF;
}

/* View grouping */
.view .view-grouping .view-grouping-header {
    font-size: 27px;
    font-weight: bold;
    text-align: right;
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.view .view-grouping .view-grouping-content h3 {
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 30px 0;
    position: relative;
    padding-left: 20px;
}

.view .view-grouping .view-grouping-content h3:before {
    content: "";
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #dab475;
}


/* CAPTCHA */
#edit-captcha-response {
    width: 200px;
    flex: unset;
}

/* Special-case styling */
/* TYT timeline styling */
.tyt-timeline.paragraph--type--timeline .field--name-field-timeline-date {
    background: #4a5aa3;
    border: 3px solid #4a5aa3;
    box-shadow: inset 0 0 0 2px gold;
    box-sizing: border-box;
}

.tyt-timeline.paragraph--type--timeline .field__item:not(.swap)>.timeline-layout-two:before {
    background: #d61c1c;
}

.tyt-timeline.paragraph--type--timeline .field__item.swap>.timeline-layout-two:after {
    background: #d61c1c;
}

.tyt-timeline.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-two .branch-center {
    background: #d61c1c;
    position: relative;
    z-index: 10;
}

.tyt-timeline.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-two .branch-center:after {
    content: "";
    background: white;
    border-radius: 50%;
    width: 2px;
    /* Adjust size as needed */
    height: 2px;
    /* Adjust size as needed */
    position: absolute;
    /* Position it as needed */
    top: 50%;
    /* Center vertically */
    left: 50%;
    /* Center horizontally */
    transform: translate(-50%, -50%);
    /* Adjust for centering */
}

.tyt-timeline.paragraph--type--timeline .field--name-field-timeline-content {
    color: #333333;
    font-weight: bold;
}

.tyt-timeline.tyt-timeline.paragraph--type--timeline .field--name-field-timeline-items>.field__item .timeline-layout-two .branch-line {
    background: #4a5aa3;
}

/* Text editor styling */
span.text-small {
    font-size: 12px;
}

span.text-medium {
    font-size: 17px;
}

span.text-large {
    font-size: 22px;
}

span.text-xlarge {
    font-size: 27px;

}

p.no-margin {
    margin: 0;
}

/* button */
a.custom-button-red{
    display: inline-block;
    padding: 5px 15px;
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    background: #e74747;
    font-size: 14px;
}

a.custom-button-blue{
    display: inline-block;
    padding: 5px 15px;
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    background: #4357a8;
}

a.custom-button-green{
    display: inline-block;
    padding: 5px 15px;
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    background: #74bd4d;
}

/* Curvy image */
span.curve-edge img{
    border-radius: 7px;
}

/* Drop shadow */
span.dropshadow img{
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

/* Align right image */
img.align-right{
    margin: 0 0 20px 30px;
}

/* Align left image */
img.align-left{
    margin: 0 30px 20px 0;
}

/* Quote */
span.quote-medium{
    font-weight: bold;
    font-size: 20px;
    padding: 50px 0;
    display: block;
    line-height: 24px;
}
span.quote-large{
    font-weight: bold;
    font-size: 30px;
    padding: 50px 0;
    display: block;
    line-height: 34px;
}
span.quote-medium:before{
    content: "\f10d";
    font-family: 'Font Awesome 5 Pro';
    font-size: 20px;
    vertical-align: top;
    margin-right: 10px;
    font-weight: bold;
    transform: translateY(0px) translateX(-32px);
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: left;
}
span.quote-large:before{
    content: "\f10d";
    font-family: 'Font Awesome 5 Pro';
    font-size: 30px;
    vertical-align: top;
    margin-right: 10px;
    font-weight: bold;
    transform: translateY(0px) translateX(-32px);
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: left;
}
span.quote-medium:after{
    content: "\f10e";
    font-family: 'Font Awesome 5 Pro';
    font-size: 20px;
    vertical-align: bottom;
    margin-left: 10px;
    font-weight: bold;
    transform: translateY(0px) translateX(22px);
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: right;
}
span.quote-large:after{
    content: "\f10e";
    font-family: 'Font Awesome 5 Pro';
    font-size: 30px;
    vertical-align: bottom;
    margin-left: 10px;
    font-weight: bold;
    transform: translateY(0px) translateX(22px);
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: right;
}

/* UL Flexbox */
ul.flex-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0;
    gap: 5px;
    margin: 0 0 30px 0;
    list-style: none;
}
ul.flex-box li{
    padding: 0;
    margin: 0;
}
ul.flex-box li a{
    border: 1px solid #CCCCCC;
    display: block;
    padding: 10px 15px;
    border-radius: 7px;
}

/* Swiper paging */
.swiper-pagination-bullet-active{
    background: #FFFFFF;
}

/* Swiper arrows */
.swiper-button-next, .swiper-button-prev{
    color: #FFFFFF;
    font-size: 15px;
}