@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,200&display=swap');

:root {
    /* Only for reference, media query doesn't support css var
    --container-sm-mq: 576px;
    --container-md-mq: 768px;
    --container-lg-mq: 992px;
    --container-xl-mq: 1200px;
    --primary-color: #990033;
    --secondary-color: #003594;
    --accent-color: #cc0033;

    --primary-color: #950319;
    --secondary-color: #003594;
    --accent-color: #cc0033;
 

     */
    --primary-background: #ffffff;
    --primary-color: #03536b;
    --secondary-color: #1c77a0;
    --accent-color: #e51f23;
    --cbb-red: #e51f23;
    --main-menu-bg: #EEEEEE; /**/
    --footer-color: #f7f7f7;
    --text-color: #484848;
    --button-color: #326c92;
    --form-field-bg-color: #c1c1c1;
    --primary-font: 'Roboto';
    --primary-font-family: 'Roboto', 'Open Sans', 'Arial';
    --title-font-family: 'Roboto', 'Open Sans', Arial;
    --title-font: 'Poppins';
    --invert-color: #ffffff;
    --content-width: 1200px;
    --test-fonts: 'catamaran', Roboto, 'Exo 2', 'Source Sans Pro', 'Sarabun';
    --top-alert-height: 119px;
    --primary-border-color: #ccc;
}

html, body {
    font-family: var(--primary-font-family);
    font-size: 12pt;
    color: var(--text-color);
    background: var(--invert-color);
}

a {
    color: var(--text-color);
}

a:hover {
    color: var(--text-color);
}

/* Overrides bootstrap style */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: none;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

@media only screen and (min-width: 1200px) {
    .container, container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: var(--content-width);
        padding-left: 15px;
        padding-right: 15px;
    }

    /*   unlock home top carousel content boundary 
    .hero-slider .slider-item .container {
        max-width: 85vw;
    }
    */
}

/* End bootstrap */

/* Common styles */
.position-full {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* End common styles */


/* --- Top alert --- */
.top-alert {
    background-color: #000000;
    font-size: 1rem;
    color: var(--invert-color);
    height: var(--top-alert-height);
    width: 100%;
    display: none;
    z-index: 101;
}

.top-alert .container {
    display: flex;
    height: 100%;
    align-items: center;
    position: relative;;
}

.top-alert a {
    color: #0099e3;
}

.top-alert-close {
    position: absolute;
    right: 0;
}

/* --- End top alert --- */


/* --- Top link --- */
.top-links {
    background: var(--footer-color);
    /*var(--primary-color);*/
    height: 30px;
    line-height: 30px;
    display: block;
    text-align: right;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--primary-color);
}

    .top-links a {
        /*color: var(--invert-color);*/
        margin-left: 30px;
    }
@media (max-width: 768px) {
    .top-links {
        display:none;
    }

}

    /* --- End top link --- */


    /* --- Top menu --- */
    /*
.top-menu {
    font-size: 1.2rem;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(149,3,25,0.90) 40%, rgba(245,0,2,0.84) 100%);
    color: #fff;
    z-index: 101;
}
    */
