/* css styles for eSIM Activation pages */
.eSimActivation{
	background: var(--palette-grey-20, #f6f6f6);
}

.eSimActivation .pageHeader{
	background: var(--palette-white-main, #ffffff);
    width: 100%;
    border-bottom: 1px solid var(--palette-grey-60, #C7C7C7);
    padding-left: calc(var(--spacing)* 10);
    padding-right: calc(var(--spacing)* 10);
}

.esim_activation__content{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: calc(var(--spacing)* 5);
    gap: calc(var(--spacing)* 5);
}


/* white box */
.esim_activation__container{
    width: 100%;
    max-width: calc(960px + var(--spacing) * 10);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: baseline;

    background: var(--palette-white-main, #ffffff);
    border-radius: calc(var(--shape-borderRadius)* 2);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.07);
    
    padding: calc(var(--spacing)* 5);
}
.esim_activation_form__large_container{
    gap: calc(var(--spacing)* 10);
}
.esim_activation_form__medium_container{
    gap: calc(var(--spacing)* 5);
}

.esim_activation__group{
    width: 100%;
    display: flex;
    flex-direction: column;

    gap: calc(var(--spacing)* 3);
}
.esim_activation__group_large{
    gap: calc(var(--spacing)* 5);
}


/* heading part */
.esim_activation__heading_box{
    width: 100%;
    display: flex;
}
.esim_activation__heading_alert_box{
    display: none;

    width: 100%;
    flex-wrap: wrap;
    background: #FFEFEF;
    color: var(--palette-primary-main, #ff0000);
    border-radius: calc(var(--shape-borderRadius)* 1);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 5);
}
.esim_activation__heading_remark_box{
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--palette-grey-20, #f6f6f6);
    color: var(--palette-black-main, #333333);
    border-radius: calc(var(--shape-borderRadius)* 1);
    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
    row-gap: calc(var(--spacing) * 2.5);
}


/* info part */
.esim_activation__info_box{
    width: 100%;
    display: flex;
    flex-direction: column;

    gap: calc(var(--spacing)* 2);
}
.esim_activation__info_button_box{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: calc(var(--spacing)* 3);
}
.esim_activation__input_box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.esim_activation__input_box .form-control{
    height: auto;
    border: 0px;
    box-shadow: none;
    color: var(--palette-black-main, #333333);
}
.esim_activation__input_box .form-control .input{
    width: 100%;
}

.esim_activation__info_edit_button{
    width: max-content;
    min-width: 80px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--palette-white-main, #ffffff);
    border-radius: calc(var(--shape-borderRadius)* 10);
    border: 1px solid var(--palette-grey-50, #d3d3d3);
    cursor: pointer;

    padding: 0px calc(var(--spacing) * 5);
}


/* successful part */
.esim_activation__icon_box{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.esim_activation__successful_icon{
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.esim_activation__error_icon{
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.esim_activation__qrcode_img_box{
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.esim_activation__qrcode_img_box img {
    width: 100%;
}


/* popup modal */
#eSimRemarkModal.modal .modal-dialog{
    pointer-events: all;
}
#eSimDeviceModal.modal{
    z-index: 1100;
}
#eSimDeviceModal .modal-dialog, #eSimRemarkModal .modal-dialog{
    width: calc(100% - 160px);
    max-width: 1280px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
#eSimDeviceModal .popup-padding, #eSimRemarkModal .popup-padding{
    padding-left: calc(var(--spacing) * 7);
    padding-right: calc(var(--spacing) * 7);
}

.popup-wrapper{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    background: var(--palette-white-main, #ffffff);
    border-radius: 20px;
    position: relative;
    font-family: var(--typography-fontFamily-body);

    padding-top: calc(var(--spacing) * 7);
    padding-bottom: calc(var(--spacing) * 10);
}
#eSimRemarkModal .popup-wrapper{
    padding-top: calc(var(--spacing) * 7);
    padding-bottom: calc(var(--spacing) * 7);
}
.popup-wrapper .popup-header{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}
.popup-wrapper .mfp-close{
    width: 30px;
    height: 30px;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border: none;
}
.popup-wrapper .mfp-close svg{
    width: 20px;
    height: 20px;
}
.popup-wrapper .container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0px;
    max-height: 80vh;
}
.popup-wrapper .esim_activation__group{
    height: 100%;
}

.popup-group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: calc(var(--spacing) * 5);
}

.popup-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    row-gap: calc(var(--spacing) * 3);
}

/* list table */
.esim_activation_support__header_section{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
}
.esim_activation_support__header_group{
    width: 100%;
    max-width: max-content;
    display: flex;
    flex-wrap: nowrap;
    gap: calc(var(--spacing) * 3);

    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.esim_activation_support__header_group::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
.esim_activation_support__header_box{
    width: max-content;
    min-width: 120px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
    border-radius: calc(var(--shape-borderRadius)* 1);
    font-size: 16px;
    font-weight: 700;
    user-select: none;

    border: 1px solid var(--palette-grey-80, #9C9C9C);
    color: var(--palette-grey-80, #9C9C9C);
}
.esim_activation_support__header_box.selected {
    border: 1px solid var(--palette-primary-main, #ff0000);
    color: var(--palette-primary-main, #ff0000);
}

.esim_activation_support__header_button{
    display: flex;
    position: absolute;
    min-width: 36px;
    min-height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.esim_activation_support__header_button.button-prev{
    left: 0;
    background-image: url('/5G/images/mobile_tab_arrow_L.png');
    background-position-x: left;
}
.esim_activation_support__header_button.button-next{
    right: 0;
    background-image: url('/5G/images/mobile_tab_arrow_R.png');
    background-position-x: right;
}
.esim_activation_support__header_button.disabled{
    display: none;
}

.esim_activation_support__list_section{
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.esim_activation_support__list_section::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}
.esim_activation_support__list_section ul {
    width: 100%;
    column-count: 3;
    column-gap: calc(var(--spacing) * 10);
    padding-left: calc(var(--spacing) * 5);
    margin-bottom: 0;
}
.esim_activation_support__list_section ul li:not(:last-child){
    margin-bottom: calc(var(--spacing) * 2);
}
.esim_activation_support__list_section ul li::marker {
    font-size: 20px;
}


/* text */
.esim_activation__heading_text{
    width: 100%;
    text-align: center;
    margin: 0;
}
.esim_activation__remark_text{
    width: 100%;
    display: flex;
    align-items: flex-start;
    text-align: left;
    margin: 0;
    column-gap: calc(var(--spacing) * 2);
}
.esim_activation__remark_text ul{
    padding-left: calc(var(--spacing) * 5);
    margin: 0;
}
.esim_activation__remark_text ul li:not(:last-child){
    margin-bottom: calc(var(--spacing) * 2);
}
.esim_activation__remark_text .highlight{
    color: var(--palette-primary-main, #ff0000);
}

.esim_activation__heading_alert_box .esim_activation__info_text{
    width: 100%;
    text-align: left;
    margin: 0;
}
.esim_activation__group .esim_activation__info_box .esim_activation__info_text{
    width: 100%;
    text-align: left;
    margin: 0;
}
.esim_activation__group .esim_activation__info_box .esim_activation__info_value{
    width: 100%;
    text-align: left;
    margin: 0;
    font-family: var(--typography-fontFamilyHeaderMix);
    font-weight: var(--typography-fontFamilyHeaderMixWeight, 500);
}
.esim_activation__button_text{
    width: max-content;
    text-align: center;
    margin: 0;
}
.esim_activation__group .esim_activation__info_edit_button .esim_activation__button_text{
    font-size: 12px;
}

.esim_device_popup__heading_text{
    width: 100%;
    text-align: center;
    margin: 0;

    font-size: 24px;
    font-weight: var(--typography-fontFamilyHeaderMixWeight, 500);
    font-family: "titling-gothic-fb-narrow",'Noto Sans','Noto Sans TC',"MHei", "a?Re??a-�Ge?��e?��", "Microsoft JhengHei", sans-serif;
}
.esim_device_popup__button_box {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: calc(var(--spacing) * 3);
}
.esim_device_popup__button_box .button{
    width: 100%;
}
.esim_device_popup__href{
    color: var(--palette-primary-main, #ff0000);
    text-decoration: underline;
}



/* loading overlay */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* transparent grey */
    display: none; /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 10;
}
#loadingOverlay .spinner {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}



/* otp combo starts */
.esim_activation__container .otp-combo__card{
    box-shadow: none;
    padding: 0px;
}
.esim_activation__container .otp-combo__heading{
    display: none;
}
.esim_activation__container .otp-combo__desc-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: calc(var(--spacing)* 1);
    margin-top: calc(var(--spacing)* 10);
}
.esim_activation__container .otp-combo__desc-box .otp-combo__desc{
    color: var(--palette-black-main);
    margin: 0px 0px;
}
.esim_activation__container .otp-combo__desc-box [data-role='passcode-sent-to-mobile']{
    color: var(--palette-primary-main);
    font-family: var(--typography-fontFamilyHeaderMix);
    font-weight: var(--typography-fontFamilyHeaderMixWeight);
}
.esim_activation__container .otp-combo__desc-box .otp-combo__desc_remark{
    color: var(--palette-grey-80);
}
.esim_activation__container input.otp-combo__mobile-number-input,
.esim_activation__container input.otp-combo__mobile-number-screen-hkid-input,
.esim_activation__container input.otp-combo__passcode-input{
    height: unset;
    color: unset;
    background-color: #ffffff;
}
.esim_activation__container input.otp-combo__mobile-number-input:focus,
.esim_activation__container input.otp-combo__mobile-number-screen-hkid-input:focus,
.esim_activation__container input.otp-combo__passcode-input:focus{
    box-shadow: unset;
}
.esim_activation__container .otp-combo__form-input-title {
    margin-bottom: 5px;
}
.esim_activation__container .otp-combo__bottom_label{
    color: #888;
    text-align: center;
    margin-top: 1em;
}
.esim_activation__container .otp-combo__verify-button-wrapper{
    width: 100%;
}
/* otp combo ends */


@media(max-width: 768px) {
    .eSimActivation .pageHeader{
        padding-left: calc(var(--spacing) * 0);
        padding-right: calc(var(--spacing) * 0);
    }

    #eSimDeviceModal .modal-dialog, #eSimRemarkModal .modal-dialog{
        width: calc(100% - var(--spacing) * 10);
        margin: 0;
    }
    #eSimDeviceModal .popup-padding, #eSimRemarkModal .popup-padding{
        padding-left: calc(var(--spacing) * 5);
        padding-right: calc(var(--spacing) * 5);
    }
    .popup-wrapper{
        padding-top: calc(var(--spacing) * 5);
        padding-bottom: calc(var(--spacing) * 10);
    }
    #eSimRemarkModal .popup-wrapper{
        padding-top: calc(var(--spacing) * 5);
        padding-bottom: calc(var(--spacing) * 5);
    }

    .esim_activation_support__header_box{
        min-width: 80px;
        font-size: 14px;
    }

    .esim_activation_support__list_section ul {
        column-count: 2;
    }
}

@media(max-width: 480px) {
    .esim_activation_support__list_section ul {
        column-count: 1;
    }
}