@layer components {
    .swiper-button-lock {
        display: none !important;
    }

    .swiper-fade .swiper-slide {
        opacity: 0 !important;
        /*transition: opacity 0.4s ease-in-out;*/
    }

    .swiper-fade .swiper-slide-active {
        opacity: 1 !important;
    }

    .swiper_nav {
        position: relative;
        display: flex;
        align-items: center;
    }

    .swiperpaginwrapper {
        display: inline-block;
    }

    .swiper_nav .swiper-pagination {
        position: static;
        width: auto;
        display: flex;
        align-items: center;
    }

    .swiper-button-prev,
    .swiper-button-next {
        font-size: 0;
        display: inline-block;
        margin-top: 0;
        position: relative;
        right: auto;
        left: auto;
    }

    .swiper-button-prev:before,
    .swiper-button-next:before {
        content: '';
        background-image: url('../images/icon/icon_prev.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        display: inline-block;
        width: 70%;
        height: 70%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 100;
    }

    .swiper-button-next:before {
        background-image: url('../images/icon/icon_next.svg');
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        content: '';
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        display: inline-block;
        width: 70%;
        height: 70%;
        position: absolute;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 300;
        opacity: 0;
    }

    .swiper-button-next:after {
        background-image: url('../images/icon/icon_next_white.svg');
    }

    .swiper-button-prev:after {
        background-image: url('../images/icon/icon_prev_white.svg');
    }

    .swiper-button-next:hover:after,
    .swiper-button-prev:hover:after,
    .swiper-button-next:focus:after,
    .swiper-button-prev:focus:after {
        opacity: 1;
    }

    .swiper-button-next:not(.swipernext1000).swiper-button-disabled,
    .swiper-button-prev:not(.swiperprev1000).swiper-button-disabled {
        opacity: 1;
    }


    .swiper-button-pause {
        display: inline-block;
        position: relative;
        font-size: 0;
        vertical-align: middle;
        width: 18px;
        height: 18px;
    }

    .swiper-button-pause:hover,
    .swiper-button-pause:focus {
        cursor: pointer;
    }

    .swiper-button-pause:before,
    .swiper-button-pause:after {
        content: '';
        width: 7px;
        height: 16px;
        display: inline-block;
        margin-left: 1px;
        margin-right: 1px;
        background-color: var(--white);
        border: 2px solid var(--buttonblue);
    }

    .paused .swiper-button-pause>span:first-child {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .paused .swiper-button-pause>span:first-child:before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.5rem 0 0.5rem 1rem;
        /*border-color: transparent transparent transparent #00335b;*/
        border-color: transparent transparent transparent var(--white);
        background-color: transparent;
        position: absolute;
        top: 3px;
        left: 2px;
        z-index: 10;
    }

    .paused .swiper-button-pause>span:first-child:after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.8rem 0 0.8rem 1.6rem;
        /*border-color: transparent transparent transparent #00335b;*/
        border-color: transparent transparent transparent var(--buttonblue);
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
    }

    .paused .swiper-button-pause:before {
        display: none;
    }

    .paused .swiper-button-pause:after {
        display: none;
    }

    .swiper-pagination-horizontal {
        column-gap: 1rem;
        row-gap: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .swiper-pagination-horizontal .swiper-pagination-bullet {
        box-shadow: none;
        width: 1rem;
        height: 1rem;
        position: relative;
        background-color: var(--white);
        border: 2px solid var(--buttonblue);
        opacity: 1;

    }

    .swiper-pagination-horizontal .swiper-pagination-bullet:hover,
    .swiper-pagination-horizontal .swiper-pagination-bullet:focus {
        background-color: var(--lightgrey2);
    }

    .swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background-color: var(--maindarkgreen);
    }

    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin-left: 0;
        margin-right: 0;
    }

}

