html, body {
    height: 100%;
}

.btn-outline-success{
	border: 2px solid #55C29C!important;
    color: #55C29C!important;
}

.btn-success{
	background:#55C29C!important;
}


.panel-login:after{
	position: absolute;
	display:block;
	content:"";
	top: 0;
	left: 0;
	z-index: 1;
    background: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
}

.row-el{
	height: calc(100% - 70px); 
	overflow: hidden;
	position:relative;
}

.header-comanda{
	border-bottom: 1px solid #e0e0e0;
}
.header-comanda.new-comanda{
	border: 3px solid #fe1212;
	border-bottom: 0;
}

.header-comanda.inactiv.new-comanda{
	border-radius: 0px !important;
}

.header-comanda.inactiv.new-comanda:before {
	border-top: 3px solid #fe1212;
}

.update-comanda-view .header-comanda{
	border: 3px solid #fe1212;
	border-bottom: 0;
} 


.row-el .footer-comanda{
	max-height: 75px;
}
/* .footer-comanda{
	border-top:1px solid #e0e0e0; 
	min-height:67px;
} */

.footer-comanda.new-comanda{
	border: 3px solid #fe1212;
	border-top: 0;
}


.update-comanda-view .footer-comanda{
	border: 3px solid #fe1212;
	border-top: 0;
}

.body-el{
	overflow-x: hidden;
	overflow-y: scroll;
	max-height: calc(100% - 140px);
}

.body-el.new-comanda{
	border-left: 3px solid #fe1212;
	border-right: 3px solid #fe1212;
}

.update-comanda-view .body-el{
	border-left: 3px solid #fe1212;
	border-right: 3px solid #fe1212;
}


.body-el.inactiv{
	overflow-y: hidden;
}

.body-el.overlay{
    position: relative;
}

