:root{
    --h2-base-font-size: 26px;
    --bs-border-color: #a7a7a7;
}

.two-columns{
    display: flex;
    flex-direction: column;
}

.left-menu ul{
    list-style: none;
    padding: 0;
}

.promotion-title,
.intro_content h3{
    font-weight: bold;
    color: #002486;
    font-size: var(--h2-base-font-size);
}

.intro_content h3{
    font-size: var(--h2-base-font-size);
}

.left-menu h1{
    padding: 9px 10px 8px;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 25%, rgba(234,234,234,1) 59%, rgba(201,201,201,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 25%,rgba(234,234,234,1) 59%,rgba(201,201,201,1) 100%);
    background: linear-gradient(to bottom, rgb(249 249 249) 25%, rgba(234, 234, 234, 1) 59%, rgba(201, 201, 201, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c9c9c9',GradientType=0 );
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    font-size: 1.2rem;
    color: #4d4d4d;
    font-weight: bold;
    margin: 0;
}

.left-menu{
    flex: 1;
}

.promotions-list{
    flex: 3;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.left-menu a{
    background-color: #425158;
    text-decoration: none;
    color: white;
    display: block;
    padding: 10px;
    border-bottom: 1px solid gray;
}

.left-menu a:hover{
    background-color: #19212b;
}

.left-menu a.active{
    background-color: white;
    color: #4d4d4d;
}

.left-menu li:has(.active){
    border-right: 1px solid #eeeeee;
    border-left: 1px solid #eeeeee;
}

.promotion{
    padding: 20px;
    border: 1px dashed #dbdbdb;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.promotion br{
    display: none;
}

.promotion > *{
    margin: 0;
}

.promotion-table th{
    background-color: #19212b;
    color: #ebebeb;
}

.promotion-table td,
.promotion-table th{
    border-width: 1px;
    padding: 5px;
    font-size: .9rem;
    text-align: center;
}

.promotions-list .highlight,
.highlight{
    color: #f60;
    /* font-weight: bold; */
}

.promotion a b,
.promotion a strong{
    font-weight: normal;
}

.promotion a:not(.no-print),
.promotion a b,
.promotion a strong{
    text-decoration: none;
    color: #10218b;
    font-weight: bold!important;
}

@media screen and (min-width: 992px) {
    .two-columns{
        flex-direction: row;
        gap: 50px;
    }
    .promotion{
        padding: 30px;
        border: 1px dashed #dbdbdb;
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
    .promotion-table td,
    .promotion-table th{
        padding: 10px;
        font-size: 1rem;
    }
    .promotions-list{
        gap: 50px;
    }
}

@media screen and (min-width: 1200px) {
    .two-columns{
        gap: 100px;
    }
}

/* single promo page */
/* .intro_content{
    padding: 20px;
    border: 1px solid #dedede;
    border-radius: 4px;
} */

.left-menu .go-back{
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    gap: 20px;
    /* text-transform: uppercase; */
}

.go-back::before{
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #ffffff;
}

.go-back::after{
    display: none;
}

.sub_subtitle {
    color: #878787;
}

.intro_content *{
    margin: 0;
}

.intro_content br{
    display: none;
}

.intro_content,
div.promo_copy{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sub-heading{
    color: #4d4d4d;
    font-size: 20px;
    font-weight: bold;
}

.promotion-dates{
    border: dashed 2px #6c6c6c;
    padding: 20px;
}

.promotion ul,
.promotion ol{
    margin: 0;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.promotion address br{
    display: block;
}

.top-border{
    border-top: 1px dashed #b8b8b8;
    padding-top: 20px;
}

@media screen and (min-width: 992px) {

}

/*  */
/* .line{
    padding-bottom: 20px;
    border-bottom: solid 2px #000000;
} */


/* PROMOTION STEPS */

.progressBar{
    display: flex;
    justify-content: center;
    max-width: 90%;
}


.progressBar .progressNum {
    background-color: rgb(187, 187, 187);
    width: 46px;
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    text-align: center;
    font-weight: bold;
    display: inline-block;
    position: relative;
    z-index: 2;
    box-sizing: content-box;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(221, 221, 221);
    border-image: initial;
    border-radius: 100%;
}

.progressBar a.progressNum {
    background-color: #f58612;
}

.progressBar .selected .progressNum {
    background-color: rgb(255, 164, 27);
    color: rgb(255, 255, 255);
    animation: 1.5s ease-in-out 0s infinite normal none running blinker;
}

.progressBar > div {
    width: 13.9%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}



/* .progressText br{
    display: none;
} */

.progressText {
    display: block;
    color: rgb(153, 153, 153);
    margin-top: 10px;
}

.selected .progressText{
    color: rgb(77, 77, 77);
    font-weight: bold;
}

.promo_title {
    color: rgb(77, 77, 77);
    font-weight: bold;
    text-align: center;
    display: block;
    background-color: rgb(221, 221, 221);
    padding: 10px;
}

.checklist{
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: max-content;
    margin: auto;
    padding-block: 20px;
}

.checklist li{
    position: relative;
    list-style: none;
}

.checklist li::before{
    font-family: 'Glyphicons Halflings';
    content: "\e084";
    color: #5cb85c;
    font-size: 25px;
    display: block;
    position: absolute;
    top: -6px;
    left: -31px;
}
@media screen {
    .boxTerms {
        height: 400px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding-left: 30px;
        padding-right: 30px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(68, 85, 68);
        border-image: initial;
        color: #565656;
        margin-block: 20px;
    }
}


.termsHighlight {
    color: #f60;
}


.progressBar .selected .progressText{
    display: block;
    font-size: 12px;
    white-space: nowrap;
    position: relative;
    padding-top: 3px;
    font-weight: bold;
    margin-top: 15px;
}
/* .progressBar .selected .progressText:after{
    font-family: 'Glyphicons Halflings';
    content: "\e253";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 13px;
    color: #ffab2d;
} */

@media screen and (min-width: 768px) {
    .progressBar > div:not(:last-of-type)::after {
        display: block;
        content: "";
        position: absolute;
        top: 25px;
        left: 75px;
        width: 100%;
        z-index: 1;
        border-top: 5px solid rgb(221, 221, 221);
    }
}

@media screen and (min-width: 992px) {
    .progressBar > div:not(:last-of-type)::after {
        left: 90px;
    }
}

@media screen and (min-width: 992px) {
    .progressBar > div:not(:last-of-type)::after {
        left: 80px;
    }
}

@media (max-width: 767px){
	.progressBar{
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.progressBar >div{
		display: block;
		width: 14.7%;
		/* text-align: left; */
	}
	.progressBar >div:last-of-type{
		width: 38px;
	}
	.progressBar >div:after{
		width: 70%;
		top: 18px;
		border-width: 3px;
	}
	.progressBar .progressNum{
		border-width: 3px;
		width: 32px;
		height: 32px;
		line-height: 32px;
		font-size:20px;
		color: #fff;
		text-align: center; 
		font-weight: bold;
		display: inline-block;
		position: relative;
		z-index: 2;
	}
	.progressBar .progressText{
		display: none;
	}
    .progressBar .selected .progressNum:after {
        font-family: 'Glyphicons Halflings';
        content: "\e253";
        display: block;
        position: absolute;
        left: 8px;
        font-size: 13px;
        color: #ffab2d;
    }

}

label.error{
    color: red;
    font-size: .9rem;
}

.input-email .form-group:has(#f_email_new),
.input-email .form-group:has(#f_password_new),
.confirm-email .form-group:has(#f_email_new){
    display: flex;
    flex-direction: column;
    padding-block: 30px;
    gap: 20px;
    flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
    .input-email .form-group:has(#f_email_new),
    .input-email .form-group:has(#f_password_new),
    .confirm-email .form-group:has(#f_email_new){
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        
    }
}

.form-block__link{
    /* flex-basis: 100%; */
    text-transform: uppercase;
    color: #10218b;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    font-size: 12px;
    display: block;
}

.form-block__link:hover{
    text-decoration: underline;
}

.input-email input[type="submit"],
.confirm-email input[type="submit"]{
    border: 0;
}

label#f_email_new-error,
label#f_password_new-error{
    position: absolute;
    top: -25px;
    width: 100%;
    right: 0;
}
.formItem:has(input[type="email"]),
.formItem:has(input[type="password"]){
    position: relative;
}

.formItem:has(.form-block__link){
    text-align: left;
}

h1{
    border-bottom: unset;
}

.confirm-email fieldset ul,
.input-email fieldset ul
{
    max-width: 600px;
    margin-inline: auto;
    margin-block: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eal-popover{
    width: 40px;
    display: inline-block;
    text-align: center;
}

form[name="promoStep2"] .form-group{
    display: flex;
    gap: 20px;
    align-items: center;
    max-width: 800px;
    margin-inline: auto;
    justify-content: center;
}

form[name="promoStep2"] .formItemSingle{
    padding-block: 30px;
}

.bi-question-circle{
    font-size: 20px;
    color: #3e3e3e;
}

.serial-number .form-control{
    width: unset;
}

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

.serial-number label.error{
    display: block;
}

.with-popover{
    display: flex;
}

#helpAccordion ul{
    list-style: none;
    padding-left: 0;
}

#helpAccordion img{
    width: auto;
}

.f_error_text {
    font-size: .9em;
    color: #ed1c24;
}

.form-group:has(.phoneNumber){
    display: flex;
    gap: 30px;
}

.phoneNumber{
    display: flex!important;
    gap: 10px;
}

input[name="phoneAreaCode"]{
    width: auto;
}

.btn-light {
    --bs-btn-bg: #ededed;
}

.btn {
    padding: 7px 25px;
}

.sbsNum input,
#f_accountnumber_new,
#f_suffix_new{
    width: auto;
    height: fit-content;
}

.sbsNum,
#bankdetails .form-group,
.formItem:has(#f_accountnumber_new),
.formItem:has(#f_suffix_new){
    display: flex;
    gap: 10px;
}

#bankdetails label{
    min-width: 220px;
}

#bankdetails .s_text{
    margin: 0;
    color: #999;
}

#bankdetails .formItemMulti{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-block: 45px;
}

#bankdetails .form-group{
    position: relative;
}

.sbsNum .f_error_text,
.f_error_text{
    position: absolute;
    height: fit-content;
    top: -30px;
}

.sbsNum .f_error_text:first-of-type{
    top: -50px;
}

form.stdForm .formItem .f_error_text+input, form.stdForm .formItem .f_error_text+select, form.stdForm .formItem .f_error_text+.phoneNumber input,
.form-group:has(.f_error) textarea {
    background-color: #ffeef0;
}

#bankdetailconfirm .s_text{
    color: #999;
    margin: 0;
}

.cashbackAmount{
    margin-top: 20px;
}

@media print{
    header,
    .checkoutprogressbar,
    .back-or-next,
    footer,
    br{
        display: none;
    }
    body{
        margin-inline: 0;
        margin-block: 0;
        font-size: 14px;
    }
    .container:has(#printArea_new){
        width: 100%;
        max-width: unset;
    }
    .post-to br{
        display: block;
    }
    p.txtNormalAlt:has(.post-to){
        margin-top: 20px;
    }
    #printArea_new,
    #printArea_new *{
        font-size: 14px;
    }

}

#printArea_new img{
    width: 30px;
}

.back-or-next .btn-primary::after,
.btn-primary::after{
    display: none;
}


@media print {
    .no-print{
        display: none;
    }
    
}