﻿@media (min-width: 400px) {

    body {
        font-size: 16px;
        color: #386B90;
    }

    br {
        display: block;
        content: "";
        margin-top: 0;
    }

    .dropdown-menu {
        width: auto;
    }

    #HomePageBody {
        padding: 0px 0 0px 0;
        background-color: #FFF;
        color: #284d6a;
    }

        #HomePageBody > .Home-index-bg {
            position: fixed;
            top: 0;
            height: 100vh;
            width: 100vw;
            content: '';
            background-image: url("../images/Home-Images/VTN.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;
            filter: blur(2px);
            -webkit-filter: blur(2px);
        }

        #HomePageBody > .Homeindex {
            background-color: transparent !important;
        }

            #HomePageBody > .Homeindex > div > div > div {
                max-width: 400px;
                margin-right: auto;
                margin-left: auto;
                margin-bottom: 50px;
                padding: 0;
            }

            #HomePageBody > .Homeindex > .row:nth-child(2n) > div {
                background-color: #EBEFF0;
            }

            #HomePageBody > .Homeindex > .row:nth-child(2n+1) > div {
                background-color: white;
            }

    p, span {
        margin: 0;
        font-size: 16px;
        line-height: 18px;
        font-weight: 400;
    }

    a, a:hover {
        color: inherit;
    }

    #HomePageBody > div.row > div {
        padding-bottom: 0px;
    }

    .Menu-icon {
        margin-right: 10px;
    }

        .Menu-icon > span > i {
            font-size: 20px;
        }
    /*****************************************navbar******************************************/
    .navbar {
        height: 90px;
        background: linear-gradient( 115deg, #284d6a 300px, #3b6c8d 0%);
        z-index: 1;
    }

    .navbar-brand {
        padding: 0;
    }

    .logo {
        height: 65px;
    }

    a.nav-link {
        font-size: 20px;
    }

    a.dropdown-item {
        font-size: 15px;
    }

    .navbar-nav {
        margin: 0px 0px 0px 0px;
    }

    .Search-Icon-Menu {
        width: 15px;
        height: 15px;
    }

    .a-Search-Icon-Menu {
        display: grid;
    }

        .a-Search-Icon-Menu > i {
            transform: rotateY(180deg);
            font-size: 18px;
        }
    /*****************************************footer******************************************/
    .footer-bg-color {
        background-color: #284D6A;
    }

    .ED-footer {
        background-image: url(/images/Icon/footer-back.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-color: #284D6A;
        color: white;
        position: absolute;
        width: 100%;
        padding-top: 10px;
    }

        .ED-footer .footer-header > a {
            font-size: 20px;
            line-height: 35px;
            font-weight: 100;
        }

        .ED-footer .footer-text > a {
            font-size: 14px;
            word-break: break-word;
            line-height: 16px;
        }

    #ED-footer .footer-right-div {
        text-align: center;
    }

    #ED-footer > div > div:last-child {
        margin-top: 15px;
    }

        #ED-footer > div > div:last-child > p {
            font-size: 11px;
        }

    a:hover {
        text-decoration-line: none;
    }

        a:hover span {
            color: cornflowerblue;
        }

    /*****************************************Index******************************************/

    .title-homepage {
        margin-top: 10px;
        font-weight: 100;
        font-size: 20px;
        line-height: 1.2;
    }

    .EconomicDashboard > div > div {
        padding: 0 5vw;
    }

        .EconomicDashboard > div > div > div > div > div {
            padding: 0px 18px !important;
        }

    .EconomicDashboard p {
        /*margin-bottom: 0.2vw;*/
    }

    .EconomicDashboard > div > div > div > div > div:nth-child(1) {
    }

    .EconomicDashboard > div > div > div > div > div:nth-child(2) {
    }

    .EconomicDashboard > div > div > div > div > div:nth-child(3) {
    }

    .EconomicDashboard > div > div > div > div > div:nth-child(4) {
    }

    .EconomicDashboard .EDashboard-subtitle:hover {
        /*background-color: rgb(151 192 219);*/
        background-color: #3399CC;
        transition: 500ms background-color;
    }
        .EconomicDashboard .EDashboard-subtitle:hover > p {
            /*text-shadow: 3px 3px gold;*/
            color: #fff;
            transition: 500ms color;
        }
    .EconomicDashboard .EDashboard-subtitle:active {
        background-color: #7FBBDB;
        transition: 500ms background-color;
    }
    .EDashboard-subtitle {
        background-color: #BEDAE8;
        border-radius: 5px 5px 0px 0px;
        margin: 0px 0px 1px 0px;
        text-align: center;
        padding: 0px 0px;
        transition: 500ms background-color;
    }

        .EDashboard-subtitle > p {
            font-size: 10px;
            line-height: 1.2;
            padding: 5px;
            font-weight: bold;
            transition: 500ms text-shadow;
        }

    .EDashboard-img {
        margin: 0px 0px 10px 0px;
    }



    .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(1) .EDashboard-content img {
        width: 28px;
        margin-left: 2px;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(2) .EDashboard-content img {
        width: 28px;
        margin-left: 2px;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(2) .EDashboard-content .female-icon {
        margin-right: -10px;
    }

        .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(2) .EDashboard-content .female-icon > img {
            width: 10px;
            margin: 0 0px 0 0;
        }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(2) .EDashboard-content .male-icon {
        margin-left: -10px;
    }

        .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(2) .EDashboard-content .male-icon > img {
            width: 10px;
            margin: 0 0px 0 0;
        }

    .EDashboard-content {
        margin-bottom: 5px;
        background-color: #EEEEF0;
        padding: 10px 5px;
    }

        .EDashboard-content .col, .EDashboard-content .col-1,
        .EDashboard-content .col-2, .EDashboard-content .col-3,
        .EDashboard-content .col-4, .EDashboard-content .col-5,
        .EDashboard-content .col-6, .EDashboard-content .col-7,
        .EDashboard-content .col-8, .EDashboard-content .col-9,
        .EDashboard-content .col-10, .EDashboard-content .col-11,
        .EDashboard-content .col-12 {
            padding: 0;
        }

        .EDashboard-content .text-5 {
            font-size: 20px;
            line-height: 1.2;
        }

        .EDashboard-content .text-4 {
            font-size: 18px;
            line-height: 1.2;
        }

            .EDashboard-content .text-4#EDBoard-4 {
                padding: 10px 0 0px 0;
                line-height: 0.8;
            }

            .EDashboard-content .text-4#EDBoard-11,
            .EDashboard-content .text-4#EDBoard-12,
            .EDashboard-content .text-4#EDBoard-13 {
                margin: 0px 0 0px 0;
            }

        .EDashboard-content .text-3-5 {
            font-size: 14px;
            line-height: 0.74;
            padding-top: 3px;
            padding-right: 2px;
        }

            .EDashboard-content .text-3-5#EDBoard-2 {
                line-height: 0.9;
                padding-top: 5px;
                padding-right: 5px;
            }

        .EDashboard-content .text-3 {
            font-size: 12px;
            line-height: 1;
        }

        .EDashboard-content .text-2-5 {
            font-size: 10px;
            line-height: 1;
        }

        .EDashboard-content .text-2 {
            font-size: 9px;
            line-height: 1;
        }

        .EDashboard-content .text-1-5 {
            font-size: 5px;
            line-height: 1;
        }

        .EDashboard-content .text-1-3 {
            font-size: 5px;
            line-height: 1.5;
        }

    .EDashboard-margin-bottom-5 {
        margin-bottom: 20px;
    }

    .EDashboard-margin-bottom-4-5 {
        margin-bottom: 10px;
    }

    .EDashboard-margin-bottom-4 {
        margin-bottom: 10px;
    }

    .EDashboard-margin-bottom-3 {
        margin-bottom: 5px;
    }

    .EDashboard-margin-bottom-2 {
        margin-bottom: 5px;
    }

    .EDashboard-margin-bottom-1 {
        margin-bottom: 10px;
    }

    .EDashboard-content > p {
        text-align: center;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(1) .EDashboard-content {
        height: 135px;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(1) > div > div:nth-child(2) .EDashboard-content {
        height: 130px;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(2) .EDashboard-content {
        height: 293px;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(3) .EDashboard-content {
        height: 293px;
    }

    .EconomicDashboard .EconomicDashboard-card > div:nth-child(4) .EDashboard-content {
        height: 293px;
    }

    #visitorMap2 {
        height: 50vw !important;
    }

    .Cambodia-economic-relations > div > div.row > div:nth-child(3) {
        /*flex: 0 0 18% !important;
        max-width: 18% !important;*/
    }

    .Cambodia-economic-relations > div > div.row > div:nth-child(2) {
        /*right: 40px;*/
    }

    .Cambodia-economic-relations h5 > button {
        font-size: 12px;
        line-height: 1.2;
        text-align: left;
        padding: 3px 10px !important;
    }

    .Cambodia-economic-relations .accordion {
        /*margin-top: 70px;*/
        /*position: absolute;*/
        /*right: 10px;*/
    }

    .Cambodia-economic-relations > div > div > div:last-child {
        /*position: absolute;*/
        /*top: 35px;*/
        /*right: 0;*/
    }

    .Cambodia-economic-relations .card-body {
        font-size: 12px;
        line-height: 1.2 !important;
        padding: 0px 0px;
        background-color: whitesmoke;
    }

        .Cambodia-economic-relations .card-body ul {
            padding-left: 35px;
            margin-bottom: 0;
            padding-bottom: 5px;
        }

            .Cambodia-economic-relations .card-body ul:not(.list-unstyled) {
                line-height: 1.5;
            }

    .Why-invest-in-Cambodia {
        background-color: transparent;
    }

        .Why-invest-in-Cambodia > div {
            background-color: transparent !important;
        }

        .Why-invest-in-Cambodia .title-homepage {
            color: #ebebeb !important;
        }

        .Why-invest-in-Cambodia .content {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0;
            padding-right: 0;
        }

            .Why-invest-in-Cambodia .content div {
                padding: 19px;
            }

                .Why-invest-in-Cambodia .content div div {
                    border: 1px solid #fff;
                    height: 100%;
                    padding: 0;
                }

            .Why-invest-in-Cambodia .content > div > a > div::before {
                content: '';
                opacity: 0.2;
                position: absolute;
                width: 78%;
                height: 84%;
                top: 0;
                left: 0;
                margin: 19px;
                transition: 500ms background-color;
            }

            .Why-invest-in-Cambodia .content > div > a > div:hover::before {
                background-color: #fff;
            }

            .Why-invest-in-Cambodia .content div div img {
                margin-top: 35px;
                margin-bottom: 19px;
                width: 35%;
            }

            .Why-invest-in-Cambodia .content div div p {
                font-size: 14px;
                line-height: 1.2;
                margin-bottom: 35px;
                color: #ebebeb;
                padding: 0 5px;
                /*font-weight: 600;*/
            }

        .Why-invest-in-Cambodia > div > div > div:last-child .content div div p {
            font-size: 20px;
            line-height: 38px;
            margin: 10px 51px;
            color: #ebebeb;
        }

        .Why-invest-in-Cambodia > div > div > div:last-child > a > .content > div > div::before {
            content: '';
            width: 190px;
            height: 60%;
            position: absolute;
            top: 19px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0.2;
            transition: 500ms background-color;
        }

        .Why-invest-in-Cambodia > div > div > div:last-child > a > .content > div > div:hover::before {
            background-color: #FFF;
        }

    .Explore-The-Wonders img {
        width: 100%;
    }

    .Explore-The-Wonders > div > div {
        padding: 0 0px
    }

        .Explore-The-Wonders > div > div > div:last-child > div > div {
            padding: 12px 12px;
        }

            .Explore-The-Wonders > div > div > div:last-child > div > div:first-child .card {
                padding: 0 0px;
                background-color: transparent;
            }

            .Explore-The-Wonders > div > div > div:last-child > div > div:nth-child(2) .card,
            .Explore-The-Wonders > div > div > div:last-child > div > div:nth-child(3) .card {
                padding: 0 4px;
                background-color: transparent;
            }

        .Explore-The-Wonders > div > div > div:nth-child(2) > p {
            font-size: 14px;
            line-height: 18px;
            margin-bottom: 19px;
            color: #A3A3A3;
        }

        .Explore-The-Wonders > div > div > div:nth-child(3) > div > div img {
            max-height: 743px;
            overflow: hidden;
        }

    .Explore-The-Wonders .card {
        margin-bottom: 0;
        box-shadow: none;
    }

    .Explore-The-Wonders .card-title {
        font-size: 12px;
        line-height: 20px;
    }

    .Index-News > div > div {
        padding: 0 0px;
    }

    .Index-News .content div:first-child {
        position: relative;
    }

    .Index-News .content div:nth-child(1) div {
        width: 100%;
    }

    .img-center {
        overflow: hidden;
        height: 200px;
    }

        .img-center > div {
            align-items: center;
            display: flex;
            height: 100%;
        }

            .img-center > div > div {
                text-align: center;
                width: 100%;
            }

                .img-center > div > div > img {
                    width: 100%;
                }

    .Index-News .content > div:nth-child(1) > a > div:nth-child(2) {
        position: absolute;
        bottom: 5px;
    }

        .Index-News .content > div:nth-child(1) > a > div:nth-child(2) > div {
            display: inline-flex;
        }

            .Index-News .content > div:nth-child(1) > a > div:nth-child(2) > div > p {
                font-size: 14px;
                line-height: 15px;
                color: #fff;
                margin: auto;
                background-color: #2c516c;
                opacity: 0.8;
                width: fit-content;
                width: 95%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: pre;
                padding: 10px 13px;
            }

    .Index-News .content > div:nth-child(2) {
        margin-top: 15px;
    }

        .Index-News .content > div:nth-child(2) > div > a > div:nth-child(1) {
            height: 150px;
            margin-bottom: 10px;
        }

        .Index-News .content > div:nth-child(2) > div > a > div:nth-child(2) {
            color: #2c516c;
            height: 35px;
        }

            .Index-News .content > div:nth-child(2) > div > a > div:nth-child(2) > p {
                font-size: 14px;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }

        .Index-News .content > div:nth-child(2) > div > a > div:nth-child(3) > p {
            color: #EC9230;
            font-size: 13px;
            line-height: 20px;
        }

        .Index-News .content > div:nth-child(2) > div > a > div:nth-child(4) {
            height: 75px;
        }

            .Index-News .content > div:nth-child(2) > div > a > div:nth-child(4) > p {
                color: #A3A3A3;
                font-size: 12px;
                line-height: 1.2;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }

        .Index-News .content > div:nth-child(2) > div > a > div:nth-child(5) > p {
            color: #2c516c;
            font-size: 13px;
            line-height: 0px;
            margin-bottom: 20px;
        }

    .index-Events {
        padding: 0 0px;
    }

        .index-Events > a {
            color: inherit;
        }

   

    /*****************************************About ED******************************************/
    .profile-wrap {
        margin-top: 10px;
        padding-top: 10px;
    }

    .pagination > li > a {
        color: #386B90 !important;
    }

    #ED_Initiatives > div, #Our_vision_mission > div {
        padding: 10px 15px !important;
    }
    /*****************************************Events******************************************/

    .meeting-box {
        border: 2px solid #2c516c;
        border-radius: 5px;
        margin-bottom: 10px;
        padding: 0px 10px 5px 10px;
    }

    .row-title-news {
        margin-top: 10px;
        font-weight: bold;
        font-size: 1.25rem;
        overflow: hidden;
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #2c516c;
    }

    .month-lineheight {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .box {
        display: inline-flex;
        flex-wrap: wrap;
        column-gap: 20px;
    }

    .item {
        font-size: 12px;
        line-height: 1.2 !important;
    }
}
