/*
@author: Sasky
@url: iclickmedia.com.sg
@version: 1.0
*/

/** General **/

* {
    box-sizing: border-box;
}

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

.find-my {
    margin: 50px 0;
}

.hide-div {
    display: none;
}

.im-align-left {
    text-align: left;
}

.im-align-center {
    text-align: center;
}

/** Map**/

#im-map {
    height: 670px;
}

#im-infowindow {
    width: 450px!important;
}

#im-infowindow h4 {
    font-size: 1.5em;
}

#im-infowindow p.im-map__venue, 
#im-infowindow p.im-map__contact,
#im-infowindow p.im-map__email {
    margin-top: -15px;
    margin-left: 55px;
    margin-bottom: 0px;
}

#im-map-error,
#im-loading {
    text-align: center;
    height: 550px;
}

#im-map-error h4 {
    top: 35%;
    position: relative;
    font-size: 1em;
    color: red;
}

#im-loading svg {
    top: 35%;
    position: relative;
}

#column-mp {
    -webkit-box-shadow: 7px 0px 6px 0px rgb(245 245 245);
    -moz-box-shadow: 7px 0px 6px 0px rgb(245 245 245);
    box-shadow: 7px 0px 6px 0px rgb(245 245 245);
}

#column-mp .im-image {
     text-align: center;
}

#column-mp p {
    font-size: 13px;
    margin-bottom: 5px;
}


.im-image img.im-mp-image {
    border-radius: 50%;
    border: 1px solid #808080;
}

/** Facility **/
.im-facility {
    background-color: #FFB749;
    color: #fff;
    margin: 10px;
    padding: 10px;
    vertical-align: middle;
}

.im-facility input{
    float: right;
    left: 20px;
}

/** Custom Column **/

.im-column-10 {
    float: left;
    width: 10%;
    padding: 10px;
}

.im-column-20 {
    float: left;
    width: 20%;
    padding: 10px;
}

.im-column-25 {
    float: left;
    width: 25%;
    padding: 10px;
}

.im-column-30 {
    float: left;
    width: 30%;
    padding: 10px;
}

.im-column-33 {
    float: left;
    width: 33%;
    padding: 10px;
}

.im-column-40 {
    float: left;
    width: 40%;
    padding: 10px;
}

.im-column-50 {
    float: left;
    width: 50%;
    padding: 10px;
}

.im-column-5-0 {
    padding: 5px 5px 5px 0px;
}

.im-column-60 {
    float: left;
    width: 60%;
    padding: 10px;
}

.im-column-65 {
    float: left;
    width: 65%;
    padding: 10px;
}

.im-column-70 {
    float: left;
    width: 70%;
    padding: 10px;
}

/** 1928px **/
@media (max-width: 1920px){
    #find-my-mp .im-column-70 {
        width: 80%;
    }
    
    #find-my-mp .im-column-30 {
        width: 20%;
    }
}

/** 1280px **/
@media (max-width: 1280px){
    #find-my-mp .im-column-70 {
        width: 70%;
    }
    
    #find-my-mp .im-column-30 {
        width: 30%;
    }
}

/** 480px **/
@media (max-width: 480px){
    #find-my-mp .im-column-70 {
        width: 100%;
    }
    
    #find-my-mp .im-column-30 {
        width: 100%;
    }
    
    #im-map-error, #im-loading {
        height: 350px;
    }
    .mp_list img {
        width: 70px;
    }
}

.im-column-80 {
    float: left;
    width: 80%;
    padding: 10px;
}

.im-column-90 {
    float: left;
    width: 90%;
    padding: 10px;
}

.im-column-100 {
    float: left;
    width: 100%;
    padding: 10px;
}

.im-row:after {
    content: "";
    display: table;
    clear: both;
}


/** Custom Margin Class **/
.im-mgleft-20 {
    margin-left: 20px;
}

.im-mgleft-30 {
    margin-left: 30px;
}

