/* (30/05/2022) make date in one line */
.statement-wrap table tr td:first-child {
    color: #ed6d01;
    padding-right: 50px;
    white-space: nowrap;
    font-weight: 700;
    font-family: "Lato-Bold", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
}
@media (max-width: 991px) {
    .statement-wrap table tr td:first-child {
        padding-right: 12px;
    }
}
/* (22/04/2022) Replace the css last-child by a tag */
/* (30/05/2022) Change color to ""#ed6d00"" */
.statement-wrap table tr td a {
   /* color: #ffffff;*/
   color : #ed6d00;
}

/* (22/04/2022) Replace the css last-child by a tag */
/*@media screen and (max-width: 767px) {
    .statement-wrap table tr td a {
        color: #ffffff;
    }
}*/

/* (30/05/2022) Add filter to normal button css */
/* (22/04/2022) Add PDF icon button next to the Statement Link*/
/* (08/06/2022) Remove the filter */
.statement-wrap table tr td button {
    background: url('/assets/img/icon/icon-pdf-white.svg') no-repeat;
    margin-left: 50px;
    background-size: 25px 33px;
    width: 25px;
    height: 33px;
    border: none;
    /*padding-bottom: 8px;*/
    transform: translateY(-6px);
}
@media (max-width: 991px) {
    .statement-wrap table tr td button {
        margin-left: 12px;
        transform: translateY(-8px);
    }
}

/* (30/05/2022) Add filter to normal button css */
/* (21/04/2022) Add space between "Statement" name and "PDF" icon*/
.statement-wrap table tr td button:hover {
    /*filter: invert(60%) sepia(100%) saturate(1794%) hue-rotate(8deg) brightness(100%) contrast(99%);*/
    cursor:pointer;
}

.statement-wrap table tr td button:focus {
    outline: none;
}

.statement-wrap table tr td button:focus-visible {
    outline: none;
}


.statement-wrap table tr td {
    /*color: #ed6d01;*/
    font-size: 1em;
    line-height: 123.5%;
    padding-bottom: 18px;
    vertical-align: top;
}

.statement-wrap table tr.smaller td {
    font-size: 1em;
    font-weight: 700;
    font-family: "Lato-Bold", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
}

.statement-wrap table tr td:last-child {
    color: #ffffff;
}

/* (22/04/2022) Change (height) precentage to cal*/
/* (30/05/2022) Change  wrap align with ‘STATEMENT’*/
/* (08/06/2022) Remove padding and height after remove one wrapper layer*/
.statement-wrap {
    position: relative;
    /*padding: 86px 65px 304px 65px;*/
    z-index: 1;
    /*height: calc(100vh - 200px);*/
}


/* Collapse Item */
.btn-collapse-ctl {
    text-decoration: none;
    color: #4c4948;
    padding: 5px 0;
    text-transform: uppercase;
    padding-right: 30px;
    position: relative;
}

    .btn-collapse-ctl:before {
        content: "";
        position: absolute;
        width: 20px;
        height: 100%;
        right: 0;
        top: 0;
        background: url("../img/arrow-mobile-menu-down.svg") center center no-repeat;
    }

    .btn-collapse-ctl:hover {
        color: #ed6d00;
        text-decoration: none;
    }

    .btn-collapse-ctl[aria-expanded="false"] .expand {
        display: none;
    }

    .btn-collapse-ctl[aria-expanded="false"] .collapse {
        display: block;
    }

    .btn-collapse-ctl[aria-expanded="true"]:before {
        background-image: url("../img/arrow-mobile-menu-up.svg");
    }

    .btn-collapse-ctl[aria-expanded="true"] .expand {
        display: block;
    }

    .btn-collapse-ctl[aria-expanded="true"] .collapse {
        display: none;
    }

    .btn-collapse-ctl.style-s2:before {
        background-image: url("../img/arrow-mobile-menu-right.svg");
    }

    .btn-collapse-ctl.style-s2[aria-expanded="true"]:before {
        background-image: url("../img/arrow-mobile-menu-down.svg");
    }

.collapse-section {
    padding-top: 0.5em;
}

