/*FONTS*/
@font-face{
	font-family: hindenburg;
	font-display:swap;
	src: url(../fonts/Hindenburg.ttf) format("truetype");
}
@font-face{
	font-family: roboto;
	font-display:swap;
	src: url(../fonts/ROBOTO-MEDIUM.ttf) format("truetype");
}
@font-face{
	font-family: roboto;
	font-weight: bold;
	font-display:swap;
	src: url(../fonts/ROBOTO-BOLD.ttf) format("truetype");
}
@font-face{
  font-family: DINCon;
  font-display:swap;
  src: url("../fonts/DINCondensed-Bold.ttf") format("truetype");
}

body{
	overflow-y: hidden;
	color: #000;
	background-color: #000;
}
/*LINKS STYLE*/
a{
	color: #fff;
}
a:hover{
	color: #fff;
	text-decoration: none;
}


/*UNIVERSAL*/
.main-font-color{
	color: #686868;
}
.sub-bg{
	background-color: #e7e8e9;
}
.sub-font-color{
	color: #939598;
}
.price_item-color{
	color: #bb271b;
}
.error-fontcolor{
  color: #FF2828 !important;
}
.error-msg{
	background-color: rgba(0, 0, 0, 0.61);
}
.error-msg i{
	line-height: inherit;
}

#price_item-bg {
	background: url(../assets/UI/Sub-category Main Menu/UI169-price-box.png);
	background-repeat: no-repeat;
	background-size: 40px 30px;
	font-size:5vw;
	font-family:DINCon;
}

.button-color{
	color: #ffffff;
	background-color: #bb271b;
}
.btn-content-color{
	color: #bbbbbb;
}

.menu-divider-color {
	background-color:#dcddde;
}



.header-bar{
	height: 3.4rem;
	-ms-flex-align: center;
	align-items: center;
}
.bottom{
	height: 3.75rem;
	background-color: #bb271b;
}
.font1{
	font-family: DINCon;
}
.font2{
	font-family: hindenburg;
	font-size: 1.2rem;
	letter-spacing: .1rem;
}



/*FULLSCREEN*/
.exit-fs{
	right: 1%;
	top: 1%;
	z-index: 1;
	font-size: .8rem;
	background-color: rgba(0,0,0,.5);
	color: #fff;
	display: none;
}
:-moz-full-screen .exit-fs{
    display: block!important;
}
:-webkit-full-screen .exit-fs {
	display: block!important;
}
:-ms-fullscreen .exit-fs{
    display: block!important;
}

:fullscreen .exit-fs{
    display: block!important;
}


.left-menu .list-group-item:hover,.backbtn:hover,.ojjumodal .modal-footer,.plus-button:hover,.minus-button:hover,.m_minus-button:hover,.m_plus-button:hover,.edit:hover,.trashbin:hover{
	cursor: pointer;
}
.disabled{
	pointer-events: none;
}
.main-body{
	height: calc(100vh - 3.75rem - 3rem);
	/*height: calc(100vh - 3.75rem - 7.5rem);*/
	padding-top: .1rem;
	/*padding-bottom: calc(3.75rem + 30px);*/
	padding-bottom: .2rem;
	overflow-y: hidden;
	background-color: #fff;
}

/*pin*/
.pin-container{
	/*min-width: 100vw;
	min-height: 100vh;*/
	/*background-image: url("../UI/New Confirmed/bg.jpg");*/
	background-size: cover;
	background-repeat: no-repeat;
}
.pin-input{
	background-color: rgba(255,255,255,0.8);
	
	box-shadow: none!important;
	border: 0;
	border-radius: 0;
	border-bottom: 3px solid #fff;
}
.pin-input:focus{
	border-color: #9f77be;
	transition: .2s all linear;
}
.pin-input.error{
	border-color: #bb271b;
	transition: .2s all linear;
}
/*RIGHT MENU INDEX*/
.main-header{
	/*height: 7.5rem!important;
	background-image: url("../UI/Sub-category Main Menu/UI169-banner-sample.png");
	background-repeat: no-repeat;
	background-size: cover;*/
	background-color: #bb271b!important;
	color: #000!important;
}
.right-menu{
	/*height: calc(100vh - 60px);*/
	/*padding-bottom: calc(.5rem + 30px)!important;*/
	padding-bottom: 3.75rem;
	height: 95%;
	overflow-y: scroll;
	background-color: #fff;
}
.item-row{
	border-bottom: 1px solid #d1d2d4; 
}
.main-content{
	font-size: 1rem;
}
.sub-content{
	font-size: .7rem;
	word-spacing: .05rem;
	width: 80%;
}
.pricefont-size{
	font-family: DINCon;
	font-size: 1rem;
	top: 30%;
	right: 35%;
}
.item-row .set-order-qty{
	font-size: 1rem;
	text-align: center;
}
.minus-button,.plus-button,.set-order-qty,.detail-list-menu{
	text-align: -webkit-center;
	-ms-flex-item-align: center;
	align-self: center;
}
.plus-button .rounded-circle,.minus-button .rounded-circle,.detail-list-menu .rounded-circle{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	text-align: center;
	width: 25px;
	height: 25px;
}
.plus-icon,.minus-icon{
	font-size: .5rem;
	vertical-align: middle;
	flex: auto;
	-ms-flex-item-align: center!important;
	align-self: center;
}

