@charset "UTF-8";

/*---------- ---------- ---------- Breast Cancer Specific Styles ---------- ---------- ----------*/

/* Common */
.error { margin: 3px 0px 7px 0px; }
.es-imgicon-red { background-image: url(../images/common/icon-info-red.png); }

/* Promise */
.es-breastCancer-promise-panel-container {
    padding: 70px 0;
    background-image: url(/eselling/pru/bcp/BCP_LandingImage.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 725px;
    background-size: 1290px auto; }

.es-breastCancer-promise-panel {
    border-color: #ffffff;
    border-top-width: 4px;
    border-top-style: solid;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-color: rgba(255, 255, 255, 0.9); }

.es-breastCancer-promise-panel .es-imgicon-info {
  top: -1px; }

@media (min-width: 768px) {
  .es-breastCancer-promise-panel {
    width: 660px;
    margin: 0 auto;
    border-top-color: rgba(232, 231, 229, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.9); } }


@media (max-width: 768px) {
  .es-breastCancer-promise-panel-container {
    height: 680px;
    background-size: 1220px auto;
    background-position: 85%; } }

/* Step 1 */
.breast-cancer-es-card--text {
    position: relative;
    left: calc(20% - 15px);
    width: 70%;
    margin-top:40px
}

.es-breastCancer-start-panel-container {
    padding: 70px 0;
    background-image: url(/eselling/pru/bcp/BCP_LandingImage.jpg);
    background-repeat: no-repeat;
    background-position: center;
    height: 680px;
     background-size: 1220px auto;
     background-position: 85%; }

.es-breastCancer-start-panel {
    border-color: #ffffff;
    border-top-width: 4px;
    border-top-style: solid;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-color: rgba(255, 255, 255, 0.9);
    height: 280px;
    margin: 100px auto;
 }

.es-breastCancer-start-panel .es-imgicon-info {
  top: -1px; }

.es-breastCancer-start-panel .es-mobile-view {
  margin: 0px 0px 0px; }

.typhoon-icon {
  height: 50px;
  width: 50px;
  background-image: url(../images/common/icon-alert.png);
  background-size: contain;
  background-repeat: no-repeat; }

.typhoon-icon ~ div {
  width: calc(100% - 50px); }

.typhoon-icon ~ div a {
  overflow-wrap: break-word;
  word-wrap: break-word; }

.text-no-warp { white-space: nowarp; }

.carousel-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
  width: 100%; }

.slider{
  overflow: hidden; }

.carousel {
  display: flex;
  width: 100%;
  gap: 10px;
  transition: transform 0.5s ease; }

.arrow-container-left, .arrow-container-right {
    display : flex;
    align-items: center;
    height: 200px;
    cursor: pointer;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 5px;
    transition: transform 0.2s;
}

.arrow-container-left:hover, .arrow-container-right:hover {
    transform: translateY(-5px) scale(1.3);
}

.arrow-invisible{
    visibility: hidden;
}

.selection-block {
  flex: 0 0 calc(32.6%);
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: white;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.5s, background-color 0.5s; }

.block-text-container-content{
  font-size: 14px;
  display: inline; }

.block-text-container-innerText{
  display: flex; }

.selection-block.selected {
  background-color: #ff5f5f;
  color: white;
  border-color: #ff5f5f; }

.selection-block.selected .maximumInsured {
  color: #FFFFFF;
}

.selection-block b {
  display: flex;
  align-items: center;
}
.maximumInsured {
  font-size: 40px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
}

.pagination-dot {
  width: 10px;
  height: 10px;
  background-color: #ddd;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination-dot.active {
  background-color: #ff5f5f;
}

.slick-list {
  display : flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .es-breastCancer-start-panel {
    width: 660px;
    margin: 0 auto;
    border-top-color: rgba(232, 231, 229, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.9); }

  .es-breastCancer-start-panel .es-mobile-view {
        margin: 150px 0px 0px; }
}


  .es-breastCancer-benefits-desc-container .es-card--heading-with-img .es-card--heading {
    margin: 0; }

  .es-breastCancer-benefits-desc-container .es-card--heading-with-img .es-card--heading br {
    display: none; } }

@media (max-width: 820px) {
  .selection-block {
    flex: 0 0 calc(48.8%); } }

@media (max-width: 430px) {
  .selection-block {
    flex: 0 0 calc(100%); } }

/* Step 2 */
.label-hyphen { margin-left: 3px; }
html[lang='en'] .label-hyphen { margin-right: 3px; }

.selectize-control.single .selectize-input:after { display: none; }
.es-material-input.selectize-control.single .selectize-input [data-value] {
  padding: 0;
  margin-top: 5px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 16px;
  color: #68737a; }
.es-material-input.selectize-control.single .selectize-input > input { font-size: 16px; height: 23px; }
.selectize-dropdown [data-selectable].option { font-size: 16px; }

ul.es-list-declaration{
    list-style-type: decimal;
    margin-top: 10px;
    line-height: 25px;
    padding-left: 1.5rem
}

.roman-list {
    margin-left: 15px;
    list-style-type: lower-roman;
    line-height: 25px;
}

@media (min-width: 768px) {
  .section-container {
    border-top: 0 !important;
    border-left: 1px solid #e2e2e2 !important;
    border-right: 1px solid #e2e2e2 !important;
    border-bottom: 0 !important; }
  .section-container:first-of-type {
    border-top: 1px solid #e2e2e2 !important; }
  .section-container:last-of-type {
    border-bottom: 1px solid #e2e2e2 !important; }
}

/* EPRC */
.trigger-search-input-container { right: 0px; }
.ui-autocomplete { font-family: Calibri, Arial, microsoft jhenghei, 微軟正黑體, sans-serif, sans-serif; }
.ui-autocomplete.ui-menu { z-index: 9; max-height: 300px; overflow: auto; }
.ui-autocomplete.ui-menu .trigger-manual-input { text-align: center; padding: 10px 0px; }
.ui-autocomplete.ui-menu .trigger-manual-input span { cursor: pointer; text-decoration: underline; }
.hidden-validate-input { display: none; }
#inputCustomResAddrContainer > div,
#inputCustomCorrAddrContainer > div { position: relative; top: -20px; }
.custom-errors-list { display: block; padding-top: 5px; }
.custom-errors-list li { color: #f15462; font-size: 16px; }
html[lang='en'] .custom-errors-list li { font-size: 18px; }
.es-material-input-container.custom-error .es-material-input { border-bottom-color: #f15462; }

/* Step 3 */
.credit-card-container .card > .card-body {
    padding-bottom: 1.6rem;
}