/* ==========================================================================
   Faisal Iqbal custom styles
   ========================================================================== */
body{
	background: #fefef4; 
	/* fcfef0, fefef4*/
	/*font-family: Tahoma, Geneva, sans-serif;*/
	font-family: 'Roboto', 'Oxygen', sans-serif;
	/*color: #000;*/
	color: #333;
}
.body-bg{
	background: #fefef4 url('../images/bg.png') no-repeat;
}
.bg{
	position: absolute;
	width: 100%;
	/*height: 100%;*/
}
.share-icon{
	height: 36px;
	width: 36px;
}
a{
	color: #3786a8;
}
a:hover, a:foucs{
	color: #3786a8;
	font-weight: bold;
}
a:hover:hover{
	color: #3786a8;
	text-decoration: underline;
}
p{
	font-size: 14px;
	line-height: 22px;
	text-align: left;		
}
button, html input[type=button], input[type=reset], input[type=submit]{
	/*background-color: #f05625;
	color: #fff;*/
	background-image: none;
	border: none;
	border-radius: 0;
}
h1{
	font-size: 26px;
	text-transform: uppercase;
}
h2{
	font-size: 22px;	
	text-align: left;
    margin-top: 10px;
}
ul, ol{
	padding-left: 35px;
}
h1,h2,h3,h4,h5,h6,.main-heading,.login-main-heading{font-family: 'Oxygen', sans-serif;}
.main-heading{
	font-size: 22px;
}
.p-left-0{
	padding-left: 0 !important;
}
.p-right-0{
	padding-right: 0 !important;
}
.p-top-10{
	padding-top: 10px !important;
}
.p-top-15{
	padding-top: 15px !important;
}
.p-top-25{
	padding-top: 25px !important;
}
.p-15{
	padding: 15px !important;
}
.m-top-0{
	margin-top: 0 !important;
}
.m-top-25{
	margin-top: 25px !important;
}
.text-bold{
	font-weight: bold;
}
.logo{
	padding-top: 15px;
	width: 300px;
	margin-left: 20px;
}
.referral-msg{
	margin-top: 100px;
}
.form-control{
	border-radius: 0;
}
.blue-box{
	background: url('../images/seperator.png') top left repeat-x;
	/*height: 722px;*/
	width: 100%;
	border-radius: 5px;
	padding: 20px;
	display: block;
	background-size:cover;
	overflow: hidden;
}
.white-box{
	background: url('../images/white-seperator.png') top left repeat-x;
	/*height: 621px;*/
	width: 100%;
	border-radius: 5px;
	padding: 15px;
}
.orange-bg{
	background: url('../images/orange-bg.png') top left no-repeat;
	width: 100%;
	height: 100%;
	font-size: 22px;
	color: #fff;
	text-align: left;
	margin-bottom: 15px;
	padding: 10px 15px;
	font-weight: bold;
}
/*a[href^="tel:"]:before {
    content: "\260E";
    margin-right: 0.5em;
}*/

.login-main-heading{
	margin-bottom: 25px;
}
.btn-primary{
	background-color: #f05625;
	color: #fff;
	background-image: none;
	border: none;
	border-radius: 0;
	text-decoration: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary{
	background-color: #f05625;
	color: #fff !important;
	text-decoration: none !important;
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
	float: left;
    margin-left: -20px;
    margin-top: -15px;
}
.radio label, .checkbox label{
	padding-left: 30px;
}
.box{
	/*background-color: #eee;*/
    border-radius: 0;
    border: 1px solid #ddd;
    padding: 10px;
    box-shadow: 0px 0px 8px 1px #ccc;
}
.login-form{
	padding-top: 5px;
	padding-bottom: 10px;
}
/*
	Footer
*/
.footer-bg{
	background: url('../images/footer.png') no-repeat center center;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: contain;
  	min-height: 415px;
}
footer{
	line-height: 40px;
	vertical-align: middle;
}
#footer{
	bottom: 0;
    width: 100%;
    padding-bottom: 0;
    margin-top: 35px;
}
.copy-right{
	color: #aba7a7;
	font-size: 13px;
}
.cz{
	line-height: 40px;
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
	margin-top: 3px;
	position: relative;
}
span.text-bold{
	display: block;
	padding-top: 15px;
}
.wrapper{
	padding-top: 25px;
	min-height: 500px;
}
label.text-bold{
	display: inline-block;
}
.new-referral-copy{
	color: #3786a8;
	padding-top: 7px;
	font-weight: bold;
}