/*LEFT MENU INDEX*/
.left-menu{
	height: 100%;
}
.left-menu .list-group{
	height: 100%;
	/*height: 100%;*/
	padding-bottom: 3.75rem;
	overflow-y: scroll;
}
.left-menu .list-group-item:first-child{
	border-radius: 0;
}
.left-menu .list-group-item{
	padding: .75rem .5rem;
	background-color: #e7e8e9;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.125);
	line-height: 1.3;
	font-size: .7rem;
}
.left-menu .list-group-item.active{
	color: #000;
	background-color: #fff;
	border-left: 4px solid #eeeeee!important;
	border-color: #fff;
}


/*BOTTOM MENU*/
.bottom-menu{
	/*height: 60px;*/
	font-size: 1rem;
	align-content: center;
}

/*MODAL STYLE*/
.ojjumodal .modal-dialog{
	margin: 0;
}
.ojjumodal .modal-content,.ojjumodal .modal-header{
	border: none;
	border-radius: 0;
}


#Modalheader{
	font-size: 1.5rem;
	padding: 0;
}
.ojjumodal .modal-body{
	padding-top: 3.5rem;
	padding-bottom: calc(3.75rem + 30px);
	height: calc(100vh);
	/*padding-bottom: 0;
	height: 100vh;*/
	width: 100vw;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	overflow-y: scroll;
}
.ojjumodal .modal-footer{
	border-radius: 0;
	flex:auto;
	align-self: flex-end;
}

/*MODAL TABLE*/
.table{
	/*
	border-collapse: separate;
	border-spacing: 0 .3rem;
	*/
}
.table-row{
	background-color: #fff;
	/*height:.5rem;*/
}
td{
	vertical-align: middle!important;
	font-size: .85rem;
}

tr.border_bottom td {
  border-bottom:3px solid #e7e8e9;
}

.m_minus-button,.m_plus-button{
	text-align: -webkit-center;
}
.m_minus-icon,.m_plus-icon{
	text-align: center;
	border-radius: 5px;
	width: 1.5rem;
}

.table td{
	padding-top:7px;
	padding-bottom:7px;
}
.order-table td:nth-child(2),.order-table td:nth-child(7){
	width: 5%;
}
.order-table td:nth-child(2),.order-table td:nth-child(4),.order-table td:nth-child(6),.order-table td:nth-child(7){
	padding: 0;
}
.order-table td:nth-child(4),.order-table th:nth-child(4),.order-table td:nth-child(6),.order-table th:nth-child(6),.bill-table td:nth-child(2),.bill-table th:nth-child(2){
	text-align: left;
}
.bill-table td:nth-child(4),.bill-table th:nth-child(4){
	text-align: right;
}

/*MODAL DETAILED ORDER*/
.category-food-menu{
	background-color: #fff;
	cursor: pointer;
}
.detail-list-menu{
	align-self: flex-start!important;
}
.main-category-food-content,.main-category-food-content2,.sub-category-food-content{
	background-color: #f7f7f7;
	height: 0;
	opacity: 0;
	padding-top: 0!important;
	padding-bottom: 0!important;
	transition: .1s all ease;
}
.main-category-food-content.show,.main-category-food-content2.show,.sub-category-food-content.show{
	height: 100%;
	opacity: 1;
	padding-top: .5rem!important;
	padding-bottom: .5rem!important;
	transition: .1s all ease;
}
.sub-category-food-menu.disabled,.sub-category-food-menu.disabled .list-num,.main-category-food-menu.disabled,.main-category-food-menu.disabled .list-num,.main-category-food-menu2.disabled,.main-category-food-menu2.disabled .list-num{
	color: #cacaca;
}
.sub-category-food-menu.disabled .list-num,.main-category-food-menu.disabled .list-num,.main-category-food-menu2.disabled .list-num{
	background-color: #dedede;
}

