/* Mobile first layout SmartMenus Core CSS (it's not recommended editing these rules)
   You need this once per page no matter how many menu trees or different themes you use.
-------------------------------------------------------------------------------------------*/

.sm{box-sizing:border-box;position:relative;z-index:9999;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:default;}
.sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;}
.sm *,.sm *::before,.sm *::after{box-sizing:inherit;}

figure { margin:0; }
body {
	margin-left: 50px;
	margin-right: 50px;
	-webkit-user-select: none;  /* Chrome all / Safari all */
  	-moz-user-select: none;     /* Firefox all */
  	-ms-user-select: none;      /* IE 10+ */
  	user-select: none;
}

.login-screen {
	background-color: #ffffc6;
	padding: 20px;
	border-radius: 5px
}
.login-form {
    text-align: center;
}
.app-title {
  width: 55px;
  height: 50px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:20px;
}

.app-title img {
	height: 50px;
}

.login-field {
	text-align: center;
	background-color: #fcfcfc;
	border: 2px solid transparent;
	border-radius: 3px;
	border-color:#cacaca;
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 5px;
	padding: 10px 0 !important;
	width: 250px !important;
	transition: border .5s;
}
.btn {
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  border: 2px solid transparent;
  background: #ff9000;
  color: #ffffff;
  font-size: 16px;
  line-height: 25px;
  padding: 10px 0;
  text-decoration: none;
  text-shadow: none;
  border-radius: 3px;
  box-shadow: none;
  transition: 0.25s;
  display: block;
  width: 250px;
  margin: 0 auto;
  margin-bottom:10px;
}

.btn:hover {
  background-color: #ee8000;
  border: 2px solid white;
  border-radius: 5px;
  font-size: 18px;

}

.container {
	width: 90%;
	max-width: 90%;
	margin-left: 5%;
	margin-top: 5px;
	font-family1: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
	font-family: "Roboto Condensed","Arial Narrow", Arial, Helvetica, sans-serif;
	font-size: 1.1em;
}
.row-route {
	display: flex;
	max-width: 800px;
	margin: 0 auto;
  /*	width: 60%;	margin-left: 20%;*/
  	text-align: center;
  	align-items: center;
	border: 1px solid #ffa000;
	padding: 5px 15px 5px 5px;
}
.num_bus {
	font-size: 0.9em;
	font-style: italic;
	font-weight: bold;
	color:blue;
}
.row-agency, .row-manager {
	display: flex;
	font-size: 1em;
  	width: 90%;	
  	margin-left: 5%;
  	text-align: center;
  	align-items: center;
	border: 1px solid #ffa000;
	padding: 3px 5px;
}
.row-route:hover, .row-agency:hover {
	background-color: #FEFABA;
}

.route-deactive, .agency-deactive {
	background-color: #fcf69a !important;
	color: #ee8000;
}

.row-filter {
	background-color: #FCEBCE;
	font-size: 1em;
}
.row-filter:hover {
	background-color: #FCEBCE !important;	
}
.open-route {
	background-color: #FFF2E2;	
}
.isfrom {
	background-color: #FCEBCE !important;
	border-radius: 10px;
}
.name-route {
	width: 85%;
}
.command-route {
	width: 5%;
	max-width: 50px;
	min-width: 22px;
	align-items: flex-end;
	margin-left:  10px;
	padding: 0 1px;
	margin-right1: 10px;
}
div.command-route > img:hover{
	cursor: pointer;
}

