body{font-family: 'Open Sans', sans-serif !important; background-color:#c49a6c;}

/*.nav .open > a, .nav .open > a:focus, .nav .open > a:hover, li>a:hover{background-color:#1375bb !important; color:#FFFFFF !important;}*/

.navbar-nav{background-color:#FFFFFF}
.navbar{min-height: 70px !important;background-color:#FFFFFF; border-bottom: 1px solid #CCCCCC;}
.menuOption{color: #333333 !important; font-size: 16px !important; font-weight: bold !important; margin-top: 10px !important;}
.navbar-toggle{border-color: #333333; margin-top:15px;} 
.icon-bar { background-color: #333333;}


/*.container{padding:0px;}*/
.logo{padding:5px; max-width:100%;}

#topRegister{margin: 0px; background-color: #e30000; padding: 7px; color: #FFFFFF; font-weight: bold; text-align: center; cursor: pointer;}
#topBanner{text-align: center; margin-top: 6.5%;}
.alert{padding:7px; margin:10px; border-radius:5px;}
.divBackground, .tncBackground{ text-align: center; width: 50%; margin-top: 1%; min-height: 100px; padding: 10px; background-color: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 10px; box-shadow: inset 0 1px 1px rgba(0,0,0,.05);}		
.myVoucherTableDiv{width: 100%; margin-top:2%; padding:5px; background-color:#FFFFFF; border-radius:5px;}
.creative{max-width: 100%; border-radius: 5px;}
.offerDetails{padding: 5px; font-weight: bolder; margin-bottom: 15px;}
.buyNow{width: 50%; margin:auto; background-color: #333333; color: #FFF; cursor: pointer; padding: 10px; border-radius: 25px; border:none;}
#couponcode{text-transform: uppercase;}
#applyCouponCode, #cancelCouponCode{cursor:pointer; color:#333333; font-style:italic; text-decoration: underline;}
.discountedPrice{font-style:italic; text-decoration: underline;}
.validity{margin:5px; font-weight:bold; font-size:12px;}

.tab-content {text-align:justify; padding:10px; border-top:1px solid #CCCCCC; font-size:12px;}
.nav-pills>li.active>a{background-color: #333333;}

/*otp*/
.digit-group {width: 15%; height: 50px; background-color: #FFF; border: 1px solid #CCCCCC; border-radius: 5px; line-height: 50px; font-size: 24px; font-weight: 200; margin: 0 2px; text-align: center;}
#resendOTP{padding-top: 10px; cursor: pointer; color: #333333;}

/*LR modal css*/
.modal-header{background-color:#333333; color:#FFF; text-align: center;}
.modal-content{background-color:#F1F1F1; border:0 !important;}
.close{color:#FFF; opacity:0.9;}
.welcome{text-align:center; font-weight:bold; margin:5px;}
.userimg{text-align:center; padding:10px;}
.userimg>img{max-width:100%;}
.inputGroup{ width: 95%; height: 40px; margin: 0 auto 15px; padding: 0 30px; text-align: center; font-size: 16px; font-weight: normal; color: #000; display: block; border: 1px solid #DDDDDD; outline: none; background-color: #FFFFFF; border-radius:25px;}
#loginError, #regError, #couponError, #couponSuccess, #otpError, #setPswdError{display:none;}
.submitButton {color: #ffffff; background-color: #333333; width: 60%; height: 50px; margin: 0 auto; text-align: center; font-size: 20px; font-weight: normal; color: #fff; display: block; cursor: pointer; border:none; border-radius:25px;}
hr{margin:10px;}
.lrLinks{text-align:center; cursor:pointer; text-decoration:underline; color:#333333; margin: 5px 0px;}
/*LR modal css ends*/


/*add to cart table*/
#quantityError{background: #EF9A9A; padding: 10px; border-radius: 10px; font-weight: bold; display: none;}
#cartTable {width:100%; table-layout: fixed;}
#cartTable tr{border-bottom: 1px solid #DDDDDD;}
#cartTable td, #cartTable th{padding:7px;}
#cartTable input[type="number"] {-webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;}
#cartTable input[type=number]::-webkit-inner-spin-button, #cartTable input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;}
#cartTable .number-input {border: 2px solid #ddd; display: inline-flex; margin:5px;}
#cartTable .number-input, #cartTable .number-input * {box-sizing: border-box;}
#cartTable .number-input button {outline:none; -webkit-appearance: none; background-color: transparent; border: none; align-items: center; justify-content: center; width: 3rem; height: 3rem; cursor: pointer; margin: 0; position: relative;}
#cartTable .number-input button:after {display: inline-block; position: absolute; font-size: 24px; font-weight: bolder; content: '-'; transform: translate(-50%, -50%) rotate(180deg);}
#cartTable .number-input button.plus:after {content: '+'; transform: translate(-50%, -50%) rotate(0deg);}
#cartTable .number-input input[type=number] {font-family: sans-serif; max-width: 5rem; padding: .5rem; border: solid #ddd; border-width: 0 2px; font-size: 14px; height: 3rem; font-weight: bold; text-align: center;}

#cartTable .addToCartDisabled{opacity: 0.7; cursor: not-allowed;}
/*ends*/


/*gift voucher history*/
.table{background-color:#FFFFFF; width:100%; margin-bottom:0;}
th,tr{text-align:center;font-size:16px;}
.thead-blue{background-color:#333333; color: #FFF;}
/*ends*/


/*How to use*/
#howtouseContainer{background-color: #FFFFFF; margin-top: 1%; border-radius: 10px; margin-bottom: 15px;}
.stepsMainTitle{text-align: center; text-decoration: underline; margin: 10px;}
.stepsOutline{padding: 10px; margin: 10px; border:1px solid #CCCCCC; border-radius: 5px;}
.step{font-size: 20px; font-weight: bold; text-align: center; background-color: #333333; color: #FFFFFF; padding: 5px; border-radius: 5px; margin-bottom: 5px;}
.stepImage{text-align: center;}
.stepImage>img{height: 250px;}
.stepDesc{margin-top: 2px; padding: 5px; border-top: 3px solid #333333; font-size: 12px;}
/*ends*/

#footer{display:block; bottom: 0; width: 100%; padding:5px; color: #fff !important; text-align:center; margin-top:3%; margin-bottom:3%;}
#telegramBox{background-color: #389ce9; color: #FFFFFF; font-size : 14px; font-weight:bolder; padding: 10px; text-align:center;}
#telegramBoxOuter{position: fixed; bottom: 0; width:100%;}
.footerLinks{color:#FFFFFF !important;}

#landscapeError{width:100%; height:100%; padding: 15px; display:none; position: fixed; top: 0; align-items:center; justify-content:center; z-index:10000; text-align:center; background-color:#EEE;}
.landscapeImage{max-width: 100%; margin-top:5%;}
#landscapeError > h3{color:#f44336; font-weight:bold;}

@media only screen and (max-width: 768px){
	.navbar-nav{margin-top: 0px; margin-bottom:0px;}
	#topBanner{margin-top: 30%;}
	
	.divBackground, .tncBackground{width: 100%;}
	.myVoucherTableDiv{width: 100%; margin-top:1%; padding:0px;}
	/*.modal.fade:not(.in).bottom .modal-dialog {
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	.modal{top: unset !important}
	*/
	.modal-dialog{margin:0; border:0; height:100%;}
	#couponModal.modal, #contactusModal.modal{height:auto; top: unset !important}
	#couponModal.modal-dialog, #contactusModal.modal-dialog{height:auto;}
	.modal-content{border:0; height:100%;}
	#couponModal.modal-dialog, #contactusModal.modal-dialog{height:auto;}
	.tab-content {font-size:10px;}

	#cartTable .number-input button {width: 2rem;}
	#cartTable .number-input input[type=number]{max-width: 3rem;}

	/* Force table to not be like tables anymore */
	#giftTable table, #giftTable thead, #giftTable tbody, #giftTable th, #giftTable td, #giftTable tr { display: block;}
	/* Hide table headers (but not display: none;, for accessibility) */
	#giftTable tr:nth-of-type(odd) { background: #eee !important; }
	#giftTable thead tr { position: absolute; top: -9999px;	left: -9999px;}
	#giftTable tr{border-bottom: 1px solid #333333; text-align:left; padding-bottom: 10px !important;}
	#giftTable td{	/* Behave  like a "row" */	border: none !important; border-bottom: 1px solid #eee !important; position: relative;  padding:3px !important; padding-left: 50% !important;}
	#giftTable td:before { /* Now like a table header */position: absolute; /* Top/left values mimic padding */	top: 3px;left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
			
	/* Label the data */
	#giftTable td:nth-of-type(1):before { content: "Date Purchased: "; }
	#giftTable td:nth-of-type(2):before { content: "Voucher Value: "; }
	#giftTable td:nth-of-type(3):before { content: "Voucher Code: "; }
	#giftTable td:nth-of-type(4):before { content: "Voucher Pin: "; }
	#giftTable td:nth-of-type(5):before { content: "Expiry Date: "; }
	#giftTable td:nth-of-type(6):before { content: "Transaction ID: "; }

	/*How to use*/
	#howtouseContainer{margin: 15px;}
	.stepsMainDiv, .stepsOuterDiv{padding: 0px;}
	.stepImage>img{height: 185px;}
	/*ends*/
	
	#footer{margin-bottom:7%;}
	#telegramBox{font-size : 12px; padding: 5px;}
}