.awardsTabscontainer {
    display: flex;
    min-height: 100vh;
    font-family: 'Museo Sans', sans-serif;
}
.awardsTabListContainer {
    width: 33.44%;
    background-color: #fff;
    padding: 42px 38px;
    height: 645px;
    box-shadow: 1px 0px 14px rgb(0 0 0 / 31%);
    border-radius: 0px 30px 30px 0px;
    margin: auto;
    overflow: hidden;
}
.awardsTabListContainer .views-element-container,
.awardsTabListContainer .view {
    height: 100%;
}
.awardsTabMapContainer{
    width: 70%;
    position: relative;
    display: flex;
    justify-content: start;
    max-height: 580px;
    min-height: 580px;
    margin: auto;
    flex-direction: column;
}
.awardsTabListFilter {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}
.awardsTabListFilter select{
    width: 48%;
    padding: 0.407rem 0.625rem;
    border: 1px solid #00A19C;
    border-radius: 100px; 
    font-size: .875rem;
    line-height: .875rem;
    -moz-appearance:none; 
    -webkit-appearance:none; 
    appearance:none;
    font-family: 'Museo Sans', sans-serif;
    background: #fff url('https://www.petronas.com/themes/custom/petronas/images/select-arrow.svg') no-repeat right 12px center;
    -webkit-background-size: 16px auto;
    background-size: 16px auto;
}
.awardsTabListFilter #awardYearFilter{
    width: 6.25rem;
}
.awardsTabListFilter #awardCategoryFilter{
    width: 100%;
}
.awardsTabList {
    list-style: none;
    max-height: 90%;
    overflow-y: auto;
    padding-bottom: 50px;
}
.awardsTabList ul {
    padding: 0;
}
.awardsTabList ul .awardsTabListItem a {
    display: block;
    padding: 5px;
    border-bottom: 1px solid #00A19C;
    list-style: none;
    cursor: pointer;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.awardsTabList ul .awardsTabListItem:last-child {
    border-bottom: 0px;
}
.awardsTabList .award-title {
    display: block;
    font-weight: 500;
    color: #000;
    padding-right: 1.25rem;
    font-size: 1rem;
    line-height: 1.313rem;
    font-family: 'Museo Sans', sans-serif;
}
.awardsTabList .award-year, .awardsTabList .award-country, .awardsTabList .award-term {
    font-size: 1rem;
    line-height: 0.938rem;
    color: #000;
    font-weight: 300;
    font-family: 'Museo Sans', sans-serif;
}
.awardsTabList .award-year{
    line-height: 1.313rem;
}
.infoContainer, .titleContainer{
    display: flex;
    justify-content: space-between;
}
.titleContainer{
    padding-bottom: 0.938rem;
}
.awardsTabMapContainer .awardsTabMapFilter {
    margin-left: 40px;
    z-index: 2; 
}
.awardsTabMapContainer .awardsTabMapFilter select {
    padding: 1rem 3rem 1rem 1.875rem;
    width: 200px;
    border: 0px;
    border-radius: 100px;
    font-size: 1rem;
    line-height: 1rem;
    -moz-appearance:none; 
    -webkit-appearance:none;
    appearance:none;
    background: #fff url('https://www.petronas.com/themes/custom/petronas/images/select-arrow.svg') no-repeat right 12px center;
    -webkit-background-size: 16px auto;
    background-size: 16px auto;
    font-family: 'Museo Sans', sans-serif;
}
.awardsTabMaps {
    display: flex;
}
.awardsTabMaps .awardsTabMapsInner{
    margin: auto 40px;
    width: 100%;
}
.awardsTabMaps .awardsTabMapsInner.all{
    margin: auto;
    width: auto;
}
.awardsTabMaps .all {
    margin-top: -3% !important;
}
.awardsTabMaps .all .map-img {
    display: block;
    justify-content: unset;
}

.awardsTabMaps .map-img.all-map {
    height: auto;
}

.awardsTabMaps .map-img {
    display: flex;
    justify-content: center;
    max-width: 100%;
    height: 50vh;
}

.awardsTabMaps .map-img.all-map img {
    width: 100%;
    height: auto;
    max-height: 650px;
}

.awardsTabMaps .map-img img {
    width: 100%;
    height: auto;
    max-height: 500px;
}
.awardsTabListInner {
    position: relative;
}
.awardsTabMapsInner {
    display: none;
    position: relative;
}
.awardsTabMapsInner.all {
    display: block;
}
.map-section{
    position: relative;
    display: flex;
    justify-content: center;
}
.map-points{
    position:absolute;
    width: 100%;
    height: calc(100% - 90px);
    bottom: 0px;
    left: 0px;
    height: 100%;
}
.map-points > div{
    position: absolute;
    cursor: pointer;
}
.map-points > div .point-icon{
    position: absolute;
    width: 21px;
    height: 21px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 100px;
    z-index: 2;
}
.country-icon{
    margin-top:30px;
    margin-bottom: -67px ;
}
.country-icon i{
    display: block;
    width: 67px;
    height: 67px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border-radius: 100px;
}
.map-points > div .point-icon:before{
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    z-index: 1;
}
.map-points > div .point-icon:hover:before{
    opacity: 0.6;
}
@keyframes pulseRed{
    0% {
        box-shadow: 0 0 0 0px #DF280F;
    }
    95% {
        box-shadow: 0 0 0 15px #DF280F;
    }
    100%{
        box-shadow: 0 0 0 15px #DF280F;
        opacity: 0;
    }
}
@keyframes pulseYellow{
    0% {
        box-shadow: 0 0 0 0px #FACE05;
    }
    95% {
        box-shadow: 0 0 0 15px #FACE05;
    }
    100%{
        box-shadow: 0 0 0 15px #FACE05;
        opacity: 0;
    }
}
@keyframes pulseGreen{
    0% {
        box-shadow: 0 0 0 0px #287748;
    }
    95% {
        box-shadow: 0 0 0 15px #287748;
    }
    100%{
        box-shadow: 0 0 0 15px #287748;
        opacity: 0;
    }
}

.map-points > div {
    background-repeat: no-repeat;
    background-position: center;
}

.map-points > div .pulse-red-icon:before {
    animation: pulseRed 2s infinite;
}

.map-points > div .pulse-green-icon:before {
    animation: pulseGreen 2s infinite;
}

.map-points > div .pulse-yellow-icon:before {
    animation: pulseYellow 2s infinite;
}

.map-section{
    padding-top: 80px;
}

.map-section:first-child{
    padding-top: unset;
}

.views-exposed-form .form-item-country {
    display: none;
}

.view-milestones-v2.view-display-id-block_awards_map {
    overflow: hidden;
}

.view-milestones-v2.view-display-id-block_awards_map .views-exposed-form > .row {
    justify-content: flex-start;
}

.view-milestones-v2.view-display-id-block_awards_map .views-exposed-form .form-select {
    border: 1px solid #00A19C;
}

@media screen and (max-width:768px) {
    .awardsTabscontainer{
        flex-direction: column-reverse;
        padding: 50px 10px;
        min-height: 100%;
    }
    .awardsTabMapContainer{
        flex-direction: column-reverse;
        width: 100%;
        max-height: 100%;
        min-height: 100%;
    }
    .awardsTabMapContainer .awardsTabMapFilter{
        margin: 30px 0;
    }
    .awardsTabListContainer {
        width: 100%;
        max-height: 500px;
        border-radius: 30px 30px 30px 30px;
        padding: 30px 25px;
    }
    .awardsTabList{
        max-height: 87%;
    }

    .awardsTabMaps .awardsTabMapsInner{
        margin: auto 0px;
    }
    .country-icon {
        margin-top: 0px;
        margin-bottom: -45px;
    }
    .country-icon i {
        width: 45px;
        height: 45px;
    }
    .awardsTabMaps .map-img {
        height: auto;
    }

    .awardsTabMaps .map-img img {
        max-height: 450px;
    }
    .map-points > div .point-icon{
        width: 10px;
        height: 10px;
    }

    @keyframes pulseRed{
        0% {
            box-shadow: 0 0 0 0px #DF280F;
        }
        95% {
            box-shadow: 0 0 0 8px #DF280F;
        }
        100%{
            box-shadow: 0 0 0 8px #DF280F;
            opacity: 0;
        }
    }
    @keyframes pulseYellow{
        0% {
            box-shadow: 0 0 0 0px #FACE05;
        }
        95% {
            box-shadow: 0 0 0 8px #FACE05;
        }
        100%{
            box-shadow: 0 0 0 8px #FACE05;
            opacity: 0;
        }
    }
    @keyframes pulseGreen{
        0% {
            box-shadow: 0 0 0 0px #287748;
        }
        95% {
            box-shadow: 0 0 0 8px #287748;
        }
        100%{
            box-shadow: 0 0 0 8px #287748;
            opacity: 0;
        }
    }

    .view-milestones-v2.view-id-milestones_v2 .views-exposed-form > .row,
    .view-milestones-v2.view-id-milestones_v2 .view-content > .row {
        margin: 0;
    }
}