#page {min-height: 100%; position: relative; z-index: 20; /*margin-bottom: -114px;*/ /* Hide because footer overlap with content*/} #page:after {content: ""; display: block;} .hide-on-wide-myaccount { display: none; } .show-on-wide { display: block; } .main-content { /*padding-bottom:114px;*/} #main-content-container {background: #fff; width: 100%; display: table; padding: 32px 0 32px; position: relative; border: 1px solid #CDCFD5; border-radius: 0 0 10px 10px;} .welcome-text {position: absolute; right: 30px; top: 15px;} #content_table {padding: 0 32px;} #main-content-container .mainHeading h2 {margin: 0 0 30px;} #main-content-container .innerPadding {padding: 0;} body.loginPage {background:none !important;} body.loginPage #page:after {height: auto !important;} body.loginPage #page footer {margin-top:-1px !important;} .contents {max-width: 965px; width: 100%;} /*** ========== common classes ========== ***/ .white {color: #fff !important;} .black {color: #000 !important;} .purple {color: #4e4ae4 !important;} .pink {color: #fec2eb;} .lightGrey {color: #9498A4;} .midGrey {color: #444d63;} .darkGrey {color: #131c35;} .redBg {background-color: #e10a0a !important; color: #fff;} .redBg * {color: #fff;} .roseBg {background-color: #FFE1E3 !important;} .dustGreyBg {background-color: #F3F2F0 !important;} .lightGreyBg {background-color: #E5E8F0 !important;} .purpleBg {background-color: #4E4AE4 !important; color: #fff;} .purpleBg * {color: #fff;} .darkGreyBg {background: #333 none !Important; color: #fff;} .darkGreyBg * {color: #fff;} .flexboxRow {display: flex; flex-direction: row; flex-wrap: wrap;} .flexboxColumn {display: flex; flex-direction: column; flex-wrap: wrap;} .flexboxCenter {align-items: center; justify-content: center; display: flex;} .gap12 {gap: 12px;} .gap16 {gap: 16px;} .gap24 {gap: 24px;} .gap32 {gap: 32px;} .tb {display: table;} .tb .tc {display: table-cell;} .padTop0 {padding-top: 0 !important;} .margTop0 {margin-top: 0 !important;} .padBot0 {padding-bottom: 0 !important;} .margBot0 {margin-bottom: 0 !important;} .margTop16 {margin-top: 16px;} .margTop32 {margin-top: 32px !important;} .padBot12 {padding-bottom: 12px;} .padBot16 {padding-bottom: 16px;} .padBot32 {padding-bottom: 32px;} .margTop40 {margin-top:40px;} .margBot40 {margin-bottom:40px;} .margLeft5 {margin-left: 5px;} .margTopBot24 {margin-top: 24px; margin-bottom: 24px;} .font32PadBot12 {font-size: 22px; margin: 0 0 16px; font-weight: bold !important; line-height: 1.3em;} .bold {font-weight: bold;} select { border-radius: 4px 4px 0px 0px; border: 1px solid #F3F2F0 !important; border-bottom: 1px solid #131C35 !important; background: #F3F2F0; padding: 5px 10px; color: #444D63; height: 44px; outline: 0; position: relative; appearance: none; } .select_box:after { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #4e4ae4; position: absolute; top: 40%; right: 20px; content: ""; z-index: 98; } /* Header ================================================================ */ header { background: #E10A0A; display: block; height: 78px; position: relative; width: 100%; } header .contents {max-width: 1280px; width: 100%; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc0000+1,e10a0a+50,cc0000+100 */ background: #E10A0A; /* Old browsers */ background: -moz-linear-gradient(left, #E10A0A 1%, #E10A0A 50%, #E10A0A 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #E10A0A 1%,#E10A0A 50%,#E10A0A 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #E10A0A 1%,#e10a0a 50%,#E10A0A 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E10A0A', endColorstr='#E10A0A',GradientType=1 ); /* IE6-9 */ } header .logo {float: left; margin-right: 80px; height: 50px; padding-top: 1em;} .hide-on-wide-myaccount { display: none; } /*** Top Right Menu ***/ header .myAccountmenusup {float:right; margin:0;} header .myAccountmenusup li {float: left; text-align: center; display: none;} header .myAccountmenusup li a {color: #fff; display: block; font-size: 14px; padding: 19px 18px 18px;text-decoration: none; text-transform: uppercase; font-family:poppinsregular, GraphikWeb,Arial,sans-serif;} header .myAccountmenusup li:hover a {color: #34a8d6;} header .myAccountmenusup li:first-child, header .myAccountmenusup li:last-child {display: block;} /*** enables when mobile menu comes ***/ .mobileHeaderOnly-mobiletopbar { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b41d21+1,ca2025+50,b41d21+100 */ background: #E10A0A !important; background: #E10A0A; /* Old browsers */ background: -moz-linear-gradient(left, #b41d21 1%, #b41d21 50%, #b41d21 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #b41d21 1%,#b41d21 50%,#b41d21 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #b41d21 1%,#b41d21 50%,#b41d21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b41d21', endColorstr='#b41d21',GradientType=1 ); /* IE6-9 */ width:100%; height: 78px; position: relative; } .mobileHeaderOnly-mobiletopbar .logo { width: auto; height: 50px; padding-top: 1em; float:left;} /*** Main Navigations ***/ nav {margin-top:36px;} #navigation-bar {position:relative;} .navBox {float: left;margin-right: 4px;text-align: center;width: 160px;} .navBox a {/*display: block;*/font-size: 1.1em;padding: 11px 3px 2px 3px;/* height: 92%; */outline: 0 none;text-decoration: none;width: 100%;border-bottom: 4px solid transparent;} .navBox a:hover, .navBox a.active {background:#fff; border-bottom: 4px solid #E10A0A} .navBox span {/*display: block;*/ padding: 11px 3px 2px 3px; height: 55px;line-height: 54px;font-size: 22px;font-weight: bold;color: #131C35;} .navBox.memberBenefits a {background:#cc0000;} .navBox.memberBenefits a span {color:#fff;} .navBox.memberBenefits a:hover, .navBox.memberBenefits a.active {background:#cc0000;} .Wrapper.main-inner-nav {padding: 20px 0; border-bottom:1px solid #dfdfdf;} ul.mainInnerNav {display: flex; gap: 10px; flex-wrap: wrap;} ul.mainInnerNav li {list-style: none; /*float: left;*/ margin:0 0 0 0;} ul.mainInnerNav li:first-child {margin-left: 30px;} ul.mainInnerNav li a {background:none;display: block; font-size: 14px; color: #131C35; padding: 8px 16px;border: 1px solid #CDCFD5;border-radius: 6px;text-decoration: none;white-space: nowrap;background-color: #F3F2F0; width: auto; text-decoration: none !important;} .navBox ul.mainInnerNav li a:hover, .navBox ul.mainInnerNav li a:active, .navBox ul.mainInnerNav li a:focus, .navBox ul.mainInnerNav li a.selected, .navBox ul.mainInnerNav li a.mainInnerNavSelected {border-color: #4E4AE4;background-color: #fff;color: #131C35;font-weight: bold !important; border-bottom: 1px solid #4E4AE4;} .navBox .main-inner-nav {display:none;} .navBox:hover {background: #fff;} .navBox .Wrapper.main-inner-nav {background: #fff; border-bottom: 1px solid #dfdfdf; left: 0; margin-bottom: 20px; padding: 32px 0; position: absolute; top: 55px; width: 965px; z-index: 1;} .navBox:hover .main-inner-nav {display:block; background: #fff;z-index:2;} .navBox.active .main-inner-nav {display: block; background: #fff; z-index: 1; border: 1px solid #ccc; border-radius: 10px 10px 0 0; margin-top: 30px;} /* Promos ================================================================ */ .promosMyAccount {margin: 0 auto 0px; max-width: 965px; width: 100%; /*position:relative;*/ z-index:99999; overflow:hidden;} .promosMyAccount .promos {margin-top:4px; font-size:1.1em; overflow:hidden;} .promosMyAccount .promos .col {width:96%;} .promosMyAccount .promos .col1, .promosMyAccount .promos .col2 {background: #dfdfdf; float: left; min-height: 150px; margin-bottom: -1000px; padding: 15px 15px 1000px; width: 450px;} .promosMyAccount .promos .promo_list {margin-bottom: 20px;} .promosMyAccount .promos .promo_list li a {color: #3f3f3f; display: block; text-decoration: underline;} .promosMyAccount .promos .promo_list li a:hover {color:#000; text-decoration:none;} .promosMyAccount .promos .col2 {margin-left: 5px;} #main-content-container .mainPromosHeading {margin-top: 20px; padding: 0 30px;} /* Panel Menu Buttons ================================================================ */ .toggleMenuBtnLeft, .toggleMenuBtnRight {display:none;} .toggleMenuBtnLeft img, .toggleMenuBtnRight img {outline:none; outline:0} .toggleMenuBtnLeft {position: absolute; z-index:9999; height:27px; top:33%; left:3%; outline:none; outline:0} .toggleMenuBtnRight {position: absolute; z-index:9999; height:27px; top:33%; right:3%; outline:none; outline:0} .logoMobile {margin: 17px 0 0 27px; width: 85px;} .mobileHeaderOnly, .mobileHeaderOnlyLeft .contents { width:100%; margin: 0 auto;} .mobileHeaderOnly .mobileHeaderOnly-content { width:95%; margin: 0 auto; } /* Left/Right Sliding Panel Menu ================================================================ */ /*.flyoutMenu {z-index:9999; overflow-y:scroll;} .flyoutMenu li {display:block; position:relative; padding:0 0 0 15px; list-style:none; border-bottom: 1px solid #d6d6d6;} .flyoutMenu li a {color: #353535; display: block; font-family: VMUltramagneticNormalRegular; font-size: 1.35em; font-weight: normal; outline: medium none; padding: 10px 15px; text-transform: uppercase;} .flyoutMenu li a:hover {color:#2390b8;} .flyoutMenu li a.selectedRightMenu {color:#333333; font-family:Arial, Helvetica, sans-serif; text-transform:none; font-weight:bold;} .flyoutMenu li:first-child {border-top: 1px solid #d6d6d6;} */ /* Footer ================================================================ */ footer {background:#fff; /*position:absolute;*/ bottom:0; left:0; height:114px; width:100%; /*margin-top: 30px;*/ position:relative; z-index:21; float:left;} #page:after {/*height: 114px;*/ /* Hide because footer overlap with content*/} footer .contents {padding-top: 30px !important;} footer .contents .myAccountContainer {border-top: 1px solid #CDCFD5; margin-bottom:40px; padding-top:24px; overflow:hidden;} footer .contents .myAccountContainer .colLinks {float:left; /*width:575px;*/} footer .contents .myAccountContainer .colCopyright {float:right; width:275px; margin:0; padding:0; text-align:right; font-size:12px;} footer .contents .myAccountContainer ul {float: none; margin:0; padding:0;} footer .contents .myAccountContainer ul li {list-style: none; float: left; margin-bottom: 10px; letter-spacing:0px; } footer .contents .myAccountContainer ul li a {color: #4E4AE4; text-decoration:none; font-size:12px; border-left:1px solid #D4D4D4; padding:0 10px;} footer .contents .myAccountContainer ul li a:hover {color: #4E4AE4; text-decoration:underline;} footer .contents .myAccountContainer ul li a:last-child:hover {cursor: pointer;} footer .contents .myAccountContainer ul li:nth-child(1) a {border-left: 0; padding-left: 0;} footer .contents .myAccountContainer p {color:#444D63; margin:0 0 10px 0; letter-spacing:0px; padding:0;} .white-container {float:left; width:940px;} #myaccount_balance_box {height: auto; position: relative;} .redBox {background: #ffeded; border: 1px solid #ed7476; height: auto; margin: 0 0 30px 0; padding:8px; color:#FF0000; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; -ms-border-radius:2px;} #content_table .row {display: table; margin: 16px 0; width: 100%;} #content_table .row:last-child {border-bottom: none;} #content_table .row .content {margin-bottom: 0; padding: 0;} #content_table .row.noborder {border-top: medium none; padding: 0; width: 100%;} #content_table .rowHeading h3 {font-size: 1.3em;} #content_table .rowHeading p, #content_table .white-container .row .content p, #content_table p {margin-bottom:16px;} #content_table .filedValueTopUpcard p.topupCard {margin-bottom: 0;} #content_table p:last-child {margin-bottom: 0;} #content_table .row .noPaddingTop {padding-top:0px;} #content_table .colRow {display: table-row;} #content_table .row .col {width: 405px; float:left;} #content_table .tripleCol {display: table; width: 100%;} #content_table .col1, #content_table .col2, #content_table .col3 {display: table-cell; vertical-align: top;} #content_table .effectiveDates {display: inline;} #content_table .content.imme-mgr-content span {margin-left: 23px;} #content_table .col1 .content, #content_table .col2 .content, #content_table .col3 .content, #content_table .rowHeading .content {padding: 0 30px 0 0px; margin-bottom: 24px;} .inputContainer {display: block; position: relative;} .inputContainer .labelRow, .inputContainer .inputRow {clear: both; position: relative; display: flex;} .inputContainer .labelRow {display: inline-block; /*padding-bottom: 5px;*/} .inputContainer .labelRow label, .inputContainer .labelRow .inputGroupHeading, .inputContainer .inputRow input, .inputContainer .inputRow select, .inputContainer .radioRow input, .inputContainer .checkboxRow input, .inputHolder fieldset select, #myaccount_edit_list_form_box input { float: left;} .inputContainer input[type="checkbox"], .inputContainer input[type="radio"] {margin-right: 10px;} .inputContainer .labelRow label, .inputContainer .labelRow .inputGroupHeading { padding-right: 10px; font-weight:bold;} .inputContainer .inputRow select option, .inputHolder fieldset select option {padding:6px 2px 6px 0;} .inputContainer .inputRow input:focus, #myaccount_edit_list_form_box input:focus {border: 1px solid #34a8d6;} .row.addLabel .inputContainer .inputRow {background:#efefef; /*border: 1px solid #dedede;*/ width: 300px; height:29px; line-height:29px;} .contactNumber .inputContainer .inputRow input {width:85px; float:none;} .marginBottom {margin-bottom:30px;} .subHeading {/*margin-bottom: 30px;*/} .subHeading h3 {display: inline; } .subHeading .editlink {display: inline;} .creditCardInformation {} .creditCardInformation .pm_style {width:300px;} .expiryDate select.month_style {width:100%;} .expiryDate select.year_style {width:100%;} /*** Old Address Css Override ***/ .multifields {border: 0 solid #000;} .multifield-line {float: left;width: 100% !important;} .multifield-line .inputContainer, .singlefield-line .inputContainer {border-top: medium none !important; float: left !important; padding: 0 30px 30px 0 !important; width: 376px !important;} .f-l > input {border: 1px solid #dedede;} .f-l > input:focus {border:1px solid #34a8d6} .row.required > label {display: block; padding-bottom: 7px;} .multifield-line .row-fields .f-l select {height: 36px; padding: 8px; width:300px;} #content_table .multifield-line.row, #content_table .singlefield-line.row {border: none; padding-top: 0; padding-bottom:0; margin: 0;} .multifield-line .inputContainer label, .singlefield-line .inputContainer label {display: block; font-weight: bold; padding-bottom: 7px;} #content_table > #arrow_list_link {float: right; margin-right: 20px; display: none;} #arrow_list_link > a {} ul.radio-listing:first-child {padding:0 0 30px 0;} ul.radio-listing {float: left; width:100%;} ul.radio-listing li {margin-bottom: 16px; display: flex; width: 100%;} ul.radio-listing input {/*float: left; margin-right: 7px; margin-top:2px; width: 3%;*/} ul.radio-listing label {float: left; width: 94%;} ul.radio-listing li.ultra {font-weight: normal !important; line-height: 1em; font-family: VMUltramagneticNormalRegular; font-weight: normal; font-size: 1.3em; margin: 0; color: #333; text-transform: uppercase;} ul.radio-listing.padTB {margin:15px 0;} .graybox {} .newPlanCol1 { border-right: 1px solid #CDCFD5; padding-top: 0px; flex-basis: 48%; box-sizing: border-box;} .newPlanCol2 {flex-basis: 50%; box-sizing: border-box; padding-left: 32px;} .newPlanCol2.pad {padding-top: 0;} .noteContent {background-color: #F3F2F0; margin: 32px 0 32px 0; padding: 16px; border-radius: 16px;} .noteContent i.PadLeft47 {display: block; padding: 11px 0 0;} .buddiesCol1 {border-right: 1px solid #ccc; float: left; margin-right: 50px; text-align:center; width: 35%; padding:0 0 50px;} .buddiesCol2 {float:left; width:59%; padding-top:50px;} .newPlanCol2 .details_callout {} .newPlanCol2 .details_callout .rowCon {margin-bottom: 32px;} .newPlanCol2 .details_callout strong {margin-bottom: 8px;display: block;} .newPlanCol2 .details_callout li {list-style: inside none disc;} .PadTop0 {padding-top:0px !important;} #divNewRatePlan .newPlanCol1 ul.radio-listing li.ultra {font-size:1.1em; padding-bottom:20px; display:block; width:100%;} .myHotDeals {float:left; width:297px; background:url("/assets/images/benefits-promo-bg-tall.jpg") no-repeat scroll left top #000; margin-left:25px; margin-top: 39px;} .myHotDeals .home_touts {height:450px;} .myHotDeals .home_touts .promo_cell { padding: 55% 32% 0 10%;} .myHotDeals .home_touts .promo_cell h4 {font-size: 1.72em; color:#fff;width: 150%;} .myHotDeals .home_touts .promo_cell p {margin-top: 1em; color:#fff;width: 146%;} .myHotDeals .home_touts .promo_cell ul.promo_list {margin:1em 0 0.5em; width: 147%;} .myHotDeals .home_touts .promo_cell ul.promo_list li {color: #fff; list-style: square outside none !important; margin-left: 14px; padding-bottom: 0.9em;} .myHotDeals .home_touts .promo_cell ul.promo_list li a {text-decoration:none; color:#fff;} .myHotDeals .home_touts .promo_cell ul.promo_list li a:hover, .myHotDeals .promo_cell ul.promo_list li:hover {color:#34a8d6;} .myHotDeals .autoTopupCheck {background:#efefef;} .myHotDeals .autoTopupCheck .rightSideBoxPadding {padding: 20px 17px;} .myHotDeals .autoTopupCheck h3 {font-size: 1.1em; line-height:1.2em} .main-content-area {background-color: #fff; position: relative;} #section1, #section2 { font-size: 14px; padding:0; overflow:hidden;} #topUp .col1, #topUp .col2, #topUp .col3 {border-left:1px solid #d8d8d8; float: left; margin-bottom: 10px; padding:30px 29px 50px; width:25%; transition: border 500ms ease-out 0s;} #topUp .col1.first-child {border-left:none;} #topUp #section2 .col1, #topUp #section2 .col2 {border-left:1px solid #d8d8d8; float: left; margin-bottom: 10px; padding:30px 29px 10px; width:42%; transition: border 500ms ease-out 0s;border-top: 5px solid #fff;} #topUp #section2 .col1.first-child {border-left:none;} #topUp #section2 .col1:hover, #topUp #section2 .col2:hover, #topUp #section2 .col3:hover {background: #efefef; border-top: 5px solid #02afe2;} #topUp #section2 .inner {height: 340px;} #topUp # #section1 .what-you-need {width:231px; height:100px;} #section1 h3, #section2 h3 {font-size: 24px;} .what-you-need p {margin-bottom:10px !important;} ul.standard-list, ul.checklist, ul.checklist-grey, ol.numbered-list, ul.bullet-list, .promo_description.listing ul {font-size: 14px !important; margin: 0 0 0.5em !important;} ul.standard-list li, .promo_description.listing ul li {margin-bottom: 0; color: inherit; list-style: square outside none !important; margin-left: 20px;} .red {color: #e10a0a; font-size:1em;} #section1 h2.ultra, #section2 h2.ultra {color: #333; font-size: 18px;} #section1 h3.ultra, #section2 h3.ultra {color: #333; font-size: 16px;} #section2 .hot-offer {background: url("/assets/icons/ho-red-flame-medium.png") no-repeat scroll 1px 10px rgba(0, 0, 0, 0); padding-left: 35px; padding-top: 10px; height:40px; margin-bottom: 20px;} .margTB10 {} .margTB35 {} #section1 .btnHolder, #section2 .btnHolder {text-align: center;} .paymentInfoTable .text_bold {font-weight:bold; margin-bottom: 8px; display: block;} .labelShow { background: none repeat scroll 0 0 #efefef; height: 29px; line-height: 29px; width: 295px; padding-left: 5px; border: 1px solid #dedede; } #edit_list table tbody tr td b.ui-table-cell, #edit_list table tbody tr td strong, .paymentHistoryTable tbody tr td b.ui-historyTable-cell, .paymentHistoryServices tbody tr td b.ui-historyTable-cell, .paymentHistoryTable tbody tr td strong, .paymentHistoryServices tbody tr td strong { display:none; } .buttonPlaceHolder, .btnHolder {text-align:left;} .chkBox label {cursor:pointer;} .jt > img {vertical-align: middle;} .textRed {background:#e10a0a; padding:0 5px; color:#fff;} .inputContainer.threeColumn .inputRow input {float: left; margin-right: 5px; width: 90px;} .inputContainer.selectDate .f-l {float: left; width: auto; margin-right:5px;} .inputContainer.province select{width:309px;} .topEditAddress {border-bottom: 1px dotted #ccc; margin-bottom: 10px; padding-bottom: 13px;} /**** My Plan Css Here ***/ .grayTable {background: #efefef; border: 1px solid #d4d4d4; margin: 30px 0 10px; padding: 12px;} #myaccount_balance_box {border: 1px solid #c2cdd7; height: auto; padding: 10px 5px 5px 10px; position: relative; margin:0 0 30px;} #myaccount_balance_box .subheader {color: #cc0000; display: block; font-weight: bold; padding: 0 0 5px;} #myaccount_balance_bluebox, .warningBox {background-color: #d8e5f1; border: 1px solid #c2cdd7; height: auto; margin: 7px 10px 14px 0; padding: 8px;} input#usage-check-button {background: -moz-linear-gradient(center top , #c00a0b, #cc0000) repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #c00a0b; border-radius: 0.25em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); color: #fff; cursor: pointer;display: inline-block; font-weight: bold; margin: 2px 0 7px; outline: medium none; padding: 5px; text-align: center;text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); text-transform: uppercase;font-size:12px;} input#usage-check-button:hover {background: -moz-linear-gradient(center top , #a60708, #c00a0b) repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px solid #c00a0b;} #usage-check-table {border-collapse: separate; display: none; margin: 7px 10px 0 0; padding: 0 0 10px; width: 663px;} #usage-check-table table {margin:0 0 20px 0; border: 1px solid #ccc;} #usage-check-table tr.usage-header th {width: 250px;} #usage-check-table tr.usage-header th.first {width: 150px;} #usage-check-table tr.usage-header th {background: #cc0000 !important; color: #fff !important; font-weight: bold !important; text-shadow: none !important;} #usage-check-table tr.usage-type th, #usage-check-table tr.usage-type td {border-top: 1px solid #d4d4d4;} #usage-check-table th {border: medium none; padding:7px 5px;} #usage-check-table th.usage-check-title {font-weight: bold; padding: 7px 5px;} #usage-check-table td {border: medium none; padding: 5px 5px 10px;} #usage-check-table tr.usage-type td {padding:10px 5px;} #usage-check-table tr:hover th, #usage-check-table tr:hover td {background: none repeat scroll 0 0 rgba(0, 175, 218, 0.17); text-shadow: 1px 1px 0 #fff;} .esn {padding:15px 0; overflow:hidden;} .phoneStickCol1 {float: left; padding-right: 2%; width: 45%;} .phoneStickCol2 {float: left; padding-right: 6%; width: 45%;} .phoneStickCol1 .content, .phoneStickCol2 .content {margin-bottom:30px;} .phoneStickCol2 p {margin-bottom:1em !important;} .box-number-left { background-image: url("/assets/images/blue-dot.png"); background-repeat: no-repeat; color: #FFFFFF; float: left; height: 50px; min-height: 5px; width: 36px; } #sectionPromo { font-size: 14px; margin-bottom: 42px; margin-left: 14%; margin-top: 50px; } .section-header h1 {font-size:1.5em !important;} ul.topupConditions {} ul.topupConditions li {display:block; padding:0 0 32px 0; float:left;} ul.topupConditions li span.purpleCircle.fLeft {float: left; margin-right: 0;} .txtContent {padding-left: 47px; width: 655px;} .txtContent p {margin-bottom:15px !important;} .inputWrapperPadAmount, .inputWrapperPad {margin-bottom: 16px; padding-left: 37px;} .topupConditionsBtn {float:left; display:block; margin:0 0 32px 47px; width:100%;} #afterDownload1 {float:left; margin: 0 0 32px 47px; width: 655px;} #afterDownload2 {margin: 0 0 0 47px;} .expiredProductsMessage {margin: 15px 0; padding: 10px;} /*** Program to finish your activation - phone/stick ***/ .programToFinishCol1 {float: left; margin: 15px 130px 0 100px; width: 450px;} .programToFinishCol2 {float: left; margin: 15px 0 0; width: 500px;} .programToFinishCol1 .content {padding: 0 0 30px !important;} .programToFinishCol1 .content > p, .programToFinishCol2 .content > p {margin: 0 0 1em !important;} .program-instructions {font-weight: bold; margin: 0 0 30px; overflow: hidden; width: 100%;} .moduleFinishYourProgram {margin:30px 0 30px 0px !important;} .finishActivationContent .activationInfo {} .finishActivationContent .activationInfo .title {font-weight: bold; padding: 2px 14px 2px 0; margin: 0; width: 70px;} .chev-buttons button.finish {float: left; margin: 30px 30px 0 0;} .stepsSlider tr:first-child td:first-child {border-left: 0;} /*** Plan features table ***/ table.planFeaturesTable {border-collapse: collapse; margin-bottom: 10px; margin-top: 2px; width: 520px;} table.planFeaturesTable COL.left {width: 150px;} table.planFeaturesTable COL.right {background-color: #efefef;} table.planFeaturesTable TD {border: 1px solid #c2cdd7; padding: 8px;} #other-costs-content li {margin-left: 30px;} table.planFeaturesTable TD LI {list-style: circle outside none; margin-left: 30px;} .planTable {margin-bottom: 32px; padding: 0;} #red_text {color: #cc0000; text-decoration: none;} .cardHolderBillingAddress p + .row {border-top: 0px solid #dfdfdf !important; padding:0px !important;} /* .error-main-container ul li {padding: 0.4em;} */ .padBottomFive {padding-bottom:5px;} /*** Terms and conditions ***/ .table.terms-condition {margin-left: 12px; margin-top: 12px;} .terms-condition h1 {color: #c00; font-size:1.5em; font-weight: normal; padding-top: 12px;} .blueBox {background: none repeat scroll 0 0 #d8e5f1; border: 1px solid #c2cdd7; padding: 10px; font-weight: bold;margin: 0 auto;} .terms-condition .ultra {color: black; font-family: VMUltramagneticNormalRegular !important; padding-bottom: 7px; padding-top: 8px;} .table.terms-condition h3.ultra {color: #cc0000; font-family: VMUltramagneticNormalRegular !important; font-size: 18px; font-weight: normal !important; line-height: 23px; margin: 0 !important;} .table.terms-condition ul li.detail {list-style: disc outside none !important; margin-left: 14px; padding-bottom: 0.9em;} .chargeTable {background: #fafafa; margin: 0 0 30px; padding: 10px; width: 70%;} .chargeTable .chargeTableInner td {padding:5px;} /* Welcome Page Container =============================================================== */ .welcome-main-container {display: flex; flex-direction: column; gap: 40px;} .welcome-container {} .welcome-container .row, .row.removeRowBorder, .row.removeRowBorder .row {border-top:0px !important;} .welcome-container .accountDetailsBox {/*padding-top:30px;margin-bottom: 30px;*/ display: flex;} .welcome-container .accountDetailsBox .welcomeMessage {width:438px; float:left;} .welcome-container .accountDetailsBox .welcomeMessage span {margin-bottom: 24px;} .welcome-container .accountDetailsBox .welcomeMessage p {padding-right: 32px;} .welcome-container .accountDetailsBox .welcomeMessage h1 {font-size: 32px; margin: 0px; line-height: 38px; letter-spacing: -0.6px; font-weight: 600 !important; padding: 0 0 24px;} .welcome-container .accountDetailsBox .topupBalancebox {width:464px; float:left; border-left: 1px solid #D9D9D9; position: relative;} .welcome-container .accountDetailsBox .topupBalancebox .innerBalanceBox {display: flex; flex-direction: row; gap: 32px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox {padding-left:32px; float:left; width:260px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalance {float:left; /*position:relative;*/ width:100%; } .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label {float:left; font-size:18px; max-width: 293px; margin-bottom: 20px; font-weight: bold;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label span {font-size:0.9em;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail {display: table; margin: 0 !important; padding-bottom: 0; padding-top: 0; width: 100%;} .fr .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail {width: 320px;} .welcome-container .accountDetailsBox .topupBalancebox .topupNowBtn {width: 123px; text-align: right;} .welcome-container .accountDetailsBox .topupBalancebox .topupNowBtn .topupButton {padding: 7px 16px; font-size: 14px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox {display:block;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail .topUpMonthlyBalance {margin: 0 0 20px 0;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail .topUpMonthlyBalance strong {display: block; margin-bottom: 8px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail .balanceExpiryDate {margin: 0 0 20px 0;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail .balanceExpiryDate strong {display: block; margin-bottom: 8px;} .accss-custom-styles-init #currentServices #accssPrepaidAccordTitle4, .accss-custom-styles-init .accountDetailsBox .welcomeMessage a { text-decoration: underline; font-weight: 600;} .tooltipIndicator {height: 14px; width: 14px; top:2px; position:relative; margin-left:5px; cursor:pointer;} .tooltip-content {background: #e4e5e7; display: none; float: left; margin: 10px 0 0 0; padding:13px 17px; position: relative; right: 0; top: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .tooltip-content .content {float: left; padding: 0 !important; width: 80%;} .close {background: url("/assets/icons/close.png") no-repeat right top; cursor: pointer; float: right; font-size: 20px; height: 15px; margin-top: 3px; text-align: right; width:20%;} .tooltipLoginIndicator {height: 16px; width: 16px; top:2px; position:relative; margin-left:5px; cursor:pointer;} .tooltipLogin-content {background: #e4e5e7; display: none; float: left; margin: 5px 0 10px 0; padding:13px 17px; position: relative; right: 0; top: 0; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size:14px;} .tooltipLogin-content .content {float: left; padding: 0 !important; width: 80%;} .closeLoginTooltip {background: url("/assets/icons/close.png") no-repeat right top; cursor: pointer; float: right; font-size: 20px; height: 15px; margin-top: 3px; text-align: right; width:15%;} .welcome-container .accountDetailsBox .welcomeMessage .inboxClass {margin-top:35px; display:table; float:left;} .welcome-container .accountDetailsBox .welcomeMessage .inboxClass a {font-weight:bold; margin-right:3px;} .welcome-container .row {border-top:none !important; border-bottom: none !important;} .welcome-container .row #currentServices .row {border-top:none !important;} #content_table .innerPadding.topUp {margin-top:55px;} /*** Error Messages ***/ .error-main-container {margin-bottom: 0px;} .error-main-container.innerPadding.Wrapper.mwErrorContainer .error-main-container { margin-top: 32px;} .er_mesgbox {background-color: #FFE1E3; margin-left: 0; padding: 16px 24px; border-radius: 16px;} .er_mesgbox p, .er_mesgbox li {background-image: url("/assets/icons/green-circle-checkmark-red-circle-exclamation.png"); background-position: 5px -50px; background-repeat: no-repeat; margin: 0; padding: 2px 0 0 33px; margin-bottom: 0 !important;} .er_mesgbox p.noIcon, .er_mesgbox li.noIcon {background-image: none; padding: 0;} .er_mesgbox .errorMesgGrayIcon {background: url("/assets/icons/information-gray-icon.png") no-repeat left 11px; font-weight: normal; margin: 0 7px 0 0; padding: 10px 0 10px 22px; color:#3f3f3f;} .er_mesgbox .errorMesgRedIcon {background-image: url(/assets/icons/svg/maverick/error_myaccount.svg); background-position: 0 6px; background-repeat: no-repeat; font-weight: normal; margin: 0 7px 0 0; padding:5px 0 5px 22px; color:#3f3f3f;} ul.error_listing {margin: 0; padding: 0;} ul.error_listing li {font-size: 13px; font-weight: normal; list-style: outside none none; margin: 0;} ul.error_listing li span {font-weight:bold;} .welcome-container .er_mesgbox, #content_table .row.removeRowBorder .er_mesgbox {/*margin-bottom:15px;*/} .welcome-container #errorMessageDiv {display: flex; flex-direction: column; gap: 40px;} .welcome-container .er_mesgbox:first-child {margin-top: 40px;} .welcome-container .er_mesgbox:last-child {margin-bottom: 0;} .myAccountProductInfo {width:438px; float:left;} .myAccountProductInfo .productInfo {display: flex; flex-direction: row; gap: 24px;} .myAccountProductInfo .productInfo .myAccountProductImage {width: 112px;} .myAccountProductInfo .productInfo .productPhoneInfo {width: 260px; padding: 0; display: flex; flex-direction: column;} #content_table .myAccountProductInfo .productInfo .productPhoneInfo p {padding-bottom: 24px; margin: 0;} .myAccountProductServicesInfo {width:464px; float:left; border-left:1px solid #dfdfdf;} .productInformationContent {padding:20px 0 20px 0;} .bottomLinks {margin:24px 0;} ul.llkLinks {font-size: 14px; /*margin-left: 14px;*/} ul.llkLinks li {float: none; /*list-style:disc;*/ padding:0px 8px 16px 16px;} ul.llkLinks li a {border-left: 0 none; padding-left: 0;} ul.llkLinks li a.first-child {border-left: 0 none; padding-left: 0;} ul.serviceNav {} ul.serviceNav li {float:left;} ul.serviceNav li a {color: #333; font-family: VMUltramagneticNormalRegular; font-size: 1.13em; padding: 0 0 2px; text-transform: uppercase;} ul.serviceNav li a:hover, ul.serviceNav li a.serviceSelected {border-bottom: 3px solid #cc0000; text-decoration: none;} ul.serviceNav li a:first-child {padding-left:0px; border-left:0;} ul.dataMessageBox {display: table;} ul.dataMessageBox li.yellowBox {background: none repeat scroll 0 0 yellow;} ul.dataMessageBox li {background: #efefef; float: left; margin-left: 11px; padding: 8px 0; text-align: center; width: 129px;} ul.dataMessageBox li.first-child {margin-left:0px;} ul.dataMessageBox li span {display: block; font-weight: bold; padding: 2px 0 0;} .myAccountProductServicesInfo > div {padding-left:32px;} #currentServices .row {display: table; /*padding: 1em 0 !important;*/ width: 100%; margin: 0 0 24px 0;} #currentServices .col1 {display: table-cell; vertical-align: top; width: 47%;} #currentServices .col2 {display: table-cell; vertical-align: top; width: 20%; text-align:right;} #currentServices .col1 .content, #currentServices .col2 .content {padding-left: 0 !important; padding-right: 0 !important;} #currentServices .plansection .content > p, #currentServices .plansection ul.detailsList {margin-left: 0;} #currentServices li {margin-bottom: 0.2em;} #currentServices .detailsTitle h4 {font-size: 1.3em; margin-right: 10px;} #currentServices .col1 h4 {display: inline;} #currentServices .row.heading {padding-bottom:0px !important;} .content-area p {margin:0;} .price {text-align: right; padding-right: 12px;} #main-servicescontent-container #currentServices {padding-left: 0;} #currentServices .price {font-weight: bold;} .row.plansection.border-bottom {/* border-bottom: 1px solid #dfdfdf; */} .detailsListtitle {color:#2390b8; padding: 0 0 0;} #currentServices ul.detailsList {} #currentServices ul.detailsList {margin:3px 0 0 14px !important;} #currentServices ul.detailsList li {list-style:disc; padding-bottom:0.5em; margin-bottom:0;} #open-hide .row .col1 p, #open-hide .row .col2 p {margin-bottom: 8px; padding-bottom: 0;} #open-hide .row .col1 .content, #open-hide .row .col2 .content {margin-bottom: 0;} #currentServices .price {font-weight: bold; padding-right: 0;} .totalMonthlyCost {padding: 30px 16px; font-weight: 600; background: #E5E8F0; border-radius: 16px;} .totalMonthlyCost .price.ultra {padding-right: 0; font-size: 18px;} .totalMonthlyCost .content > span {font-size: 11px; font-weight: normal;} .totalPlan, .govt911Fee {padding: 16px 16px 16px 16px; background: #F3F2F0; border-radius: 16px; margin-bottom: 24px;} .totalPlan .price.ultra, .govt911Fee .price.ultra {padding-right: 0; font-size: 18px;} .totalMonthlyCost .col2 .plan-price {font-size: 18px;} #content_table .totalMonthlyCost .row {padding: 0px !important; margin-bottom: 0;} #content_table .amountLabel {float: left; font-weight: bold; width: 30%;} #content_table .amount {float: left;} .myAccountProductServicesInfo .changePlanContainer {background:#FFE1E3; padding:16px; /*margin: 10px 0 0 20px;*/ margin:0 0 24px; border-radius: 16px;} .grayPhoneWarningContainer {background: #FFE1E3; padding: 16px 24px; border-radius: 16px;} .prepaidRates {padding:0 0 5px;} .redErrorIcon {background-image: url("/assets/icons/green-circle-checkmark-red-circle-exclamation.png"); background-position:0px -46px; background-repeat: no-repeat; font-weight: normal; margin-bottom: 0 !important; margin-left: 0; margin-right: 0; margin-top: 0; padding:5px 0 5px 22px;} .grayErrorIcon {background: url("/assets/icons/information-gray-icon.png") no-repeat left center; font-weight: normal; margin-bottom: 0 !important; margin-left: 0; margin-right: 7px; margin-top: 0; padding: 0 0 1px 22px;} .changesHappeningNow {padding:0;} .changesHappeningNow ul {color: #3f3f3f; margin: 0 0 0 23px;} .changesHappeningNow ul li {list-style:disc; padding-top:1em;} .changesHappeningNow ul li span {font-weight:normal;} .changesHappeningNow ul li.effectiveDates {display:block;} .checkUsageContent {background:#fff; /*padding:15px 10px;*/ margin-bottom:20px;} .row.plansection.heading {margin-bottom: 15px;} .collapsechangesplanbtn {/*margin-bottom: 10px;*/} .collapsechangesplanbtn, .collapsebtn, .collapsebtncheckusage {cursor:pointer;} .checkUsageSign, .upcomingPlanChangesSign {color: #4E4AE4; font-weight: bold;} .viewPlanDetailsSign {color:#4E4AE4; /*float:left; width:12px;*/ vertical-align: middle;} .txtCenter {text-align:center;} .Fright {text-align:right;} .paymentHistoryTable, .paymentHistoryServices {/*border: 1px solid #dfdfdf;*/ width: 100%; margin-bottom: 50px; border-top:3px solid #000;} .paymentHistoryTable thead, .paymentHistoryServices thead {background-color: #eaeaea; font-weight: bold; padding-bottom: 20px; padding-top: 20px;} .paymentHistoryTable thead tr th, .paymentHistoryServices thead tr th {padding:12px 10px; border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9;} .paymentHistoryTable tbody tr, .paymentHistoryServices tbody tr {} .paymentHistoryTable tbody tr td, .paymentHistoryServices tbody tr td {border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9; padding: 15px 10px; vertical-align: top;} .paymentHistoryTable thead .paymentHistoryType {width: 100px;} .paymentHistoryTable thead .paymentHistoryDate {width: 124px;} .paymentHistoryTable thead .paymentHistoryAmount {width: 80px;} .paymentHistoryTable thead .paymentHistoryMethod {width: 97px;} .paymentHistoryTable thead .paymentHistoryDetails {width: 77px;} .paymentHistoryTable thead .paymentHistoryConfirmation {width: 75px; border-right:none;} .paymentHistoryServices thead .paymentHistoryType {width: 115px;} .paymentHistoryServices thead .paymentHistoryDate {width: 119px;} .paymentHistoryServices thead .paymentHistoryAmount {width: 65px;} .paymentHistoryServices thead .paymentHistoryMethod {width: 75px;} .paymentHistoryServices thead .paymentHistoryDetails {width: 140px; border-right:none;} .paymentHistoryServices thead .paymentHistoryConfirmation {width: 75px;} .paymentHistoryTable tbody tr td:last-child, .paymentHistoryServices tbody tr td:last-child {/*border-right: medium none;*/} .summaryTable {width: 90%; margin-top: 30px;} .summaryTable tbody tr {} .summaryTable tbody tr td {padding: 3px 0; vertical-align: top;} .border-summaryTable {border-bottom: thin solid #dbdbdb;} .colorRed {color:#c00;} .marginLeft {margin-left:0% !important;} .rightOR {color:#3f3f3f !important; display:block;} .activationSectionContainer .activationSectionInfo .tripleCol .col1 {/*float: left;*/ width: 30%; padding-right: 2.5%;} .activationSectionContainer .activationSectionInfo .tripleCol .col2 {/*float: left;*/ width: 40%; padding-right: 2.5%;} .activationSectionContainer .activationSectionInfo .tripleCol .col3 {/*float: left;*/ width: 30%;} .activationSectionContainer .activationSectionInfo .deviceBrandInput select {width: 97%;} .activationSectionContainer .activationSectionInfo .deviceModelInput select {height: auto !important; width: 97%;} .activationSectionContainer .activationSectionInfo .tripleCol .deviceBrandInput select, .activationSectionContainer .activationSectionInfo .tripleCol .deviceModelInput select, .activationSectionContainer .activationSectionInfo .tripleCol .hspahandsets select {height: 44px; line-height: 39px; padding: 0 8px;} .activationSectionContainer .activationSectionInfo .tripleCol .deviceBrandInput select option, .activationSectionContainer .activationSectionInfo .tripleCol .deviceModelInput select option, .activationSectionContainer .activationSectionInfo .tripleCol .hspahandsets select option {padding:3px;} .activationSectionContainer .activationSectionInfo .tripleCol .inputContainer .labelRow label {font-weight: normal !important;} .activationSectionContainer .activationSectionInfo p {margin-top: 0;} .tooltipIndicator.chooseDeviceType {left: -56px; position: relative; top: 19px;} .hspahandsets .tooltip-content .content {margin-bottom:0px !important;} .deviceModelInput select#productName {margin-top: 14px;} .deviceBrandInput .inputRow.select_box {height: 44px;} /*** Check Usage page New Table ***/ /*#usage-check-table-new {border-collapse: separate; margin: 0; padding: 0 0 10px; width: auto;} #usage-check-table-new table {margin:0 0 10px 0; border: 1px solid #ccc; width: 100%;} #usage-check-table-new tr.usage-header th {width: 31%;} #usage-check-table-new tr.usage-header th.first {width: 31%;} #usage-check-table-new tr.usage-header th {background: #4d4d4d !important; color: #fff !important; font-weight: bold !important; text-shadow: none !important;} #usage-check-table-new tr.usage-type th, #usage-check-table-new tr.usage-type td {border-top: 1px solid #d4d4d4;} #usage-check-table-new th {border: medium none; padding:0.6em 5px;} #usage-check-table-new th.usage-check-title {font-weight: bold; padding: 7px 5px;} #usage-check-table-new td {border: medium none; padding: 5px 5px 10px;} #usage-check-table-new tr.usage-type td {padding:10px 5px;} #usage-check-table-new tr:hover th, #usage-check-table-new tr:hover td {background: #efefef; text-shadow: 1px 1px 0 #fff;} */ .mobileHeaderOnly .contents {position: static !important; width: 100% !important; overflow: visible;} .sessionInvalidClass {min-height:500px; height:auto !important; height:500px; margin-top: 36px;} .what-you-need {height: 95px;} .changePin select {width: 310px;} .cUsage {display: table; width: 100%;} .cUsage .col1 {width: 53% !important;} .cUsage .col1 h2 {font-size: 26px; font-weight:600; /*padding-right: 60px;*/} .cUsage .col2 {width: 47%; text-align: right;} .row.steps-area {padding-top:0px !important; margin-top:0px !important;} .hotDealColumns {width:100%; float:left;} .hotDealCol1 {width:46%; float:left; padding:15px 5px 15px 0} .hotDealCol2 {width:46%; float:left; padding:15px 5px 15px 0} .topup-secure-amountContainer {width:100%; float:left; margin-left: 12px;} .topup-secure-amountContainer .columns {display: table; width: 100%; margin-bottom:8px;} .topup-secure-amountContainer .columns .fieldTitle {float: left; font-weight: bold; margin:5px 0; width: 27%;} .topup-secure-amountContainer .columns .fieldValue {float: left; margin:5px 0px; text-align: right; width: 30%;} .topup-secure-amountContainer .columns .border-summaryTable {/*border-bottom: 1px solid #dbdbdb; margin: 3px 0 5px;*/} .margBottom15 {margin-bottom:15px;} .margBottomLeft {margin-bottom:15px; margin-left:0px !important;} /* = login-module ----------------------------------------------- */ .smartLogin { margin-bottom: 2px; margin-left: 0px; padding-left: 0; position: relative;} .smartLogin h2 {/*border:0 none !important; border-bottom: none !important; text-transform: uppercase !important; font-size: 20px;*/ width: 310px; padding-bottom: 32px; font-size: 26px; font-style: normal; line-height: 120%; } .smartLogin h2.myaccount-postpaid-login-title {line-height: 35px;} .smartLogin h3 {border:0 none !important; color:#fff !important; margin: 13px 0 0 3px; padding:0 !important; border-bottom: none !important; font-size: 16px; word-spacing: -.02em;} .registration {display: block; position: relative; margin: 0 auto 32px 0px; padding: 0; width: 100%;} .fr .registration {height: 340px; margin: 0 auto 32px 0px; overflow: hidden; padding: 0; position: relative; width: 100%;} .registration h2 {text-transform: uppercase; font-size: 17px; line-height: 35px; margin: 0 0 0 -18px; overflow: hidden; padding: 3px 0 18px 21px;} .registration h3 {margin: 13px 0 0 3px; padding:0 !important; font-size: 20px; word-spacing: -.02em; text-transform: uppercase;} .registration p {font-size: 14px; line-height: 18px; margin-left: 3px; margin-top: 6px; margin-bottom:28px;} .smartLogin .input-field {position:relative; margin: 0 auto 32px 0px; padding: 0; display: block;} .smartLogin .input-field .Wrapper .col1 {float:left; width: 307px;} .smartLogin .input-field .Wrapper .col2 {float: none; clear: both; } .smartLogin .input-field input { font-family: poppinsregular, GraphikWeb, Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 14px; color: #131C35; padding: 11px 10px; width: 285px; float:left; background: #F3F2F0; border-bottom: 1px solid #131C35; border-radius: 4px 4px 0px 0px; } .smartLogin .input-field.h-space-adjust {/*margin-top: 10px !important;*/} .smartLogin .postpaid-login-button {display: block; margin-top: 32px;} /*CSS for Prepaid Section*/ .prepaid-login-box-container {min-height: 400px; position: relative; padding-left: 64px; border-left: 1px solid #CDCFD5;} .fr .prepaid-login-box-container {min-height: 400px; position: relative; padding-left: 64px; border-left: 1px solid #CDCFD5;} .prepaid-login-box-container .smartLogin {} .prepaid-login-box-container h2 {width: 310px; padding-bottom: 32px; font-size: 26px; font-style: normal; line-height: 120%;} .accss-custom-styles-init .prepaid-login-box-container h1 .redText {color: #E10A0A;} .promotion-wrapper { /*border-right: 1px solid #D6D5D5; display: inline; float: left; height: 330px; margin-right: 20px; overflow: hidden; padding: 0 50px 18px 6px; position: relative; width: 355px;*/ height: auto; overflow: auto; padding: 0 32px 18px 0; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; } .forgetLoginPassword h2 {color: #242424; font-size: 30px; line-height: 30px; text-transform: uppercase; padding-bottom: 18px;} .mob_container {width: 760px; padding: 0 0 30px 0; display:table;} .mob_container .col1 {/*width:460px;*/ margin-right:30px; float:left;} .mob_container label {color: #3f3f3f; float: left; font-size: 14px; padding-top: 5px;} .mob_container label br {display:none;} .mob_container .col2 {width:285px; float:left;} .mob_container .col2 input {border: 1px solid #c2c2c2; box-shadow: 1px 1px 2px #c7c7c7 inset; color: #666666; float: left; font-size: 14px; padding: 5px 2%; width: 96%; margin-bottom:8px;} .Wrapper.fieldContainer {padding: 30px 0 10px;} .Wrapper.fieldContainer button, .Wrapper.fieldContainer a {margin-right:10px;} .promotion-image {/*background: url("/assets/images/promotion-image.jpg") no-repeat scroll -5px 0 transparent; height: 73px; width: 400px;*/ } /*** Prepaid Login smart security profile ***/ .securityProfile {} .securityProfile .cmbSecretQuestion {border: 1px solid #c2c2c2; box-shadow: 1px 1px 2px #c7c7c7 inset; color: #666666; float: left; font-size: 14px; padding: 5px; width: 297px; margin-bottom: 8px;} .securityProfile .cmbSecretQuestion option {padding: 1px 2px 1px 0;} /* .smartLogin.leftBorder {border-left: 1px solid #CDCFD5; padding-left: 64px;} */ .promosMyAccount .promos .col1.privacy, .promosMyAccount .promos .col2.privacy { min-height: 40px !important; padding-top: 15px; padding-left: 12px; padding-right: 12px; width: 100% !important; } .topupBalancebox .topUpBalaceDetailListing {padding-left: 18px; width: 100%; display: table; padding-top: 5px;} .topupBalancebox .topUpBalaceDetailListing ul.standard-list li {float: left; list-style: outside none !important; margin-bottom: 0; margin-left: 0; padding: 0 2px;} .topupBalancebox .topUpBalaceDetailListing ul.standard-list li.seperator {display: block; padding:0 2px;} header.session-expire {display: none;} /* MyAccount Accordian ================================================================ */ .main-content-area.last.faqs #section3 {padding-top:45px;} ul.accordion-listing {border-top: 1px dotted #ccc; padding-bottom: 40px; margin-top: 20px; } ul.accordion-listing li {padding: 20px 0 10px 0; border-bottom: 1px dotted #ccc;} ul.accordion-listing a.accordion-vmc { text-align: left; width:100%; text-decoration: none;} ul.accordion-listing a.accordion-vmc.active, ul.accordion-listing a:hover {color: #2390B8 !important;} ul.accordion-listing .accordion-vmc { background: url(/assets/ui/elements/maverick/purple-circle-open.svg) top left no-repeat; height: 35px; line-height: 20px; padding-left: 35px; display: block; color: #333 !important; font-weight: bold !important;} ul.accordion-listing .accordion-vmc.active { background: url(/assets/ui/elements/maverick/purple-circle-close.svg) top left no-repeat !important; height: 35px !important; line-height: 20px; padding-left: 35px; display: block; color: #333; font-weight: bold;} ul.accordion-listing li ul.standard-list li {border-bottom: 0; padding-bottom: 0;} div.panel {padding: 0; background-color: white; margin:0 0 0 0; display:none;} table.price-data{border:solid 1px #d1d1d1; width:100% !important; background-color:#FFF; margin-top:20px;} table.price-data td {border-bottom: 1px solid #D1D1D1; font-size: 14px; padding: 20px; text-align: center;} td.ultra {background-color: #D1D1D1; color: #3F3F3F; font-size: 18px !important;} .padBottom + .panel {padding-bottom:10px;} table{text-align:left;} /* Accessibility Login Pages ================================================================ */ #inActiveWarningMsgDiv {text-align: center; display: none; padding: 20px 0;} #inActiveWarningMsgDiv .warningContainer {padding: 15px 20px;} #inActiveWarningMsgDiv .warningContainer .showTimer .timeLeft {font-weight: bold; color: #3f3f3f;} #inActiveWarningMsgDiv .sessionTimeOutContainer {padding:20px; display: none;} #inActiveWarningMsgDiv .sessionTimeOutContainer p {padding-bottom: 30px;} .showTimer {margin: 25px 0;} #counter {font-weight: bold; font-size: 25px;} .fancybox-skin {border-radius: 16px !important; color: #131C35 !important;} /* My Promotion Usage =============================================================== */ .myPromotionBox {background-color: #F3F2F0; /*margin-top: -16px;*/ margin-top: 0; padding:16px; border-radius: 16px;} .myPromotionDetailsContainer {width: 100%; /*float: left;*/ margin: 0 16px 8px 0;} .viewMyPromotionSign {color:#2390b8; display: inline-block; width:8px; text-align:right;} .myPromotionTitle {width: 80%;} .myPromotionDetailsContainer ul {padding: 10px 0 10px 0px;} .pad510 {padding: 5px 10px;} .myPromotionBox .mainContainer {margin: 0 0 8px 0; /*float: left;*/ width: 100%; display: flex; flex-direction: row;} .collapsebtnmyPromotionUsage {color: #2390b8;} .checkMyPromotionUsageContent {padding: 10px 0; margin: 0 0 0 30px;} .checkMyPromotionUsageContent li {padding: 3px 0; clear: both;} .myPromotionBox .er_mesgbox.margin-bottom {float: left;} .er_mesgbox p, .er_mesgbox li {background-image: url(/assets/icons/svg/maverick/error_myaccount.svg); background-position: 0 2px; background-repeat: no-repeat; margin: 0; padding: 2px 0 0 33px; margin-bottom: 0 !important; line-height:1.3em;} .er_mesgbox p.noIcon, .er_mesgbox li.noIcon {background-image: none; padding: 0;} .er_mesgbox .errorMesgGrayIcon {background: url("/assets/icons/information-gray-icon.png") no-repeat left 11px; font-weight: normal; margin: 0 7px 0 0; padding: 10px 0 10px 22px; color:#3f3f3f;} .er_mesgbox .errorMesgRedIcon {background-image: url(/assets/icons/svg/maverick/error_myaccount.svg); background-position: 0 6px; background-repeat: no-repeat; font-weight: normal; margin: 0 7px 0 0; padding:5px 0 5px 22px; color:#3f3f3f;} ul.error_listing {margin: 0; padding: 0;} ul.error_listing li {font-size: 13px; font-weight: normal; list-style: outside none none; margin: 0;} ul.error_listing li span {font-weight:bold;} .promoInnerTitle {font-weight: bold; /*margin-bottom: 18px;*/} .checkMyPromotionUsageContent li ul.checkUsageListing {margin: 0 0 0 30px; padding-bottom: 0;} .myPromotionButtonContainer {/*float: left;*/ font-weight: bold;} .topupButton.btnBasic.pad510.btnApplyPromo.btnDisable {background-color: #ccc; border: 2px solid #999; color: #666; cursor: text;} .topupButton.btnBasic.pad510.btnApplyPromo.btnDisable:hover {background-color: #ccc; border: 2px solid #999; color: #666; cursor: text;} /* credit card Refresh ================================================================ */ .creditCardInformationContainer {display: table; width: 100%;} .creditCardInformationContainer .ultra.padTop0 {padding-top: 0px;} .creditCardInformationContainer .creditCardInfo {background: #fafafa; border: 1px solid #c2cdd7; margin-bottom: 30px; padding: 30px 20px 20px 30px; width: 100%;} .creditCardInformationContainer #devicecardType, .cvdInformation, .creditCardInformationContainer #devicecardTypeEdit {float: left; margin-left: 10px;} .creditCardInformationContainer .nameOnCard a {line-height: 27px; font-size: 12px; font-weight: 600;} .creditCardInformationContainer #devicecardType img {margin: 0 2px;} #content_table .creditCardInformationContainer .row.creditcardContainer {margin: 32px 0 0 0; display: block;} #content_table .creditCardInformationContainer .row.addressContainer {margin-bottom: 0;} #content_table .creditCardInformationContainer .row.addressContainer .content {margin-bottom: 0;} #content_table .creditCardInformationContainer .row .col {width: 410px;} .creditCardInformationContainer .creditcardContainer {margin-top: 32px;} .creditCardInformationContainer .addressContainer h2 {font-size: 32px; padding-bottom: 32px;} .creditCardInformationContainer .addressContainer .billingAddressmyAccount {padding-bottom: 32px;} .inputContainer .inputRow input[type="text"], #myaccount_edit_list_form_box input[type="text"], .addressContainer .f-l > input[type="text"], .inputContainer .f-1 input[type="text"], .inputContainer .inputRow input[type="password"]{ width: 353px; border-radius: 4px 4px 0px 0px; background: #F3F2F0; padding: 13px 15px; color: #444D63; border-style: none none solid none !important; border-bottom: 1px solid #131C35 !important; } .modalPop-header {background-color: #e1e1e1; color: #131C35; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom: 1px solid #e5e5e5;} .modalPop-header a.close {background: rgba(0, 0, 0, 0) url(/assets/ui/buttons/close-big-x.png) no-repeat scroll center top; display: block; height: 20px; right: 25px; top: 20px; width: 20px; position: absolute;} .modalPop-header .modalpop-body {padding: 21px 10px 25px 0px !important; background-color: #fff; } .fancybox-item.fancybox-close {display: none;} .fancybox-skin {padding: 0 !important;} .heading, .modalpop-body {padding: 25px !important;} .cenCon {} .visaMasterCardContainer, .americanExpressContainer {width: 49%; float: left; margin: 30px 0; display: table-cell;} .creditCardInformationContainer .contactNumber .inputContainer .inputRow input {width: 83px;} .row.accss-focus-outline-override-bgwhite-elem.accss-inblock-profile-payment-recur.padTop0 {padding-top: 0px !important;} .popupColHead {font-size: 16px; font-weight: bold; margin: 0 0 10px 0;} .InnerDiv {margin-right: 15px;} .InnerDiv img {margin-top: 15px;} .typeCodeContainer {display: none;} .CreditCardmainInnerHeading {display: none !important;} .creditcardContainer .inputLabelcontainer {clear: both; font-size: 12px; padding: 5px 0 0 0; color: #444D63;} .creditcardContainer .colRow.contactphoneNumber {display: table !important; padding: 22px 0;} .addressContainer .multifield-line .inputContainer, .addressContainer .singlefield-line .inputContainer {width: 96% !important;} .addressContainer .postalCode {} #content_table .singlefield-line.row.column1, #content_table .singlefield-line.row.column2, #content_table .singlefield-line.row.column3 {display: table; float: left;} #content_table .singlefield-line.row.column1 {width: 32%;} #content_table .singlefield-line.row.column2 {width: 33%;} #content_table .singlefield-line.row.column3 {width: 33%;} .er_mesgbox.bot30 {margin-bottom: 30px;} .singlefield-line.row.column1 .countryCode /*{width: 378px;*/} .saveNextChk {width:5px;} .multifield-line .inputContainer label.saveNxtlbl {font-weight: normal; color: #737373;} .deviceImgInfo {margin: 7px 0 0 0;} .op5 {opacity: 0.2;} .op1 {opacity: 1;} .cvdInformation .cvdInfo {margin-top: 9px; font-size: 12px; font-weight: 600;} .creditCardInformationContainer #copyFromMail {color: #737373; height: 24px; width: 24px; position: relative; appearance: auto; vertical-align: middle; margin-right: 5px;} .billingAddressmyAccount .billingAddressmyAccountInner {margin: 0 0 0 33px; line-height:1.3em;} .saveNxtlbl .saveNextTime {margin-left: 4px;} .modalpop-body .btnHolder.Wrapper {text-align: left; margin-top: 0px; padding: 0 0 0 0;} .modalpop-body .desc {border: 1px solid #fff; height: 58px;} .creditCardInformationContainer .inputContainer .inputRow input.disabledInput {cursor: default; background: #f2f2f2; color: #666;} .btnLightbg {position: relative; width: 100%;} .btnBasic.btnInactive {background-color: #efefef !important; border-color: #9c9c9c;color: #9c9c9c; cursor: not-allowed !important; color: #333; color: #3a3a3a !important;} .btnBasic.btnInactive:hover {background-color: #efefef !important; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important; color: #333; color: #3a3a3a !important;} .content-container .btnloadercontainer.imgload {z-index: 999999; width: 36px; height: 39px; display: inline-block; margin: 0 0 0 8px;} #login-button.btnInactive {background-color: #efefef !important; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important; color: #333; color: #3a3a3a !important;} .row.addressContainer .inputPhoneLabelcontainer {clear: both; font-size: 11px; padding: 10px 0 0 0;} /** below this is used because acessibility only in HA overrides the classes **/ .accss-custom-styles-init #content_table .row.accss-inblock-profile-payment-recur.creditcardContainer .col1 .content {display: grid!important;} /*** Smart Banner Virgin Postpaid 2022 ***/ div#lm_Appstore {display: flex; padding: 10px 0; margin-top: 6px;} #vm_SmartBanner strong {font-weight: 700;} .fixed-nav {position: relative;top: 0;z-index: 1111111;text-align: left;line-height: 20px;color: #fff;font-size: 15px;font-family: GraphikWeb, Arial, Helvetica, sans-serif;} .bgGray {background: #2c2c2c !important;} .spacer10 {height: 10px;} .spacer20 {height: 20px;} .txtSize18 {font-size: 18px;} .floatL {float: left;} .clear {clear: both;} .col010 {width: 7%;} .col020 {width: 20%;} .col060 {width: 57%!important;} .pad-10-left {padding-left: 10px;} .pad-10-right {padding-right: 10px;} .bgBlack {background: #ccc;color:"#000";height: 18px;font-size: 12px;margin: 0;padding: 0 6px;} /*** Smart Banner ***/ #vm_SmartBanner {display: none;} .first-time-login-title.accss-not-registered .redText, .myaccount-postpaid-login-title .redText {color:#E10A0A;} .promotion-wrapper p { font-style: normal; font-weight: 400; font-size: 15px; line-height: 22px; margin: 0; } .accss-custom-styles-init .links-blue-on-bg-white, .accss-custom-styles-init .accss-focus-pseudo-outline-override a[href], .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a, .myAccountProductInfo .productInfo .productPhoneInfo a, .myAccountProductInfo ul.llkLinks li a, ul.llkLinks li a { font-weight: 600; font-size: 12px; color: #4E4AE4 !important; } .accss-custom-styles-init .links-blue-on-bg-white, .accss-custom-styles-init .accss-focus-pseudo-outline-override a[href]:hover, .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a:hover, .myAccountProductInfo .productInfo .productPhoneInfo a:hover, .myAccountProductInfo ul.llkLinks li a:hover, ul.llkLinks li a:hover { font-weight: 600; font-size: 12px; color: #4E4AE4 !important; } .myAccountProductInfo ul.llkLinks li:before {border: solid #4E4AE4; border-width: 0 2px 2px 0; display: inline-block; margin-left: -16px; padding: 2.5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); font-weight: bold; content:''} .myAccountProductInfo ul.llkLinks li a {padding-left: 10px;} .myAccountProductInfo .productInfo .productPhoneInfo h2.ultra {font-size: 26px; margin: 0;} .accss-custom-styles-init #openHideCheckUsage div.collapsebtncheckusage {font-size: 12px; font-weight: 600;} p#accssPrepaidAccordTitle1 {font-weight: 600;} #accssPrepaidAccordTitle1 span.red_link {font-size: 12px;} #currentServices .row.plansection .col1 .content p.totalPlanAndAdddonCost {font-weight: 600; margin-bottom: 7px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a {border-left: 1px solid #dddddd; padding: 0 10px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a:first-child {padding-left: 0; border-left: 0;} header .myAccountmenusup li.logout a {border: 2px solid #FFFFFF; border-radius: 4px; padding: 7px 16px !important; text-transform: inherit;} header .myAccountmenusup li:first-child {margin-top: 11px;} .accss-custom-styles-init #main-content-container #content_table .mainHeading {margin-top: 0;} .accss-custom-styles-init .accss-h2-style {font-size: 30px; margin: 0 0 30px; line-height: 1em; text-transform: inherit; letter-spacing: -0.6px;} #main-content-container .mainHeading {/*margin-bottom: 32px; padding: 0;*/} .noDataFound {display: flex; flex-direction: column; align-items: center; padding: 32px 16px; background: #E5E8F0; border-radius: 16px; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px;} .paymentHistoryTable, .paymentHistoryServices {width: 100%; margin-bottom: 0px; border-collapse: separate; border-spacing: 0; border-top: 0;} tr th { border-top: 1px solid #CDCFD5;} tr:first-child th:first-child {border-top-left-radius: 10px; border-left: 1px solid #CDCFD5;} tr:first-child th:last-child { border-top-right-radius: 10px; border-right: 1px solid #CDCFD5;} tr:first-child td:first-child { border-left: 1px solid #CDCFD5;} .paymentHistoryTable tbody:last-child tr:last-child td:first-child {border-bottom-left-radius: 10px;} .paymentHistoryTable tbody:last-child tr:last-child td:last-child {border-bottom-right-radius: 10px;} .paymentHistoryServices tbody:last-child tr:last-child td:first-child {border-bottom-left-radius: 10px;} .paymentHistoryServices tbody:last-child tr:last-child td:last-child {border-bottom-right-radius: 10px;} #changePasswordMenuDiv .modal-header { background-color: #e1e1e1; color: #131C35; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom: 1px solid #e5e5e5; } .heading, .modalpop-body {padding: 24px 32px !important;} #changePasswordMenuDiv ul.llkLinks li:before {border: solid #4E4AE4; border-width: 0 2px 2px 0; display: inline-block; padding: 2.5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); font-weight: bold; content: '';} #changePasswordMenuDiv ul.llkLinks li a {padding-left: 10px; font-weight: 600; font-size:14px;} .modal-header .heading h2 {margin-bottom: 0; padding-bottom: 0px;} #changePasswordMenuDiv .modal-body {padding: 32px;} .accss-custom-styles-init .table-reset-pad0-border0 .mainH { padding-bottom: 15px; } .accss-custom-styles-init .table-reset-pad0-border0 { padding: 0 !important; border: 0; } .accss-custom-styles-init .table-reset-pad0-border0 .myPromotionDetailsContainer { padding-left: 0; width: 100%; } .accss-custom-styles-init .table-reset-pad0-border0 .myPromotionDetailsContainer { padding-left: 0; width: 100%; } /*** Topup ***/ .topupConRow {margin: 0 0 48px 0;} .topupConRow a {font-weight: bold;} .topupConRow #section1 h2.ultra, #section2 h2.ultra {color: #131C35; font-size: 22px;} .topupConRow #section1 h2.ultra, #section2 h2.ultra {color: #131C35; font-size: 22px; margin: 0 0 32px; padding-bottom: 0;} .topupConRow #section1 h3.ultra, #section2 h3.ultra {color: #131C35; font-size: 18px;} .topupConRow #section1 .btnHolder, #section2 .btnHolder {text-align: left; margin-left: 8px; margin-bottom: 8px;} .topupConRow .btnBasic {padding: 7px 16px; font-size: 14px !important;} .topupConRow #section2 .columns h2.ultra {margin-bottom: 24px;} .what-you-need ul.standard-list, .how-to-do ul.standard-list {margin-left: 10px !important;} #topUp .col1.first-child {border-left: none; padding-left: 0;} #topUp .col3.last-child {padding-right: 0;} .what-you-need ul.standard-list {margin-left: 8px !important;} #section1, #section2 {font-size: 14px; padding: 0; overflow: hidden;} #topUp .col1, #topUp .col2, #topUp .col3 {border-left: 1px solid #CDCFD5; float: left; margin-bottom: 0; width: 267px; padding: 0 24px;} .topupConRow .how-to-do {margin-bottom: 16px;} .accss-custom-styles-init .topUp-content-area #hrefAU, .accss-custom-styles-init .topUp-content-area #hrefPad {margin-bottom: 0;} #section2 .hot-offer { background: url(/assets/icons/ho-red-flame-medium.png) no-repeat scroll 24px center #E5E8F0; margin-bottom: 24px; padding: 16px 24px 16px 50px; border-radius: 16px; } .accss-custom-styles-init #topUp #section2.accss-overflow-initial .columns {overflow: visible; margin-bottom: 48px;} #topUp #section2 .how-to-do {margin-bottom: 24px; height:auto;} #topUp #section2 .what-you-need {height: auto; margin-bottom: 24px;} #topUp .section-header a, #topUp .section-header a:hover {font-weight:bold !important; color: #4e4ae4;} .promo_callout {margin: 16px 0;} .addon-status-service {margin: 15px 0 0 0px;} #content_table ul.change-service-list li:before { border: solid #4E4AE4; border-width: 0 2px 2px 0; display: inline-block; padding: 2.5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); font-weight: bold; content: ''; } .change-service-list li a { padding-left: 10px; font-weight: bold; font-size: 12px; } .row a.linkunderline { text-decoration-line: underline; } ul.change-service-list li { padding: 8px 0px; float: none; } .content .change-service-list { margin: 16px 0 12px 0; } .content .change-service-list > li { list-style: none; margin-bottom: 0; padding-bottom: 0.5em;} .pendingOrders { margin-bottom: 16px; } .radioColumns {display: flex; flex-direction: row; flex-wrap: wrap;} .chkBox input#termsAndCond {width: 24px; height: 24px; border: 1px solid #858A99; vertical-align: middle; margin-right: 5px;} .newPlanCol2 .details_callout .details_callout_listing, .newPlanCol2 .details_callout .monthlyAnvTitle, .newPlanCol2 .details_callout .eligiblePromo { margin-bottom: 24px; } .newPlanCol2 .details_callout .details_callout_heading {margin-bottom: 12px;} .newPlanCol2 .details_callout li {margin: 0 20px 8px 20px;} .newPlanCol2 .details_callout .eligiblePromo .eligiblePromoTitle {margin-bottom: 12px; font-weight: bold;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a.noBorder {border-left: 0; padding-left: 0; vertical-align: middle;} #content_table .totalPlan .row.plansection, #content_table .govt911Fee .row.plansection {padding: 0px; margin: 0;} #usage-check-table-new .headsUpDesc {margin-top: 32px; display: flex; flex-direction: column; gap: 32px;} .accss-custom-styles-init h2.old-h3-css.font32PadBot12 {font-size: 22px; margin: 0 0 16px; font-weight: bold !important; line-height: 1.3em; text-transform: inherit;} .planAndAddonsStauts {} .planAndAddonsStauts strong {display: block; margin-bottom: 8px;} .myPromotionDetailsContainer {} .myPromotionDetailsContainer ul {padding: 10px 0 10px 0px; background: #E5E8F0; padding: 16px; border-radius: 16px;} .checkMyPromotionUsageContent {padding: 10px 0; margin: 10px 0 0px 0;} .checkMyPromotionUsageContent li {padding: 3px 0; clear: both;} .checkMyPromotionUsageContent li ul.checkUsageListing {margin: 0 0 0 0; padding-bottom: 0; padding-left: 0px;} .checkMyPromotionUsageContent li ul.checkUsageListing li {padding: 0 0 16px 0;} .bonusAutoOffer.LoggedInStatus {display: flex; width: 100%; flex-direction: column; margin-bottom: 48px;} p.accss-accord-button-title {font-weight: bold;} a.closePinDialog {background: url(/assets/icons/close.png) no-repeat right top; cursor: pointer; font-size: 20px; height: 15px; margin-top: 3px; position: absolute; width: 17px; top: 27px; right: 27px; font-weight: bold;} #content_table .colRow {/* display: table-row; */ display: flex; gap: 32px; width: 896px;} #content_table .row .col {width: 432px;} #content_table .creditCardInformationContainer .row .col { width: 100%; } .creditCardInformationContainer .nameOnCard { float: left; margin-left: 16px; margin-top: 9px; } #content_table .col1 .content, #content_table .col2 .content, #content_table .col3 .content, #content_table .rowHeading .content { padding: 0 30px 0 0px; margin-bottom: 24px; } .creditCardInformationContainer #devicecardType img { margin: 0 4px; width: 46px; height: 32px; } .creditCardInformationContainer .inputContainer .inputRow input#cvdNumber { width: 153px; } .creditCardInformationContainer .inputContainer .inputRow span#showHideCVD { color: #4E4AE4; position: absolute; top: 14px; right: 695px; } .expiryDateYearCon { display: flex; flex-direction: row; gap: 16px; } .expiry_date.select_box { width: 248px; display: flex; position: relative; } .expiry_year.select_box { width: 122px; display: flex; position: relative; } .expiryDate select.month_style, .expiryDate select.year_style { border-radius: 4px 4px 0px 0px; border: 1px solid #F3F2F0 !important; border-bottom: 1px solid #131C35 !important; background: #F3F2F0; padding: 5px 10px; color: #444D63; height: 44px; outline: 0; position: relative; appearance: none; } .expiry_date.select_box:after, .expiry_year.select_box:after { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #4e4ae4; position: absolute; top: 40%; right: 20px; content: ""; z-index: 98; } .multifields { display: flex; flex-direction: row; gap: 32px; } .provinceAddress.select_box { position: relative; width: 383px; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; } .provinceAddress select.State { border-radius: 4px 4px 0px 0px; background: #F3F2F0; padding: 13px 15px; color: #444D63; position: relative; appearance: none; border-style: none none solid none; border-bottom: 1px solid #131C35 !important; width: 100%; } .provinceAddress.select_box:after { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #4e4ae4; position: absolute; top: 40%; right: 20px; content: ""; z-index: 98; } #accss-lbl-term { margin-bottom: 12px; } .txtContent {padding-left: 47px;} #content_table .lightGreyBg p.tAmt {background: none; padding-left: 0; padding-bottom: 16px;} #content_table .lightGreyBg span#accss-topup-input {margin-right: 5px;} #content_table .lightGreyBg p.noIcon {margin-top: 16px;} .goodToKnow {padding: 16px 0 16px 0; display: table;} .goodToKnow strong {margin-bottom: 12px; display: block;} .pendingOrders, .content.changeServices, .content.currentServices { background: #F3F2F0; border-radius: 16px; padding: 16px !important; } #auto-toUp .how-to-do .bold, #preauthorized .how-to-do .bold, #lowBalance .how-to-do .bold {margin-bottom: 8px;} #auto-toUp .how-to-do ul.standard-list li {margin-bottom: 0;} #auto-toUp .btnHolder, #preauthorized .btnHolder, #lowBalance .btnHolder {margin-left: 0; margin-bottom: 0;} #topUp #section2 .how-to-do {margin-bottom: 0.8em; height: 155px;} #topUp #section2 #lowbalancetopup .how-to-do {height: auto;} .accss-custom-styles-init .topUp-content-area #hrefAU, .accss-custom-styles-init .topUp-content-area #hrefPad {margin-bottom: 0;} #preauthorized .what-you-need {margin-top: 24px;} .error-main-container.margTopBot24 {margin-top: 40px; margin-bottom: 40px;} .accss-custom-styles-init h1.accss-not-registered, .promotion-wrapper p, .promotion-wrapper a {margin-bottom: 32px;} .prepaid-login-box-container .error, #loginAAMSpt1 .smartLogin .error, .smartLogin.leftBorder .error {margin-bottom: 32px;} .promotion-image img {margin-bottom: 32px; height: 73px;} #loginAAMSpt1 .promotion-wrapper.noNumber h2 { font-size: 26px; padding: 0 0 0 0; word-spacing: 3px; width: 372px; letter-spacing: -0.6px; margin-bottom: 32px; } .promotion-wrapper.noNumber .redText { color: #E10A0A; } #loginAAMSpt1Mobile .promotion-wrapper.noNumber h2 { font-size: 26px; padding: 0 0 0 0; word-spacing: 3px; width: 372px; letter-spacing: -0.6px; margin-bottom: 32px; } .promotion-wrapper.noNumber .redText { color: #E10A0A; } body.dalLink .smartLogin.leftBorder { flex-grow: 0; order: 0; margin-left: auto; position: relative; right: 41px; } .accss-topupCC-rad ul.radio-listing li:last-child { padding-bottom: 0; } ul.radio-listing.accss-focus-outline-override.topOtherAmountInterac {padding-top: 0;} ul.radio-listing.accss-focus-outline-override.topOtherAmountInterac:first-child {padding-bottom: 0;} .toupHeadingContentRow {padding-bottom: 32px;} .toupHeadingContentRow h2 {padding-bottom: 16px;} .toupHeadingContentRow h2 p {padding-bottom: 0;} .topup-center-content {} #topUp .terms_and_cond {display: flex; flex-direction: column; width: 100%; flex-wrap: wrap;} #topUp .terms_and_cond #accss-lbl-term {margin-bottom: 16px;} fieldset.registerNewCard {display: flex; flex-direction: row; flex-wrap: wrap; gap: 15px; margin-top: 32px;} fieldset.registerNewCard label.fieldTitle {display: flex; justify-content: center; align-items: center; font-weight: 600; width: 37%;} fieldset.registerNewCard .select_box {width: 200px; display: flex; position: relative;} fieldset.registerNewCard select#labelNewCard {width: 200px;} .topup-center-content .btnHolder {margin-top: 32px;} .topup-center-content.topup-interac-menu ul.radio-listing:first-child {padding-bottom: 0 !important;} .redErrorIcon.tb .tc:first-child {width: 92%;} .accss-custom-styles-init #main-servicescontent-container .viewPlanDetailsSign.expendedImg {background: url("/assets/icons/svg/maverick/purple-circle-expand.svg") no-repeat left top; height: 15px; line-height: 15px; padding-left: 18px; display: inline-block; text-decoration: none; background-size: 15px; color: #4E4AE4;} .accss-custom-styles-init #main-servicescontent-container .viewPlanDetailsSign.collapsedImg {background: url("/assets/icons/svg/maverick/purple-circle-collapse.svg") no-repeat left top; height: 15px; line-height: 15px; padding-left: 18px; display: inline-block; text-decoration: none; background-size: 15px; color: #4E4AE4;} .topup-interac-menu .accss-topupCC-rad .inputWrapper, .topup-cc-menu .accss-topupCC-rad .inputWrapper {gap: 10px; display: flex; flex-direction: column; flex-wrap: wrap;} .rowCheckUsageContent {margin-bottom: 8px; margin-top: 16px;} .rowCheckUsageContent p {margin-bottom: 8px;} .newPlanCol1 .radioSection fieldset:last-child {margin-top: 16px;} .topupAmountBeforetexas {margin: 16px 0 6px 33px;} .content-area.topUp-content-area {padding-top: 32px;} /* main containers - lost or stolen ================================================================ */ .fboxContainer {display: flex; flex-direction: column; flex-wrap: wrap; gap: 32px;} .fboxContainer H1 {margin-bottom: 0px;} .fboxContainer.accss-focus-outline-override.forgetLoginPassword .mainHeading h1 {font-size: 32px; letter-spacing: -0.6px;} .fboxContainer .loststoleninfo ul.radio-listing.padTB {margin: 12px 0 0;} .fboxContainer .loststoleninfo ul.radio-listing li {flex-direction: column; flex-wrap: wrap;} .fboxContainer .loststoleninfo ul.radio-listing li:last-child {padding-bottom: 0;} .fboxContainer .why-register {margin: 0 0 0 20px;} .fboxContainer .why-register li {line-height:1.3em;} .fboxContainer strong.ques {padding-bottom: 0;} .fboxContainer .er_mesgbox {margin-bottom: 0px;} .fboxContainer .btnHolder {/*margin-top: 32px;*/} .fboxContainer .btnHolder input[type="submit"] {margin-right:16px;} .fboxContainer .paymentInfoTable .btnHolder.Wrapper.input-field {margin-top: 0;} .fboxContainer .paymentInfoTable .ccPaymentMethod .btnHolder {margin-top: 16px;} .planFeaturesTable {padding-top: 16px;} .planFeaturesTable strong {margin-bottom: 8px; display: block;} #content_table .payment-info-menu .row {margin: 0px !important;} #content_table .payment-info-menu .payment-center-container {display: flex; flex-direction: column; gap: 32px;} #content_table .payment-info-menu .payment-center-container #active_form_01 .btnHolder {margin: 0;} #content_table .payment-info-menu .payment-center-container .row.padTop0 .paymentInfoTable {display: flex; flex-direction: column; flex-wrap: wrap; gap: 32px;} .accss-custom-styles-init .table-reset-pad0-border0 {padding: 0 !important; border: 0; display: flex; flex-direction: column; gap: 32px;} .fboxContainer.payment-info .payment-info-menu {display: flex; flex-direction: column; gap: 32px;} /*** Smart Banner related changes ***/ #vm_SmartBanner button:focus, #vm_SmartBanner button:active, #vm_SmartBanner a:focus, #vm_SmartBanner a:active { outline: none !important; box-shadow: 0 0 3px 1px #257fa3, 0 0 3px 2px #257fa3 !important; } #vm_SmartBanner a#sb-button {color: #009DDB;} #vm_SmartBanner .col020 a {display: inline-block;} .navBox .top-wellcome-main-nav{ position: initial;margin-right: -807px;margin-top: 30px;} .accss-custom-styles-init #navigation-bar.accss-prepaid-nav {margin-left: 160px;} .accss-custom-styles-init .accss-prepaid-nav.accss-nav-wrapper .navBox a[href]#myServices + .Wrapper.main-inner-nav { margin-left:-324px!important;} .accss-custom-styles-init .accss-prepaid-nav.accss-nav-wrapper .navBox a[href]#topup + .Wrapper.main-inner-nav { margin-left: -488px!important;} .accss-custom-styles-init .accss-prepaid-nav.accss-nav-wrapper .navBox a[href]#myprofile + .Wrapper.main-inner-nav {margin-left:-652px!important;} .accss-custom-styles-init .accss-bg-white {padding: 11px 3px 2px 3px;} .billingAddressColumns {flex-basis: 50%;} .accss-custom-styles-init .myAccountProductInfo {padding:10px 0;} /* input[type=radio], input[type=checkbox] { overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 0px; height: 0px; white-space: nowrap; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=radio] + label, input[type=checkbox] + label { display: block; padding-left: 34px; font-size: 14px; font-weight: 400; font-style: normal; line-height: 135%; cursor: pointer; } input[type=radio] + label::before, input[type=checkbox] + label::before { content: ''; background: #fff; border: .1em solid rgba(0, 0, 0, .75); background-color: rgba(255, 255, 255, .8); display: block; box-sizing: border-box; float: left; width: 24px; height: 24px; margin-left: -35px; margin-top: 0; vertical-align: top; cursor: pointer; text-align: center; transition: all .1s ease-out; } input[type=radio] + label::before { border-radius: 100%; } input[type=radio]:checked + label::before { background-color: #4E4AE4; box-shadow: inset 0 0 0 0.35em rgba(255, 255, 255, .95); }*/ input[type=radio] { overflow: hidden; clip: rect(1px, 1px, 1px, 1px); width: 0px; height: 0px; white-space: nowrap; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=radio] + label { display: block; padding-left: 34px; font-size: 14px; font-weight: 400; font-style: normal; line-height: 135%; cursor: pointer; } input[type=radio] + label::before { content: ''; background: #fff; border: .1em solid rgba(0, 0, 0, .75); background-color: rgba(255, 255, 255, .8); display: block; box-sizing: border-box; float: left; width: 24px; height: 24px; margin-left: -35px; margin-top: -3px; vertical-align: top; cursor: pointer; text-align: center; transition: all .1s ease-out; } input[type=radio] + label::before { border-radius: 100%; } input[type=radio]:checked + label::before { background-color: #4E4AE4; box-shadow: inset 0 0 0 0.35em rgba(255, 255, 255, .95); } .chk_tb {display: table;} .chk_tb .chk_tr {position: relative; display: table-row;} .chk_tb .chk_tr .chk_tc {margin-top: 8px; display: table-cell; line-height: 1.3em;} .chk_tb .chk_tr .chk_tc:first-child {width: 35px; vertical-align: top;} .chk_tb .chk_tr .chk_tc:last-child span {margin-top: 0px; display: block;} .topOtherAmountInterac .chk_tb .chk_tr .chk_tc:first-child {width: 90px; vertical-align: middle;} .chk_tb .chk_tr .chk_tc:last-child {/*padding-top: 5px; padding-left: 5px;*/ vertical-align: middle;} .oopsMsg {font-size: 22px; font-weight: bold;} #content_table .fboxContainer.change-password .colRow:last-child .col1 .content, #content_table .fboxContainer.change-password .colRow:last-child .col2 .content, #content_table .fboxContainer.change-password .colRow:last-child .col3 .content {margin-bottom: 0;} #content_table .fboxContainer.change-pin .colRow:last-child .col1 .content, #content_table .fboxContainer.change-pin .colRow:last-child .col2 .content, #content_table .fboxContainer.change-pin .colRow:last-child .col3 .content {margin-bottom: 0;} .fboxContainer.change-password .btnHolder, .fboxContainer.change-pin .btnHolder {margin-top: 0px;} .fboxContainer .btnHolder .btnBasic {margin-right: 16px !important} .paymentSetTopupTerms h2.ultra {padding-bottom: 12px;} .paymentSetTopupTerms p.chkBox {position: relative;} .paymentSetTopupTerms p.chkBox input[type=checkbox] + label p {margin-left: 12px; margin-top: 6px;} .btnHolder.Wrapper .btnBasic {margin-right: 16px;} .main-forgot-container {width: 965px; margin: 64px auto 32px; padding: 32px 0 32px; position: relative; border: 1px solid #CDCFD5; border-radius: 10px 10px 10px 10px;} .fboxContainer.accss-focus-outline-override.forgetLoginPassword {padding: 0 32px;} .fboxContainer.forgetLoginPassword .colRow {display: flex; flex-direction: row; gap: 32px;} .fboxContainer.forgetLoginPassword .colRow .col {flex-basis: 50%;} .fboxContainer.forgetLoginPassword .colRow .col .content {width:100%;} .fboxContainer.forgetLoginPassword .colRow .col .inputContainer .labelRow {display: none;} .fboxContainer.forgetLoginPassword .colRow .col .content .inputContainer {display: flex; position: relative;} #topUp .topupConRow #section2 .how-to-do {height: auto;} .billingAddressColumns .multifield-line .f-l.select_box:after, .billingAddressColumns .singlefield-line .f-l.select_box:after, .inputContainer .f-l.select_box:after {border: 0px solid #ccc;} #openHideCheckUsage .er_mesgbox {margin-bottom: 24px;} #content_table .payment-info-menu .payment-center-container .er_mesgbox.headsupheading.accss-custom-remove-role-alert {background: #F3F2F0;} #content_table .payment-info-menu .payment-center-container .er_mesgbox.headsupheading.accss-custom-remove-role-alert .checkMyPromotionUsageContent li {background: none; display: flex;} .checkMyPromotionUsageContent li span:first-child {width: 14%;} .checkMyPromotionUsageContent li span:last-child {width: 80%;} .newPlanCol1 legend.rdHeading {font-size: 1.3em; width: 100%; margin: 0 0 24px;} #topUp .section-header .topupConRow a, #topUp .section-header .topupConRow a:hover {color: #fff;} #content_table .fboxContainer.customer-profile .email_pref_container ul.chkbox_listing li input[type="checkbox"], #content_table .fboxContainer.customer-profile #mdn_select_unselect ul.chkbox_listing li input[type="checkbox"] {width: 24px; height: 24px; border-radius: 2px;} #content_table .fboxContainer.customer-profile .email_pref_container ul.chkbox_listing li label, #content_table .fboxContainer.customer-profile #mdn_select_unselect ul.chkbox_listing li label {font-family: inherit;} #content_table .fboxContainer.customer-profile .email_pref_container .selectall, #content_table .fboxContainer.customer-profile #mdn_select_unselect .selectall {margin: 10px 0 0 0;} #content_table .fboxContainer.customer-profile .email_pref_container .selectall a, #content_table .fboxContainer.customer-profile #mdn_select_unselect .selectall a {font-size: 14px;} #content_table .myCustomerProfile .colRow {display: flex; flex-direction:row; gap: 32px; width: 896px;} #content_table .myCustomerProfile .colRow .col {width: 432px;} #content_table .myCustomerProfile .inputContainer .inputRow input {width: 353px; border-radius: 4px 4px 0px 0px; background: #F3F2F0; padding: 5px 15px 5px 10px; color: #444D63; height: 34px; border-style: none none solid none; border-bottom: 1px solid #131C35;} #content_table .myCustomerProfile .labelShow {line-height:32px; width: 353px; border-radius: 4px 4px 0px 0px; background: #F3F2F0; padding: 5px 15px 5px 10px; color: #444D63; height: 34px; border-style: none none solid none; border-bottom: 1px solid #131C35;} #content_table .myCustomerProfile .inputContainer.threeColumn .inputRow input {width: 93px;} #content_table .myCustomerProfile .inputContainer .inputRow select[name='secretQuestionMyAcnt'] {width: calc(100% - 12px); border-radius: 4px 4px 0px 0px; background: #F3F2F0; padding: 5px 15px 5px 10px; color: #444D63; height: 44px; border-style: none none solid none; border-bottom: 1px solid #131C35;} #content_table .myCustomerProfile .inputContainer .inputRow.select_box {width: 378px;} #content_table .myCustomerProfile .inputContainer .inputRow.select_box select {width: 100%;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap {display: flex; flex-direction: row; gap:12px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l {position: relative; margin-right: 0;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l.dateMonth {width:160px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l.dateDay {width:97px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l.dateYear {width:97px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l select.date-month {width: 160px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l select.date-day {width: 97px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l select.date-year {width: 97px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l.select_box:after {border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #4e4ae4;} #content_table .fboxContainer.customer-profile #accss_your_email_preferences { font-size: 16px; margin-bottom: 16px; display: flex; padding-top: 16px;} #content_table .fboxContainer.customer-profile .email_pref_container .accss-customer-profile-hot-offers-label {font-weight: 600;} #content_table .fboxContainer.customer-profile .email_pref_container {padding-bottom: 17px;} #content_table .fboxContainer.customer-profile #accss_your_text_message_preferences {font-size: 16px; margin-bottom: 12px; display: flex;} #content_table .fboxContainer.customer-profile #customer_hot_offers_label_2 {font-weight: 600; margin-top: 11px;} #content_table .fboxContainer.customer-profile .accss-customer-profile-online-marketing-container {} #content_table .fboxContainer.customer-profile .custom-msg h2 {font: bold 14px poppinsregular, GraphikWeb, Arial, Helvetica, sans-serif; font-size: 22px; padding: 0 0 16px; text-transform: inherit;} #content_table .fboxContainer.customer-profile ul.relevant_ads_rad {margin: 3px 0 0 0; padding: 0 0 0px !important;} #content_table .fboxContainer.customer-profile ul.relevant_ads_rad li {display: flex; float: none; line-height: inherit !important; margin: 0 0 16px 0; width: 95% !important;} #content_table .fboxContainer.customer-profile ul.relevant_ads_rad li:last-child {margin-bottom: 0;} #content_table .fboxContainer.customer-profile .custom-message ul.chkBoxListing li input[type="checkbox"] {width: 24px; height: 24px; border-radius: 2px; border: 1px solid #858A99; background: #fff; margin-right: 12px;} #content_table .fboxContainer.customer-profile .accss-custom-margin-bottom-45 {margin-bottom: 0px;} #content_table .myCustomerProfile .inputContainer .inputRow ul.preflangList {display: flex; margin-top: 12px;} #content_table .myCustomerProfile .inputContainer .inputRow ul.preflangList li {margin: 0 16px 0 0; padding: 0;} #content_table .myCustomerProfile .inputContainer .inputRow ul.preflangList li input {width: 15px; height: 19px; float: left; margin-right: 6px; background: none !important; padding: 0 !important; border-style: none none solid none !important; border-bottom: 0px solid #131C35 !important; border-radius: 0;} #content_table .custom-message {padding: 0;} #content_table .custom-message h2 {font-size: 22px;padding: 0 0 24px;} #content_table .custom-message p {padding: 0 0 24px;margin-bottom: 0;} #content_table .custom-message ul.chkBoxListing {margin: 0; padding: 0;} #content_table .custom-message ul.chkBoxListing li {margin: 0; padding: 0; display: flex; position: relative;} #content_table .custom-message ul.chkBoxListing li input[type="checkbox"] {} #content_table .custom-message ul.chkBoxListing li label {width: 100%;} #content_table .custom-message ul.chkBoxListing li label .surv {padding-top: 2px; display: block;} /*** Smart Banner related changes ***/ #vm_SmartBanner button:focus, #vm_SmartBanner button:active, #vm_SmartBanner a:focus, #vm_SmartBanner a:active { outline: none !important; box-shadow: 0 0 3px 1px #257fa3, 0 0 3px 2px #257fa3 !important; } #vm_SmartBanner a#sb-button {color: #009DDB;} #vm_SmartBanner .col020 a {display: inline-block;} .content.underline-links-paragraph-container.currentServices {margin-bottom: 32px;} .fboxContainer.payment-set-autotopup .btnHolder {margin-top: 32px;} ul.chkbox_listing li {position: relative;} .email_pref_container input[type=checkbox] {position: absolute; top: auto; overflow: hidden; white-space: nowrap; appearance: none; -webkit-appearance: none; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px;} .email_pref_container input[type=checkbox] + label {display: block;padding-left: 2em;} .email_pref_container input[type=checkbox] + label::before {content: '';background: #fff;border: 1px solid #858A99;background-color: rgba(255, 255, 255, .8);display: block;box-sizing: border-box;float: left;width: 24px;height: 24px;margin-left: -1.6em; margin-top: -2px; vertical-align: top;cursor: pointer;text-align: center;transition: all .1s ease-out;margin-right: 5px; border-radius: 2px; border: 1px solid var(--greyscale-accessible, #858A99); background: var(--greyscale-white, #FFF);} .email_pref_container input[type=checkbox] + label::after {display: block; content: ''; position: absolute; top: .5em; left: .5em; width: 1em; height: 1em; transform: rotate(0deg); transition: all .1s ease-out;} .email_pref_container input[type=checkbox]:checked + label::after {top: .1em; left: 1.1em; width: .4em; height: 1.2em; border-right: .25em solid #4E4AE4; border-bottom: .25em solid #4E4AE4; transform: rotate(45deg);} .email_pref_container input[type=checkbox]:disabled + label::after {border: none;} .accss-customer-profile-hot-offers input[type=checkbox] {position: absolute; top: auto; overflow: hidden; white-space: nowrap; appearance: none; -webkit-appearance: none; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px;} .accss-customer-profile-hot-offers input[type=checkbox] + label {display: block;padding-left: 2em;} .accss-customer-profile-hot-offers input[type=checkbox] + label::before {content: '';background: #fff;border: 1px solid #858A99;background-color: rgba(255, 255, 255, .8);display: block;box-sizing: border-box;float: left;width: 24px;height: 24px;margin-left: -1.6em; margin-top: -2px; vertical-align: top;cursor: pointer;text-align: center;transition: all .1s ease-out;margin-right: 5px; border-radius: 2px; border: 1px solid var(--greyscale-accessible, #858A99); background: var(--greyscale-white, #FFF);} .accss-customer-profile-hot-offers input[type=checkbox] + label::after {display: block; content: ''; position: absolute; top: .5em; left: .5em; width: 1em; height: 1em; transform: rotate(0deg); transition: all .1s ease-out;} .accss-customer-profile-hot-offers input[type=checkbox]:checked + label::after {top: .1em; left: 1.1em; width: .4em; height: 1.2em; border-right: .25em solid #4E4AE4; border-bottom: .25em solid #4E4AE4; transform: rotate(45deg);} .accss-customer-profile-hot-offers input[type=checkbox]:disabled + label::after {border: none;} #content_table .custom-message input[type=checkbox] {position: absolute; top: auto; overflow: hidden; white-space: nowrap; appearance: none; -webkit-appearance: none; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px;} #content_table .custom-message input[type=checkbox] + label {display: block;padding-left: 2em;} #content_table .custom-message input[type=checkbox] + label::before {content: '';background: #fff;border: 1px solid #858A99;background-color: rgba(255, 255, 255, .8);display: block;box-sizing: border-box;float: left;width: 24px;height: 24px;margin-left: -1.6em; margin-top: -2px; vertical-align: top;cursor: pointer;text-align: center;transition: all .1s ease-out;margin-right: 5px; border-radius: 2px; border: 1px solid var(--greyscale-accessible, #858A99); background: var(--greyscale-white, #FFF);} #content_table .custom-message input[type=checkbox] + label::after {display: block; content: ''; position: absolute; top: .5em; left: .5em; width: 1em; height: 1em; transform: rotate(0deg); transition: all .1s ease-out;} #content_table .custom-message input[type=checkbox]:checked + label::after {top: .1em; left: 1.1em; width: .4em; height: 1.2em; border-right: .25em solid #4E4AE4; border-bottom: .25em solid #4E4AE4; transform: rotate(45deg);} #content_table .custom-message input[type=checkbox]:disabled + label::after {border: none;} .programming-codes .accss-table-container {display: flex;} footer .contents .myAccountContainer ul li button#ot-sdk-btn {color: #4E4AE4 !important; text-decoration: none; font-size: 12px; border-left: 1px solid #D4D4D4 !important; padding: 0 10px !important; line-height: 17px !important; background: none; height: 14px; border:0px;} footer .contents .myAccountContainer ul li button#ot-sdk-btn:hover {color: #4E4AE4; text-decoration:underline;} /*Override focus of myaccount login footer*/ .accss-custom-styles-init footer .myAccountContainer button:focus {outline: none !important; box-shadow: 0 0 0px 3px #2d2d2d, 0 0 2px 3px #2d2d2d, 0 0 4px 5px #257fa3, 0 0 2px 5px #257fa3 !important;} .dropNotice {min-height: 75px; background-color: #f3f2f0; -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.3); position: relative; color: #131c35; top: 0; width: 100%; z-index: 1;display: none;} .bannerCommunityContainer .absolute-sm, .dropNotice .closeBox, .overlayContainer {position: absolute;} .fr .dropNotice {padding: 5px 0 10px;} .dropNotice .content-area {background-color: transparent; height: 100%; padding-top: 0; min-height: 100%;} #addaline-container, .addalineaccountbox .boxTop {background-color: #e5e5e5;} .dropNotice .content-area .contents {padding: 15px 0 !important; text-align: right; height: 100%; width: 100%;} .dropNotice .bannerBox {display: table; min-height: 45px; width: calc(100% - 40px); table-layout: fixed;} .dropNotice .bannerImgBox, .dropNotice .bannerInfoBox, .dropNotice .bannerSeparator, .dropNotice .ctaBox {display: table-cell; vertical-align: top;} .dropNotice .bannerImgBox {padding-right: 10px; width: 35px;} .dropNotice .bannerInfoBox {height: 100%; padding-right: 33px; text-align: left; font-size: 16px; width: 100%;} .dropNotice .bannerInfoBox h3 {color: #333; font-size: 22px; margin-bottom: 0;} .dropNotice .bannerSeparator {color: #000; font-size: 38px; padding: 0 20px 10px;} .dropNotice .ctaBox {padding-right: 10px;} .dropNotice .btnBasic, .dropNotice .callus {margin-right: 20px; white-space: nowrap;} .dropNotice .closeBtn {padding: 5px; font-size: 20px; color: #fff; display: inline-block;} .dropNotice .callus span {font-size: 16px; line-height: 1.2em;} .dropNotice .callus h4 {font-size: 20px; padding: 0 10px 0 0;} .fr .dropNotice .callus h4 {padding: 0 10px;} .dropNotice .iconBox {display: table-cell; width: 34px; text-align: left;} .dropNotice .bannerInfoBox p {margin-bottom: 1em; line-height: 22px;} #iecheck.dropNotice {background: #000; border-top: 2px solid #e10a0a;} #cta-bar .box a:not(.btnBasic), #page-end-alert-banner a, .dropNotice a:not(.btnBasic) {color: #4e4ae4 !important; text-decoration: underline;} .dropNotice.tempBanner .content-area {padding-bottom: 0;} .dropNotice.tempBanner .bannerInfoBox p {line-height: 1.2em;} /* Used Media Queries for all myAccount Pages ================================================================ */ @media screen and (min-width:1440px) { } @media screen and (min-width:1200px) { .content-container.colone {width: 1168px;} #targetBanner, #loginAAMSpt1, #loginAAMSpt1-prepaid {width:552px;} .prepaid-login-box-container, .fr .prepaid-login-box-container {width: 472px;} .mobileHeaderOnly {display: none;} .mobileHeaderOnlyLeft {display:none;} footer .contents {padding: 0; max-width: 1200px; width: 100%;} .smartLogin.leftBorder {width: 472px;} } @media screen and (max-width:1200px) { body {background: none no-repeat scroll center top #fff;} .contents {max-width: 965px; width: 100%;} .width830 {width:830px;} .mobileHeaderOnly {display: none;} .mobileHeaderOnlyLeft {display:none;} .promotion-wrapper.noNumber h2 {width:375px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label.sorryemptyMessage {margin-bottom: 20px !important;max-width: 100%;} /* WCCR 346 */ .welcome-container .accountDetailsBox {min-height:170px; display: -webkit-flex; display: flex;} /* WCCR 346 */ /*** logonIn page ***/ .content-container.colone {width: 962px;} targetBanner, #loginAAMSpt1, #loginAAMSpt1-prepaid {width:448px;} .prepaid-login-box-container, .fr .prepaid-login-box-container {width: 416px;} .smartLogin.leftBorder {width: 416px;} footer .contents {max-width: 96%; width: 100%;} } @media screen and (max-width:1024px) { /*body {background: none no-repeat scroll center top #fff;} .contents {max-width: 965px; width: 100%;} .width830 {width:830px;} .mobileHeaderOnly {display: none;} .mobileHeaderOnlyLeft {display:none;} .promotion-wrapper.noNumber h2 {width:375px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label.sorryemptyMessage {margin-bottom: 20px !important;max-width: 100%;} .welcome-container .accountDetailsBox {min-height:170px; display: -webkit-flex; display: flex;} */ } @media screen and (max-width:1023px) { html {height: 100% !important;} body {margin: 0; min-height: 100% !important; padding: 0; position: relative; font-size: 14px !important; bckground-color: ##360a0b;} header, nav {display:none !important;} .hide-on-wide-myaccount { display: block; } #main-content-container .innerPadding, #content_table .row .content {padding: 0 15px;} .white-container {width: auto;} header .contents ul.myAccountmenusup {display:none;} #myAccountheader {padding-bottom: 10px !important;} .myHotDeals {margin-top:0; margin-left:13px;} #content_table td:first-child {width: 40%; border-top: 2px solid #2d2d2d;} .width830 {width:100%;} .mobileHeaderOnly > a {display: block; margin: 0 0 3px;} .header2{line-height: 28px;} .smartLogin .input-field input {display:block; float:none;} /*.smartLogin .input-field:first-child {margin:0 0 35px; width:auto;}*/ .change.prepaid-diff-phone {left: 0 !important; top: 18px !important; width: 100% !important;} .my-account-forgot-password-prepaid {float: left; left: 0 !important; margin-bottom: 15px !important;} .smartLogin .input-field + .input-field input {margin-bottom:0px;} /* .prepaid-login-box-container, .prepaid-login-box-container h2 {padding-left:0px !important; margin-left:0px !important; margin-top:25px;} .prepaid-login-box-container { width:auto !important; height:481px !important;} */ .content-area.topUp-content-area.en .contents {width:92%;} .smartLogin .input-field + .input-field input {margin-bottom: 5px !important;} .my-account-forgot-password-prepaid {width: 175px !important;} .smartLogin .input-field button {/*margin-top:14px;*/} body.menu-visible {overflow-y: hidden;} #page {right:0;} /*.menu-visible #page { position: fixed; display:block; top:0px; }*/ /*** Smart Banner changes for sliding panel menu top opx to auto ***/ .menu-visible #page { position: fixed; display:block; /*top:0px;*/ top:auto; } /*.mobileHeaderOnly { background: #333; width:80%; height: 100%; position: fixed; top: 0px; right:0px; z-index: 1000; display:none; }*/ /*** Smart Banner changes for sliding panel menu top opx to auto ***/ .mobileHeaderOnly { background: #333; width:80%; height: 100%; position: fixed; /*top: 0px;*/ top: auto; right:0px; z-index: 1000; display:none; } .mobileHeaderOnly-mobiletopbar .contents { width: 95%; margin: 0 auto; text-align:left; } .mobileHeaderOnlyLeft { background: #eaeaea; width:80%; height: 100%; position: fixed; top: 0px; left:0px; z-index: 1000; display:none; } .mobileHeaderOnlyLeft .contents > a, .mobileHeaderOnly .contents > a { display:block; height: 78px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b41d21+1,ca2025+50,b41d21+100 */ background: #b41d21; /* Old browsers */ background: -moz-linear-gradient(left, #b41d21 1%, #ca2025 50%, #b41d21 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #b41d21 1%,#ca2025 50%,#b41d21 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #b41d21 1%,#ca2025 50%,#b41d21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b41d21', endColorstr='#b41d21',GradientType=1 ); /* IE6-9 */ } footer {height: auto; position:static;} footer .contents {max-width:96%; margin:0px auto;} footer .contents .myAccountContainer ul {float: none; margin:0;} footer .contents .myAccountContainer ul li {float: none; margin-right:15px; margin-bottom:10px; display:block; text-align:center;} footer .contents .myAccountContainer .colLinks {float:none; width:100%; display:block;} footer .contents .myAccountContainer .colCopyright {float:none; margin-top:30px; width:100%; display:block; text-align:center;} footer .contents .myAccountContainer .colCopyright { margin-top: 0!important; } footer .contents .myAccountContainer {margin-bottom: 0 !important;} .smartLogin .input-field input {width:98%;} .promotion-image { width: 280px !important; } .mobileHeaderOnly .contents, .mobileHeaderOnlyLeft .contents {text-align:left !important;} /* #topUp #section1 .col1, #topUp #section1 .col2, #topUp #section1 .col3, #topUp #section2 .col1, #topUp #section2 .col2 {background: #efefef !important; border-top: 5px solid #02afe2 !important; border-left:none; padding:30px 0; !important;} #topUp .col1, #topUp .col2, #topUp .col3, #topUp #section2 .col1, #topUp #section2 .col2 {width:100%;} .btnHolder {text-align: left; padding-left:15px;} .btnHolderInner {text-align: left;} #section1, #section2 {padding:0px;} #topUp .col1, #topUp .col2, #topUp .col3, #topUp #section2 .col1, #topUp #section2 .col2 {padding: 14px 5% !important; width: 90%;} #topUp #section2 .col1, #topUp #section2 .col2 {height: auto !important;} .how-to-do {margin-top: 20px;} #content_table .col1 .content, #content_table .col2 .content, #content_table .col3 .content, #content_table .rowHeading .content {padding:0px !important;} .content-container (width:auto !important;) */ .terms-condition h1 {font-size: 1.2em;} .hide-on-narrow { display: none;} .show-on-narrow { display: block;} #topUp-card, #credit-card, #interac {width:95%; margin:0px auto;} #auto-toUp, #preauthorized {width:500px;} /*Prakash Write it AmarPrakash need to check where as it is fine or not */ #main-content-container{margin-top: 32px;} .labelShow, .inputContainer.province select {width:288px;} .colone {width: 95%} .spacer {width:auto !important;} #edit_list th {} #edit_list table thead th, .paymentHistoryTable thead tr th, .paymentHistoryServices thead tr th { display:none; } #edit_list table tbody tr td, .paymentHistoryTable tbody tr td, .paymentHistoryServices tbody tr td { box-sizing: border-box; clear:left; float:left; width:100% !important; padding:15px 5px 15px 10px; border-right:0px !important; } .paymentHistoryTable tbody tr td.Fright, .paymentHistoryServices tbody tr td.Fright, .paymentHistoryTable tbody tr td.txtCenter, .paymentHistoryServices tbody tr td.txtCenter { text-align:left !important; } #edit_list table tbody tr td b.ui-table-cell, .paymentHistoryTable tbody tr td b.ui-historyTable-cell, .paymentHistoryServices tbody tr td b.ui-historyTable-cell { /*display: inline-block; min-width: 28%;*/ display: block; float: left; width: 28%; } #content_table .row.payment-info-menu td:first-child {font-weight:bold; width:100%;} #edit_list table tbody tr td strong, .paymentHistoryTable tbody tr td strong, .accss-custom-styles-init .paymentHistoryTable tbody tr td strong, .paymentHistoryServices tbody tr td strong, .paymentHistoryServices tbody tr td strong, .accss-custom-styles-init .paymentHistoryServices tbody tr td strong { display: block; float: left; text-align: center; width: 10%; } .paymentHistoryTable tbody tr td strong:first-child, #edit_list table tbody tr td strong:first-child, .paymentHistoryServices tbody tr td strong:first-child, #edit_list table tbody tr td strong:first-child { width: 40%; text-align:left; } .paymentHistoryTable tbody tr td > span, .paymentHistoryServices tbody tr td > span { float: left; width: 100%;} #terms .table .term-table {display: none;} .newPlanCol1, .newPlanCol2, .buddiesCol1, .buddiesCol2 {width:auto; float: none; border-right: medium none;} .PadTop0 {padding-top:20px !important;} #usage-check-table {width:100%;} #usage-check-table tr.usage-header th.first, #usage-check-table tr.usage-header th {width:auto;} .row.addLabel .inputContainer .inputRow {width: 285px;} #content_table .row .col {width:auto !important;} .inputContainer .inputRow input {width:285px;} .phoneStickCol1, .phoneStickCol2 {width: 100% !important;} .phoneStickCol1 .inputContainer {padding-bottom:30px;} .phoneStickCol1 .inputContainer .inputRow input {width:230px;} .inputContainer.threeColumn .inputRow input {width:89px;} .txtContent {padding-left: 35px; width: auto;} .programToFinishCol1 {margin:15px 0 0;} .programToFinishCol1, .programToFinishCol2 {width:auto;} .programToFinishCol1 .content, .programToFinishCol2 .content {padding: 0 !important;} table.planFeaturesTable {width:auto;} .planTable {width: auto;} .multifield-line .row, .singlefield-line .row {width: 100% !important;} #myaccount_edit_list_form_box input {width:160px;} /*.flyoutMenu {z-index:9999; overflow-y:scroll;} .flyoutMenu li {display:block; position:relative; padding:0 0 0 15px; list-style:none; border-bottom: 1px solid #d6d6d6;} .flyoutMenu li a {color: #353535; display: block; font-family: VMUltramagneticNormalRegular; font-size: 1.35em; font-weight: normal; outline: medium none; padding: 10px 15px; text-transform: uppercase;} .flyoutMenu li a:hover {color:#2390b8;} .flyoutMenu li a.selectedRightMenu {color:#333333; font-family:Arial, Helvetica, sans-serif; text-transform:none; font-weight:bold;} .flyoutMenu li:first-child {border-top: 1px solid #d6d6d6;} */ .logoMobile {margin: 10px 0 7px 1%;} .flyoutMenu { overflow:auto; float:none; height: 100%; -webkit-overflow-scrolling:touch; } .flyoutMenu > li {} .flyoutMenu > li.has-subnav {background: url("/assets/icons/right-menu-plus.png") no-repeat scroll 90% 16px rgba(0, 0, 0, 0);} .flyoutMenu > li.has-subnav.m-expanded {background: url("/assets/icons/right-menu-minus.png") no-repeat scroll 90% 16px rgba(0, 0, 0, 0);} .flyoutMenu > li > a {color: #fff; display: block; font-family: VMUltramagneticNormalRegular; font-size: 1.35em; font-weight: normal; padding: 10px 15px; text-transform: uppercase; outline:0; outline:none;} .flyoutMenu > li:hover > a {/*color: #34a8d6; */} /* bottom right first level */ .mobileHeaderOnly .flyoutMenusup { position:absolute; bottom:0px; width:100%; height: 50px; background: #eaeaea;} .mobileHeaderOnly .flyoutMenusup .expanded { height: 200px; } .mobileHeaderOnly .flyoutMenusup > li { float: left; width:34%; text-align:center; border-top: 1px solid #d6d6d6;} .mobileHeaderOnly .flyoutMenusup > li:not(:nth-child(3n)) {width: 33%} .mobileHeaderOnly .flyoutMenusup > li:not(:nth-child(3n)) a {border-right: 1px solid #d6d6d6;} .mobileHeaderOnly .flyoutMenusup > li > a {font-weight: bold; color: #333; font-size: 1.35em; text-decoration: none; outline:none; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; display:block;} .mobileHeaderOnly .flyoutMenusup > li:hover > a {color: #34a8d6;} .mobileHeaderOnly .flyoutMenusup > li.abbrev {cursor: pointer;} /* .vmcheader .vmcmenusup > li.currentprovince {background: url("/assets/images/abbrev-clear-normal.png") no-repeat scroll 58px 16px transparent; } .vmcheader .vmcmenusup > li.currentprovince > a { color: #34a8d6; } .vmcheader .vmcmenusup > li.cart span { padding-left: 2px; } */ /* second level */ .flyoutMenusup > li > ul { position:fixed; bottom:0px; right: 0px; width:80%; height: 100px; display: none; } .fr .flyoutMenusup > li > ul {width: 80%;} .flyoutMenusup > li.m-expanded > ul { display:block; } .mobileHeaderOnly > * > ul > li > ul { background:none repeat scroll 0 0 #eaeaea; color: #333; display: none; border-top: 1px solid #d6d6d6;} .mobileHeaderOnly > * > ul > li > ul > li { margin-left: 16px; padding:7px 16px 7px; font-weight: normal !important; padding-right: 1px; text-decoration: none; } .mobileHeaderOnly > * > ul > li > ul > li > a {font-weight: bold;} .mobileHeaderOnly > * > ul > li > ul > li a {color: #333; height: 100%; display: block; padding: 5px 0 5px 0;} .mobileHeaderOnly > * > ul > li > ul > li a:hover {color: #2882a5;} .mobileHeaderOnly > * > ul > li > ul > li .subhead {font-weight: bold;} /* third level */ .vmcheader .icons li { float: left; text-align: center; text-transform: none; width: 80px; vertical-align: middle; margin-top: 15px; padding-top:8px; padding-bottom: 8px;} .vmcheader .icons li:not(:first-child) { border-left: 1px solid #d6d6d6; } .vmcheader .hot-offers {background: url("/assets/icons/ho-red-flame-small.png") no-repeat scroll 76px 2px / auto 19px transparent;} .fr .vmcheader .hot-offers {background-position: 96px 2px;} .mobileHeaderOnly .flyoutMenu .subnav .list li, .mobileHeaderOnly .flyoutMenu .subhead {font-size: 1.1em;} .mobileHeaderOnly .flyoutMenu .subnav .list li {padding: 5px 0;} .mobileHeaderOnly .flyoutMenu .subhead {padding: 5px 0; display: block;} .mobileHeaderOnly .flyoutMenu .subnav .list li a, .mobileHeaderOnly .flyoutMenu .subhead a {padding: 0;} #main-content-container .mainHeading {/*padding: 0 15px;*/} .colone {padding: 0 15px; width: auto !important;} .promosMyAccount .promos .col1.privacy, .promosMyAccount .promos .col2.privacy {min-height: 100% !important; padding: 15px; width: auto !important;} .topupBalancebox .topUpBalaceDetailListing {padding-left: 0;} header.session-expire {display: none;} #content_table td:first-child { border-top: 0px solid #2d2d2d;} /* WCCR 346 */ .welcome-container .accountDetailsBox {min-height:170px; display: -webkit-flex; display: flex;} /* WCCR 346 */ .smartLogin {/*padding-left:0 !important; margin-left:0; width:auto !important; margin-bottom: 30px; float:left;*/ padding-bottom: 32px;} .smartLogin .input-field.h-space-adjust {/*margin-top: 10px !important;*/} .smartLogin .postpaid-login-button {/*display: block; float: left; margin-top: 0px !important;*/} .prepaid-login-box-container {/*float: right;*/ height: auto; padding-left: 0; position: relative; width: 98%; border-left: 0;} .fr .prepaid-login-box-container {width:auto; padding-left:0px;} .prepaid-login-box-container h2 {padding-left:0px;} .smartLogin.leftBorder {display: block; height: auto; padding-left: 0; position: relative; width: 98%; border-left: 0;} .smartLogin.leftBorder .smartLogin .input-field {margin-bottom: 0;} .promotion-wrapper {border-top: 1px solid #CDCFD5; height: auto; overflow: hidden; padding: 32px 0 0; position: relative; width: 100%; display: block;} .fr .promotion-wrapper {padding: 32px 0 0;} .smartLogin .input-field .Wrapper .col1 {width: 100%;} .smartLogin .input-field input.field-locked {background-position: calc(100% - 8px) center;} .accss-custom-styles-init .smartLogin h2.myaccount-postpaid-login-title, .accss-custom-styles-init .smartLogin h1.myaccount-postpaid-login-title {width:100%;} #loginAAMSpt1Mobile {width: 100%;} .registration {border-right:none; border-top: 1px solid #d6d5d5; display: block; float: left; height: auto; margin: 15px 0 0px; overflow: hidden; padding: 32px 0; position: relative; width: 100%;} #loginAAMSpt1Mobile .promotion-wrapper.noNumber h2 {width: 100% !important;} .prepaid-login-box-container .error, #loginAAMSpt1 .smartLogin .error, .smartLogin.leftBorder .error {display: table;} .accss-custom-styles-init .smartLogin h2.myaccount-postpaid-login-title, .accss-custom-styles-init .smartLogin h1.myaccount-postpaid-login-title {width: 100% !important;} footer .contents .myAccountContainer ul li a {border-left: 0; padding: 0;} body.dalLink .smartLogin.leftBorder { flex-grow: 0; order: 0; margin-left: unset; position: relative; right: 0; } fieldset.registerNewCard label.fieldTitle {width: 100%;} /*.main-content .contents {padding: 32px 0; max-width: 96%; width: 100%;} #content_table {padding: 0 16px;} #content_table .contents {padding: 0; max-width: 100%; width: 100%;} */ .main-content .contents {max-width: 90%; width: 100%;} #content_table .contents {padding: 0; max-width: 100%; width: 100%;} #main-content-container .innerPadding, #content_table .row .content {padding: 0;} #topUp .topupConRow .col1 {width: 26%;} #topUp .topupConRow .col2 {width: 34%;} #topUp .topupConRow .col3 {width: 25%;} .creditCardInformationContainer .inputContainer .labelRow, .inputContainer .inputRow {clear: both; position: relative; display: flex; flex-direction: row; flex-wrap: wrap;} #content_table .colRow {width: 100%; display: block;} #content_table .row .col {width: 100% !important;} .inputContainer .inputRow input {width: calc(100% - 36px);} #content_table .row .col {float: none;} .paymentHistoryTable tbody {border: 2px solid #CDCFD5; margin-bottom: 32px; display: table; width: 100%; border-radius: 16px;} .paymentHistoryServices tbody {border: 2px solid #CDCFD5; margin-bottom: 32px; display: table; width: 100%; border-radius: 16px;} .paymentHistoryTable tbody tr td:last-child, .paymentHistoryServices tbody tr td:last-child {border-bottom: 0px solid #CDCFD5;} table.table-remove-blank.paymentHistoryTable thead tr th {display: table-cell;} table.table-remove-blank.paymentHistoryTable tbody {border: 0px solid #c9c9c9; margin-bottom: 0px; display: revert; width: 100%; border-radius: 0;} table.table-remove-blank.paymentHistoryTable tbody tr td { box-sizing: border-box; clear: left; float: none; width: auto !important; padding: 15px 5px 15px 10px; border-right: 1px solid #c9c9c9 !important;} table.table-remove-blank.paymentHistoryTable tbody tr td:last-child, .paymentHistoryServices tbody tr td:last-child {border-bottom: 1px solid #c9c9c9;} table.table-remove-blank.paymentHistoryTable tbody tr:first-child td:first-child {border-left: 1px solid #c9c9c9;} table.table-remove-blank.paymentHistoryTable tbody tr td > span {float: none; width: 100%;} .payment-center-container.payment-info-menu {} .payment-center-container.payment-info-menu table.paymentHistoryTable tbody {border: 0;} .payment-center-container.payment-info-menu table.paymentHistoryTable tbody tr {border: 2px solid #CDCFD5; display: table; width: 100%; margin-bottom: 32px; border-radius: 16px;} .payment-center-container.payment-info-menu table.paymentHistoryTable tbody:last-child {margin-bottom: 0;} } @media screen and (max-width:800px) { #main-content-container {margin-top: 0; background: #fff; width: 100%; display: table; padding: 32px 0; position: relative; border-radius: 0; border: 0;} #content_table {padding: 0;} footer .contents {max-width: 100%; margin: 0px auto;} #topUp .topupConRow .col1, #topUp .topupConRow .col2, #topUp .topupConRow .col3 {width: 100%; display: block; padding: 0 0 32px 0; border-bottom: 1px solid #CDCFD5;} #topUp .topupConRow #section1 h3.ultra, #section2 h3.ultra {margin-bottom: 16px;} #topUp .topupConRow .what-you-need {height: auto; margin-bottom: 24px;} #topUp .topupConRow .what-you-need p {margin-bottom: 8px !important;} #topUp .topupConRow .what-you-need ul.standard-list {margin: 0px !important;} #topUp .topupConRow .col2, #topUp .topupConRow .col3 {border-left: 0; padding-top: 32px;} #auto-toUp, #preauthorized {width: 100%; display: block;} #topUp #section2 .how-to-do {margin-bottom: 24px; height: auto;} .topupNowMenu #section2 .btnAlign {text-align: left;} .topUpSliderTab {width: 92%;} .topUpSliderTab .rz-tick-value:not([aria-current="true"]) {display: none;} .topUpSliderTab .rz-tick.pointer span {font-weight: 600;} .topUpSliderTab .rz-tick-value[aria-current="true"] {transform: initial; text-align: center; left: 78px;} .creditCardInformationContainer .inputContainer .labelRow, .inputContainer .inputRow {display: flex; flex-direction: row; flex-wrap: wrap;} .creditCardInformationContainer .nameOnCard {margin-left: 0;} .creditCardInformationContainer #devicecardType, .cvdInformation, .creditCardInformationContainer #devicecardTypeEdit {margin-left: 0;} .billingAddressColumns {display: block; width: 100%;} #content_table .singlefield-line.row.column1, #content_table .singlefield-line.row.column2, #content_table .singlefield-line.row.column3 {display: table; float: left; width: 100% !important;} .inputContainer .multifields {display: block;} .step-container {/*display: none;*/} #currentServices {padding-left: 0;} .welcome-container .accountDetailsBox .welcomeMessage {width: auto; float: none; padding-bottom: 32px; border-bottom: 1px solid #CDCFD5;} .welcome-container .accountDetailsBox .topupBalancebox {border: none; float: none; width: auto; padding-top: 24px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox {float: left; width: 70%; padding-left: 0;} .welcome-container .er_mesgbox:first-child {margin-top: 32px;} .myAccountProductInfo {float: none; width: auto;} .myAccountProductServicesInfo {border: none; float: none; width: auto; padding-top: 24px; border-top: 1px solid #CDCFD5;} footer .contents .myAccountContainer {margin-bottom: 0 !important;} .promosMyAccount {width: 100%;} .promosMyAccount .promos {height: auto;} .promosMyAccount .promos .col, .promosMyAccount .promos .col1, .promosMyAccount .promos .col2 { float: none; width: 100%; margin-bottom: 0; padding-bottom:0px;} .promosMyAccount .promos .col1 {margin-bottom:5px;} .promosMyAccount .promos .col2 {margin-left:0px;} .myAccountProductServicesInfo > div {padding-left: 0;} .myAccountProductServicesInfo .changePlanContainer {margin-left: 0;} #main-content-container .mainPromosHeading {margin-top: 20px; padding: 0 15px;} .topup-secure-leftalign .fieldTitle, .left-content .fieldTitle {width: 75%;} .topup-secure-amountContainer.margBottomLeft {width: 100%;} .topup-secure-amountContainer {float: none; margin-left: 0; width: 100%;} .topup-secure-amountContainer .columns {display: table; width: 100%;} .topup-secure-amountContainer .columns .fieldTitle {float: left; font-weight: bold; margin: 5px 0;width: 69%;} .topup-secure-amountContainer .columns .fieldValue {float: left; margin: 5px 0; text-align: right; width: 30%;} ul.radio-listing label {float: left; width: 92%;} #main-content-container .mainHeading {margin-top: 20px;} .mob_container {width:100%;} .mob_container .col1 label {padding-bottom: 10px;} .smartLogin.leftBorder {border-left: 0px solid #d6d5d5;} ul.accordion-listing li ul.standard-list li {width: auto;} #content_table .col1, #content_table .col2, #content_table .col3 {display: block;} #content_table #main-servicescontent-container .col1, #content_table #main-servicescontent-container .col2, #content_table #main-servicescontent-container .col3 {display: table-cell;} #content_table .fboxContainer.change-pin .colRow .col:last-child .content {margin-bottom: 0;} #content_table .fboxContainer.change-password .colRow:last-child .col1 .content {margin-bottom: 24px;} #content_table .fboxContainer.change-pin .colRow:last-child .col1 .content {margin-bottom: 24px;} #content_table .col1 .content, #content_table .col2 .content, #content_table .col3 .content, #content_table .rowHeading .content {padding: 0px;} .accss-custom-styles-init #content_table .row.accss-inblock-profile-payment-recur .inputContainer {display: block;} .inputContainer .multifields {flex-direction: column;} .inputContainer .inputRow input[type="text"], .addressContainer .f-l > input[type="text"], .inputContainer .f-1 input[type="text"], .inputContainer .inputRow input[type="password"], #myaccount_edit_list_form_box input[type="text"] { width: calc(100% - 32px); } .provinceAddress.select_box {width: calc(100% - 1px);} .expiryDateYearCon {flex-direction: column; width: 100%;} .expiry_date.select_box {display: flex; margin-bottom: 12px; width: 100%; } .creditCardInformationContainer .inputContainer .inputRow input#cvdNumber {width: calc(100% - 32px);} .creditCardInformationContainer .inputContainer .inputRow span#showHideCVD {right: 15px;} .addressContainer .multifield-line .inputContainer, .addressContainer .singlefield-line .inputContainer {width: 100% !important;} .expiry_year.select_box {width: 100%;} .accss-custom-styles-init .billingAddressColumns .singlefield-line.row.column1 .countryCode {width: calc(100% - 32px) !important;} tr:first-child td:first-child {border-left: 0px solid #CDCFD5;} .welcome-container .er_mesgbox, #content_table .row.removeRowBorder .er_mesgbox {/*margin-bottom: 32px;*/} .redErrorIcon {padding: 32px 0 5px 0;} .myPromotionDetailsContainer {width: 80%;} .myPromotionButtonContainer {float:right} .myAccountProductInfo .productInfo {flex-direction: column; gap: 0;} .myAccountProductInfo .productInfo .productPhoneInfo h2.ultra {padding: 24px 0 24px;} #content_table .myAccountProductInfo .productInfo .productPhoneInfo p {padding-bottom: 24px;} .bottomLinks {margin: 0;} .myAccountProductServicesInfo .cUsage .col1 h2 {padding-bottom: 0;} #content_table .myCustomerProfile .colRow {width: 100%; display: block;} #content_table .myCustomerProfile .colRow .col {width: 100%;} #content_table .myCustomerProfile .labelShow {width: calc(100% - 32px);} #content_table .myCustomerProfile .inputContainer .inputRow input {width: calc(100% - 32px);} #content_table .myCustomerProfile .inputContainer .inputRow.select_box select {width: calc(100% - 6px);} #content_table .myCustomerProfile .inputContainer .inputRow.select_box {width: 99%;} #content_table .myCustomerProfile .inputContainer.threeColumn .inputRow input {width: calc(26% - 12px);} #content_table .myCustomerProfile .inputContainer .inputRow select[name='secretQuestionMyAcnt'] {width: calc(100% - 6px);} .accss-custom-styles-init .email_pref_container .accss-customer-profile-hot-offers li:first-child {margin-left: 0px !important;} .accss-custom-styles-init .chkbox_listing.accss-customer-profile-hot-offers li:first-child {margin-left: 0px !important;} .myCustomerProfilepreferences #mdn_select_unselect {width: 100%;} .accss-custom-styles-init .email_pref_container .accss-customer-profile-hot-offers, .accss-custom-styles-init .chkbox_listing.accss-customer-profile-hot-offers {margin-top: 0px;} #content_table .myCustomerProfile ul.chkbox_listing li {width: 100%;} .topupNowMenu #auto-topup {padding-bottom: 32px; margin-bottom: 0;} .topupNowMenu #preauthorized {padding-bottom: 32px; margin-bottom: 0; padding-top: 32px;} .topupNowMenu #topUp #section2 .how-to-do {height: auto;} .topupNowMenu .nonLoggedIn .combBox {margin-bottom: 32px; border-bottom: 1px solid #CDCFD5; padding-bottom: 32px;} #topUp #section2 .how-to-do {margin-bottom: 0.8em; height: auto;} #currentServicesWrapper .col1, #currentServicesWrapper .col2 {display: block;} .cUsage .col1 {width: 100%;} .cUsage .col2 {width: 100%; text-align: left; margin-top: 16px; margin-bottom: 8px;} #main-servicescontent-container span.red_link {display: block;} .accss-custom-styles-init .accss-your-email-preferences {width: 100%;} .email_pref_container ul.chkbox_listing li {display: block; width: 99%;} .accss-custom-styles-init .chkbox_listing.accss-customer-profile-hot-offers li {display: block; width: 99%;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a {display: block; border-left: 0; padding: 0 0 0 0;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail a:last-child {padding-top: 8px;} .myPromotionTitle {width: 100%;} .fr .welcome-container .accountDetailsBox .topupBalancebox .balanceBox .topUpBalaceDetail {width: auto;} /* WCCR 346 */ .welcome-container .accountDetailsBox {min-height:170px; display: -webkit-block; display: block;} /* WCCR 346 */ } @media screen and (max-width:640px) { #content_table > #arrow_list_link {float: none; text-align: center; margin-right: 0;} #content_table > #arrow_list_link a {margin-bottom: 10px;} #content_table .activationSectionInfo .tripleCol {display: block;} #content_table .activationSectionInfo .col1, #content_table .activationSectionInfo .col2, #content_table .activationSectionInfo .col3 {display: block; float: none; width: 100%; padding: 15px 0;} .smartLogin .input-field .Wrapper .col1, .smartLogin .input-field .Wrapper .col2, .smartLogin .input-field input {float: left; width: 100% !important;} .smartLogin .input-field input {box-sizing: border-box;} .smartLogin .input-field input.field-locked {/*background: transparent url("/assets/images/input-field-locked-new.png") no-repeat scroll right center;*/} .prepaid-login-box-container, .fr .prepaid-login-box-container {/*float:left;*/} .mob_container label br {display:block;} .mob_container label {line-height:20px;} /*** Prepaid Login smart security profile ***/ .securityProfile .cmbSecretQuestion {width:100%;} /*.welcome-container .accountDetailsBox .topupBalancebox .balanceBox label {max-width: 294px;} */ .topupBalancebox .topUpBalaceDetailListing {line-height: 0; padding: 10px 12px 0 12px;} .topupBalancebox .topUpBalaceDetailListing ul.standard-list li {float: none; list-style: outside none disc !important; margin-bottom: 0; margin-left: 0; padding: 5px 0;} .topupBalancebox .topUpBalaceDetailListing ul.standard-list li.seperator {display: none;} .welcome-container .accountDetailsBox .topupBalancebox .topupButton {position: relative; top: 0; white-space: nowrap; right:0; float:left; margin-bottom: 0px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label span.suspenedClass {color: #666; float: left; font-size: 14px;} .myPromotionDetailsContainer {width: 100%; margin-bottom: 24px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l select.date-month {width: 133px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l select.date-day {width: 88px;} #content_table .myCustomerProfile .inputContainer .birth-date-wrap .f-l select.date-year {width: 88px;} .welcome-container .accountDetailsBox .topupBalancebox .innerBalanceBox {flex-direction: column;} .welcome-container .accountDetailsBox .topupBalancebox .topupNowBtn {text-align: left;} .myPromotionBox .mainContainer {margin: 0 0 8px 0; width: 100%; flex-direction: column;} #currentServices .col1 {width: 40%;} .newPlanCol1 { border-right: 0px solid #CDCFD5; padding-top: 0px; flex-basis: 100%;} .newPlanCol2 {flex-basis: 100%; box-sizing: border-box; padding-left: 0px;} .newPlanCol2 .details_callout {background: #F3F2F0; border-radius: 16px; padding-top: 16px; padding-left: 32px; padding-bottom: 16px;} .myAccountProductInfo .productInfo .productPhoneInfo {width: auto;} .er_mesgbox p, .er_mesgbox li {background-image: url(/assets/icons/green-circle-checkmark-red-circle-exclamation.png); background-position: 0px -50px; padding: 25px 0 0 0;} .topupAmountBeforetexas {margin: 16px 0 6px 0;} .fboxContainer .btnHolder .btnBasic {display: block;} .fboxContainer .btnHolder .btnBasic:last-child {margin-top: 15px;} /*ul.radio-listing li {margin-bottom: 16px; display: flex; width: auto; background: #F3F2F0; border-radius: 4px; padding: 15px; border: 2px solid #F3F2F0;} ul.radio-listing li.selected {border: 2px solid #4E4AE4; background: none;} */ /*** Smart Banner ***/ #vm_SmartBanner {display: block;} .dropNotice .ctaBox {display: block; padding-top: 10px; text-align: center; position: absolute; right: 0; top: 0;} .dropNotice {height: auto; padding: 10px 0 15px;} .dropNotice .bannerInfoBox {display: block; width: 100%; text-align: center; padding-top: 30px; padding-right: 0;} .dropNotice .bannerBox {padding-top: 0; display: block; width: 100%;} .dropNotice .ctaBox {display: block; padding-top: 10px; text-align: center; position: absolute; right: 0; top: 0;} } @media screen and (max-width:480px) { .welcome-text {position: absolute; right: 15px; top: 60px;} .mobileHeaderOnly .flyoutMenusup > li > a {font-size: 1em;} .promotion-wrapper.noNumber h2 {width:auto;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox {width:100%; /*margin-top:54px;*/} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox {max-width:100%; } .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label span {font-size: 0.9em; width: 100%; line-height:14px;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label.sorryemptyMessage {max-width: 100%;} .welcome-container .accountDetailsBox .topupBalancebox .balanceBox label.suspendedMessage {max-width: 100%;} ul.standard-list li, ul.accordion-listing a.accordion-vmc {width: auto;} ul.accordion-listing .accordion-vmc:nth-of-type(1) {padding-bottom: 10px;} table.price-data td {font-size: 14px !important; padding: 10px !important; text-align: center;} /*ul.accordion-listing .accordion-vmc {line-height: 16px !important;}*/ ul.accordion-listing .accordion-vmc {height: auto !important; padding-bottom: 5px !important;} ul.accordion-listing .accordion-vmc.active {height: auto !important;margin-bottom: 10px;} .dropNotice {top: 2px;} } /* My Addon Page Add on are list style */ .change-service-list > li { list-style: outside disc; margin-bottom: 0; padding-bottom: 0.5em;} .change-service-list {margin:0;} .why-register > li {list-style: outside disc; margin-bottom: 0; padding:5px;} /*CC not Register Remove Padding Top */ .row.payment-info-menu.noPaddingTop {padding-top: 0 !important;} .row.noPaddingTop {padding-top: 0 !important;} .birth-date-wrap .info-fl {display: none;} .inputRow.label_esn_change {margin-top: 7px;} .current-service-list li {font-weight: normal; list-style: inside disc; padding: 0.5em;} h2.marginTop20 {margin-top: 20px;} .marginTop12 {margin-top: 12px;} .error-main-container.Wrapper.autoTopup {margin-bottom: 30px;} .error-main-container.Wrapper.mBottom30 {margin-bottom: 30px;} .er_mesgbox.margin-bottom {/*margin-bottom: 15px;*/} .home-next-cc-payment{font-size: 12px;} .grayTable.noMarginTop {margin-top: 0;} .newPlanCol2 .details_callout li {list-style: inherit; margin-left: 13px;} .Wrapper.ServiceAmount {width: 70%;} .Wrapper.ServiceAmount .amountLabelConfirm {float: left; font-weight: bold; margin-right: 6px; padding: 0.4em 0; width: 30%;} .Wrapper.ServiceAmount .amountPrice {float: left; padding: 0.4em 0; width: 12%; text-align:right;} .Wrapper.ServiceAmount .colon {float: left; font-weight: bold; padding: 0.4em 0; width: 5%;} .links.postpaid-password-days {display: none !important;} .marginTop30 {margin-top: 30px;} select.cmbSecretQuestion { color: #666 !important; font-size: 14px; padding: 8px; width: 97%; } /*My Account Pin Reset CSS */ .content-container.colone.forgetLoginPassword .errorMessage {margin-bottom: 0 !important;margin-top: 20px !important;} .forgotten-pin-answer-label { margin-bottom: 5px;} .forgotten-pin-question-label { margin-bottom: 5px;} .content-container.colone.forgetLoginPassword > p {font-size: 14px; color: #3f3f3f;} .mob_container .forgetPasswordinput {float: left;width: 46% !important;margin-right: 30px;} .col1-label {color: #333;font-size: 14px;text-align: right;} .Wrapper.fieldContainer.forgetPassword {padding-top: 10px;} .mob_container.forgotPIN {margin-top: 30px;} .smartLogin .input-field input#secretAnswerMyAcnt.default {padding: 5px!important;width: 285px;} .smartLogin .input-field input#userEmailAddr.default {padding: 5px!important;width: 285px;} .smartLogin .input-field input#orderConfirmNumber.default {padding: 5px!important;width: 285px;} .smartLogin .input-field input#secretAnswerMyAcnt.idle {padding: 5px!important;width: 285px;} .smartLogin .input-field input#userEmailAddr.idle {padding: 5px!important;width: 285px;} .smartLogin .input-field input#orderConfirmNumber.idle {padding: 5px!important;width: 285px;} .smartLogin .input-field input#secretAnswerMyAcnt.focus {padding: 5px!important;width: 285px;} .smartLogin .input-field input#userEmailAddr.focus {padding: 5px!important;width: 285px;} .smartLogin .input-field input#orderConfirmNumber.focus {padding: 5px!important;width: 285px;} /*My Account Pin Reset CSS */ /*WCCR_299 - Top Message banner in prepaid my account*/ .welcomeMessage.Wrapper > p {width: 97%;} /*WCCR_299 - Top Message banner in prepaid my account*/ /* Q3 BRP */ .warningMessage {color: red;font-weight: bold;} /* Q3 BRP */ .Wrapper.fieldContainer button, .Wrapper.fieldContainer a { margin-right: 10px; float: left; } .Wrapper.fieldContainer label a {float: none; margin-right: 0;} /* Online Marketing Preferences */ .readlesstext, .showhidetext {display: none;} ol.numbered-list.myaccount li { list-style: decimal inside; /* font-size: 14px; */ color: inherit; margin: 0 0 .5em 2em; list-style-position: outside; } #MbtooltipcustomMobileAds[aria-hidden="true"] { display: none; } /***** AAM overrite for login page *****/ .red {color: #e10a0a;} /***** BUTTON CLASSES *****/ /* basic buttton - red */ .btnBasic { display: inline-block; padding: 10px 30px; border-radius: 4px; border: 2px solid #E10A0A; background-color: #E10A0A; background-image: none; color: #fff; font-weight: bold; font-size: 16px; line-height: 1em; text-decoration: none !important; cursor: pointer; text-decoration: none; text-align: center; font-family: inherit; } .btnBasic:hover { background-color: #eb0000; border-color: #eb0000; color: #fff; text-decoration: none; } .btnSecond { background-color: transparent; } .btnSecond:hover, .btnBlackbg .btnSecond:hover { color: #000; background-color: #eee; border-color: #eee; } /* background specific buttons */ /* currently 4 groups - btnLightbg, btnBlackbg, btnRedbg, btnRed2bg */ /* currently 4 buttons and 1 filter style */ .btnLightbg {} .btnLightbg .btnBasic {} .btnLightbg .btnPrime {background-color: #007cad; border-color: #007cad;} .btnLightbg .btnPrime:hover, .btnLightbg .btnPrime:focus {background-color: #34a8d6; border-color: #34a8d6;} .btnLightbg .btnInactive {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnLightbg .btnInactive:hover, .btnLightbg .btnInactive:focus {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnLightbg .btnSecond {color: #000; border-color: #000; background: transparent;} .btnLightbg .btnSecond:hover, .btnLightbg .btnSecond:focus {color: #fff; background-color: #333; border-color: #333; text-decoration: none !important;} .btnLightbg .btnFilter {background-color: #eb0000; border-color: #eb0000;} .btnBlackbg {} .btnBlackbg .btnBasic {} .btnBlackbg .btnPrime {background-color: #34a8d6; border-color: #34a8d6;} .btnBlackbg .btnPrime:hover, .btnBlackbg .btnPrime:focus {background-color: #3fbff2; border-color: #3fbff2;} .btnBlackbg .btnInactive {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnBlackbg .btnInactive:hover, .btnBlackbg .btnInactive:focus {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnBlackbg .btnSecond {color: #fff; border-color: #fff; background: transparent;} .btnBlackbg .btnSecond:hover, .btnBlackbg .btnSecond:focus {background-color: #eee; border-color: #eee; color: #000;} .btnBlackbg .btnFilter {background-color: #eb0000; border-color: #eb0000;} .btnRedbg {} .btnRedbg .btnPrime {} .btnRedbg .btnBasic {background-color: #000; border-color: #000;} .btnRedbg .btnBasic:hover, .btnRedbg .btnBasic:focus {background-color: #464646; border-color: #464646;} .btnRedbg .btnInactive {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnRedbg .btnInactive:hover, .btnRedbg .btnInactive:focus {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnRedbg .btnSecond {color: #fff; border-color: #fff; background: transparent;} .btnRedbg .btnSecond:hover, .btnRedbg .btnSecond:focus { color: #000; background-color: #eee; border-color: #eee;} .btnRedbg .btnFilter {background-color: #464646; border-color: #464646;} .btnRed2bg {} .btnRed2bg .btnPrime {} .btnRed2bg .btnBasic {background-color: #000; border-color: #000;} .btnRed2bg .btnBasic:hover, .btnRed2bg .btnBasic:focus {background-color: #464646; border-color: #464646;} .btnRed2bg .btnInactive {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnRed2bg .btnInactive:hover, .btnRed2bg .btnInactive:focus {background-color: transparent; border-color: #9c9c9c; color: #9c9c9c; cursor: not-allowed !important;} .btnRed2bg .btnSecond {color: #fff; border-color: #fff; background: transparent;} .btnRed2bg .btnSecond:hover, .btnRed2bg .btnSecond:focus { color: #000; background-color: #eee; border-color: #eee;} .btnRed2bg .btnFilter {background-color: #464646; border-color: #464646;} .btnApple { cursor: pointer; display: inline-block; text-align: center; white-space: nowrap; font-size: 17px; line-height: 1.1764805882; font-weight: 400; letter-spacing: 0em; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Helvetica", "Arial", sans-serif, "SF Pro Icons"; min-width: 28px; padding-left: 16px; padding-right: 16px; padding-top: 8px; padding-bottom: 8px; border-radius: 980px; border: solid 1px #6e6e73; background: transparent; text-decoration: none; color: #6e6e73 !important; } .btnApple:hover {background: none #fff; border: 1px solid #000; color: #000 !important; } .btnBlackbg .btnApple {color: #ceced2 !important; border-color: #ceced2;} .btnBlackbg .btnApple:hover, .btnBlackbg .btnApple:focus {color: #333 !important; background-color: #fff;} @media screen and (max-width:800px) { .btnBasic { font-size: 15px; } } .legal {font-size: 12px !important;} .content-container strong {font-weight: bold;} p.overhead {text-transform: uppercase; margin-bottom: 7px !important;} #targetBanner, #loginAAMSpt1, #loginAAMSpt1-prepaid {/*max-width: 435px;*/ /*width: 536px;*/ margin-right: 32px;} #targetBanner .tb, #loginAAMSpt1 .tb, #loginAAMSpt1-prepaid .tb {display: table; width: 100%; table-layout: fixed;} #targetBanner .tr, #loginAAMSpt1 .tr, #loginAAMSpt1-prepaid .tr {display: table-row;} #targetBanner .tc, #loginAAMSpt1 .tc, #loginAAMSpt1-prepaid .tc {display: table-cell; vertical-align: top;} .content-container.colone { overflow: visible !important; padding: 32px 16px; margin: 32px auto !important; display: flex; flex-direction: row; flex-wrap: wrap; } .content-container.colone img {border-radius: 5px; /*margin-bottom: 10px;*/} #targetBanner .tc:last-child div, #loginAAMSpt1 .tc:last-child div, #loginAAMSpt1-prepaid .tc:last-child div {float: right;} #dropdowncontent {display: none; padding: 0 32px 16px;} #dropdowncontent p:last-child {margin-bottom: 0;} .not-prov-qc {display: none;} body:not(.qc) .not-prov-qc {display: inline;} .prov-default, .prov-nt, .prov-yt, .prov-nu, .prov-qc {display: none;} #targetBanner p sup, #loginAAMSpt1 p sup, #loginAAMSpt1-prepaid p sup {vertical-align: unset;} #targetBanner *, #loginAAMSpt1 * {font-family: poppinsregular, GraphikWeb;} #targetBanner h1, #targetBanner h2, #loginAAMSpt1 h1, #loginAAMSpt1 h2 {text-transform: none;} [data-toutid="hug-apple"] {background: none #E10A0A; border-radius: 16px; padding: 0; color: #fff; font-size: 14px; overflow: hidden;} [data-toutid="hug-apple"] h1 {font-size: 22px; color: #fff; margin-bottom: 16px; line-height: 1.3em;} [data-toutid="hug-apple"] p {margin-bottom: 16px;} [data-toutid="hug-apple"] .tb .tc:first-child {padding: 32px 0 32px 32px; vertical-align: middle !important;} [data-toutid="hug-android"] {background: none #E10A0A; border-radius: 16px; padding: 0; font-size: 14px; } [data-toutid="hug-android"] h1 {font-size: 22px; margin-bottom: 16px; line-height: 1.3em;} [data-toutid="hug-android"] p {margin-bottom: 16px;} [data-toutid="hug-android"] .tb .tc:first-child {padding: 32px 0 32px 32px; vertical-align: middle !important;} [data-toutid="hug-android"] .tb .tc:last-child {padding: 0; text-align: center;} body.qc [data-toutid="hug-android"] .prov-qc {display: block;} body:not(.qc) [data-toutid="hug-android"] .prov-default {display: block;} [data-toutid="aam-slo"] {background: none #E10A0A; border-radius: 16px; padding: 0; color: #fff; font-size: 14px;} [data-toutid="aam-slo"] h1 {font-size: 22px; color: #fff; margin-bottom: 16px; line-height: 1.3em;} [data-toutid="aam-slo"] p {margin-bottom: 16px;} [data-toutid="aam-slo"] .tb .tc:first-child {padding: 32px 0 32px 22px; vertical-align: middle !important;} [data-toutid="aam-slo"] .tb .tc:last-child {vertical-align: bottom !important;} [data-toutid="aam-slo"] .tb .tc:last-child img {display: block;} body.qc [data-toutid="aam-slo"] .prov-qc {display: block;} body.nu [data-toutid="aam-slo"] .prov-nu {display: block;} body.yt [data-toutid="aam-slo"] .prov-yt {display: block;} body.nt [data-toutid="aam-slo"] .prov-nt {display: block;} body.qc [data-toutid="aam-slo"] .prov-default, body.nu [data-toutid="aam-slo"] .prov-default, body.yt [data-toutid="aam-slo"] .prov-default, body.nt [data-toutid="aam-slo"] .prov-default {display: none;} body:not(.qc):not(.nu):not(.yt):not(.nt) [data-toutid="aam-slo"] .prov-default {display: block;} [data-toutid="AbandonInternetFlow"] {background: none #E10A0A; border-radius: 16px; padding: 0; color: #fff; font-size: 14px; overflow: hidden; max-height: 430px;} [data-toutid="AbandonInternetFlow"] h1 {font-size: 22px; color: #fff; margin-bottom: 16px; line-height: 1.3em;} .fr [data-toutid="AbandonInternetFlow"] h1 {font-size: 18px;} [data-toutid="AbandonInternetFlow"] p {margin-bottom: 16px;} [data-toutid="AbandonInternetFlow"] p.legal {margin: 16px 0 0;} [data-toutid="AbandonInternetFlow"] .tb .tc:first-child {vertical-align: middle !important; text-align: left; padding: 32px 0 32px 22px;} [data-toutid="AbandonInternetFlow"] .tb .tc:last-child {padding: 0; vertical-align: middle !important; text-align: right;} [data-toutid="AbandonInternetFlow"] .tb .tc:last-child div {float: none !important;} body.qc [data-toutid="AbandonInternetFlow"] .prov-qc {display: block;} body:not(.qc) [data-toutid="AbandonInternetFlow"] .prov-default {display: block;} #targetBanner {background: none #E10A0A; border-radius: 16px; padding: 0; color: #fff; font-size: 14px;} #targetBanner h1 {font-size: 22px; color: #fff; margin-bottom: 16px; line-height: 1.3em;} #targetBanner p {margin-bottom: 16px;} #targetBanner .tb .tc:first-child {padding: 32px 0 32px 22px; vertical-align: middle !important;} #targetBanner .tb .tc:last-child {vertical-align: bottom !important;} #targetBanner .tb .tc:last-child img {display: block;} .prepaid-login-box-container .tooltip-content {width: 100%; max-width: 264px;} .tooltipContainer.newPassword {float: none; clear: left;} .tooltipContainer.newPassword li { margin: 5px 0 10px 0;} .tooltipContainer.newPassword li .icon {font-weight: normal; padding:5px 0 5px 22px; color:#3f3f3f;} .tooltipContainer.newPassword li.fail > .icon {background-image: url("/assets/icons/grey-circle-checkmark.png"); background-position: 0; background-repeat: no-repeat; margin-right: 5px;} .tooltipContainer.newPassword li.pass > .icon {background-image: url("/assets/icons/green-circle-checkmark-m.png"); background-position: 0; background-repeat: no-repeat; margin-right: 5px;} .tooltipContainer.newPassword ul ul {margin-top: 13px;} .tooltipContainer.newPassword ul ul li.fail > .icon {background-image: url(""); background-position: 0 -46px; background-repeat: no-repeat; background-color: #999; border-radius: 50%; height: 10px; width: 10px; display: inline-block; padding: 0; margin: 0 5px 0 20px; } .tooltipContainer.newPassword ul li.fail ul li.pass .icon, .tooltipContainer.newPassword ul li.pass ul li.pass .icon {background-image: url(""); background-position: 0 -46px; background-repeat: no-repeat; background-color: #437414; border-radius: 50%; height: 10px; width: 10px; display: inline-block; padding: 0; margin: 0 5px 0 20px; } .tooltipContainer.newPassword li.nomorethan2identical.fail {color: #cc0000;} .tooltipContainer.newPassword li.nomorethan2identical.fail > .icon {background-image: url(""); display: none;} @media screen and (max-width: 640px) { .prepaid-login-box-container .tooltip-content {width: calc(100% - 34px); max-width: 100%;} } @media screen and (max-width:300px) { div#terms {width: 250px !important;} div#loginAAMSpt1-prepaidMobile {width: 98%;} .prepaid-login-box-container h2 {width: 98%;} } /*** Smart Banner related changes ***/ #vm_SmartBanner button:focus, #vm_SmartBanner button:active, #vm_SmartBanner a:focus, #vm_SmartBanner a:active { outline: none !important; box-shadow: 0 0 3px 1px #257fa3, 0 0 3px 2px #257fa3 !important; } #vm_SmartBanner a#sb-button {color: #009DDB;} #vm_SmartBanner .col020 a {display: inline-block;}