html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, hr, input, textarea, select, radio, a { margin: 0; padding: 0; outline:none; }
a{text-decoration:none; }
a:focus, input:focus, textarea:focus, button:focus { outline:0; }
body, input, textarea, select, button { font-family: Gotham-Rounded-Light; font-weight:400; font-size:14px; color:#7d8792}

/* --------------------------------

Typography

-------------------------------- */

@font-face {
  font-family: Gotham-Rounded-Light;
  src: url(fonts/Gotham-Rounded-Light_21020.otf);
  font-weight: 400;
  font-style: normal
}

@font-face {
  font-family: Gotham-Rounded-Medium;
  src: url(fonts/Gotham-Rounded-Medium_21022.otf);
  font-weight: 400;
  font-style: normal
}

/*hack for chrome*/
body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}
.ligt{font-weight:300}
.bold{font-weight:700}
/*---------------common css---------------*/
.clear:before, .clear:after { display: table; line-height: 0; content: ""; }
.clear:after { clear: both; }
.fl { float:left }
.fr { float:right }
.clL { clear:left }
.clR { clear:right }
.fwN, h1, h2, h3, h4, h5 { font-weight:300; }
.alL { text-align:left }
.alC { text-align:center }
.alR { text-align:right }
.pr { position:relative }
.pa { position:absolute }
.cp { cursor:pointer }
.ln { list-style:none }
.db { display:block }
.dn { display:none }
.und{text-decoration:underline}
.und:hover{text-decoration:none}
textarea, input, select, button, .boxsize { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.lightW {font-family: Gotham-Rounded-Light !important;}

/*------------some common margin & padding properties-------*/
.pd{padding:5px}.pd1{padding:10px}.pd2{padding:20px}.pd3{padding:30px}.pd4{padding:40px}
.pdT{padding-top:5px}.pdB{padding-bottom:5px}.pdL{padding-left:5px}.pdR{padding-right:5px}
.pdT1{padding-top:10px}.pdB1{padding-bottom:10px}.pdL1{padding-left:10px}.pdR1{padding-right:10px}
.pdT2{padding-top:20px}.pdB2{padding-bottom:20px}.pdL2{padding-left:20px}.pdR2{padding-right:20px}
.pdT3{padding-top:20px}.pdB3{padding-bottom:30px}.pdL3{padding-left:30px}.pdR3{padding-right:30px}
.pdT4{padding-top:30px}.pdB4{padding-bottom:40px}.pdL4{padding-left:40px}.pdR4{padding-right:40px}

.mr{margin:5px}.mr1{margin:10px}.mr2{margin:20px}.mr3{margin:30px}.mr4{margin:40px}
.mrT{margin-top:5px}.mrB{margin-bottom:5px}.mrL{margin-left:5px}.mrR{margin-right:5px}
.mrT1{margin-top:10px}.mrB1{margin-bottom:10px}.mrL1{margin-left:10px}.mrR1{margin-right:10px}
.mrT2{margin-top:20px}.mrB2{margin-bottom:20px}.mrL2{margin-left:20px}.mrR2{margin-right:20px}
.mrT3{margin-top:30px}.mrB3{margin-bottom:30px}.mrL3{margin-left:30px}.mrR3{margin-right:30px}
.mrT4{margin-top:40px}.mrB4{margin-bottom:40px}.mrL4{margin-left:40px}.mrR4{margin-right:40px}
.sub-text{
	font-size: 13px;
	color: #777;
}
/*inputs styles*/
.inp, .selinpt{
	border:1px solid #dfdfdf;
	background:#fff;
}
.inp.grey{
	background:#f6f6f6;
}
.inp{
	padding:10px;
	height:40px;
	-webkit-transition: all .25s linear;
 -moz-transition: all .25s linear;
 -o-transition: all .25s linear;
 transition: all .25s linear;
}
.inp:focus{
	border-style:dashed
}
.inp.liq{
	width:100%
}
/*button style*/
.btn{
	height:40px;
	padding:10px 30px;
	-webkit-transition: all .25s linear;
 -moz-transition: all .25s linear;
 -o-transition: all .25s linear;
 transition: all .25s linear;
 cursor:pointer;
 background:#1571be;
 color:#fff
}
button.btn{
	border:1px solid #145690;
	padding:0 20px;
}

.btn:hover{
	background:#fff;
	color:#1571be;
}
.btn.big{font-size:18px}
/*some link styles nrml u*/
.nrml{
	color:inherit;
}
.nrml.u{
	text-decoration:underline;
}
.nrml.u:hover{
	text-decoration:none
}
.blink{
	/*color:#1571be !important;*/
	color: #006fb7 !important;
}
.blink:hover{
	text-decoration:underline;
}
/*row style*/
.rov input{
	vertical-align: middle;
	width:250px;
	margin-right: 5px;
	margin-top: -1px;
	border: 1px solid #999;
}
.rov button{
	vertical-align: middle;
}
.forgot-form button .ic{
	font-size: 12px;
	display: block;
	float: right;
	margin-top: 6px;
	margin-left: 10px;
}
.rov h3{
	float:left;
	font-size:22px;
	line-height:40px;
	font-weight:400;
	color:#1571be;
	margin-right:20px
}
.fulRow{
	margin-bottom:20px
}
.or{margin:30px 0;
    text-align:center;
    font-size:16px
}

/*structure style*/
#bodybg{
	/*background: url("/images/frg-bg.png") repeat-y top left;*/
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2
}
.step{
	padding-top: 5%
}
/*dialog type content*/
.dialog-wrap{
	background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    width: 600px;
	-webkit-transition: all .25s linear;
 -moz-transition: all .25s linear;
 -o-transition: all .25s linear;
 transition: all .25s linear;
}
.dialog-head{
	font-size:1.5em;
	padding:8px 20px;
	background:#1571be;
	color:#fff
}
.dialog-content{
	padding:30px 20px;
}
.dialog-content-bottom{
	line-height:34px;
	border-top:1px solid #ddd;
	padding:0 20px;
}
.dialog-content-bottom p{
	float:left
}
.dialog-content-bottom p+p{
	float:right
}