/** Buttons **/
.im-form-group button.im-btn {
    display: inline-block;
    font-weight: 400;
    color: #0045AD;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #0045AD;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 3px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;

}


/** **/
.mp_list img {
    margin-right: 10px;
    width: 100px;
}

/** .mp_list img.im-mp-image.mp-active {
  border: 2px solid #0D66B0;
} **/


.mp_list img.im-mp-image,
#im-infowindow img.im-mp-image {
  border-radius: 50%;
  border: 1px solid #808080;
}

/** .mp_list img.im-mp-image:hover, **/
#im-infowindow img.im-mp-image:hover {
  border: 2px solid #0D66B0;
}

/** Forms **/

.im-form-group {
    margin-top: 20px;
    padding: 0;
}

.im-form-group label {
    font-size: 14px;
}

.im-form-group input.im-form-control {
    outline: 0;
    border-width: 0 0 1px;
    border-color: rgb(47, 47, 47);
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.im-form-group input.im-form-error {
    border-color: red;
}


/** **/
.im-circle-icon {
    height: 25px;
    width: 25px;
    background-color: transparent;
    border-radius: 50%;
    border: 1px #000 solid;
    display: inline-block;
    margin-bottom: -3px;
}


/** Responsive **/
@media screen and (min-width: 1920px) {
    .mp_list img {
        width: 150px;
    }
}

/** 1928px **/
@media (max-width: 1928px){
    .mp_list img {
        width: 150px;
    }
}

/** 1928px **/
@media (max-width: 1920px){
    .mp_list img {
        width: 150px;
    }
}

/** 1280px **/
@media (max-width: 1280px){
    .mp_list img {
        width: 110px;
    }
}

/** 768px **/
@media (max-width: 768px){
    .mp_list img {
        width: 70px!important;
    }
}


/** 480px **/
@media (max-width: 480px){
    #interactive-map .im-mgleft-30 {
        margin-left: 0px;
    }
    .mp_list img {
        width: 74px;
    }
    .im-column-mobile-100 {
        width: 100%;
    }
    .im-mobile-hide {
        display: none;
    }
}

/** 414px **/
@media (max-width: 414px){
    .mp_list img {
        width: 60px;
    }
}

/** 320px **/
@media (max-width: 376px){
    .mp_list img {
        width: 53px;
    }
}

/** 320px **/
@media (max-width: 320px){
    .mp_list {
        text-align: center;
    }
    .mp_list img {
        width: 70px;
    }
}

/* The Modal (background) */
.im-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.im-modal-body {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
}

.im-modal-body .im-modal-body__title h5 {
    font-size: 25px;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10px;
    color: #0045ad;
}

.im-modal-body .im-modal-body__content h5 {
    font-size: 22px;
    font-weight: bold;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 10px;
    color: #3c3c3c;
}

.im-modal-body .im-modal-body__html {
    font-size: 18px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 10px;
    color: rgb(37, 37, 37);
}

/* The Close Button */
.im-modal-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.im-modal-:hover,
.im-modal-:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.im-booking-popup-wrapper{
	width: 200px;
}

.im-booking-popup-btn-wrapper{
	width: 161px;
	margin: 20px auto 0 auto;
	text-align: center;
}

.im-booking-popup-btn{
    color: #fff;    
	background-color:#0045ad !important;
	border-color: #0045ad !important;
	font-size: 12px;
	font-weight: bold;
	width: 100%;
	padding: 2px;
	border-radius: 20px !important; 
}

/** Mps Map **/
.mps-details__tab {
    display: none;
}

.mps-details__tab.mps-active {
    display: inline-block;
}

.mp_list a.find-my-mp-map {
    display: inline-block;
}

.mps-map-img {
    text-align: center;
}

.mp-details__info p {
    margin-bottom: 5px;
    font-size: 14px;
}

.mp-area-separator {
   height: 10px; 
}
    
#mps-map-img {
    width: 90%;
}

/** MPs **/
.hbptc-interactive-committee__arrow .swiper-button-next,
.hbptc-interactive-committee__arrow .swiper-button-prev {
    background-image: none;
}


