.content-area h1 {font-family: VMUltramagneticNormalRegular; text-transform: uppercase; font-weight: normal; font-size: 41px; margin-bottom: 0; line-height: 1em; color: #000;}
.content-area h2 {font-family: VMUltramagneticNormalRegular; text-transform: uppercase; font-weight: normal; font-size: 28px; margin: 10px 0 30px; line-height: 1em; color: #000;}
.content-area h3 {font-family: VMUltramagneticNormalRegular; text-transform: uppercase; font-weight: normal; font-size: 22px; margin: 10px 0 20px; line-height: 1em; color: #000;}
.fr h2,
.fr h3 {line-height: 1.3em !important;}
.content-area .section {padding: 0;}
p.heading {font-size: 26px; font-weight: normal; font-family: VMUltramagneticNormalRegular; text-transform: uppercase; margin-bottom: 20px;}
p.subheading {font-size: 18px; font-weight: normal; font-family: VMUltramagneticNormalRegular; text-transform: uppercase; margin-bottom: 20px;}
.tb {display: table;}
.tb .tr {display: table-row;}
.tb .tc {display: table-cell;}
.font-18b {font-size: 18px; font-weight: bold;}
#masthead-subhead.content-area {background: none #fff; padding: 50px 0;}
#masthead-subhead .contents,
#form-container .contents, #callbackctrl .contents {max-width: 1200px;}
#form-container, #callbackctrl {padding: 0 0 45px;}
#formBody {background-color: #efefef; border-radius: 5px; width: 100%;}
#formBody .innerPad {padding: 40px 30px 40px;}
.bannerCommunityContainer.content-area {background: #fff;}
#formBody p {max-width: 760px;}
.inputContainer {width: 100%; max-width: 550px; position: relative;}
	/* Phase 2 */
	.inputContainer label {display: block; font-weight: bold; font-size: inherit; color: #333; margin-bottom: 8px; }
	.inputContainer a.tooltiplink{position: absolute; top: 35px;right: -35px;}
	.issueRealtedPhoneNumberShowHide .inputChooseRadio .radioRow { display: inline-block; margin-right: 25px; }
	.hangTight .fetchAvailabilityErrorDesc1.firstfetchAvalibilityErrorText {text-transform: uppercase;}
	
	.tooltipContainer {position: relative;top: -25px;float: right;clear: both;background-color: #e4e5e7;padding: 13px 17px;border-radius: 5px;}
	.inputContainer.error label {color: #e10a0a;}

	.inputContainer.radioRow label {font-weight: normal; margin: 0;}
	.inputContainer.radioRow label span {width: calc(100% - 20px); vertical-align: top; margin-bottom: 10px; display: inline-block;}
	.inputContainer.radioRow input[type="radio"]:checked + span {font-weight: bold;display: inline-block;width: calc(100% - 20px);vertical-align: top;margin-bottom: 10px;}	
	.inputContainer.radioRow input[type="radio"]:checked + span {font-weight: bold; display: inline-block;}
	.inputContainer.radioRow input[type="radio"]:checked + span + span, .inputContainer.radioRow input[type="radio"]:checked + span + span + span {font-weight: bold;}		
	.inputContainer select, .inputContainer textarea {
    	padding: 12px 17px;
    	border-radius: 2px;
   	 	border: 1px solid #d7d7d7;
		width: 100%;
		margin-bottom: 35px;
	}
	.inputContainer input {padding: 12px 17px; border-radius: 2px; border: 1px solid #d7d7d7; width: calc(100% - 36px); margin-bottom: 35px;}
	.inputContainer.error select, 
	.inputContainer.error textarea, 
	.inputContainer.error input {border-color: #e10a0a;}

	.inputContainer input[type="checkbox"],
	.inputContainer input[type="radio"] {
		box-sizing: border-box; /* 1 */
		padding: 0; /* 2 */
		width: auto;
		*height: 13px; /* 3 */
		*width: 13px; /* 3 */
		padding:4px 5px 0 0 !important;
		border:0px !important;
	}
	.inputContainer input[type="radio"] {margin-bottom: 20px;}
 
.formGrid p.info {background:  url(/proxy/https/www.virginplus.ca/assets/icons/svg/info-dark-grey-circle.svg) left top no-repeat; background-size: 19px 19px; padding-left: 25px;}

#customer_info_row .inputContainer input {margin-bottom: 10px;}
	#customer_info_row {margin-bottom: 30px;}
#customer_call_back_row {padding-top: 25px;}
#noThanksCtaRow {margin-bottom: 35px;}
/*#customer_language_choice_row,
#customer_options_row,
#communications_email_nonauth_txt {display: none;}*/

.hidden {display: none;}

.timeSlotContainer {display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch; margin-bottom: 45px; gap: 10px;}
	.timeSlot {flex: 0 1 auto; border: 2px solid #000; border-radius: 4px; background-color: #fff; width: 230px; font-size: 14px;}
	.fr .timeSlot {flex: 0 1 auto; border: 2px solid #000; border-radius: 4px; background-color: #fff; width: 240px; font-size: 14px;}
	
	/*** WCCR 24 When active then replace below code with above 2 lines ***/
	/*	
	.timeSlot {flex: 0 1 auto; border: 2px solid #b7b6b6; border-radius: 4px; background-color: #fff; width: 230px; font-size: 14px; margin-right:10px;}
	.fr .timeSlot {flex: 0 1 auto; border: 2px solid #b7b6b6; border-radius: 4px; background-color: #fff; width: 240px; font-size: 14px;}
	.timeSlot:hover, .timeSlot.active, .fr .timeSlot:hover, .fr .timeSlot.active {border: 2px solid #000;}
	*/
	.timeSlot .tb {width: 100%;}
	.timeSlot .tb .tr .tc:first-child img {padding: 10px; height: 20px; width: 20px;}
	.timeSlot .tb .tr .tc:last-child {padding: 14px 14px 14px 0; vertical-align: top;}
	.timeSlot .day {font-weight: bold; color: #000; display: block; margin-bottom: 10px;}
	.timeSlot .time {color: #555; display: block;}
	#submitCtaRow {margin-top: 15px;}
	#submitCtaRow input {margin: 5px 25px 0 0;}
	#submitCtaRow a:hover {cursor: pointer;}
	#submitCtaRow a#cancelBtn {color: #0079A8; background-color: #F7F7F7; text-decoration: underline;}

.whiteCallOutBox {background: #fff none; border: 1px solid #d7d7d7; width: calc(100% - 2px); max-width: 100%; margin-bottom: 40px;}
	.whiteCallOutBox .inner {padding: 30px;}
	.whiteCallOutBox .title {font-weight: bold;}
	.whiteCallOutBox p {margin-bottom: 10px;}
	.whiteCallOutBox .tb {table-layout: fixed;}
	.whiteCallOutBox .tb .tr:first-child .tc {padding-bottom: 30px;}
	.whiteCallOutBox .tb .tr .tc:first-child {width: 80px;}
	.whiteCallOutBox .tb .tr .tc a {text-decoration: underline;}

.row .whiteCallOutBox {max-width: 550px;}
#customer_info_row p a {text-decoration: underline;}

/*** hide below due to chat now button class not proper ***/
/*
a#chatNowBtn {color: #757575; border-color: #757575;}
*/
/*
a#chatNowBtnFlagY,
a#chatNowBtnFlagN {color: #757575; border-color: #757575;}
*/
#alertSection {}
	#alertSection .tb .tr .tc {vertical-align: top;}
	#alertSection .tb .tr .tc:first-child {width: 90px;}
	#alertSection .tb .tr .tc:first-child img {height: 36px; width: 36px; margin: 30px;}
	#alertSection .tb .tr:first-child .tc:last-child { padding: 30px 30px 30px 0;}
	#alertSection .ctaContainer {padding: 20px 0 0 0;}
	#alertSection .ctaContainer a:first-child {margin: 0 15px 15px 0;}

#errorSection {}
	#errorSection .tb .tr .tc {vertical-align: top;}
	#errorSection .tb .tr .tc:first-child {width: 90px;}
	#errorSection .tb .tr .tc:first-child img {height: 36px; width: 36px; margin: 30px;}
	#errorSection .tb .tr:first-child .tc:last-child { padding: 30px 30px 30px 0;}
	#errorSection .box {float: left; width: 42%; min-width: 200px; margin-top: 15px;}
	#errorSection .box:first-child {margin-right: 5%;}
	.box .phonenumber {font-weight: bold; font-size: 18px;}

#callback_unavailable_row .whiteCallOutBox img {height: 40px; width: auto;}
	#callback_unavailable_row .whiteCallOutBox .box {padding: 15px 0;}

/***#rescheduleCallbackLightbox {width: 600px;}  CR24 time slot in single line**/
	/*** WCCR 24 When active then replace below code with above lines ***/
	/*** #rescheduleCallbackLightbox {width: 800px;} **/
	
	#rescheduleCallbackLightbox .inner {/*padding: 10px;*/ }
	#rescheduleCallbackLightbox .timeSlotContainer {margin: 15px 0 20px;}
	#rescheduleCallbackLightbox .ctaContainer a:first-child {margin: 0 15px 15px 0;}
	
	#rescheduleCallbackLightbox .modal-header {background-color: #e1e1e1; color: #333; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom: 1px solid #e5e5e5;}
	#rescheduleCallbackLightbox .modal-header .heading {padding: 15px 20px;}
	#rescheduleCallbackLightbox .heading {font-size: 24px; font-weight: normal; font-family: VMUltramagneticNormalRegular; text-transform: uppercase; margin-bottom: 0px;}	
	.fancybox-close {position: absolute; top: 22px !important; right: 22px !important; width: 30px; height: 30px; cursor: pointer; z-index: 8040; background: rgba(0, 0, 0, 0) url(/proxy/https/www.virginplus.ca/assets/ui/buttons/close-big-x1.png) no-repeat scroll center top !important;}
	.fancybox-skin {padding: 0px !important;}
	#rescheduleCallbackLightbox .modal-body {padding: 20px 20px}
	#rescheduleCallbackLightbox .modal-body .innerHeaderBody .tb .tc img {width: 28px; height: 28px; margin: 4px 15px 0 0;}
	#rescheduleCallbackLightbox .modal-body .innerHeaderBody .tb .tc:last-child {vertical-align: top; margin: 0; top: 0;}
	#rescheduleCallbackLightbox .modal-body .innerHeaderBody .tb .tc p.errorheading.ultra {font-size: 23px; font-family: VMUltramagneticNormalRegular; text-transform: uppercase;}
	#rescheduleCallbackLightbox .modal-body .innerHeaderBody .tb .tc p.errorsubheading {margin: 10px 0 20px 0;}
	
	.ctaContainer a:nth-child(2) {text-decoration: underline;}
	a.fancybox-item.callBack.fancybox-closeButton:active,
    a.fancybox-item.callBack.fancybox-closeButton:focus {box-shadow: 0 0 3px 1px #257fa3, 0 0 3px 2px #257fa3 !important;}
	 a.fancybox-item.callBack.fancybox-closeButton {outline: none;}

#callback_unavailable_row .whiteCallOutBox .tb .tr:first-child .tc {padding: 0;}
	#callback_unavailable_row .whiteCallOutBox a.btnBasic {margin-top: 30px;}

#another_option_row .tb,
#currently_closed_row .btnBasic {margin-top: 35px; text-decoration: none;}
#another_option_row .whiteCallOutBox .tb .tr:first-child .tc,
#currently_closed_row .whiteCallOutBox .tb .tr:first-child .tc,
#currently_closed_timeZone_row .whiteCallOutBox .tb .tr:first-child .tc {padding: 0;}

	ul.error_listing {margin: 0 0 0 15px; padding:0px;}
    ul.error_listing li {font-size: 13px; font-weight: normal; list-style: none outside none; margin: 0; padding: 5px 0;}
	ul.error_listing li::before {content: "•"; color: #016d98; display: inline-block; width: 1em; margin-left: -1em; font-weight: 900;}
    ul.error_listing li a {text-decoration: underline; color: #016d98;}
    ul.error_listing li span {color: #D21501; font-weight:normal; margin:0 4px 0 0; text-decoration:underline;}

#successSection .whiteCallOutBox .tb .tr. tc:first-child img {height: 36px; width: 36px;}
.successInfoSection {display: flex; flex-flow: row wrap; justify-content: space-between; align-items: stretch;}
  .successInfoSection .box {width: 49%; min-width: 400px; border: 1px solid #d7d7d7; flex: 0 1 auto; margin-bottom: 15px;}
  .successInfoSection .box .inner {padding: 45px 30px}
  .successInfoSection .box:last-child {background: none #efefef;}
  .successInfoSection .lightGrey {margin-bottom: 10px; color: #555;}
  .successInfoSection .boldBlack {color: #000; font-weight: bold;}
  .successInfoSection .tb  {border-collapse: separate; border-spacing: 15px;}
  .successInfoSection .tb .tr .tc:first-child {width: 75px;}
  .successInfoSection .tb .tr .tc:first-child img {width: 45px; height: auto;}
  .successInfoSection .tb .tr .tc:last-child {font-weight: bold; color: #000; vertical-align: middle;}
  .successInfoSection .tb .tr .tc:last-child span {font-weight: normal; color: #555;}
  .successInfoSection .subSection {margin-bottom: 40px;}

.pRel {position: relative;}
#addtoCalendarDropdown {position: absolute; left: 0; top: 0; width: auto; background: none #fff; box-shadow: 0 4px 16px 0 #0000005e;}
	#addtoCalendarDropdown .inner {padding: 12px;}
	#addtoCalendarDropdown .inner a {display: block; margin: 15px 0;}
	#addtoCalendarDropdown .inner a:last-child {margin-bottom: 0; word-wrap: break-word;}
	#addtoCalendarDropdown .inner a img {vertical-align: middle;}
	#addtoCalendarDropdown .inner a[target="_blank"]:after {vertical-align: middle;}

#currently_closed_row img, #currently_closed_timeZone_row img {vertical-align: middle;}
.inputContainer.radioRow.emailCon {max-width: 750px;}
.inputContainer.radioRow.emailCon span.emailtxtbold {font-weight: bold; display: inline;}
.formGrid p.info {margin-top: 8px;}
.formGrid p.info .prefLangBold {font-weight: bold;}
.customer_info_row select#phoneNumbers {margin-bottom: 15px;}
.inputContainer input#communications_email_nonauth_txt {margin-bottom: 15px;}

.loading_content {min-height: 150px; height: 150px;}
.loading_content .loadercontainer.imgload {background: url(/proxy/https/www.virginplus.ca/assets/images/spinner_squares_circle.gif) no-repeat center center transparent;width: 100%;height: 100%;float: left;z-index: 999;}
.btnloadercontainer.imgload {background: url(/proxy/https/www.virginplus.ca/assets/images/spinner_squares_circle.gif) no-repeat center center; width: 36px; height: 39px;float: left; border: 0;}
a.fancybox-item.callBack.fancybox-closeButton {position: absolute; top: 26px !important; right: 24px !important; width: 30px; height: 20px; cursor: pointer; z-index: 8040; background: rgba(0, 0, 0, 0) url(/proxy/https/www.virginplus.ca/assets/ui/buttons/close-big-x.png) no-repeat scroll center top !important;}
a.fancybox-item.callBack.fancybox-closeButton {display: inline;}
.successInfoSection .box .inner {table-layout: fixed;}

/*** whitelisted Ips ***/
#callbackctrlForbidden {padding: 0 0 45px;}
#callbackctrlForbidden .contents {max-width: 1200px;}
#callbackctrlForbidden .formBody {background-color: #efefef; border-radius: 5px; width: auto;}
#callbackctrlForbidden .formBody {padding: 80px 30px 80px;}

/*** Phase-2 ***/
.loader-fixed {width:350px; /*left: 50%; margin-left: -175px; position: fixed; top: 45%; -webkit-box-shadow:0 0 40px rgba(0,0,0,0.4); -moz-box-shadow:0 0 40px rgba(0,0,0,0.4);box-shadow:0 0 40px rgba(0,0,0,0.4);*/ padding:20px 0; z-index: 99999;}
.loading-indicator-circle {display: inline-block; width: 37px; height: 37px; margin-right:10px; vertical-align: middle; -webkit-animation:spin 1.1s linear infinite; -moz-animation:spin 1.1s linear infinite; animation:spin 1.1s linear infinite;}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.timeslotLoadingIndicator .loading-indicator-circle {stroke: #CC0000;}
.bgWhite {background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 15px 15px;}
.fetchAvailabilityError img  {vertical-align: middle; max-width: 24px; width: 24px;}
.linkApplied {color: #0079A8; text-decoration: underline; cursor: pointer;}
div.hangTight:last-child {margin-left: 15px;}

#loginToBookACall {margin-bottom: 10px;}
#logintobookacallRow {margin-top: 15px;}
	#logintobookacallRow input {margin: 5px 25px 0 0;}
	#logintobookacallRow a:hover {cursor: pointer;}
	#logintobookacallRow a#cancelBtn {color: #0079A8; background-color: #F7F7F7; text-decoration: underline;}
	#logintobookacallbtn.margB40 {margin-bottom: 40px;}
	.margB30 {margin-bottom: 30px !important;}
	.margB20 {margin-bottom: 20px !important;}
	.margT20 {margin-top: 20px !important;}
	.issueRealtedPhoneNumberShowHide {margin: 30px 0;}	
	
div#submitCtaRow, div#logintobookacallRow {justify-content: flex-start; align-items: center; display: flex;}
div#logintobookacallRow a:first-child {margin-right: 20px; margin-top: 10px;}
div#callback_unavailable_row_select_dropdown_cancel .callOptions .box {margin: 30px 0;}

.successInfoSection .boldBlack {
    color: #000;
    font-weight: bold;
    /*width: max-content;*/
	width: 100vh;
}

@media screen and (max-width:860px) {
  .successInfoSection .box {width: 100%; margin-bottom: 40px;}
  .successInfoSection .box:last-child {margin-bottom: 0;}
}

@media screen and (max-width:640px) {
	#formBody {border-radius: 0;}
	.contents {width: 100% !important;}
	#masthead-subhead .contents,
	.bannerCommunityContainer .contents {width: 90% !important;}
	.inputContainer select, .inputContainer input, .inputContainer textarea {width: 100%;}
	.inputContainer input {width: 100%; width: -webkit-fill-available; width: -moz-available;}
	#rescheduleCallbackLightbox {width: 100%;}
	#alertSection .box,
	#errorSection .box {width: 100%;}
	.inputContainer.radioRow.emailCon {max-width: auto;}
	.content-area p.boldBlack a.lineHeightfocus {line-height: 1.6em !important;}
	#rescheduleCallbackLightbox .modal-header .heading {padding: 15px 71px 15px 20px;}
	.inputContainer a.tooltiplink{right: -28px;}
  	.inputContainer {width: 99%;}
	.successInfoSection .boldBlack {width: auto;}
}

@media screen and (max-width:480px) {
	.inputContainer.radioRow.emailCon {margin-bottom: 20px;}
	p.boldBlack {padding-right: 16px;}
	.successInfoSection .box .inner .tb {padding-right: 18px;}
	.successInfoSection .box .inner p {padding-right: 56px;}
	.successInfoSection .tb .tr .tc:first-child {width: 25px;}
	.fr .info a.editlink {display: inline-block;}
	.fr div#submitCtaRow {display: block;}
	.fr #submitCtaRow input{margin-bottom: 10px;}
	.fr #submitCtaRow a#cancelBtn {display: inline-block;}
	 }


div#submitCtaRow {justify-content: flex-start; align-items: center; display: flex;}
div#submitCtaRowLegal {margin-top: 20px;}
#callbackAlreadyScheduled .ctaContainer {justify-content: flex-start; align-items: baseline; display: flex;}
#rescheduleCallbackLightbox .ctaContainer {justify-content: flex-start; align-items: baseline; display: flex;}
.tc.resource-technical {display: block !important;}
a.communityForumFaqLink {text-decoration: underline;}
a#resheduleButtonFocus {text-decoration: underline;}

//CR24
#rescheduleCallbackLightbox {width: 772px;}
.loading_content {width: 772px;height:auto;}
.timeSlot {margin-right: 10px;}
.fr .timeSlot {margin-right: 10px;}
.timeSlot.ng-scope.active {
    outline: none;
    box-shadow: 0 0 0px 3px #fff, 0 0 2px 3px #fff, 0 0 4px 5px #06516e, 0 0 2px 5px #053c52;
}
.timeSlot.ng-scope:focus {
    outline: none;
    box-shadow: 0 0 0px 3px #fff, 0 0 2px 3px #fff, 0 0 4px 5px #257fa3, 0 0 2px 5px #257fa3;
}
a#SaveScheduleBtn {border: 2px solid;}