#button-save span, #button-print span, #id-save-order span, #id-delete-order span, #button-book span,#button-ok span,#button-restore span, 
#button-cancel span, #button-pay span, #button-refund span, #button-chat span, #button-confirm span, #id-manager span {
	display: none;
	padding			: 2px 3px; 
	margin-left		: 2px; 
	margin-top: -16px;
}
#button-save:hover span, #button-print:hover span, #id-save-order:hover span, #id-delete-order:hover span, #button-book:hover span, #button-ok:hover span,#button-restore:hover span, 
#button-cancel:hover span, #button-pay:hover span, #button-refund:hover span, #button-chat:hover span, #button-confirm:hover span, #id-manager:hover span {
	display			: inline; 
	position		: absolute; 
	background		: #eeeeee; 
	border			: 1px solid #cccccc; 
	border-radius   : 6px;
	color			: #6c6c6c;
}
.row-item {
	display: flex;
  	width: 60%;	margin-left: 20%;
  	text-align: center;
  	align-items: center;
	border: 1px solid #FCEBCE;
	padding: 5px 20px;
	font-size: 0.8em;
}
.date-trip {
	width: 15%;
}
.bus-number {
	width: 15%;
}
.bus-name {
	width: 25%;
}
.trip-route {
	width: 30%;
}
.filter-from {
	margin-left: 20px;
	#margin-right: 20px;
	font-size: 0.8em;
}
.code-agency {
	width: 4em;
}
.name-agency {
	width: 20%;
	text-align: left;
}
.name-manager, .email-agency {
	width: 25%;
	text-align: left;
}
.login-manager {
	width: 20%;
	text-align: left;
}

#new-trip, #id-agency {
	display: none;
/*  	width: 40%;	margin-left: 30%;
  	max-width: 440px;*/
  	text-align: center;
  	align-items: center;
	border: 1px solid #ffa000;
	border-radius: 10px;
	padding: 5px 20px;
	margin-top:1em;
	font-size: 18px;
	position: fixed;
	background-color: #f8f4b9;
}
.lb-new-trip {
	width:40%;
	text-align:right;
	margin-right:1em;
	padding-top: 6px;
}
.trip-input {
	margin: 2px;
	border-radius: 8px;
	border: 1px solid #ce591f;
	padding: 5px;
	font-size: 0.9em;
	width: 15em;
}
.lb-new-agency {
	width:30%;
	text-align:right;
	margin-right:1em;
	padding-top: 6px;
}
.agency-input {
	margin: 2px;
	border-radius: 8px;
	border: 1px solid #ce591f;
	padding: 5px;
	font-size: 0.9em;
	width: 20em;
}
.agency-filter-input {
	margin: 2px;
	border-radius: 8px;
	border: 1px solid #ce591f;
	padding: 2px;
	font-size: 0.9em;
	width: 8em;
}
.date-trip {
	width: 3em;
	font-size: 1em;
	border: 1px solid #ffa000;
	border-radius: 5px;
	color:	#763516;
	text-align: center;
}
.trip-date {
	font-size: 1em;
	color:	#763516;
	text-align: center;
	margin-left: 5px;
	margin-right: 5px;
}
.places-list {
	width1: 2.8em;
	font-size1: 1em;
	border: 1px solid #ffa000;
	border-radius: 5px;
	color:	#763516;
	text-align: center;
}
.select-type {
	min-width: 140px;
	border: 1px solid #ff9000;
	border-radius: 5px;
	font-size: 0.8em;
	color: 	#c0680b;
}
#new-pay, #new-pay-show {
	display: none;
  	width: 40%;	
  	margin-left: 20%;
  	text-align: center;
  	align-items: center;
	border: 1px solid #ffa000;
	padding: 5px 20px;
	margin-top:1em;
	font-size: 18px;
	position: fixed;
	background-color: #f8f4b9;
}
.lb-new-pay {
	width:30%;
	text-align:right;
	margin-right:1em;
}