.overlay-content{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.inactiv{
	position:relative;
	border-top: 0px !important;
	border-bottom: 0px !important;
}

.inactiv:before{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
    background: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
    display: block;
	content:"";
	border-radius: inherit;
}

.body-el.inactiv{
	min-height:100px;
}

.body-el.inactiv:after{	
	font-family: "Font Awesome 5 Free";
	font-size:100px;
	content:"\f05e";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
    width: 100%;
    height: 100%;
	color: #ffab91;
	letter-spacing:2px;
 	display: flex;
    align-items: center;
    justify-content: center; 
	font-weight: 600;
} 

/* scroll body el */
.body-el::-webkit-scrollbar-track {
	background-color: #fff;
	border-radius: 10px;	
}
.body-el::-webkit-scrollbar {
	width: 4px;
	background-color: #fff;		
}
.body-el::-webkit-scrollbar-thumb {
	border-radius: 10px;	
	background-color: #FF9C30; 
}


.body-el.overlay::-webkit-scrollbar, .body-el.inactiv::-webkit-scrollbar, .body-el.new-comanda::-webkit-scrollbar{
	width: 0px;
} 


.panel-btn{
	bottom:0; 
	height:71px;
}

.chat-message-form{
	bottom:0px; 
	right: 0;
	padding: inherit; 
	height:195px;
	overflow:hidden;
}

.chat-message-write{
	bottom: 0px; 
	right: 0;
	padding: inherit; 
	height:70px;
	overflow:hidden;
}

.chat-message-view {
	height: calc(100% - 195px);
    overflow-x: hidden;
    overflow-y: scroll;
	display: flex;
    flex-direction: column-reverse;
}


.chat-message-view.view-chat-large{
	height: calc(100% - 70px);
}


/* scroll chat-message-view */
.chat-message-view::-webkit-scrollbar-track {
	
	border-radius: 10px;
}
.chat-message-view::-webkit-scrollbar {
	width: 4px;
	
}
.chat-message-view::-webkit-scrollbar-thumb {
	border-radius: 10px;	
	background-color: #FF9C30; 
}

/* chat */
.chat-left{
	position:relative;
	margin-left:9px;
	border-radius:5px;
	min-height: 30px;
}

.chat-left:after{
	border-width: 0px 15px 15px 0;
	bottom: auto;
    top: 0;
    left: -10px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
}

.chat-left.mesaj-necitit{
	background:#9793DE;
}
.chat-left.mesaj-necitit:after{
	 border-color: transparent #9793DE transparent transparent;
}

.chat-left.mesaj-citit{
	background:#85DBBD;
}
.chat-left.mesaj-citit:after{
	 border-color: transparent #85DBBD transparent transparent;
}

.activ .chat-left{
	background: #55C29C !important;
}

.activ .chat-left:after{
	border-right-color: #55C29C;
}

.chat-right{
	position: relative;
	margin-right:8px;
	border-radius:5px;
	background: #ffe0b2;
	min-height: 30px;
}

.chat-right:after{
	border-width: 15px 15px 0px 0px;
    border-color: #ffe0b2 transparent transparent transparent;
    bottom: auto;
    top: 0;
    right: -10px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
} 

.panel-chat-view{
	background-image: url(../../imagini/restaurant3.jpg); 
 	background-size: cover; 
	background-repeat: no-repeat;
	background-position: center; 
	z-index: 1040;
	border-radius:5px;
}



.panel-chat-view:after{
	width: 100%;
    display: block;
    content: "";
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
	background: rgba(0,0,0, .3); 
	z-index: -1;
	border-radius:3px;
	/* border: 1px solid rgba(255,187,51, .6);	 */
	border: 1px solid #fb3;
    border-top-left-radius: 0px !important;
}



.shadow-black{
	box-shadow: 5px 5px 20px rgba(0, 0, 0, .7);
}

.btn-activ-paginare{
    background: #fff !important;
    color: #424242;
}

.btn-activ-paginare:hover{
    color: #424242;
}

.header-nr-bon, .header-nr-bon2{
	position:relative;
	/* border-top-right-radius: .25rem!important; */
}

.header-nr-bon2{
	border-top-right-radius: .25rem!important;
}


/* .header-nr-bon:before{
    border-width: 30px 0px 30px 20px;
    border-color: transparent transparent transparent #f5f5f5;
    bottom: auto;
    top: 0;
    left: -1px;
    content: '';
    width: 0;
    border-style: solid;
    position: absolute;
    height: 100%;
} */  

.header-nr-bon:before{
    border-width: 28px 0px 30px 15px;
    border-color: transparent transparent transparent #f5f5f5;
    bottom: auto;
    top: 0;
    left: -1px;
    content: '';
    width: 0;
    border-style: solid;
    position: absolute;
    height: 100%;
}

.header-nr-bon2:before{
    border-width: 28px 0px 30px 15px;
    border-color: transparent transparent transparent #ffb74d;
    bottom: auto;
    top: 0;
    left: -1px;
    content: '';
    width: 0;
    border-style: solid;
    position: absolute;
    height: 100%;
}


.row-chat{
	margin-left:-14px;
	margin-right:-14px;
}

.btn-renunt-mesaj, .btn-trimit-mesaj {
	font-size:13px; 
	padding: .54rem .7rem;
	white-space:nowrap;
} 


.btn-scroll-down, .btn-scroll-up, .btn-edit-message{
	padding:1rem .7rem !important;
	margin:0px;
}

.btn-scroll-down, .btn-scroll-up{
	padding-top: calc(1rem - 2px) !important;
    padding-bottom: calc(1rem - 2px) !important;
}

.btn-trimit-mesaj .fas{
	font-size:.7rem;
}

@media (max-width: 920px) {
	.btn-trimit-mesaj .fas {
		display:none;
	}
}

@media (max-width: 767px) {
	.chat-message-form {
		height: 275px;
	}
	
	.chat-message-view {
		height: calc(100% - 250px);
	}
	
	.btn-scroll-down, .btn-scroll-up, .btn-edit-message{
		padding-top: .5rem !important;
		padding-bottom: .5rem !important;
		margin-bottom: 10px;
	}
	
	.chat-message-view.view-chat-large {
		height: calc(100% - 150px);
	}
	
	.chat-message-write{
		height: 150px;
	}
}

.btn-toggle-chat{
	width: 35px;
    height: 35px;
	padding: 0px !important;
	margin: 0px;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
	border-right: 0px !important;
	border-width: 1px !important;
	z-index: 1050;
	/* box-shadow: none; */
}

.panel-chat-view{
	width: calc(100% - 35px);
	float:right;
	border-top-left-radius: 0px !important;;
}
.panel-chat-view::after{
	clear: both;
}

.full-display-bonuri .display-bonuri{
	width: calc(100% - 27px) !important;
}

.full-display-bonuri .display-chat{
	width: 27px !important;
}

.full-display-bonuri .display-chat .panel-chat-view{
	display: none;
}

.row-cols-1>* {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.row-cols-2>* {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.row-cols-3>* {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.row-cols-4>* {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}

.row-cols-5>* {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

.row-cols-6>* {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

#btn-paginare .counter.counter-md + .counter.counter-md {
	top: -1px;
	right: 10px;
	font-weight: 200;
}

.produs-gata{
	text-decoration: line-through;
	color: #fe1212;
}

.produs-gata .dark-grey-text, .produs-gata .dark-grey-text:focus, .produs-gata .dark-grey-text:hover{
	color: #ABAAAA !important;
}