.custom-control-input:checked~.custom-control-label::before{
	border-color: #000;
	background-color: #000;
}
.custom-control-input:focus~.custom-control-label::before{
	box-shadow: none;
}
.list-num{
	background-color: #bbbbbb;
	justify-content: center;
	font-size: 1rem;
}

/*MODAL NOTES*/
#notesmodal .modal-content{
	border-radius: 1.1rem;
}
#notesmodal .noteslabel{
	font-size: 1rem;
}
#notesmodal textarea{
	/*height: 5.5rem;*/
	height: 4rem;
}
#notesmodal a{
	color: #000;
}
#notesmodal a:hover{
	color: #eeeeee;
	text-decoration: none;
}

/*MODAL ADS*/
#ads-modal .modal-content{
	border-radius: 1.5rem;
}
#ads-modal .adslabel{
	font-weight: bold;
}
#ads-modal .ads-pricebg,#ads-modal .ads-pricetag{
	top: 50%;
	right: 15%;
	-ms-transform:translate(0,-50%);/*ie9*/
	-webkit-transform:translate(0,-50%);/*safari*/
	transform: translate(0,-50%);/*standart*/
}
#ads-modal .ads-pricebg:before{
	content:"ONLY AT";
	font-family: DINCon;
	font-size: 1.7rem;
	display: block;
	position: absolute;
	top: -30%;
	left: 10%;
	-ms-transform:rotate(-10deg);/*ie9*/
	-webkit-transform:rotate(-10deg);/*safari*/
	transform: rotate(-10deg);/*standart*/
}
#ads-modal .ads-pricetag{
	top: 51%!important;
	right: 24%!important;
}
#ads-modal .ads-footer{
	font-size: 1.3rem;
}

#modalOrderConfirm .modal-content{
	width: 100vw;
	/*background-image: url("../UI/New Confirmed/bg.jpg");*/
	background-size: cover;
	background-repeat: no-repeat;
}
.banner-img{
	width: 150px;
	height: 85px;
}

/*MODAL SETTING*/
.modal{
	overflow-y: scroll;
}
.modal:after {
	content: ""; 
	display: block; 
	background: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	bottom: 0; 
	width: 100%;
	z-index: -1; 
}
.modaloverlay{
	background-color: rgba(0,0,0,0.5);
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: 1050;
}

/*CONFIRMED PAGE STYLE*/
.start-end-header .font1{
	font-size: 1.3rem;
}
.start-end-header .font2{
	font-size: 2.2rem;
}
.left{
	left: 0;
}
.center{
	left: 50%;
	/*top: -10%;*/
	-ms-transform:translate(-50%,0);/*ie9*/
	-webkit-transform:translate(-50%,0);/*safari*/
	transform: translate(-50%,0);/*standart*/
}
.tableposition{
	left: 50%;
	top: 75%;
	-ms-transform:translate(-50%,0);/*ie9*/
	-webkit-transform:translate(-50%,0);/*safari*/
	transform: translate(-50%,0);/*standart*/
}
.right{
	right: 0;
}

/*show rotatenotification when phone is in landscape view*/

@media screen and (orientation:landscape) {
	.turnDeviceNotification {
		display: block!important;
	}
}


/*hide rotatenotificaton when software keyboard is active*/
@media (max-width:550px) { 
	.turnDeviceNotification.when-keyboard-showing {
		display: none!important;
	}
}