.collapse-wrapper {
    margin-bottom: 20px;
}

    .collapse-wrapper.full-width .card-content-box {
        max-width: 100%;
    }

    .collapse-wrapper .collapse-title-row {
        position: relative;
    }

        .collapse-wrapper .collapse-title-row a {
            border-bottom: 1px solid #e6e6e5;
            display: inline-block;
            max-width: 577px;
            width: 100%;
            color: #ffffff;
            padding: 8px 40px 8px 0;
            background: url("../assets/img/icon/arrow-white-down.svg") right center no-repeat;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

@media screen and (max-width: 991px) {
    .collapse-wrapper .collapse-title-row a {
        min-width: 0;
        width: 100%;
        display: block;
    }
}

.collapse-wrapper .collapse-title-row a[aria-expanded="true"] {
    background-image: url("../assets/img/icon/arrow-white-up.svg");
}

.theme-bgoverlay .collapse-wrapper .collapse-title-row a {
    border-color: #ffffff;
    color: #ffffff;
    background-image: url("../assets/img/icon/arrow-white-down.svg");
}

.theme-light .collapse-wrapper .collapse-title-row a {
    border-color: #4c4948;
    color: #4c4948;
    background-image: url("../assets/img/icon/arrow-dropdown-grey-dark.svg");
}
/*
@media screen and (max-width: 767px) {
    .theme-bgoverlay .collapse-wrapper .collapse-title-row a {
        border-color: #707070;
        color: #4c4948;
        background-image: url("../assets/img/icon/arrow-grey-down.svg");
    }
}*/

.theme-bgoverlay .collapse-wrapper .collapse-title-row a[aria-expanded="true"] {
    background-image: url("../assets/img/icon/arrow-white-up.svg");
}
.theme-light .collapse-wrapper .collapse-title-row a[aria-expanded="true"] {
    background-image: url("../assets/img/icon/arrow-dropdown-grey-dark-up.svg");
}
/*
@media screen and (max-width: 767px) {
    .theme-bgoverlay .collapse-wrapper .collapse-title-row a[aria-expanded="true"] {
        background-image: url("../assets/img/icon/arrow-grey-up.svg");
    }
}*/

.collapse-wrapper .card-content-box {
    max-width: 577px;
    width: 100%;
    padding: 12px 0;
}

    .collapse-wrapper .card-content-box a {
        color: #ed6d00 !important;
    }

        .collapse-wrapper .card-content-box a:hover {
            color: #ed6d00 !important;
        }

.collapse:not(.show) {
    display: none;
}

/* Image with Descriptions */
.image-info-row {
    padding: 15px 0;
}
@media screen and (max-width: 767px) {
    .image-info-row .row {
        display: block;
    }
}

.theme-bgoverlay .image-info-row {
    border-color: #ffffff;
}

@media screen and (max-width: 1199px) {
    .theme-bgoverlay .image-info-row {
        margin-right: -30px;
        padding-right: 30px;
    }
}

@media screen and (max-width: 767px) {
    .theme-bgoverlay .image-info-row {
        border-color: #707070;
        margin-right: 0;
        padding-right: 0;
    }
}

.image-info-row .logo {
    max-width: 180px;
    margin-bottom: 15px;
    margin-right: 30px;
}

@media screen and (max-width: 767px) {
    .image-info-row .logo {
        max-width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .image-info-row .logo img {
        max-height: 200px;
    }
}

.image-info-row .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

/* Multiple Images (for logos) */
.image-logos-box {
    border-top: 1px solid #707070;
    margin-top: 40px;
}

.theme-bgoverlay .image-logos-box {
    border-color: #ffffff;
    /*margin-right: -50px;
    padding-right: 50px;*/
}

/*@media screen and (max-width: 1199px) {
    .theme-bgoverlay .image-logos-box {
        margin-right: -30px;
        padding-right: 30px;
    }
}*/

@media screen and (max-width: 767px) {
    .theme-bgoverlay .image-logos-box {
        /*border-color: #707070;*/
        margin-right: 0;
        padding-right: 0;
    }
}

.image-logos-box .logo {
    padding-top: 25px;
    padding-bottom: 25px;
    max-width: 200px;
}

@media screen and (min-width: 768px) {
    .image-logos-box .logo {
        flex: 0 0 25%;
    }
}

@media screen and (max-width: 767px) {
    .image-logos-box .logo {
        flex: 0 0 50%;
    }
}


















@media(max-width:991px) {
    .statement-wrap {
        padding: 0px;
        height: 100%;
    }
}

/* (08/06/2022) Remove statemen wrapper custom style*/
/*.main .content.statement .wrapper {
    padding: 0px;
}
*/

@media (max-width: 991px) {
    .main .content.statement .wrapper {
        padding: 56px 18px 32px 18px;
    }
}

@media (max-width: 991px) {
    .main .content.statement .wrapper .content-page .wrapper{
        padding: 0px 18px 32px 0px;
    }
}


@media screen and (max-width: 767px) {
    .statement-wrap a {
        word-break: normal;
    }
}