@layer components {
    .card {
        display: grid;
        grid-template-columns: 39% 1fr;
        column-gap: 3rem;
        padding-left: 2.1875rem;
        padding-right: 2.1875rem;
        padding-top: 3.125rem;
        padding-bottom: 3.5rem;
        border: 2px solid var(--maindarkgreen);
        border-radius: var(--imgborderradius);
        margin-bottom: 2.375rem;
    }

    .card .title {
        font-size: 2.1875rem;
        color: var(--maindarkgrey2);

    }

    .card .title:not(:has(p)) {
        margin-bottom: 1.375rem;
    }
}

@layer components {
    .planlocator {
        max-width: 190px;
        position: absolute;
        top: auto;
        transform: translate(-50%, 0);
    }

    .planlocator>div {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .planlocator .title {
        text-align: center;
        line-height: 1.2;
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: bold;
    }

    .planlocator .title a,
    .planlocator .title>.nolink {
        color: var(--black);
        -webkit-text-stroke: 5px #fff;
        paint-order: stroke fill;
    }

    .planlocator .title a:hover,
    .planlocator .title a:focus {
        text-decoration: none;
    }

    .planlocator>div>a,
    .planlocator>div>.nolink {
        border-radius: 50%;
        background-color: #bd0a04;
        border: 2px solid var(--white);
        display: block;
        position: relative;
        z-index: 80;
        height: 17px;
        width: 17px;
        text-indent: -9999px;
        margin-left: auto;
        margin-right: auto;
        /*-webkit-box-shadow: 0px 2px 5px 4px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 2px 5px 4px rgba(0,0,0,0.45);
box-shadow: 0px 2px 5px 4px rgba(0,0,0,0.45);*/

    }

    .planlocator .closebtn {
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .planlocator .closebtn a {
        text-indent: -9999px;
        font-size: 0;
    }

    .planlocator .closebtn a:hover,
    .planlocator .closebtn a:focus {
        text-decoration: none;
    }

    .planlocator>.active>a,
    .planlocator>.active>.nolink {
        background-color: var(--mainblue);
    }

    .leaflet-popup a.leaflet-popup-close-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 4px 4px 0 0;
        border: none;
        text-align: center;
        width: 18px;
        height: 14px;
        font: 16px/14px Tahoma, Verdana, sans-serif;
        color: #c3c3c3;
        text-decoration: none;
        font-weight: bold;
        background: transparent;
    }

    .leaflet-container a.leaflet-popup-close-button:hover {
        color: #999;
    }

    .leaflet-popup {
        display: none;
        width: 100%;
    }

    .planlocator .active .leaflet-popup {
        display: block;
    }
}

@layer components {
    .date_wrap {
        display: grid;
        grid-template-columns: 1.5rem 1fr;
        font-weight: 400;
        column-gap: 0.7rem;
        align-items: center;
    }

    .date_wrap::before {
        content: '';
        display: inline-block;
        min-width: 1.5rem;
        min-height: 1.5rem;
        background-image: url('../images/icon/icon_calendar.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
}

@layer components {
    .tag_wrap>div {
        display: inline-block;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        background-color: var(--black);
        color: var(--white);
    }

    .blog .tag_wrap>div {
        background-color: var(--green1);
    }

    .press_release .tag_wrap>div {
        background-color: var(--buttonblue);
    }

    .video .tag_wrap>div {
        background-color: var(--enliven);
    }

    .social .tag_wrap>div {
        background-color: #C54B1B;
    }
}

@layer components {
    .photoslider_modal .swiper-slide>div {
        text-align: center;
    }

    .photoslider_modal .photowrap {
        text-align: center;
    }

    .photoslider_modal .swiper-slide .phototextcontent {
        color: var(--white);
        font-size: 1.125rem;
        display: inline-block;
        padding-top: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        width: 100%;
    }

    .photoslider_modal .swiper-slide .phototextcontent a {
        color: var(--white);
    }

    .photoslider_modal .swiper-slide .phototextcontent .mycaption {
        margin-bottom: 1rem;
    }

    .photoslider_modal .swiper-slide .phototextcontent>div {
        text-align: center;
    }

    .photoslider_modal .swiper-slide .phototextcontent>div p {
        text-align: center;
        margin-bottom: 1rem;
    }

    .photoslider_modal .swiper-slide .phototextcontent>div>p:last-child {
        margin-bottom: 0;
    }

    .photoslider_modal .swiper-pagination {
        color: var(--white);
        position: static;
        width: auto;
        text-align: left;
        font-size: 1.3rem;
        display: block;
        padding-right: 2.5rem;
        /*padding right for event target dont close the slide modal when select fraction text*/
    }

    .photoslider_modal .swiper-button-wrapper-prev,
    .photoslider_modal .swiper-button-wrapper-next {
        position: absolute;
        top: 50%;
        width: 3.5rem;
        height: 3.5rem;
        z-index: 200;
        display: flex;
    }

    .photoslider_modal .swiper-button-wrapper-prev {
        left: 0;
    }

    .photoslider_modal .swiper-button-wrapper-next {
        right: 0;
    }

    .photoslider_modal .swiper-button-wrapper-prev.locked {
        display: none;
    }

    .photoslider_modal .swiper-button-wrapper-next.locked {
        display: none;
    }

    .photoslider_modal .swiper-button-prev:before {
        background-image: url('../images/icon/icon_prev_6_white.svg');
        width: 40%;
    }

    .photoslider_modal .swiper-button-next:before {
        background-image: url('../images/icon/icon_next_6_white.svg');
        width: 40%;
    }

    .photoslider_modal .swiper-button-prev:after,
    .photoslider_modal .swiper-button-next:after {
        background-image: none;
    }

    .photoslider_modal .swiper-button-prev,
    .photoslider_modal .swiper-button-next {
        width: 100%;
        height: 100%;
        position: static;
        background-color: rgba(30, 30, 30, .6);
    }

    .photoslider_modal .disabled_click.swiper-button-wrapper-prev:before,
    .photoslider_modal .disabled_click.swiper-button-wrapper-next:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 400;
    }

    .photoslider_modal .swiper-button-prev:hover,
    .photoslider_modal .swiper-button-next:hover,
    .photoslider_modal .swiper-button-prev:focus,
    .photoslider_modal .swiper-button-next:focus {
        background-color: rgba(30, 30, 30, 1);
    }

    .photoslider_modal .swiper-button-next:hover:after,
    .photoslider_modal .swiper-button-next:hover:after,
    .photoslider_modal .swiper-button-next:focus:after,
    .photoslider_modal .swiper-button-next:focus:after {
        background-image: none;
    }

    .photoslider_swiper_in_modal {
        z-index: 100;
        max-width: calc(100% - 8rem);
        height: 100%;
    }

    .photoslider_modal.modal.modalopen {
        background-color: rgba(0, 0, 0, 0.65);
    }

    .photoslider_swiper_in_modal .photowrap img {
        width: calc(100% - 6px);
        /*2px for buffer when swiper has decimal*/


        /*max-height: 50vh;*/
        /*max-height: calc(100vh - 10rem);*/
        /*transform: scale(1);*/
        /*-webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;*/
    }

    .photoslider_swiper_in_modal .animateImg .photowrap img {
        transform: scale(1);
    }

    .photoslider_modal .swiperhugecontainer {
        height: 100%;
    }

    .photoslider_modal .swiperbigcontainer {
        height: 100%;
    }

    .photoslider_modal .dialog_desc {
        height: 100%;
    }


    .photoslider_swiper_in_modal .swiper-slide>div {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        opacity: 0;
    }

    .photoslider_swiper_in_modal .swiper-slide>.visible {
        opacity: 1;
    }
}

@layer components {
    .photoGalleryFull {
        max-width: 35rem;
        margin-left: auto;
        margin-right: auto;
    }

    .photoGalleryFull .swiperbigcontainer {
        position: relative;
    }

    .photoGalleryFull .swiperbigcontainer .cover {
        border-radius: var(--imgborderradius);
        overflow: hidden;
        display: block;
    }

    .photoGalleryFull .swiperbigcontainer .cover img {
        width: 100%;
        display: block;
    }

    .photoGalleryFull .swiper-button-prev,
    .photoGalleryFull .swiper-button-next {
        border: 0.25rem solid var(--buttonblue);
        border-radius: 0.75rem;
        width: 2.5rem;
        height: 2.5rem;
        position: absolute;
        background-color: var(--white);
        top: 50%;
        transform: translateY(-50%);
    }

    .photoGalleryFull .swiper-button-prev {
        left: -1.25rem;
    }

    .photoGalleryFull .swiper-button-next {
        right: -1.25rem;
    }


    .photoGalleryFull .swiper-button-prev:hover,
    .photoGalleryFull .swiper-button-next:hover,
    .photoGalleryFull .swiper-button-prev:focus,
    .photoGalleryFull .swiper-button-next:focus {
        background-color: var(--buttonblue);
    }

    .photoGalleryFull .swiper-button-disabled {
        background-color: var(--extlightgrey2);
        border-color: rgba(0, 119, 193, 0.6);
    }

    .photoGalleryFull .swiper-button-disabled:before {
        opacity: 0.5;
    }

    .photoGalleryFull .swiper-pagination {
        position: static;
        margin-top: 1.6875rem;
    }
}

@layer components {
    .ul_style {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
    }

    .ul_style>li {
        position: relative;
    }

    .ul_style>li:not(:last-child) {
        margin-bottom: 1.3rem;
    }

    .ul_style li:before {
        content: '';
        width: 0.5625rem;
        height: 0.5625rem;
        background-color: var(--mainblue);
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        top: 0.65rem;
    }

    .ul_style li>div {
        padding-left: 1.125rem;
    }

}

@layer components {
    .table_wrapper {
        position: relative;
    }

    .table_wrapper .scroll_table_inside_wrapper {
        overflow-x: auto;
    }

    .table_wrapper table {
        min-width: 800px;

    }

    .table_wrapper th {
        background-color: var(--headermenu_active_blue);
        color: var(--white);
        vertical-align: middle;
        text-align: center;

    }

    .table_wrapper td {
        vertical-align: top;
    }

    .table_wrapper th,
    .table_wrapper td {
        padding: 10px;
        border: 1px solid var(--extlightgrey3);
    }


    .table_wrapper tbody>tr:nth-child(even)>td {
        background-color: var(--extlightgrey2);
    }

    .table_wrapper tr td>*:last-child {
        margin-bottom: 0;
    }
}

@layer components {
    .typerow {
        display: flex;
        border-bottom: 1px solid var(--black);
    }

    .typerow>div {
        position: relative;
        min-width: 10rem;
    }

    .typerow>div:not(:last-child) {
        margin-right: 0.5rem;
    }

    .typerow a {
        color: var(--black);
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        border-top: 1px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
        height: 100%;
        width: 100%;
        text-decoration: none;
        text-align: center;
        /*border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;*/
    }

    .typerow a:hover,
    .typerow a:focus {
        color: var(--mainblue);
    }

    .typerow .selected a {
        color: var(--buttonblue);
    }

    .typerow .selected:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        display: block;
        background-color: var(--buttonblue);
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .typerow a:hover,
    .typerow a:focus {
        text-decoration: none !important;
    }

    .myTab {
        display: none;
    }

    .myTab.active {
        display: block;
    }
}

@layer components {
    .maplocator {
        position: absolute;
        top: auto;
    }

    .maplocator.active,
    .maplocator:hover,
    .maplocator:focus {
        animation: 0.8s here ease-in-out infinite alternate;
    }

    .maplocator2 {
        display: inline-block;
    }

    .maplocator3 {
        position: absolute;
        top: 332px;
        left: 300px;
        transform: translate(-50%, -50%);
    }

    .maplocator3>div:first-child {
        animation: 0.8s here ease-in-out infinite alternate;
    }

    .maplocator3>div:last-child {
        line-height: 1;
        font-weight: bold;
        font-size: 17.5px;
        display: inline-block;
        text-align: center;
    }

    .maplocator,
    .maplocator2,
    .maplocator3>div:first-child {
        width: 1.75rem;
        height: 2.8125rem;
    }


    .maplocator>div {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .maplocator>div>a:before,
    .maplocator>div>a:after {
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .maplocator>div>a:before {
        background-image: url('../images/icon/icon_location.png');
        z-index: 10;
    }

    .maplocator>div>a:after {
        background-image: url('../images/icon/icon_location_active.png');
        z-index: 40;
        transition: opacity 0.4s ease-in-out;
        opacity: 0;
    }

    .maplocator.active>a:after {
        opacity: 1;
    }

    .improve_urban.maplocator>div>a:before {
        background-image: url('../images/icon/icon_location2.png');
    }

    .improve_urban.maplocator>div>a:after {
        background-image: url('../images/icon/icon_location2_active.png');
    }

    .unleash_development.maplocator>div>a:before {
        background-image: url('../images/icon/icon_location3.png');
    }

    .unleash_development.maplocator>div>a:after {
        background-image: url('../images/icon/icon_location3_active.png');
    }

    .enliven_the_district.maplocator>div>a:before {
        background-image: url('../images/icon/icon_location4.png');
    }

    .enliven_the_district.maplocator>div>a:after {
        background-image: url('../images/icon/icon_location4_active.png');
    }

    .maplocator>div>a {
        display: block;
        position: relative;
        z-index: 80;
        width: 100%;
        height: 100%;
    }

    .maplocator2>a,
    .maplocator2>div {
        display: block;
        background-image: url('../images/icon/icon_location.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: relative;
        z-index: 80;
        width: 100%;
        height: 100%;
    }

    .improve_urban .maplocator2>a,
    .improve_urban .maplocator2>div {
        background-image: url('../images/icon/icon_location2.png');
    }


    .unleash_development .maplocator2>a,
    .unleash_development .maplocator2>div {
        background-image: url('../images/icon/icon_location3.png');
    }


    .enliven_the_district .maplocator2>a,
    .enliven_the_district .maplocator2>div {
        background-image: url('../images/icon/icon_location4.png');
    }

    .maplocator .cat_number,
    .maplocator2 .cat_number {
        position: absolute;
        z-index: 90;
        top: 0.7rem;
        line-height: 1;
        font-family: 'Open Sans', sans-serif;
        font-size: 1rem;
        font-weight: 500;
        text-align: center;
        width: 100%;
    }

    .maplocator3>div:first-child {
        display: block;
        background-image: url('../images/icon/icon_location.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: relative;
        z-index: 80;
        margin-left: auto;
        margin-right: auto;
    }
}

@layer components {
    .status {
        /*font-family: var(--oxygen);*/
        font-size: 0.9rem;
        font-weight: bold;
        display: inline-block;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        border-radius: 0.75rem;
        color: var(--green1);
        border: 1px solid var(--green1);
        background-color: var(--lightgreen);
        line-height: 1;
    }

    .completed .tag>div,
    .status.completed {
        color: var(--green1);
        border-color: var(--green1);
        background-color: var(--lightgreen);
    }

    .inprogress .tag>div,
    .status.quick_win {
        color: var(--secondblue);
        border-color: var(--secondblue);
        background-color: var(--lightblue);
    }

    .status.under_planning {
        color: var(--maindarkgrey3);
        border-color: var(--maindarkgrey3);
        background-color: var(--extlightgrey3);
    }

    .in_progress .tag>div,
    .status.in_progress {
        color: var(--maindarkgreen);
        border-color: var(--maindarkgreen);
        background-color: var(--lightgreen);
    }
}

@layer commponents {
    @keyframes here {
        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-10px);
        }
    }

}