/* ==========================================================================
    Screen 1 - 767
   ========================================================================== */
@media only screen and (max-width: 767px){

	/*.form-control{
		box-shadow: none;
   	 	-moz-box-shadow: none;
    }*/
    h1.page-header{
    	margin-top: 0;
    	font-size: 22px;
    	padding-bottom: 10px;
    }
    h2{
    	margin-top: 0;
    	font-size: 18px;
    }
    h2.extend{
    	font-size: 22px;
    }
	.dropdown{
		float: left;
	}
	ul, ol{
		padding-left: 25px;
	}
	.wrapper{
		padding-top: 0;
	}
	.center-content{
		text-align: center;
	}
	.logo{
		display: inline-block;
	}
	ul.list-inline{
		line-height: 22px;
		padding-top: 10px;
	}
	.footer-bg{
		min-height: 118px;
	}
	span.text-bold{
		display: block;
		padding-top: 10px;
	}
	.logo{
		width: 260px;
    	padding-top: 20px;
	}
	.referral-msg{
		margin-top: 25px;
		margin-bottom: 20px;
		float: right;
		width: 235px;
	}
	.panel{
		margin: 5px !important;
	}
	.panel-body{
		padding: 10px;
	}
	.share-via{
		padding-left: 25px !important;
		padding-right: 25px !important;
		margin-top: 10px !important;
    	margin-bottom: 20px;
	}
	#page-wrapper{
		padding: 5px 20px !important;
		margin-left: 0 !important;
		min-height: 500px !important;
	}
	h2.extend{
		font-size: 20px;
	}
	.table {
    	margin-top: 0 !important;
    }
    .mobile-read-only{
    	padding-left: 0;
    	padding-right: 0;
    }
    ul.dropdown-menu li{
    	padding-top: 5px;
    	padding-bottom: 5px;
    }
    .dropdown-menu .divider{
    	padding-top: 0;
    	padding-bottom: 0;
    }

    /*
		urgent styles
    */
    .blue-box{
    	padding: 15px;
    }
    .p-left-5{
		padding-left: 5px;
	}
	.p-right-5{
		padding-right: 5px;
	}
	#my_referral_link{
		font-size: 13px;
		padding-left: 3px;
		padding-right: 3px;
	}
	.clippy{
		top: 10px !important;
		margin-bottom: 10px;
	}

   
}
/* ==========================================================================
   Screen 768 - 979
   ========================================================================== */
@media only screen and (min-width: 768px) and (max-width: 979px){

	.footer-bg{
		min-height: 264px;
	}
	span.text-bold{
		display: block;
		padding-top: 15px;
	}
	.radio label, .checkbox label{
		padding-top: 15px;
		padding-left: 1px;
	}
	.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
		margin-top: 4px;
		margin-left: 0;
		margin-right: 5px;
	}
	.clippy{
		top: 10px !important;
		margin-bottom: 10px;
	}
}
/* ==========================================================================
   Screen 980 - 1200
   ========================================================================== */
@media only screen and (min-width: 980px) and (max-width: 1200px){

	.footer-bg{
		min-height: 323px;
	}
	span.text-bold{
		display: block;
		padding-top: 20px;
	}
	.radio label, .checkbox label{
		padding-top: 15px;
		padding-left: 1px;
	}
	.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
		margin-top: 4px;
		margin-left: 0;
		margin-right: 5px;
	}
}
/* ==========================================================================
   Screen 1201 - 1280
   ========================================================================== */
@media only screen and (min-width: 1201px) and (max-width: 1280px){
    footer{
        
        bottom:0;
    }
	.bg{
		height: 100vh;
	}
	.wrapper{
		min-height: 480px;
	}
	#footer{
		margin-top: 25px;
	}
}	
/* ==========================================================================
   Screen 1281 - 1400
   ========================================================================== */
@media only screen and (min-width: 1281px) and (max-width: 1400px){
    footer{
        
        bottom:0;
    }
	.bg{
		height: 100vh;
	}
	.wrapper{
		min-height: 480px;
	}
}
/* ==========================================================================
   Screen 1401 - 1600
   ========================================================================== */