/*loader style*/
#ss-loader {
    bottom: 0;
    display: none;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
}
#ss-loader .overlay {
    background: none repeat scroll 0 0 #FFFFFF;
    bottom: 0;
    left: 0;
    opacity: 0.8;
    position: absolute;
    right: 0;
    top: 0;
}
#ss-loader .loader {
    margin: 20% auto 0;
    position: relative;
    z-index: 9;
}
#ss-loader .wait {
    font-weight: bold;
    position: relative;
    text-align: center;
}
.loader {
    background: url("/img/loading.gif") no-repeat scroll center center #FFFFFF;
    height: 24px;
    padding: 3px;
    width: 24px;
}

    /**********************************************/
/* notification styles */
#notification {
	position:fixed;
	width: 100%;
	text-align: center;	
	z-index:99;
	overflow:hidden;	
}
#notification h2{
	font-size:16px; 
	font-weight:400
}
/*#notification.showNote{
	width:50%; 
	left:230px
}*/
    /*error, info, notice, alert*/
.success,.warning,.error,.information{display: block; position: relative; padding:5px 20px}
.information{background-color:#3bafda}
.success{background-color:#8cc152}
.warning{background-color:#f6bb42}
.error{background-color:#e9573f}
.notify h2{color:#fff}
#main-container{padding:40px;}
/**********************************************/


/*=======responsive code======*/

@media only screen and (max-width : 800px), (max-device-width:768px){
	#bodybg{
		background:none
	}
}
@media only screen and (max-width : 600px), (max-device-width:600px) {
	.dialog-wrap{width:85%; margin-top:50px !important}
	.rov input, #user_number {margin-bottom:15px;}
}
@media only screen and (max-width : 400px), (max-device-width:400px) {
	.rov input, #user_number {width:100%;}
	.col-xs-6 {width: 100% !important;}
}

input#ccode {width: 60px;}
input#num {width: 240px;}



/*mustafa*/
#valid_numbers {
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 2px;
	padding: 5px 53px 5px 5px;
	margin: 0px 0;
	cursor: pointer;
	float: left;
	border: 1px solid #b9b9b9;
	background: #f8f8f8;
}
.wrap_select {
    display: inline-block;
    position: relative;
    clear: both;
    cursor: pointer;
}
.selectTag {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.arrow_bottom {
	border-style: solid;
	width: 0px;
	height: 0px;
	line-height: 0px;
	border-width: 6px 6px 0 6px;
	border-color: #505050 transparent transparent transparent;
	border-radius: 0;
	top: 12px;
	position: absolute;
	right: 8px;
	cursor: pointer;
}
.col-xs-6 {
    width: 50%;
    float: left;
}
.text-middle {
	line-height: 31px;
}
.auto {
	width: auto;
	float: left;
}
#user_number {
	max-width: 242px;
}

/******************** MUSTAFA *******************/
#brand img {
	height: auto;
	max-width: 300px;
}
#step .dialog-content {
	color: #595959;
	font-size: 14px;
	background: #f0f0f0;
}#step .dialog-head {
	font-size: 20px;
	font-family: Gotham-Rounded-Medium;
	line-height: 35px;
}
.step-indicator {
	width: 600px;
	margin: 15px auto;
	font-size: 14px;
	color: #595959;
}
.forgot-form fieldset {
    display: none;
    border:0;
}
#forgot-number {
margin: 10px 0;
}

#forgot-number input::-webkit-input-placeholder {color:#aaa;}
#forgot-number input::-moz-placeholder {color: #aaa;}
#forgot-number input:-ms-input-placeholder {color: #aaa;}
#forgot-number input:-moz-placeholder {color: #aaa;}

#forgot-number input {
    text-align: center;
    line-height: 30px;
    margin: 0 2px;
    font-size: 18px;
    width: 30px;
		color: #595959;	
    font-family: Gotham-Rounded-Medium;
}
#forgot-number input:disabled {
	background: #f0f0f0;
	border: 1px solid #ccc;
	color: #999;
}
#valid_numbers {
	opacity: 0;
	padding: 0;
	margin: auto;
	position: absolute;
	left: 50%;
	margin-left: -44px;
}
.selectTag label {
}
.dialog-content p {
	color: #595959;
	font-family: Gotham-Rounded-Medium;
	font-size: 14px;
}
.dialog-content .btn {
	font-family: Gotham-Rounded-Medium;
	font-size: 20px;
}
.dialog-content .blink:hover {
	text-decoration: none;
}
.dialog-content h3 {
    font-size: 22px;
    text-align: center;
    font-family: Gotham-Rounded-Medium;
}
.otpNum {
	text-align: center;
}
.otpNum input {   
	line-height: 40px;
    text-align: center;
    width: 50px;
    font-size: 30px;
    font-family: Gotham-Rounded-Medium;
}
.step-indicator {
	font-family: Gotham-Rounded-Medium;
	font-size: 14px;
	color: #595959;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}