.popup{display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 13; overflow: hidden;}
.popup.initial{opacity: 0; transition: opacity 0.4s ease-in-out;}
.popup.shown{opacity: 1;}
.popup[aria-hidden="false"]{display: block;}
.popupFlex{display: flex; align-items: center; justify-content: center; padding: 10px; width: 100%; height: 100%;}
.popupFrame{position: relative; background-color: white; border-radius: 6px; box-shadow: 0 0 30px #00000033;}
.popupClose{position: absolute; left: 0; top: 0;}
.popupClose a{width: 60px; height: 60px; font-size: 20px; text-decoration: none; display: flex; align-items: center; justify-content: center; text-align: center;}
.popup_trapFocus{overflow: hidden; width: 0; height: 0;}

.popupRenewal{width: 956px; padding: 60px 15px 50px;}
.popupRenewal_icon{text-align: center; font-size: 52px; color: #d81119;}
.popupRenewal h4{text-align: center; font-weight: 500; font-size: 36px; padding-top: 28px;}
.popupRenewal_frame{background-color: #f3f5f6; border-radius: 6px; max-width: 800px; padding: 24px 15px 20px; margin: 22px auto 0;}
.popupRenewal_frame strong{display: block; text-align: center; font-weight: 500; font-size: 24px;}
.popupRenewal_frame p{text-align: center; font-size: 18px; line-height: 26px; font-weight: 400; padding-top: 16px; max-width: 660px; margin: 0 auto;}
.popupRenewal_bullets{display: flex; justify-content: center; padding-top: 6px;}
.popupRenewal_bullets ul{max-width: 500px; width: 100%;}
.popupRenewal_bullets li{position: relative; padding-inline-start: 26px; margin-top: 22px; font-weight: 400; font-size: 16px;}
.popupRenewal_bullets li:before{content: "\e942"; font-family: 'icomoon' !important; position: absolute; right: 0; top: 0;}
.popupRenewal_button{padding-top: 45px; text-align: center;}
.popupRenewal_button button{border: 0; width: 300px; height: 44px; border-radius: 6px; background-color: #d81119; color: white; font-weight: 300; font-size: 18px;}
.popupRenewal_button button:hover{background-color: #a20d13;}
.popupRenewal_link{padding-top: 28px; text-align: center;}
.popupRenewal_link a{text-decoration: underline; font-weight: 400; font-size: 18px;}

.popupTerms{width: 956px;}
.popupTerms_title{display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 6px 6px 0 0; height: 75px; background-color: #F3F5F6;}
.popupTerms_title h4{font-size: 24px;}
.popupTerms_body{padding: 34px 10px 10px;}
.popupTerms_bodyScroll{height: 600px; padding: 0 30px 30px; overflow-x: hidden; overflow-y: auto;}
.popupTerms_bodyScroll::-webkit-scrollbar-track{background-color: white;}
.popupTerms_bodyScroll::-webkit-scrollbar{width: 6px; height: 6px; background-color: #D9E0E1;}
.popupTerms_bodyScroll::-webkit-scrollbar-thumb{border-radius: 3px; background-color: #D9E0E1;}

.popupTerms_list{padding: 0px;}
.popupTerms_list ul{counter-reset: terms;}
.popupTerms_list li{counter-increment: terms; font-size: 16px; line-height: 24px; padding-top: 16px;}
.popupTerms_list li:nth-child(1){padding-top: 0;}
.popupTerms_list li:before{content: counter(terms)". "; font-weight: 700;}

.popupTerms_buttons{padding-top: 36px; margin: 0 -12px;}
.popupTerms_buttons ul{display: flex; justify-content: center;}
.popupTerms_buttons li{padding: 0 12px; width: 50%; max-width: 290px;}
.popupTerms_buttons button{width: 100%; height: 44px; border-radius: 6px; border: 1px solid #d81119; font-size: 16px;}
.popupTerms_buttons button.popupTerms_confirm{background-color: #d81119; color: white;}
.popupTerms_buttons button.popupTerms_cancel{background-color: white; color: #d81119;}
.popupTerms_buttons button:hover{background-color: #a20d13; color: white;}


@media screen and (max-width: 1710px) {
    .popupRenewal{padding: 40px 15px 36px;}
    .popupRenewal_icon{font-size: 40px;}
    .popupRenewal h4{font-size: 32px; padding-top: 4px;}
    .popupRenewal_frame{padding: 20px 15px 16px; margin-top: 16px;}
    .popupRenewal_frame p{padding-top: 9px;}
    .popupRenewal_bullets{padding-top: 12px;}
    .popupRenewal_bullets li{margin-top: 12px;}
    .popupRenewal_button{padding-top: 36px;}
    .popupRenewal_link{padding-top: 22px;}

    .popupTerms_title{height: 64px;}
    .popupTerms_body{padding: 22px 10px 10px;}
    .popupTerms_bodyScroll{height: 480px; padding: 0 30px 20px;}
    .popupTerms_list li{line-height: 22px; padding-top: 10px;}
    .popupTerms_buttons{padding-top: 24px;}
}

@media screen and (max-width: 1024px) {
    .popupRenewal, .popupTerms{width: 100%;}   
}

@media screen and (max-width: 767px) {
    .popupFrame{width: 100%;}
    .popupRenewal{padding: 36px 15px 30px;}
    .popupRenewal_icon{font-size: 32px;}
    .popupRenewal h4{font-size: 28px; padding-top: 8px;}
    .popupRenewal_frame{padding: 20px 15px 16px; margin-top: 12px;}
    .popupRenewal_frame strong{font-size: 21px;}
    .popupRenewal_frame p{font-size: 16px; line-height: 22px; padding-top: 8px; max-width: 480px;}

    .popupTerms_title h4{font-size: 21px; line-height: 24px;}
    .popupTerms_bodyScroll{padding: 0 20px 20px;}
}

@media screen and (max-width: 480px) {
    .popupRenewal h4{font-size: 24px;}
    .popupRenewal_frame strong{font-size: 18px;}
    .popupRenewal_link a{font-size: 16px;}

    .popupTerms_title h4{font-size: 20px; line-height: 24px; margin: 0 auto; max-width: 220px;}
    .popupTerms_body{padding: 22px 0 10px;}
    .popupTerms_bodyScroll{padding: 0 20px 14px;}

    .popupTerms_buttons{margin: 0 -6px;}
    .popupTerms_buttons li{padding: 0 6px;}
}