.hbptc-interactive-committee__arrow .swiper-button-prev {
    left: -10px;
}
.hbptc-interactive-committee__arrow .swiper-button-next {
    right: 10px;
}


.hbptc-interactive-committee__arrow .swiper-button-next i,
.hbptc-interactive-committee__arrow .swiper-button-prev i {
    font-size: 3em;
}


.swiper-slide .committee-image {
    width: 75%;
    border-radius: 50%;
    border: 1px solid #808080;
}

.swiper-slide span {
    display: inline-block;
}

span.committee_name,
.swiper-slide span.committee_name {
    font-size: 14px;
    font-weight: bold;
    display: inherit;
}

span.committee_short_title,
.swiper-slide span.committee_short_title {
    font-size: 14px;
    font-weight: 300;
}

h2.committee_positio,
.swiper-slide h2.committee_position {
    font-size: 22px;
    font-weight: bold;
    color: #0D66B0;
    text-align: left;
}

.committeeSwiper.swiper-container {
    text-align: center;
}


/** 1280px **/
@media (max-width: 1280px){
    .committeeSwiper.swiper-container {
        height: 100%;
    }
}

/** 768px **/
@media (max-width: 768px){
    .committeeSwiper.swiper-container {
        height: 520px;
    }
    .swiper-slide .im-column-20 {
         width: 32%;
    }
}


/** 480px **/
@media (max-width: 480px){
    .swiper-slide .im-column-20 {
         width: 50%;
    }
    .committeeSwiper.swiper-container {
        height: 100%;
    }
    #interactive-map button.filter_facility {
        max-width: 100%!important;
        width: 100%;
        margin-bottom: 10px;
    }

}



/** Facilities **/
#interactive-map button.filter_facility {
    color: #0D66B0;
    font-size: 14px; 
    border: 2px solid #0D66B0;
    border-radius: 50px;
    max-width: 180px;
}

#interactive-map button.filter_facility:hover {
    color: #fff;
}

/**
#interactive-map button.filter_facility.filtered {
    color: #fff;
} 
**/


/** Developments **/
#interactive-map-developments h4 {
    font-weight: bold;
    color: #0065B3;
}

#interactive-map-developments button.filterStatus {
    border-radius: 30px;
}

#interactive-map-developments button.filterStatus.completed {
    background-color: #C0F7C0;
}

#interactive-map-developments button.filterStatus.inprogress.active,
#interactive-map-developments button.filterStatus.completed.active {
    border: 3px solid #0065B3;
}

#interactive-map-developments button.filterStatus.inprogress {
    background-color: #F8C96E;
}

#interactive-map-developments button.filterStatus:hover {
    border: 3px solid #0065B3;
}

#interactive-map-developments #im-map_error {
    height: auto;
    text-align: left;
    color: red;
}

button.filterDivision.active {
    color: #fff;
    background-color: #0065B3;
}

.filter_project {
    display: inline-block;
    font-weight: 400;
    color: #0065B3;
    text-align: left;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #0065B3;
    padding: .5rem 1rem;
    font-size: 1rem;
    border-radius: 3px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    width: 100%;
}

.filter_project input[type=radio]:hover{
  cursor: pointer;
}

.im-development-popup-wrapper{
	width: 700px;
}

.im-development-popup-btn-wrapper{
	width: 461px;
	margin: 20px auto 0 auto;
	text-align: center;
}

.im-development-popup-btn{
    color: #fff;    
	background-color:#0045ad !important;
	border-color: #0045ad !important;
	font-size: 12px;
	font-weight: bold;
	width: 100%;
	padding: 2px;
	border-radius: 20px !important; 
}

.filterProject {
    width: 1.1em;
    height: 1.1em;
    background-color: white;
    border-radius: 50%;
    vertical-align: middle;
    border: 2px solid #ddd;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
}

.filterProject:checked {
    background-color: #0065B3;
}