.pbody {
  align-items: center;
  color: #555;
  display: flex;
  font-family: 'Inter UI', sans-serif;
  font-size: 1.0em;
  justify-content: center;
  height1: 100vh;
  margin: 0;
  margin: 15px 0;
}
.pcontainer {
  display: flex;
  position: relative;
}
.index {
  cursor: pointer;
  display: block;
  margin-top: 2px;
  margin-left: 1px;
  margin-right: 19px;
  min-width:20px;
  max-width: 20px;
  text-align: center;
  padding1: 5px;
  user-select: none;
  -moz-user-select: none;
}
.index:last-child {
  margin: 0;
}
#id-ag-managers {
	display: none;
 	text-align: center;
 	align-items: center;
	border: 1px solid #ffa000;
	border-radius: 10px;
	padding: 5px 20px;
	position: absolute;
	background-color: #f8f4b9;
	top: 80px;
	left: 10px;
}
.manager-name {
	width: 50%;
	margin-right: 10px;
}
.manager-login {
	width: 35%;
	margin-right: 10px;
}

.row-pay {
	display: flex;
	align-items: center;
}
ul.list_pay li {
	list-style-type: none;
}
ul.list_pay li:nth-child(odd) {
	background-color: white;	
}
ul.list_pay li:nth-child(even) {
	background-color: #fff0d9;	
}
.row-pay .date-pay {
	width: 80px;
	min-width: 80px;
	text-align: center;
}
.row-pay .suma-pay 
{
	width: 40px;
	min-width: 40px;
	text-align: right;
	margin: 0 5px;
}
.row-pay .grn-euro
{
	width: 30px;
	min-width: 30px;
	text-align: center;
	margin: 0 5px;
}
.row-pay .kassa-bank
{
	width: 30px;
	min-width: 30px;
	text-align: center;
	margin: 0 5px;
}
ul.report-fin-list li {
	list-style-type: none;
	max-width: 1000px;
	margin: 0 auto;	
}
ul.report-fin-list li:nth-child(odd) {
	background-color: white;	
}
ul.report-fin-list li:nth-child(even) {
	background-color: #fff0d9;	
}
.report-row-pay {
	display:flex;
	justify-content:center;
	align-items:center;
	max-width: 1000px;
	margin: 0 auto;
	font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
}
.report-row-pay .rep-date {
	width: 5em;
	min-width: 5em;
	1max-width: 5em;
	margin: 0 0.5em;
	text-align: center;
}
.report-row-pay .rep-agency {
	width: 14em;
	1min-width: 14em;
	1max-width: 14em;
	margin: 0 0.5em;
	text-align: center;
}
.report-row-pay .rep-suma {
	width: 4.3em;
	1min-width: 3.6em;
	1max-width: 3.6em;
	margin: 0 5px;
	text-align: right;
}
.report-row-pay .rep-order {
	width: 3em;
	1min-width: 3em;
	1max-width: 3em;
	margin: 0 0.5em;
	text-align: center;
}
.report-row-pay .rep-comment {
	width: 10em;
	1min-width: 18em;
	1max-width: 18em;
	margin-left: 0.5em;
	text-align: left;
}

svg {
  left: -8px;
  position: absolute;
  top: -8px;
  transition: transform 600ms;
  width: 46px;
}
path {
  fill:none;
  stroke:#ffa544;
  stroke-dasharray: 150 150;
  stroke-width:10;
}
.pcontainer.open.right path {
  animation: OpenRight 700ms;
}
.pcontainer.open.left path {
  animation: OpenLeft 700ms;
}
.pcontainer.i1 svg {
  transform: translateX(0);
}
.pcontainer.i2 svg {
  transform: translateX(40px);
}
.pcontainer.i3 svg {
  transform: translateX(80px);
}
.pcontainer.i4 svg {
  transform: translateX(120px);
}
.pcontainer.i5 svg {
  transform: translateX(160px);
}
.pcontainer.i6 svg {
  transform: translateX(200px);
}
@keyframes OpenRight {
  25% { stroke-dasharray: 100 150; }
  60% { stroke-dasharray: 100 150; }
  100% { stroke-dasharray: 150 150; }
}
@keyframes OpenLeft {
  25% { stroke-dashoffset: -50px; }
  60% { stroke-dashoffset: -50px; }
  100% { stroke-dashoffset: 0; }
}