/*BREAKPOINT*/
@media(min-width: 567px){
	.bottom{
		height: 3.75rem!important;
	}
	.main-body,.ojjumodal .modal-body{
		height: calc(100vh - 3.25rem)!important;
		padding-bottom: 1rem!important;
	}
	.right-menu,.left-menu{
		height: 100%!important;
		padding-bottom: 2rem!important;
	}
	.pricefont-size{
		font-size: 1.5rem!important;
	}
	.main-content{
		font-size: 1.3rem!important;
	}
	.sub-content{
		font-size: .9rem!important;
	}
	.left-menu .list-group-item,.plus-icon,.minus-icon{
		font-size: .7rem!important;
	}
	.plus-button .rounded-circle,.minus-button .rounded-circle{
		width: 30px!important;
		height: 30px!important
	}
	.m_minus-icon,.m_plus-icon{
		width: 100%!important;
	}
	#ads-modal .ads-pricetag{
		top: 50%!important;
		right: 21%!important;
	}
	.col-xs-3{
		-ms-flex: 0 0 25%!important;
		flex: 0 0 25%!important;
		max-width: 25%;
	}
	.col-xs-4{
		-ms-flex: 0 0 33.333333%!important;
		flex: 0 0 33.333333%!important;
		max-width: 33.333333%!important;
	}
	.col-xs-7{
		-ms-flex: 0 0 50%!important;
		flex: 0 0 50%!important;
		max-width: 50%!important;
	}

}
@media(min-width: 768px){
	.bottom{
		height: 6.5rem!important;
	}
	.bottom-menu,td,tr{
		font-size: 1.2rem!important;
	}
	.pricefont-size{
		font-size: 1.5rem!important;
	}
	.main-content{
		font-size: 1.2rem!important;
	}
	.sub-content{
		font-size: 1.2rem!important;
	}
	.left-menu .list-group-item,.plus-icon,.minus-icon{
		font-size: 1rem!important;
	}
	.plus-button .rounded-circle,.minus-button .rounded-circle{
		width: 40px!important;
		height: 40px!important
	}
	.m_minus-icon,.m_plus-icon{
		width: 100%!important;
	}
}

/*ROTATE NOTIFICATION*/
.turnDeviceNotification {
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
  z-index: 99999;
}
.turnDeviceNotification {
  background-image:url('../rotate.png');
  background-size:cover;
  background-position-x: center;
  height: 100vh;
}

/*LOADER*/
.c-loader{
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}
.c-loader{
  background-color: rgba(0,0,0,0.7);
}
.c-loader.active{
	display: flex;
}

.paynow.focus, .paykasir.focus {
    background-color: #bb271b !important;
    color: #fff!important;
    opacity: 1;
    transition: .2s all ease-in;
}

.maincolor{
  /*background-color: #bb271b!important;*/
  background-color: #bb271b!important;
}

.c-border-bottom{
  border-bottom: 1px solid lightgrey;
  box-shadow: 0 0.5rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.flexfix:after, .flexfix:before{
    display: none!important;
}

.cont-flow{
    overflow-x: auto;
    white-space: nowrap;
}

.category-column{
  overflow-x: auto;
  white-space: nowrap;
}
#set-categorylist{
  line-height: 1;
  color: #686868;
}
.categorylist{
  cursor: pointer;
  user-select: none;
  border-bottom: 3px solid transparent;
  padding-left: .5rem!important;
  padding-right: .5rem!important;
  padding-top: 0;
  padding-bottom: .5rem!important;
  font-size: 17px;
}

.categorylist.active{
  border-bottom: 3px solid #bb271b;
}

.list-unstyled{
	padding-left:0;
	list-style:none
}

.list-inline{
	padding-left:0;
	margin-left:-5px;
	list-style:none
}

.list-inline>li{
	display:inline-block;
	padding-right:5px;
	padding-left:5px
}

/*============Accordion============*/
.accordion{
    height: 60px;
    max-height: 60px;
    margin: 0 auto;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(225,225,225,1);
    overflow: hidden;
    transition: max-height 1.5s ease;
    margin-bottom: 15px;
}
.accordion .accordion_tab{
  padding: 20px;
  cursor: pointer;
  user-select: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  color: #0C91CD;
}
.accordion .accordion_tab .accordion_arrow{
  float: right;
  transition: all 0.3s ease;
}
.accordion .accordion_tab.active .accordion_arrow{
  transform: rotate(180deg);
}
.accordion.active{
  height: auto;
  max-height: 4000px;
}
.accordion .accordion_content{
  padding: 20px;
  border-top: 1px solid #e9e9e9;
  font-size: 1.7rem;
}

.accordion .accordion_content .accordion_item{
  margin-bottom: 20px;
}

.border-black{
  border: 1px solid black;
}

.rounded-lg{
  border-radius: 1.5rem;
}