/* CSS Document */
@import url('fonts.css');
html {
	font-family: 'Arial', sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size:100%;
}

input.form-control::-webkit-placeholder { font-size:12px; font-weight:400; }
input.form-control::-moz-placeholder	{ font-size:12px; font-weight:400; }

.miniScreen, .logo_ds span.logo-heading, #mBtnSection { display:none; }

body { 

	color:#333; background:#f5f5f5; font-family: "Arial", Helvetica, Arial, sans-serif;  font-weight:300; font-size:14px; line-height:22px;

	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.btn-link 				{ color:#666; }
.text-semibold 			{ font-weight:500; }
.bg-blue 				{ background-color: #03a9f4; border-color: #03a9f4; color: #fff; }
.position-left 			{ margin-right: 7px; }
.no-margin 				{ margin:0px; }
.no-margin-left 		{ margin-left:0px; }
.no-padding 			{ padding:0px; }
.no-padding-left		{ padding-left:0px; }
.no-padding-right		{ padding-right:0px; }
.display-block 			{ display:block; }
.no-display				{ display:none; }
.text-right				{ text-align:right !important; }
em						{ color:#cc0000; }
.divider				{ text-align:center; position:relative; background-color:#fff; padding:10px; margin-left: 0px; margin-right: 70px;}
.divider span			{ background-color:#fff; z-index:2; position:relative; margin-left: -30px; }
.divider:after			{ position:absolute; top:50%; height:1px; border:1px dashed #ccc; content: ""; left: 0px; right: 40px; z-index:1; }

#main-container { margin:10px auto; position:relative; }
.logo_ds { position:absolute; left:-60px; }


.panel-flat { 
	background-color: #ffffff;
	border-right: 2px solid #dbdbdb;
	border-bottom: 2px solid #dbdbdb;
	border-radius:0px;
}

.panel-flat > .panel-heading { background-color:#ebebeb; padding:10px; border:1px solid #fff; }
.panel-flat > .panel-heading > h4 { margin:0px; color:#525252; font-size:13px; font-weight:bold; }
.panel-flat .media h5	{ margin:0px; font-weight:300; margin-bottom:10px; font-size:15px; color:#e60000; font-family: Arial, Helvetica, sans-serif; }

ul#enroll-point, #enroll-point li { margin:0px; padding:0px; }
#enroll-point li { font-family:'Arial', Arial, Sans-serif; font-weight:400; }

#other-section .panel.panel-flat { min-height:285px; }
#other-section .panel-body { font-size:100%; }
#other-section .panel-body h5 { font-weight:600;  }
#other-section .panel-body > img.img-holder { float:left; margin:0px 10px 10px 0px; }

#right-section > .panel { min-height:638px; margin-bottom:0px; }

.img-holder { padding:6px; background:#f1f1f1; }

#intro		{ padding:10px;		}
#intro hr	{ margin:7px 0px;	}


.btn { border-radius:0px; border:0px; line-height:20px; font-size:14px; color:#fff; width: auto; min-height: 20px !important; margin: 5px 15px; text-decoration: none; }

.btn-success, .btn-success:visited { background-color:#E60000; border-color:transparent;  }
.btn-success:hover, .btn-success:focus { background-color:#990000; border-color:transparent; }
.btn-success:active { background:#990000 !important; background-color:#990000 !important; border-color:transparent; }


.btn-default { color:#fff; border:1px solid #999; background-color:#666; }
.btn-default:hover { background-color:#333; color:#fff; }
/* .btn-default:visited { background-color:#666; color:#fff; } */
.btn-default:focus { -webkit-box-shadow:inset 0px -0px 1px 3px #007c92; -moz-box-shadow:inset 0px -0px 1px 3px #007c92; box-shadow:inset 0px -0px 1px 3px #007c92; }
.btn-default:active { background-color:#666666; }

.btn-info, .btn-info:visited { color:#666; border:1px solid #999; background-color:#fff; }
.btn-info:hover	{ background-color:#f4f4f4; color:#666; border-color:#666; }
.btn-info:focus { -webkit-box-shadow:inset 0px -0px 1px 3px #007c92; -moz-box-shadow:inset 0px -0px 1px 3px #007c92; box-shadow:inset 0px -0px 1px 3px #007c92; }
.btn-info:active { background-color:#f4f4f4; }


/**************************** Welcome Page ******************/

.steps-contains h2 { font-size:14px; font-weight:500; color:#e60000; }
.steps-contains h2.text-success { color:green !important; }
.steps-contains > h2 { margin-bottom:12px; }
.steps-contains .step1 { background: url(../images/step1.png) no-repeat left top; padding: 0px 0px 5px 60px; }
.steps-contains .step2 { background: url(../images/step2.png) no-repeat left top; padding: 0px 0px 5px 60px; }
.steps-contains .step3 { background: url(../images/step3.png) no-repeat left top; padding: 0px 0px 5px 60px; }

.steps-contains ul { margin-left:0px; padding-left:0px; }
.steps-contains ul li { margin-left:12px; }

.container	{ padding:0px; }
.logo_ds	{  }

.btn-back		{  
	padding:4px 10px; color:#000; border:1px solid rgba(0,0,0,0.3);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#f7f7f7));
    background-image: -webkit-linear-gradient(#f1f1f1, #f7f7f7);
    background-image: -moz-linear-gradient(#f1f1f1, #f7f7f7);
    background-image: -ms-linear-gradient(#f1f1f1, #f7f7f7);
    background-image: -o-linear-gradient(#f1f1f1, #f7f7f7);
    background-image: linear-gradient(#f1f1f1, #f7f7f7);

	text-decoration:none;
}
.btn-back:hover, .btn-back:visited	{  text-decoration:none; color:#333; 
	 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 2px -1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 2px -1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 2px -1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
}

.btn-procced {  
	padding:10px 35px; color:#fff; border:1px solid rgba(0,0,0,0.3);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#44af0d), to(#086706));
    background-image: -webkit-linear-gradient(#44af0d, #086706);
    background-image: -moz-linear-gradient(#44af0d, #086706);
    background-image: -ms-linear-gradient(#44af0d, #086706);
    background-image: -o-linear-gradient(#44af0d, #086706);
    background-image: linear-gradient(#44af0d, #086706);

	text-decoration:none;
}

.btn-procced:hover, .btn-procced:visited, .btn-procced:focus	{  
	text-decoration:none; color:#fff; 
	 -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 2px -1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 2px -1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 2px 2px -1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .1) inset;
}

.alert-warning { border:1px solid #f7b74f; background-color: #ffffeb; font-size:12px; width:95%; margin:10px auto 20px; }
.alert-warning ul, .alert-warning ul li { margin-left:0px; padding-left:10px; }

.alert-danger h3 { display:inline; margin-right:5px; font-size: 17px; font-weight: 700; }





.progressbar-container { position:relative; display:block; z-index:5; margin:20px 0px 85px; }

.progressbar {
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  width: 30%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: #7d7d7d;
}
.progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 27px;
  border: 2px solid #7d7d7d;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: white;
}
.progressbar li:after {
  width: 100%;
  height: 2px;
  content: '';
  position: absolute;
  background-color: #7d7d7d;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.active {
  color: green;
}
.progressbar li.active:before {
  border-color: #55b776;
}
.progressbar li.active + li:after {
  background-color: #55b776;
}

form.form-horizontal { margin-top:25px; }
form.form-horizontal .form-group { display:block; margin-bottom: 30px; }
form.form-horizontal .control-label { text-align:left; font-family: 'Arial', Arial, sans-serif; }
form.form-horizontal label small { display:block; color:#666; font-family: 'Arial', Arial, sans-serif; font-weight:400; font-size: 100%; }
form small.help-content { font-size:12px; padding:7px 0px; color:#777; }

form .card-radio label.radio-inline input { margin-top:7px; }

.form-control { border-radius:0px; line-height:40px; font-size:14px; width: 90%; height: 40px; }
.form-control:focus { box-shadow:none; border: 1px solid #ccc; }

.dl-horizontal dt, .dl-horizontal dd { padding:3px; text-align:left; }
.dl-horizontal dt { font-weight:400; }

dl.dl-horizontal dt { width:225px; }
dl.dl-horizontal dd { margin-left:225px; font-weight:500; }



@media (min-width:300px) and (max-width:785px) { 
	body { position:relative; font-family: 'Arial', sans-serif; font-size: 15px; }
	.steps-contains > form.form-horizontal { margin-top:0px !important; }
	form.form-horizontal { margin-top:25px; }

	.fcred { margin-top: -25px !important; }

	.divider { margin-left: 1px; margin-right: -9px; }
	hr { margin-right: 31px !important; margin-left: 1px; }
	
	.btn { line-height:45px; font-size:18px; margin:0px 0px; padding: 0px 40px; height: 45px;}
	.btn.btn-default { color:#fff !important; }
	.btn.btn-default:focus { box-shadow:inset 0px -0px 1px 3px #007c92; }
	.btn.custom-button {padding: 0px 8px !important;margin:0px 15px 10px 0 !important;}

	.landingPage #main-container, #right-section, .progressbar-container, form.form-horizontal label small, form small.help-content { display:none; }
	.logo_ds span.logo-heading { display:block; font-weight: 600; }
	.logo_ds		{ 
						position:relative; left:0px; padding:10px 10px 10px 75px; background-color:#fff; margin-bottom:15px; border-bottom:1px solid rgba(0,0,0,0.2); 
						font-size:17px; line-height: 40px;
					}
	.logo_ds small	{ font-size:16px; display:block; font-weight: 400; }
	.logo_ds img	{ max-height:40px; position:absolute; left:10px; top: 11px; }
	.miniScreen		{ display:block;   }
	.miniScreen .panel-flat { margin:0px; padding:20px; text-align:center; background: #f0f0f0; }

	#main-container	{ margin:0px; border-top:0px solid #4a4d4e; }
	#enrollMsection h3 { font-size:2rem; }
	#enrollMsection h3 > small { display:block; margin:10px 0px; color: black; }
	
	#enrollMsection .proceedbtn { background-color: #e60000; padding: 0px 40px; text-align:center; color:#fff;   }
	#enrollMsection .proceedbtn:hover { background-color: #990000;  }
	#footer	{ margin:20px 0px 0px; padding:5px; }

	.steps-contains .step1 { background: none; padding: 0px 0px 5px 0px; }
	.steps-contains .step2 { background: none; padding: 0px 0px 5px 0px; }
	.steps-contains .step3 { background: none; padding: 0px 0px 5px 0px; }

	.form-horizontal .radio-inline { padding-top:0px; }


	.contentsection { padding:0px 15px; }
	.contentsection h1 { font-weight: 100; font-size: 17px; line-height: 23px; color: black; position: relative; margin-left: 14px;}
	.contentsection h3 { color:#e60000; }
	.contentsection a  { color:#333; }
	.contentsection a:hover { text-decoration:none; }

	.contentsection .rightCol .MModify, .contentsection .rightCol .MCancel { padding-left:15px; padding-right:25px; }
	.contentsection .rightCol .MModify h4, .contentsection .rightCol .MCancel h4 { font-size:1.2rem; margin-bottom:5px; }
	.contentsection .rightCol .MModify br, .contentsection .rightCol .MCancel br { display:none; }
	.contentsection .rightCol .MModify a, .contentsection .rightCol .MCancel a { display:block; }
	.contentsection .rightCol .MModify a.btn , .contentsection .rightCol .MCancel a.btn { display:inline-block; margin-top:15px; }

	.img-holder { 
		position: absolute; margin-left: -80px; width: 52px; height: 52px; border-radius: 100px; background: #D3D3D3; border: 1px solid #E1E1E1; overflow:hidden; 
		background-color: #ececec; padding: 7px; margin-right: 7px; margin-left: -72px;
	}
	div.img-holder img { width:150%; margin-left:-10px; }

	#welcome-page .panel-flat { border:0px; color: #666; }
	#welcome-page ul#step { margin-left:0px; margin-top:30px; }
	#welcome-page ul#step li { list-style:url; margin-bottom:10px; margin-left:20px; }
	
	#welcome-page #btn-section { position:absolute; left:0px; right:20px; bottom:0px; background:#fff; display:none; }
	#welcome-page #mBtnSection { position:fixed; left:0px; right:0px; bottom:0px; background:#fff; border:1px solid #ccc; padding:10px; 
		
		-webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.50);
	-moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.50);
	box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.50);
	display:block;
	}
	#mBtnSection a.btn-success { width:100%; display:block; text-align:center; padding:10px; font-size:16px; }


	.steps-contains h2 { margin:10px 0px 10px 0px; line-height: normal; font-size:15px; font-weight:500; }

	.control-label.text-right { text-align:left !important; }


	dl.dl-horizontal dt {
		float: left;
		width: 160px;
		clear: left;
	}

	dl.dl-horizontal dd { margin-left:160px; text-align:right; word-wrap: break-word; padding-right:15px;  }

	.btn-success.btn-mobile, .btn-default.btn-mobile, .btn-info.btn-mobile { padding:0 19px; }

	ul#service-date.monthly-autopay .media-body p {
    font-size: 14px !important;
	}
	.form-group.card-radio img {
	width: 40px !important;
	}
}


@media (min-width:350px) and (max-width:375px) { 
	.card-radio .col-xs-3 { padding-right:0px; }
	.card-radio .col-xs-9 { padding-left:0px; padding-right:0px; }
}


/****************** Calendar ***********************/

#calendar {border:2px solid #666666; margin-left: 22px; margin-top: 22px;}
/*#calendar table {background:#e9e7e2 url(images/calendar/bg.gif) repeat;}*/
#calendar table {background-color:#ece6d5 !important;}
#calendar table td { padding:2px !important; }
#caption {color:#FFFFFF !important;}
#selectMonth {z-index:+999;position:absolute;margin:18px 0 0 118px; *margin:5px 0 0 -10px;visibility:hidden;}
#selectYear { z-index:+999;position:absolute;margin:15px 0 0 186px; *margin:5px 0 0 0px;visibility:hidden;}
#selectMonth td , #selectYear td {padding:0px;}
#calcontent td {border:1px solid #f6f5f2;}
#calcontent td.dayname {background:#e9e7e2 url(images/calendar/bg.gif) repeat; border:0px;}
#calcontent td a.currentday {background-color:#7abdd4 !important; display:block;}

/****************** Calendar ***********************/

.calendra {background:url(../images/icon_calendra.jpg) no-repeat right 20px center;}

ul#service-date { margin:0px; border-radius:0px; }
ul#service-date h2, ul#service-date h3 { margin:0px; padding:0px; }
ul#service-date li { margin-left:0px; border-radius:0px; padding:8px 15px; cursor:pointer; width: 90%; }
ul#service-date li.active { background:transparent; color:#000; border: 1px solid #ccc;}
ul#service-date li.active h2 { color:#000000 }
ul#service-date li label { margin:0px; cursor:pointer; display:table; }

ul#service-date .media-left { width:60%; min-width:60%; }

ul#service-date .media-left input { margin-right:10px; }
ul#service-date .media-left h2, ul#service-date.monthly-autopay .media-body h2 { color:#000; font-size:15px; font-family: 'Arial', Arial, sans-serif; }
ul#service-date .media-body { text-align:right; }
ul#service-date .media-body small { color:#777; font-size:0.8em; padding:0px; margin:0px; display:block; }
ul#service-date .media-body h3 { font-size:14px; }
ul#service-date .media.custom-date { padding:8px 0px; display: block; }
ul#service-date .media.custom-date h3 { font-size: 14px; margin-top: 2px; color: #777777; }
ul#service-date .media.custom-date #custom-date { display: block; margin: 7px 0px; }

ul#service-date.monthly-autopay li { padding:12px 15px; z-index: 0; }
ul#service-date.monthly-autopay .media-left { width:auto; min-width:auto; }
ul#service-date.monthly-autopay .media-body { text-align:left; }
ul#service-date.monthly-autopay .media-body p { margin:0px; font-weight:400; color:#666; font-size: 11px; }
ul#service-date.monthly-autopay .media.custom-date #custom-amount { display:table; margin:10px 0px 0px; }
ul#service-date.monthly-autopay .media.custom-date #custom-amount span.input-group-addon { font-size:15px; }
.vodafone-custom-endate #calendar { left:-2% !important; top:50%;}
.vodafone-custom-endate #selectMonth {margin: 72px 0 0 77px;}
.vodafone-custom-endate #selectYear {margin: 72px 0 0 143px;}
.vodafone_reg #selectMonth {margin-top:71px !important}
.vodafone_reg #selectYear {margin-top:50px; margin-left: 181px !important}
.btn-success:active { background:#990000 !important; background-color:#990000 !important; border-color:transparent; }
#datatble { margin-bottom: 36px; }

.page-heading { 
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 15px;
	margin-bottom: 25px;
}

.table-view { border:1px solid #ddd; padding:0px 0px; margin-bottom:20px; }
.table-view dl.dl-horizontal { margin-bottom:0px; }
.table-view dt, .table-view dd { min-height:33px; padding:0px; line-height:33px; }
.table-view dt { padding-left:14px; background-color: #f4f4f4; }
.table-view dd { background-color: #f4f4f4; }
.table-view h2 { margin:0px 0px 0px; color:#000; background-color:#f4f4f4; padding:10px 15px; }
.table-view dt:nth-child(4n+1), .table-view dt:nth-child(4n+1) + dd { background-color: #fff;}

.h4, h4 {
	font-size: 14px;
}

.midor{
	text-align: center;
	margin-left: 42%;
	line-height: 40px;
}

.formspace {
	margin-bottom: 10px !important;
}

.fcred {
	color: #cc0000;
	font-size: 18px;
	margin-top: -10px;
	margin-bottom: 5px;
}

.fctext {
	font-size: 15px !important;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.imgalign > img {
	margin-top: 5px;
}

.form-group.card-radio img {
	width: 51px;
}