@media only screen and (min-width: 1401px) and (max-width: 1600px){
    footer{
        
        bottom:0;
    }
	.bg{
		height: 100vh;
	}
	.wrapper{
		min-height: 500px;
	}
}
/* ==========================================================================
   Screen 1600 - 1900
   ========================================================================== */
@media only screen and (min-width: 1601px) and (max-width: 1900px){
    footer{
        
        bottom:0;
    }
	.bg{
		height: 100vh;
	}
	.wrapper{
		min-height: 500px;
	}
}

/* ==========================================================================
   Screen 1900 >
   ========================================================================== */
@media only screen and (min-width: 1900px){
    footer{
        
        bottom:0;
    }
	.bg{
		height: 100vh;
	}
	.wrapper{
		min-height: 600px;
	}

}	
/* ==========================================================================
   Only for Google Chrome
   ========================================================================== */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
		margin-top: -15px;
	}

	/* For mobile */
	@media only screen and (max-width: 767px){
		.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
			margin-top: 2px;
		}
	}	

	/* For tablet */
	@media only screen and (min-width: 768px) and (max-width: 979px){

		radio label, .checkbox label{
			padding-top: 15px;
		}
		.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
			margin-top: 4px;
		}
	}

	/* For Desktop */
	@media only screen and (min-width: 980px) and (max-width: 1200px){

		.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"]{
			margin-top: 4px;
			margin-left: 10px;
		
		}
		span.text-bold{
			padding-top: 18px;
		}
		.radio label, .checkbox label{
			padding-top: 0;
			padding-left: 1px;
		}
	}
}

/*
	Dashboard
*/
#page-wrapper{
	padding: 25px 40px;
    min-height: 540px;
    margin: 30px 0 0 20px;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 5px 25px;
}
.fa {
	width: 1.2857142857142858em;
	text-align: center;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}    
.user-links-navbar a{
	color: #333;
}
.nav>li{
	display: inline-block;
}
.nav>li>a:hover, .nav>li>a:focus{
	background-color: #fff;
}
.page-header{
	margin: 20px 10px 0 0;
	border-bottom: none;
	padding-bottom: 15px;
}
.bottom-border{
	border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}
.panel{
	border: 1px solid #ddd;
	border-radius: 0;
	margin: 0 15px 15px 15px;
}
.panel-default{
	background-color: #f9fcff !important;	
	border-color: #ddd;
}
.table {
    margin-top: 25px;
    margin-bottom: 0;
}
.table tr td{
	border: 1px solid #ddd !important;
	    border-bottom: 1px solid #ddd;
    /*border-top: none !important;*/
    text-align: left;
    vertical-align: middle !important;
}
.table tr td h4{
	text-transform: uppercase;
    text-align: left;
}
.panel-body h4{
	    font-size: 14px;
    color: #bbbbbb;
}
.share-via {
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 17px !important;
}
.align-center{
	text-align: center !important;
}
.alert-danger, .alert-error{
	background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
}
button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}
.close {
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .2;
}
.alert>p, .alert>ul{
	margin-bottom: 0;
	padding-left: 15px;
}
.view-dashboard{
	font-weight: bold;
}

/*
	Popup
*/
.popup-container{
	width: 800px;
}
.popup-container #page-wrapper{
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	min-height: 480px !important;
	padding-bottom: 25px;
	box-shadow: 0px 0px 8px 1px #ccc;
}
.popup-container textarea{
	height: 350px;
}
.invite-alert, .invite-alert-success{
	display: none;
}
.form-group{
	margin-bottom: 15px; 
}
.modal-backdrop {
    opacity:0.5 !important;
}
.modal.fade .modal-dialog {
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    transform: scale(0.1);
    top: 300px;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.modal.fade.in .modal-dialog {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform: translate3d(0, -300px, 0);
    transform: translate3d(0, -300px, 0);
    opacity: 1;
}	
.m-bottom-15{
	margin-bottom: 15px !important;
}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
	cursor: pointer;
}
.popup-msg-container{
	min-height: 200px !important;
}
.referral-list{

}
.referral-list li{
	padding: 3px;
}
.clippy {
    margin-top: -3px;
    position: relative;
    top: -5px;
    width: 30px;
}
.copy-btn{
	background: #fff;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus{
	outline: 0;
	outline-offset: 0;
	box-shadow: none;
}