@font-face {
    font-family: 'poppinsregular';
    src: url('/assets/fonts/Poppins/poppins-regular-webfont.eot');
    src: url('/assets/fonts/Poppins/poppins-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/Poppins/poppins-regular-webfont.woff2') format('woff2'),
         url('/assets/fonts/Poppins/poppins-regular-webfont.woff') format('woff'),
         url('/assets/fonts/Poppins/poppins-regular-webfont.svg#poppinsregular') format('svg');
    font-weight: normal;
    font-style: normal;
	font-stretch: normal;
}
:root {
    --color-primary: #E31837;
    --color-primary-hover: #C11226;
    --color-text-main: #131C35;
    --color-text-muted: #131C35;
    --color-bg-info: #fff;
    --color-bg-warning: #FAF5ED;
    --color-border-warning: #B4781D;
    --color-border-input: #CCCCCC;
    --color-border-info: #CDCFD5;
    --max-width: 760px;
    --font-family: 'poppinsregular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
	font-family: var(--font-family);
	color: var(--color-text-main);
}
.imeiajax .benefit-popup h1 {font-size: 32px; font-weight: 600;}
.imeiajax #imei-check-result {background-color: var(--color-bg-info) !important;}
	#imei-check-result p {padding: 0;}
	
.calloutBox {display: flex; gap: 16px; padding: 20px; border-radius: 12px; margin-bottom: 32px;}
	.calloutBoxInfo {background-color: var(--color-bg-info); border: 1px solid var(--color-border-info);}
    .calloutBoxWarning {background: var(--color-bg-warning); border: 1px solid var(--color-border-warning);}
	.calloutBoxSuccess {background: var(--color-bg-info); border: 1px solid var(--color-border-info);}
	.calloutIcon {flex-shrink: 0; width: 24px; height: 24px;}
	.calloutContent {flex-grow: 1;}
    .calloutTitle {font-size: 18px; font-weight: 600; margin-bottom: 18px; line-height: 20px; font-weight: 600; }
    .calloutBody {font-size: 14px; color: var(--color-text-muted);}
	.calloutBody p {margin-bottom: 12px;}
	.calloutBody p:last-child {margin-bottom: 0;}
	.inline-link {color: #4E4AE4; text-decoration: underline;}

.stepSection {margin-bottom: 24px;}
	.stepTitle, .stepTitle label {font-size: 18px; font-weight: 600; margin-bottom: 12px; font-weight: 600;}
    .stepInstruction {/*font-size: 15px;*/ font-weight: 500; margin-bottom: 4px;}
    .stepDetail {font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px;}

.benefit-popup-content #imei-check-result {background: none;}
.sub-content-block {margin-bottom: 24px;}
.sub-content-block h3 {margin-bottom: 0px; padding-bottom: 0;}

.footerNotice {padding-top: 0px;}
	.footerTitle {font-size: 18px; font-weight: 600; margin-bottom: 12px;}
	.footerBody {color: var(--color-text-muted); line-height: 1.2em}
		
#masthead{min-height: 30px;}
background-image:none !important;
#target input {float: none;}
			
.error-main-container {display: none;}
	.er_mesgbox {margin-left: 0; background-color: #FCE6E6; border: 1px solid #e10a0a; margin-bottom: 20px; padding: 20px; border-radius: 3px; margin-top: 20px;}
	.er_mesgbox ul.error_listing {margin: 0 0 0 33px; padding: 0px;}
	.er_mesgbox p {font-weight: bold; background-image: url("/assets/icons/green-circle-checkmark-red-circle-exclamation.png"); background-position: 5px -51px; background-repeat: no-repeat; margin: 0 0 15px; padding-left:33px;}
	.er_mesgbox p.noErrorIcon {background: none; margin: 15px 0 0 0; font-weight: normal;}
	.error_listing #handsetIMEIreq a{color: #00719E !important;}
			
	/*#imeiNumber {border: 0; border-bottom: 1px solid #131C35; background: #F3F2F0; height: 25px; padding: 10px 16px; font-size: 16px; margin-bottom: 0; color: var(--color-text-main); border-radius: 4px 4px 0 0;}
	#imeiNumber:focus {border: 1px solid #34a8d6;}
	#imeiNumber.failed {border-bottom: 1px solid #cc0000; color: #000; background-color: rgba(215, 44, 44, 0.2);}
	#imeiNumber.passed {border-bottom: 1px solid #767676; color: #3a3a3a; background-color: none;}*/
	
	#imeiNumber {padding:7px 10px; border: 1px solid #767676; height: 25px; margin-bottom: 0;}
	#imeiNumber:focus {border: 1px solid #34a8d6;}
	#imeiNumber.failed {border: 1px solid #cc0000; color: #000; background-color: rgba(215, 44, 44, 0.2);}
	#imeiNumber.passed {border: 1px solid #767676; color: #3a3a3a; background-color: none;}
	#imeiNumberSubmit.btnBasic {font-size: inherit; border-radius: 4px;}
	.calloutBody a {border-radius: 4px;}

.benefit-popup {color: var(--color-text-main); padding-bottom: 30px; padding-left: 30px; padding-right: 30px; padding-top: 30px; max-width: 700px; width: auto; /*overflow-y: scroll; height: 300px;*/}
	.benefit-popup-content {margin: 10px 0 30px; width: auto; max-width: 690px;}
	.benefit-popup form {float: unset; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; max-width: unset; width: unset; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 0;}
	.benefit-popup-content p {margin-top: 1px; line-height: 19px;}
	.benefit-popup h1 {font-size: 32px; line-height: 38px;}
	.fancybox-inner {height:auto !important;}
	.imei_close {top: -27px; right: -31px;}

@media screen and (max-width: 768px) {
	.fancybox-wrap.fancybox-desktop.fancybox-type-ajax.fancybox-opened {top: 85px !important;}	
	.calloutBody .btnBasic {white-space: inherit; line-height: 20px; border-radius: 4px}
}
@media screen and (max-width: 640px) {
	.calloutBox {border-radius: 12px; margin-bottom: 32px; display: flex; padding: 16px; flex-direction: column; align-items: flex-start; gap: var(--spacing-200, 12px); align-self: stretch;}
	.calloutTitle {margin-bottom: 12px; font-size: 18px; font-style: normal; line-height: 22px;}
	.stepSection .input-group {width: calc(100% - 10px);}
	#imeiNumber {width: calc(100% - 10%);}	
}