.top-menu {
    font-size: 1.2rem;
    /*border-bottom: solid var(--primary-border-color) 1px;*/
    background-color: var(--main-menu-bg);
    color: #03536b;
    z-index: 101;
}



        .top-menu > nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        .top-menu .branding img {
            width: 300px;
            margin-left: 80px;
        }

    .top-menu .mobile-menu {
        /*display: block;*/
    }

        .top-menu .desktop-menu {
            margin-left: auto;
            margin-right: 80px;
        }

            .top-menu .desktop-menu ul, .top-menu .desktop-menu li {
                margin: 0;
                padding: 0;
                list-style: none;
                white-space: nowrap;
            }

            .top-menu .desktop-menu .menu:after {
                content: " ";
                clear: both;
                float: none;
                display: block;
            }

            .top-menu .desktop-menu .menu-item {
                padding: 0 30px;
                height: 90px;
                float: left;
            }

                .top-menu .desktop-menu .menu-item > a, .top-menu .desktop-menu .menu-item > span {
                    display: block;
                    height: 90px;
                    line-height: 90px;
                    cursor: pointer;
                }

                    .top-menu .desktop-menu .menu-item > a:hover {
                        text-decoration: none;
                    }

            .top-menu .desktop-menu .menu > li:hover {
                border-bottom: 6px solid;
                border-bottom-color: var(--button-color);
            }

            .top-menu .desktop-menu .menu-item-background {
                display: none;
                position: absolute;
                left: 0;
                width: 100%;
                background-color: rgba(0, 0, 0, 0.9);
                overflow: hidden;
                border-top: 1px solid #fff;
            }

    ul.submenu-list a, ul.submenu-list a:link {
        color: #fff;
    }

    .top-menu .desktop-menu .menu-item:hover .menu-item-background, .top-menu .desktop-menu .menu-item.active .menu-item-background {
        display: block;
    }

    .top-menu .desktop-menu .menu-item-background > .container {
        position: relative;
    }

        .top-menu .desktop-menu .menu-item-background > .container:after {
            content: "";
            position: absolute;
            top: 0;
            right: -2000px;
            bottom: 0;
            /*left: calc(100% - 194px);*/
            left: 100%;
            background-color: var(--primary-color);
            opacity: 0.7;
        }

        .top-menu .desktop-menu .menu-item-background > .container:before {
            content: "";
            position: absolute;
            top: -340px;
            right: 0;
            border-left: 1200px solid transparent;
            border-bottom: 2000px solid var(--primary-color);
            opacity: 0.7;
        }

    .top-menu .desktop-menu .sub-menu {
        flex-wrap: wrap;
        justify-content: space-between;
        padding-bottom: 20px;
        z-index: 2;
        position: relative;
    }

    .top-menu .desktop-menu .menu-item:hover .sub-menu, .top-menu .desktop-menu .menu-item.active .sub-menu {
        display: flex;
    }

    .top-menu .desktop-menu .submenu-item {
        margin-right: 20px;
    }

        .top-menu .desktop-menu .submenu-item.rightmost {
            margin-right: 0;
            color: var(--invert-color);
        }

            .top-menu .desktop-menu .submenu-item.rightmost a {
                color: var(--invert-color);
            }

        .top-menu .desktop-menu .submenu-item h5 {
            padding: 40px 0 10px 0;
            font-weight: 400;
            border-bottom: 4px solid var(--primary-border-color);
            margin-bottom: 14px;
        }

        .top-menu .desktop-menu .submenu-item:hover h5 {
            border-bottom-color: var(--button-color);
        }

        .top-menu .desktop-menu .submenu-item .submenu-list {
            margin-right: 10px;
            font-size: 1rem;
            line-height: 2rem;
        }

        .top-menu .desktop-menu .submenu-item.rightmost .submenu-list {
            margin-right: 0;
        }

        .top-menu .desktop-menu .submenu-item .submenu-list > li {
            width: 210px;
            overflow: hidden;
            white-space: normal;
        }

    .top-menu .signup-menu {
        display: inline-block;
        position: relative;
    }

        .top-menu .signup-menu .cbb-button {
            color: var(--invert-color);
            padding: 8px 30px;
            text-transform: uppercase;
            background-color: var(--cbb-red);
            font-family: var(--primary-font-family);
            font-size: 1rem;
            border-color: transparent;
            border-radius: 5px;
            cursor: pointer;
        }


            .top-menu .signup-menu .cbb-button:hover {
                text-decoration: none;
            }

    .cbb-button {
        color: var(--invert-color);
        padding: 8px 30px;
        text-transform: uppercase;
        background-color: var(--cbb-red);
        font-family: var(--primary-font-family);
        font-size: 1rem;
        border-color: transparent;
        border-radius: 5px;
        cursor: pointer;
    }

        .cbb-button:hover {
            background-color: var(--primary-color);
            color: var(--invert-color);
        }

    @media (max-width: 992px) {
        .top-menu .desktop-menu .menu-item-background > .container:before {
            top: 50%;
        }

        .top-menu .desktop-menu .menu-item-background > .container:after {
            background: none;
        }

        .top-menu .desktop-menu .submenu-item {
            margin-right: 0;
        }

            .top-menu .desktop-menu .submenu-item.rightmost, .top-menu .desktop-menu .submenu-item.rightmost a {
                color: var(--text-color);
            }

            .top-menu .desktop-menu .submenu-item .submenu-list > li {
                width: 240px;
            }
    }

    @media (max-width: 920px) {
        .top-menu .desktop-menu .menu-item {
            padding: 0 8px;
        }
    }

    @media (max-width: 768px) {
        .top-menu {
            border-bottom: 2px solid var(--primary-color);
        }

            .top-menu > nav {
                justify-content: space-around;
            }

            .top-menu .branding img {
                margin: 15px 0;
            }

            .top-menu .mobile-menu {
                display: block;
            }

                .top-menu .mobile-menu > a:first-child {
                    /*color: var(--invert-color);*/
                }

        .desktop-menu {
            display: none;
        }

        .top-menu .signup-menu .cbb-button {
            padding: 8px 15px;
        }
    }

    /* --- End top menu --- */

    /* Hero slider */
    section.hero-slider {
        margin-top: -90px;
    }

    .hero-slider .slider-item {
        position: relative;
    }

    .hero-slider .slider-item {
        display: none;
    }

        .hero-slider .slider-item:first-child {
            display: block;
        }

    .hero-slider .slick-hero-slider.slick-initialized .slider-item {
        display: block;
    }

    .hero-slider .slider-item > picture {
        display: block;
    }

    .hero-slider .slider-item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        /* max-height: 700px; */
    }

    .hero-slider .slick-hero-slider .slick-prev, .hero-slider .slick-hero-slider .slick-next {
        z-index: 1;
        width: 45px;
        height: 100px;
        background-color: rgba(255, 255, 255, .4);
    }

    .hero-slider .slick-hero-slider .slick-prev {
        left: 0;
    }

    .hero-slider .slick-hero-slider .slick-next {
        right: 0;
    }

    .hero-slider .slick-hero-slider .slick-arrow:before {
        border-style: solid;
        border-width: 0.115em 0.115em 0 0;
        content: '';
        display: inline-block;
        height: 25px;
        left: 0.15em;
        position: relative;
        top: 0.15em;
        transform: rotate(-45deg);
        vertical-align: top;
        width: 25px;
        color: rgba(0, 0, 0, .45);
    }

    .hero-slider .slick-hero-slider .slick-prev:before {
        left: 0.25em;
        transform: rotate(-135deg);
    }

    .hero-slider .slick-hero-slider .slick-next:before {
        left: 0;
        transform: rotate(45deg);
    }

    .hero-slider .slick-hero-slider .container {
        position: absolute;
        width: 100%;
        height: 100%;
        right: 0;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
    }

    .hero-slider .slider-item .slider-text-space, .top-image .slider-text-space {
        color: var(--invert-color);
        margin-top: 15em;
    }

        /* Hero slider custom position */
        .hero-slider .slider-item .slider-text-space.custom-2 {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
        }

    @media (max-width: 992px) {
        .hero-slider .slider-item .slider-text-space {
            padding-left: 25px;
            padding-right: 25px;
        }
    }

    @media (max-width: 768px) {
        .hero-slider .slick-hero-slider .slick-prev, .hero-slider .slick-hero-slider .slick-next {
            top: 175px;
        }

        .hero-slider .slider-item > picture {
            height: 350px;
        }

        .hero-slider .slick-hero-slider .container {
            position: static;
        }

        .hero-slider .slider-item .slider-text-space {
            color: var(--text-color);
            margin-top: 0;
        }

            .hero-slider .slider-item .slider-text-space > :first-child {
                display: block;
                padding-top: 15px;
            }

            .hero-slider .slider-item .slider-text-space.custom-2 {
                display: block;
            }
    }

    @media (max-width: 480px) {
        .slider-text-space {
            color: #ccc;
        }

        .hero-slider .title-1, .hero-slider .slider-text-space p, .hero-slider .title-1 {
            color: var(--text-color);
        }
    }

    /* End hero slider */


    /* Home shortcut, Denis created component */
    #homeshortcuts-carousel {
        width: calc(100% - 90px);
        margin: 60px auto;
    }

        #homeshortcuts-carousel .slider-item {
            display: none;
        }

            #homeshortcuts-carousel .slider-item:first-child {
                display: block;
            }

        #homeshortcuts-carousel.slick-initialized .slider-item {
            display: block;
        }

        #homeshortcuts-carousel .slider-item img {
            display: block;
        }

        #homeshortcuts-carousel .slick-prev, #homeshortcuts-carousel .slick-next {
            z-index: 1;
            width: 45px;
            height: 100px;
            background-color: rgba(255, 255, 255, .4);
        }

        #homeshortcuts-carousel .slick-prev {
            left: -45px;
        }

        #homeshortcuts-carousel .slick-next {
            right: -45px;
        }

        #homeshortcuts-carousel .slick-arrow::before {
            border-style: solid;
            border-width: 0.115em 0.115em 0 0;
            content: '';
            display: inline-block;
            height: 35px;
            left: 0.15em;
            position: relative;
            top: 0.15em;
            transform: rotate(-45deg);
            vertical-align: top;
            width: 35px;
            color: rgba(0, 0, 0, .45);
        }

        #homeshortcuts-carousel .slick-prev::before {
            left: 0.25em;
            transform: rotate(-135deg);
        }

        #homeshortcuts-carousel .slick-next::before {
            left: -0.25em;
            transform: rotate(45deg);
        }

    @media (max-width: 1140px) {
        #homeshortcuts-carousel .slick-prev {
            left: -45px;
        }

        #homeshortcuts-carousel .slick-next {
            right: -45px;
        }
    }

    @media (max-width: 992px) {
        #homeshortcuts-carousel {
            width: calc(100% - 90px);
            margin-left: auto;
            margin-right: auto;
        }

            #homeshortcuts-carousel .slick-prev {
                left: -45px;
            }

            #homeshortcuts-carousel .slick-next {
                right: -45px;
            }
    }

    /* End home shortcut */


    /* Highlight */
    .highlight .highlight-item {
        overflow: hidden;
        margin-top: 30px;
    }

    .highlight .highlight-picture {
        height: 350px;
    }

        .highlight .highlight-picture picture {
            position: absolute;
        }

    .highlight-content {
        opacity: 0.9;
        position: absolute;
    }

    /** TOP */
    .highlight .highlight-item-top .highlight-content::after {
        content: "";
        width: 0;
        height: 0;
        border-bottom: 400px solid var(--footer-color);
        border-left: 225px solid transparent;
        position: absolute;
        top: 0;
        right: 40%;
        left: auto;
        bottom: 0;
        z-index: 3;
    }

    .highlight .highlight-item-top .highlight-content::before {
        content: "";
        width: 40%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        background-color: var(--footer-color);
        z-index: 3;
    }

    .highlight .highlight-item-top .highlight-text {
        width: 38%;
        z-index: 7;
        /*padding-right: 100px; */
        color: #000;
    }

    .highlight .highlight-item-top .highlight-picture img {
        position: absolute;
        left: -10%;
        top: 0;
    }

    /** MIDDLE */
    .highlight .highlight-item-middle .highlight-content::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 400px solid var(--primary-color);
        border-right: 225px solid transparent;
        position: absolute;
        top: 0;
        right: calc(40% + 205px);
        left: auto;
        bottom: 0;
        z-index: 3;
    }

    .highlight .highlight-item-middle .highlight-content::before {
        content: "";
        width: auto;
        position: absolute;
        top: 0;
        right: calc(40% + 205px * 2);
        bottom: 0;
        left: 0;
        background-color: var(--primary-color);
        z-index: 3;
    }

    .highlight .highlight-item-middle .highlight-text {
        width: 30%;
        z-index: 7;
        /*padding-left: 40px;*/
        color: var(--invert-color);
    }

    .highlight .highlight-item-middle .highlight-picture img {
        position: absolute;
        right: -10%;
        top: 0;
    }

    /** BOTTOM */
    .highlight .highlight-item-bottom .highlight-content::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 400px solid var(--footer-color);
        border-left: 225px solid transparent;
        position: absolute;
        top: 0;
        right: calc(40% + 165px);
        left: auto;
        bottom: 0;
        z-index: 3;
    }

    .highlight .highlight-item-bottom .highlight-content::before {
        content: "";
        width: calc(40% + 165px);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        background-color: var(--footer-color);
        z-index: 3;
    }

    .highlight .highlight-item-bottom .highlight-text {
        width: 44%;
        z-index: 7;
        /*margin-right: 100px;*/
        color: #000;
    }

    .highlight .highlight-title {
        font-size: 40px;
    }

    .highlight .highlight-description {
        font-size: 17px;
    }

    .highlight .highlight-item-bottom .highlight-picture img {
        position: absolute;
        /*left: -25%;*/
        top: 0;
    }

    @media (max-width: 1200px) {
        .highlight .highlight-title {
            font-size: 30px;
        }

        .highlight .highlight-item-top .highlight-text {
            padding-right: 50px;
        }

        .highlight .highlight-item-middle .highlight-text {
            width: 25%;
            padding-left: 0px;
        }
    }

    @media (max-width: 992px) {
        .highlight .highlight-title {
            font-size: 30px;
        }

        .highlight .highlight-picture {
            height: 300px;
        }

        /** TOP */
        .highlight .highlight-item-top .highlight-content::after {
            border-bottom: 300px solid #990134;
            border-left: 155px solid transparent;
        }

        /** MIDDLE */
        .highlight .highlight-item-middle .highlight-content::after {
            border-top: 300px solid #c6b6a6;
            border-right: 155px solid transparent;
            right: calc(40% + 155px);
        }

        .highlight .highlight-item-middle .highlight-content::before {
            right: calc(40% + 155px * 2);
        }

        /** BOTTOM */
        .highlight .highlight-item-bottom .highlight-content::after {
            border-top: 300px solid #434a54;
            border-left: 155px solid transparent;
            right: calc(40% + 155px);
        }

        .highlight .highlight-item-bottom .highlight-content::before {
            width: calc(40% + 155px);
        }
    }

    @media (max-width: 768px) {
        .highlight-content {
            position: static !important;
            opacity: 1;
            padding: 50px;
        }

        .highlight .highlight-item-bottom .highlight-content {
            padding-bottom: 0;
        }

        .highlight .highlight-picture picture {
            position: static !important;
        }

        .highlight .highlight-item-top .highlight-content::before,
        .highlight .highlight-item-middle .highlight-content::before,
        .highlight .highlight-item-bottom .highlight-content::before,
        .highlight .highlight-item-top .highlight-content::after,
        .highlight .highlight-item-middle .highlight-content::after,
        .highlight .highlight-item-bottom .highlight-content::after {
            width: 0;
            position: static;
            background: none;
            z-index: 0;
            border: none;
        }

        .highlight .highlight-item-top .highlight-picture img,
        .highlight .highlight-item-middle .highlight-picture img,
        .highlight .highlight-item-bottom .highlight-picture img {
            position: static;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .highlight .highlight-item-top .highlight-text,
        .highlight .highlight-item-middle .highlight-text,
        .highlight .highlight-item-bottom .highlight-text {
            width: 100%;
            color: var(--text-color) !important;
        }

        .highlight .highlight-title {
            font-size: 24px;
        }

        .highlight .highlight-description {
            font-size: 15px;
        }

        /** TOP */
        .highlight .highlight-item-top .highlight-text,
        .highlight .highlight-item-bottom .highlight-text {
            padding-right: 15px;
        }
    }

    /* End hightlight */


    /* General content */
    .general .general-content {
        padding: 80px 0;
    }

    /* End general content */


    /* Footer */
    .main-footer {
        padding: 65px 0;
        box-shadow: -1px 16px 14px -1px rgba(0, 0, 0, 0.1) inset;
        -webkit-box-shadow: -1px 16px 14px -1px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: -1px 16px 14px -1px rgba(0, 0, 0, 0.1) inset;
        background-color: var(--footer-color);
    }

        .main-footer .link-group h3 {
            font-size: 1.1rem;
            font-weight: 400;
            padding-bottom: 20px;
            color: #000;
        }

            .main-footer .link-group h3::after {
                content: "";
                position: absolute;
                height: 3px;
                width: 30px;
                background-color: var(--primary-color);
                left: 0;
                bottom: 4px;
            }

        .main-footer .link-group li + li {
            margin-top: 5px;
        }

        .main-footer .link-group a {
            color: var(--text-color);
        }

    /*  End footer */

    /* From original css */

    .sidebar-nav {
        position: fixed;
        width: 320px;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        top: 0;
        left: 0;
        background-color: #2f2f2f;
        z-index: 999;
        overflow: auto;
        max-height: 100vh;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform .3s ease-in-out;
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
        font-size: 1rem;
    }

        .sidebar-nav.is-open {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .75);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, .75)
        }

    @media (max-width: 768px) {
        .sidebar-nav {
            width: 100vw;
            height: 100vh
        }
    }

    .sidebar-nav .mobile-nav-inner {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 40px
    }

    .sidebar-nav .close {
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        line-height: 40px;
        text-align: center;
        background-color: #2f2f2f
    }

    .sidebar-nav a {
        display: block;
        padding: 15px 10px;
        font-weight: 600;
        line-height: 16px;
    }

        .sidebar-nav a, .sidebar-nav a:active, .sidebar-nav a:link, .sidebar-nav a:visited {
            color: #fff
        }

    .sidebar-nav .nav-group {
        text-align: left;
        text-transform: uppercase;
    }

        .sidebar-nav .nav-group a {
            font-weight: 400;
        }

            .sidebar-nav .nav-group a:hover {
                text-decoration: none;
            }

    @media (max-width: 768px) {
        .sidebar-nav .nav-group {
            text-align: center;
            border-bottom: 1px solid #fff;
        }
    }

    /* side menu leve 1 */
    .sidebar-nav .nav-group > a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: #fff;
        background-color: var(--primary-color);
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

        .sidebar-nav .nav-group > a span {
            margin-left: 5px
        }

    .sidebar-nav .nav-group .fa-chevron-up {
        display: none
    }

    .sidebar-nav .nav-group .fa-chevron-down {
        display: block
    }

    .sidebar-nav .nav-group .sub-nav {
        display: none;
        padding-left: 0;
        list-style-type: none;
        margin: 0
    }

        .sidebar-nav .nav-group .sub-nav a {
            padding: 10px;
            background-color: #4d4c4d;
            -webkit-transition: background-color 150ms ease-in-out;
            transition: background-color 150ms ease-in-out
        }

            .sidebar-nav .nav-group .sub-nav a:hover {
                color: #cf0a2c;
                background-color: #2f2f2f
            }

        .sidebar-nav .nav-group .sub-nav > li > a {
            background-color: #2f2f2f
        }

        .sidebar-nav .nav-group .sub-nav > li ul {
            margin: 0;
            padding-left: 0;
            list-style-type: none;
            background-color: #999
        }

            .sidebar-nav .nav-group .sub-nav > li ul a {
                font-size: .75em
            }

    .sidebar-nav .nav-group .is-active .fa-chevron-up {
        display: block
    }

    .sidebar-nav .nav-group .is-active .fa-chevron-down {
        display: none
    }

    .sidebar-nav .nav-group .is-active .sub-nav {
        display: block
    }

    .login-panel {
        position: absolute;
        display: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: calc(100% - 20px);
        margin-left: 20px;
        margin-top: 10px;
        padding: 15px 25px 25px 25px;
        /* background-color: rgba(207,10,44,.6);
     border-radius: 0 0 20px 0  */
    }

        .login-panel.is-open {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
        }

    .sidebar-nav .login-panel {
        width: calc(100% - 20px);
        position: relative;
        display: block;
        left: 0;
        right: 0;
        margin: 10px auto;
        border-radius: 0
    }

        .sidebar-nav .login-panel a {
            padding: 0
        }

    .login-panel .login-panel__header {
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .login-panel button, .login-panel input, .login-panel select {
        width: 100%;
        background-color: #fff;
        border: 0;
        height: 25px;
        border-radius: 4px;
        padding: 0 8px
    }

    .login-panel button, .login-panel input {
        margin-top: 10px
    }

    .login-panel button {
        background-color: #cf0a2c;
        text-transform: uppercase;
        color: #fff;
        font-size: .875em;
        font-weight: 700;
        height: 30px;
        cursor: pointer;
        line-height: 1
    }

        .login-panel button:hover {
            background-color: #99151d
        }

    .login-panel .login-panel__footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-top: 10px
    }

        .login-panel .login-panel__footer a {
            font-size: .813em;
            font-weight: 400;
            text-transform: none;
            color: #fff;
            margin: 0;
            opacity: .8
        }

            .login-panel .login-panel__footer a:hover {
                opacity: 1
            }

    /* End from original css */

    /* Login component */
    .login-component {
        width: 280px;
        height: 380px;
        border: 16px solid var(--primary-color);
        padding: 6px 16px;
        background-color: var(--invert-color);
        z-index: 103;
        display: none;
        font-size: 1rem;
    }

    .login-component {
        width: 280px;
        height: 380px;
        /* border: 4px solid var(--primary-color); */
        border: 0;
        border-radius: 10px;
        padding: 6px 16px;
        background-color: rgba( 0, 0, 0, 0.9);
        z-index: 103;
        display: none;
        font-size: 1rem;
    }

        .login-component h5 {
            color: var(--form-field-bg-color);
        }

        .login-component fieldset {
            margin-top: 20px;
        }

        .login-component .radio-label {
            display: block;
            position: relative;
            padding-left: 54px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
            padding-top: 4px;
            height: 30px;
        }

        .login-component .options label:before {
            content: "";
            display: block;
            background: var(--form-field-bg-color);
            position: absolute;
            left: 0;
            top: 0;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            width: 34px;
            height: 34px;
        }

        .login-component .options > div:not(:first-child) label:before {
            border-radius: unset;
        }

        .login-component .options > div:last-child label:before {
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .login-component .radio-label input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }

        .login-component .radio-btn {
            position: absolute;
            height: 25px;
            width: 25px;
            background-color: var(--form-field-bg-color);
            border-radius: 50%;
            top: 5px;
            left: 4px;
        }

        .login-component .options > div:last-child .radio-btn {
            top: 4px;
        }

        .login-component .radio-label:hover input ~ .radio-btn {
            border: 1px solid var(--cbb-red);
        }

        .login-component .radio-label input:checked ~ .radio-btn {
            background-color: var(--cbb-red);
        }

        .login-component .radio-btn:after {
            content: "";
            position: absolute;
            display: none;
        }

        .login-component .radio-label input:checked ~ .radio-btn:after {
            display: block;
        }

        .login-component .radio-label .rado-btn:after {
            top: 9px;
            left: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: white;
        }

        .login-component .memberLoginForm {
            display: block;
            margin-top: 40px;
        }

        .login-component input[type="text"] {
            background: var(--form-field-bg-color);
            border: 1px solid transparent;
            border-radius: 4px;
            width: 100%;
            color: var(--invert-color);
            font-weight: 700;
            padding: 4px 8px;
            margin-bottom: 10px;
        }

        .login-component input[type="submit"] {
            background-color: var(--button-color);
            color: var(--invert-color);
            text-transform: uppercase;
            width: 100%;
            margin-bottom: 10px;
        }

        .login-component .login-component__footer a {
            color: var(--form-field-bg-color);
        }

    .login-component {
        position: absolute;
        top: -30px;
        right: -40px;
    }

    @media (max-width: 1200px) {
        .login-component {
            right: -10px;
        }
    }

    @media (max-width: 992px) {
        .login-component {
            right: 0;
        }
    }

    @media (max-width: 768px) {
        .login-component {
            top: -27px;
            right: -30px;
        }
    }

    /* End login component */