:root {
	color-scheme: only light !important;
}
@media screen {
	/**
    * Global elements
    */
	body {
		color : #333;
		background : #fafafa;
		font-family : Roboto, sans-serif;
		font-size : 0.75em;
		margin: 0;
	}
	h1 { font-size : 1.7em; margin-top : 0; }
	h2 { font-size : 1.5em; }
	h3 { font-size : 1.3em; }
	h4 { font-size : 1.1em; }
	h5 { font-size : 1.0em; }
	h1, h2, h3, h4, h5 {font-family : Roboto, sans-serif; color : #f22; }



	img { border : 0; }
	form { margin : 0; }
	a { color : #f22; background : none; text-decoration : underline; }
	a:hover { color : #fff; background : #f22; text-decoration : none; }

	.column { float : left; position : relative; }
	#content-container { width : 100%; margin: 0 auto; padding : 0; }
	#left-container { max-width : 200px; }

	#right-container { width : 300px; margin-right : -300px; }

	#footer { clear : both; }
	/**
    * Style the main page areas
    */
	#header {
		background : url(../../application/admin/views/images/logo_small.jpg) no-repeat 5px center white;
		height : 60px;
		border-bottom : 1px solid black;
	}

	#header img { display : none; }

	.flex-container {
		display: flex;
	}

	.flex-container .w-50 {
		flex: 1;
		max-width: 50%;
		box-sizing: border-box;
	}

	.flex-container .w-100 {
		flex: 1;
		max-width: 100%;
		box-sizing: border-box;
	}

	.flex-container .w-75 {
		flex: 1;
		max-width: 75%;
		box-sizing: border-box;
	}

	.flex-container .w-33 {
		flex: 1;
		max-width: 33%;
		box-sizing: border-box;
	}

	.flex-container .w-25 {
		flex: 1;
		max-width: 25%;
		box-sizing: border-box;
	}


	#content {
		padding : 0px;
		line-height : 1.8em;
	}

	#limit {
		text-align:right;
	}

	#breadcrumbs, #limit {
		font-size : 0.9em;
		color : black;
		background-color:#eee;
		padding-left:10px;
		padding-right:10px;
	}

	#breadcrumbs a, #limit a {
		color : black;
		text-decoration: none;
		font-weight: bold;
	}

	#breadcrumbs a:hover, #limit a:hover{
		color : black;
		background : none;
	}
	#left-container .box, #right-container .box {
		margin : 0 10px 10px 10px;
		/*padding : 10px;*/
		border : 1px solid #eee;
		font-size : 0.9em;
		line-height : 1.6em;
	}
	#footer {
		color : #999;
		font-size : 0.8em;
		padding : 10px;
		text-align : center;
	}
	/**
    * Tabbed navigation
    */
	#nav {
		margin-top : -1px;
		margin-bottom : 20px;
		font-size : 0.9em;
		text-transform : uppercase;
	}
	#nav ul {
		margin : 1px auto;
		padding : 4px 0;
		text-align : center;
	}
	#nav li {
		list-style : none;
		padding : 0;
		margin : 0;
		display : inline;
	}
	#nav a {
		margin-top : 0px;
		background : #eee;
		color : black;
		text-decoration : none;
		padding : 4px 8px;
		text-align : center;
		border : 1px solid #922;
		border-top:none;
		margin : 0 3px;
		font-weight : bold;
	}
	#nav a:hover {
		color : black;
	}
	#nav li.active a {
		color : black;
		background : white;
		font-weight : bold;
		border-top: none;
	}

	div.error {

		padding : 5px;
		margin : 5px 0;

	}
	form .row div.error {
		font-size : 0.8em;
		line-height : 1em;
	}

	div.system {
		background-color : green;
		padding : 5px;
		margin : 5px 0;
		color : white;
		text-align:center;
	}
	form .row div.system {
		font-size : 0.8em;
		line-height : 1em;
	}



	form .row { margin : 10px 0; clear : both; }
	form .row label {
		width : 150px;
		float : left;
		display : block;
		font-weight : bold;
	}
	form .row input[type=text] { width : 100px; }
	form div.input { border-style:solid; border-width:1px;  width : 100px; height:1.6em; }


	form .row input[type=password] { width : 230px; }
	form .captcha { margin-left : 150px; }
	form .submit {
		padding : 5px;
		margin-top : 10px;
		background : #eee;
	}

}
@media print {
	/**
    * Elements to hide
    */
	#nav, #left-container, #right-container { display : none; }
}
#true-content
{
	width : 100%; padding : 0;
	min-width: 900px;
}
.NP, .integrations .orderGridRow
{
	background-color: #fdb861;
}
.P
{
	background-color: #8aca8c;
}
.LM
{
	background-color: #CAC9CA;
}
.Z
{
	background-color: #089aef8c;
}
.NZ
{
	background-color: #ff00ff;
}

.ZL
{
	background-color: #f140d7;
}

.B
{
	background-color: #fc5c32;
}

.A
{
	background-color: #3E205BBF;
	color: white;
}
.ZA
{
	background-color: #a96f79;
	color: #FFFFFF;
}
.O
{
	background-color: #f5e168;
}

.PRZY
{
	background-color: #f5e168c4;
}
.INNY {
	background-color: #FAAFBE;
}
.NOT_PAID {
	background-color: #c4c4c4;
}

#NPBOX, #PBOX, #ZBOX, #NZBOX, #ABOX, #PENDING
{
	height:1em;
	width:30px;
	float:left;
	margin-right: 10px;
	text-align:center;
}
#NPBOX { background-color: #f7dc97; }
#PBOX  { background-color: #1c773c;}
#ZBOX  { background-color: blue;}
#NZBOX { background-color: #e51024;}
#ABOX  { background-color: black;}
#PENDING { background-color: olive;}

.pending {
	background-color: olive;
}

.new {
	background-color: #ffa407;
}

.approved,.reviewed {
	background-color: #0c9410;
}

.rejected {
	background-color: red;
}

.pending {
	background-color: olive;
}

.datatable {
	border-collapse: collapse;
}

.datatable tr td {
	font-family : Roboto, sans-serif;
	font-size : 0.9em;
	border-top: 4px solid white;
}

tr {
	vertical-align:top;

}

td.label, td.input {
	padding: 8px 15px 5px;
	text-align:left;
	height:20px;
}

td.label {
	background-color: #cac9ca;
	font-weight:bold;
	font-size : 12px;
	width:160px;
}

td.input {
	background-color: #e0dee0;
	border-bottom: 1px solid #fff;

}

td.input input {
	border-style:solid; border-width:0px;  width : 360px;
}

tr.action td {
	padding-top:10px;
	padding-bottom:10px;
	border-top:solid 1px #b8b089;
	background-color:#fff7d0;
	text-align:center;
}

tr.filter td {
	text-align:left;
	background-color:#ECECEC;
	padding-left:10px;
	padding-bottom:3px;
	padding-top:3px;
}

tr.action td input, tr.action td select {
	border:1px solid #b8b089;
	font-family : Roboto, sans-serif;
	font-size : 1.2em;
	font-weight:bold;
}

tr.filter td input, tr.filter td select {
	border:1px solid #b8b089;
	font-family : Roboto, sans-serif;
	font-size : 0.9em;
	font-weight:bold;
	cursor: pointer;
}

div.action {
	background: #f3f3f3;
	border-bottom: 1px #d8d8d8 dashed;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1px auto;
	padding: 3px 0;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 1px;
	gap: 10px;
}

div.action input, div.action button {
	background-color: #f3f3f3;
	border: 1px solid #cec8b7;
	font-family: Roboto, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	padding: 3px 7px;
	color: #2e2e2e;
	border-radius: 2px;
	box-shadow: #f0f0f0 1px 1px 2px;
}

div.action input:hover, div.action button:hover {
	background-color: #ece9d8;
}

div.action a:hover {
	background: none;
}

.view_button {
	background-color: #ece9d8;
	border:1px solid #b8b089;
	text-align:center;
	color:black;
	margin:0px 2px;
	font-size: 0.9em;
	font-family: Roboto, sans-serif;
	font-weight: bold;

}

.view_button a:link, .view_button button{

	font-family : Roboto, sans-serif;
	font-size : 0.9em;
	font-weight:bold;
	color:black;
	text-decoration:none;
	border: none;
	background-color: transparent;
}

.view_button a:hover {
	font-family : Roboto, sans-serif;
	font-size : 0.9em;
	font-weight:bold;
	color:black;
	text-decoration:none;
	background-color:#ece9d8;
}

.view_button a:visited {
	font-family : Roboto, sans-serif;
	font-size : 0.9em;
	font-weight:bold;
	color:black;
	text-decoration:none;
}

tr.filter td input[type='text'] {
	font-size : 1em;
}

.first_td {
	width:10px;
}

.privateOrGroup td {
	text-decoration: underline;
}

.heading {
	text-align:center;
	background-color:#808080;
	font-family : Roboto, sans-serif;
	font-size : 1.05em;
	color: white;
}

.searchBox {
	padding: 1px 6px;
	margin: auto;
	display: block;
	width: 30%;
	transition: .2s all;
	background: #aaa;
	border: 1px solid #555;
	border-radius: 4px;
}

.searchBox:focus, .searchBox:not(:placeholder-shown) {
	width: 80%;
	background: #efefef;
}

.last_row {
	border-bottom: 1px solid #808080;
}

.error {
	font-family : Roboto, sans-serif;
	font-size:12px;
	font-weight:800;
	background-color:#CE171E;
	color:white;
	margin-bottom:1px;
	margin-top:3px;
	padding-bottom:1px;
	padding-left:5px;
	padding-top:1px;
	text-align: center;
}

#paging {
	font-family : Roboto, sans-serif;
	font-size : 0.9em;
	background-color: #fff7d0;
	text-align:center;
	color:black;
	margin:0px 0px;
	font-weight:bold;

}

#paging a:link {

	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	color:black;
	text-decoration:none;

}

#paging a:hover {
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	color:black;
	text-decoration:none;
	background-color:#ece9d8;
}

#paging a:visited {
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	color:black;
	text-decoration:none;
}

#h48_search {
	height:2em;
	width:3em;
	float:left;
	display: inline;
	background-color:#808080;
	margin-right:1em;
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	color:white;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

#h24_search {
	height:2em;
	width:3em;
	float:left;
	background-color:#808080;
	margin-right:1em;
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	color:white;
	padding-top:0.5em;
	padding-bottom:0.5em;
}

#h48 {
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	height:2em;
	vertical-align:middle;
	padding-top:0.5em;
	padding-bottom:0.5em;
	padding-left:0.5em;
}

#h24 {
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
	height:2em;
	vertical-align:middle;
	padding-top:0.5em;
	padding-bottom:0.5em;
	padding-left:0.5em;
}

.legend td  {
	padding-left: 1em;
	font-family : Roboto, sans-serif;
	font-size : 1.0em;
	font-weight:bold;
}

.view_table {
	width		: 100%;
	font-family : Roboto, sans-serif;
	font-size	: 11px;
	background: #e0dee0;
}

.other_services {
	max-height: 250px;
	display: block;
	overflow-y: scroll;
}

.even {
	background-color: #e0dee0;
}

.odd {
	background-color: #cac9ca;
}


.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 16px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
}

.button5 {
	margin: 0;
	background-color: white;
	color: black;
	border: 2px solid #555555;
	width:100%;
	text-align: left;
	font-weight: bold;
}

.button5:hover {
	background-color: #555555;
	color: white;
}

#config-main .row label {
	width: 260px !important;
}

table#assigned_addressess {
	height:100%;
	top:30%;
	left:40%;
	position: fixed;
	width:480px;
	height:360px;

	border: 1px solid #333;
	box-shadow:
			0 2.8px 2.2px rgba(0, 0, 0, 0.034),
			0 6.7px 5.3px rgba(0, 0, 0, 0.048),
			0 12.5px 10px rgba(0, 0, 0, 0.06),
			0 22.3px 17.9px rgba(0, 0, 0, 0.072),
			0 41.8px 33.4px rgba(0, 0, 0, 0.086),
			0 100px 80px rgba(0, 0, 0, 0.12)

}

.row-payment-status-begin {
	padding-left:15px;
}
.copy a {
	cursor: pointer;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.9em;
}
.orderList tr:hover .copy {
	opacity: 1;
}

.orderList td {
	padding: 2px;
	box-sizing: border-box;
}

.orderList .address {
	padding-top: 3px;
	font-size: 10px;
	line-height: 12px;
}
.orderList .address::first-line {
	font-weight: bold;
	font-size: 12px;
}


.copy {
	opacity: 0;
	transition: all 0.3s;
}
.copy a:hover {
	font-size: 0.9em;

}
#seats label {
	display: inline-block;
	width: 50px;
}
#seats input {
	width: 30px;
}
.flex {
	display: flex;
	justify-content: flex-start;
}
.flex select {
	height: 20px;
}
.flex div {
	margin: 0 10px;
}
.alertMessage {
	display: none;
	padding: 5px 20px;
	text-align: center;
	width: 150px;
	color: #000;
	background: #f48989;
	border: 1px solid #DA1414;
	border-radius: 5px;
}
[speech-bubble], [speech-bubble] * { box-sizing: border-box }

[speech-bubble]{
	--bbColor: grey;
	--bbBorderRadius: 0.25rem;
	--bbPadding: 0.5rem;
	background: var(--bbColor);
	border-radius: var(--bbBorderRadius);
	padding: var(--bbPadding);
	position: relative;
	width: 300px;
	cursor: pointer;
	margin-bottom: 1rem;
}

[speech-bubble]::before{
	content: '';
	position: absolute;
	background: var(--bbColor);
}


[speech-bubble]{
	filter: drop-shadow(0px 0px 0.2rem black);
	transition: transform 0.25s ease
}
[speech-bubble]:hover{
	transform: scale(1.02);
	filter:
			drop-shadow(0px 0px 0.1rem black)
			drop-shadow(0px 0px 0.1rem var(--bbColor));
}

[speech-bubble] .title{
	font-weight: 600;
	color: white;
	text-shadow: 1px 1px 2px black;
	margin-bottom: 0.5rem
}
[speech-bubble] code {
	background: white;
	margin: 0.125rem;
	box-shadow: 0px 0px 5px rgba(0,0,0,.5);
	white-space: nowrap;
	font-size: .7rem
}
.middle code{
	font-size: 1rem;
}
#availabilityBox {
	position: absolute;
	top: -60px;
	left: 300px;
}
.availButton {
	border: 1px solid #b8b089;
	font-family: Roboto, sans-serif;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	margin: 0px 20px;
	cursor: pointer;
	background: rgb(240, 240, 240);
	color: #000;
	text-decoration: none;
	padding: 2px 3px;

}
.availButton:hover {
	background-color: #1e293b;
	color: #fff;
}
.infoBox * {
	box-sizing: border-box;
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.infoBox {
	background: #fdfdfd;
	width: 300px;
	min-height: 300px;
	box-shadow: 0px 0px 10px #494949;
	border-radius: 2px;
	font-size: 12px;
}
.infoBoxContent {
	padding: 0 10px 20px 10px;
}
.infoBox .firstRow {
	padding: 15px 20px;
	background: #f5f5f5;
	color: #000;
	font-size: 15px;
	margin: 0;
	display: flex;
	justify-content: space-between;
}
.infoBox h5 {
	color: #000;
	margin: 0;
	padding: 0;
}
.infoBox .label {
	margin: 10px 0 4px;
	color: #818181;
	font-weight: 600;
}
.infoBox .clientInfo {
	overflow-y: scroll;
	max-height: 100px;
	background: #fff;
	border: 1px solid #dddddd;
	padding: 8px;
	font-size: 11px;
}
.infoBox ::-webkit-scrollbar {
	width: 8px;
	background: transparent; /* makes scrollbar transparent */
}
.infoBox .quit {
	cursor: pointer;
	padding: 3px 13px;
	border-radius: 4px;
	transition: 0.3s all;
}
.infoBox .quit:hover {
	background: #fdfdfd;
	box-shadow: 2px 2px 2px #ddd;
}
.infoBox ::-webkit-scrollbar-thumb {
	background: #eee;
	border-radius: 8px;
}

.infoBox .wa-button i {
	width: 100%;
	height: 45px;
}

.infoBox a {
	display: block;
	margin: 20px;
}

.infoBox a:hover {
	opacity: 0.8;
	margin: 20px;
	text-decoration: none;
	background: transparent;
}





.additionalInfoModal {
	display: none;
	position: fixed;
	top: 20%;
	left: 30%;
	z-index: 10;
}
.customerDetails {
	position: relative;
}
.customerDetails:hover .showInfoBox {
	opacity: 1;
}
.legend {
	min-width: 190px;
}
.belkaWrapperContainer {
	box-sizing: border-box;
	background-color:#E3E3E3;
	margin: 0 10px 10px 10px;
	text-align:center;
	padding: 10px 4px;
	font-weight:bold;
	font-size:0.9em;
	font-family:Roboto, sans-serif;
}
.belkaInfoRow {
	margin: 4px 0;
}
.belkaInfoRow button {
	padding: 3px 4px;
	font-size: 11px;
	cursor: pointer;
	text-align: left;
	width: 100%;
	display: grid;
	grid-template-columns: 21fr 10fr;
	grid-column-gap: 0px;
	grid-row-gap: 3px;
	transition: box-shadow .3s;
	border: 1px solid #aaa;
	border-radius: 2px;
}

.belkaInfoRow button.active {
	border: 2px solid #555;
	padding: 5px 4px;
}

.belkaInfoRow button:hover {
	box-shadow: 0 0 11px rgba(33,33,33,.2);
}

.belkaInfoRow .belkaName {
	padding-left: 4px;
	grid-area: 1 / 1 / 2 / 2;
	font-weight: bold;
}

.belkaInfoRow .belkaTotal {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: flex-end;
	grid-area: 1 / 2 / 3 / 3;
}

.belkaInfoRow .belkaInfoText {
	grid-area: 2 / 1 / 3 / 2;
	color: #555;
	font-size: 9px;
	display: flex;
	align-items: center;
	flex-direction: row;
}
.belkaInfoText svg {
	margin-right: 2px;
}
.belkaInfoText svg:not(:first-child) {
	margin-left: 5px;
}



.showInfoBox {
	all: unset;
	position: absolute;
	cursor: pointer;
	right: 0;
	bottom: 0;
	background: rgb(255,255,255);
	background: linear-gradient(320deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%);
	opacity: 0;
	color: #000;
	height: 40px;
	width: 40px;
	padding-top: 20px;
	box-sizing: border-box;
	text-align: right;
	padding-right: 4px;
	z-index: 10;
	transition: 0.3s opacity;
}

.toaster{
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial,
	Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	list-style: none;
	outline: none;
	z-index: 999999999;
	position: fixed;
	padding: 5px;
}

.toaster.bottom-right{
	bottom: 20px;
	right: 20px;
}

.toaster.bottom-left{
	bottom: 20px;
	left: 20px;
}

.toaster.top-right{
	top: 20px;
	right: 20px;
}

.toaster.top-left{
	top: 20px;
	left: 20px;
}

.toaster.bottom-center{
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.toaster.top-center{
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.toaster.top-center ol.rack{
	flex-direction: column-reverse;
}

.toaster.top-left ol.rack{
	flex-direction: column-reverse;
}

.toaster.top-right ol.rack{
	flex-direction: column-reverse;
}

.toaster.bottom-center ol.rack{
	flex-direction: column;
}

.toaster.bottom-left ol.rack{
	flex-direction: column;
}

.toaster.bottom-right ol.rack{
	flex-direction: column;
}

ol.rack{
	list-style: none;
	padding: 0;
	margin: 0;
	/* reverse the list order so that the newest items are at the top */
	display: flex;
}

ol.rack li{
	margin-bottom: 16px;
}

/* Stacked Toasts Enabled */
ol.rack.upperstack li{
	margin-bottom: -35px;
	transition: all 0.3s ease-in-out;
}

ol.rack.upperstack li:hover{
	margin-bottom: 16px;
	scale: 1.03;
	transition: all 0.3s ease-in-out;
}

ol.rack.lowerstack li{
	margin-top: -35px;
}


ol.rack.lowerstack{
	margin-bottom: 0px;
}

.butteruptoast{
	border-radius: 8px;
	box-shadow: 0 4px 12px #0000001a;
	font-size: 13px;
	display: flex;
	padding: 16px;
	border: 1px solid hsl(0, 0%, 93%);
	background-color: white;
	gap: 6px;
	color: #282828;
	width: 325px;
}

.butteruptoast.dismissable{
	cursor: pointer;
}

.butteruptoast .icon{
	display: flex;
	align-items: start;
	flex-direction: column;
}

.butteruptoast .icon svg{
	width: 20px;
	height: 20px;
	fill: #282828;
}

.notif .desc{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.notif .desc .title{
	font-weight: 600;
	line-height: 1.5;

}

.notif .desc .message{
	font-weight: 400;
	line-height: 1.4;
}

.butteruptoast.success{
	background-color: #ebfef2;
	color: hsl(140, 100%, 27%);
	border: solid 1px hsl(145, 92%, 91%);
}

.butteruptoast.success .icon svg{
	fill: hsl(140, 100%, 27%);
}

.butteruptoast.error .icon svg{
	fill: hsl(0, 100%, 27%);
}

.butteruptoast.warning .icon svg{
	fill: hsl(50, 100%, 27%);
}

.butteruptoast.info .icon svg{
	fill: hsl(210, 100%, 27%);
}

.butteruptoast.error{
	background-color: #fef0f0;
	color: hsl(0, 100%, 27%);
	border: solid 1px hsl(0, 92%, 91%);
}

.butteruptoast.warning{
	background-color: #fffdf0;
	color: hsl(50, 100%, 27%);
	border: solid 1px hsl(50, 92%, 91%);
}

.butteruptoast.info{
	background-color: #f0f8ff;
	color: hsl(210, 100%, 27%);
	border: solid 1px hsl(210, 92%, 91%);
}

/* Buttons */
.toast-buttons{
	display: flex;
	gap: 8px;
	width: 100%;
	align-items: center;
	flex-direction: row;
	margin-top: 16px;
}

.toast-buttons .toast-button.primary{
	background-color: #282828;
	color: white;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	border: none;
	width: 100%;
}

.toast-buttons .toast-button.secondary{
	background-color: #f0f8ff;
	color: hsl(210, 100%, 27%);
	border: solid 1px hsl(210, 92%, 91%);
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
}

/* Success toast buttons */
.butteruptoast.success .toast-button.primary {
	background-color: hsl(145, 63%, 42%);
	color: white;
}

.butteruptoast.success .toast-button.secondary {
	background-color: hsl(145, 45%, 90%);
	color: hsl(145, 63%, 32%);
	border: solid 1px hsl(145, 63%, 72%);
}

/* Error toast buttons */
.butteruptoast.error .toast-button.primary {
	background-color: hsl(354, 70%, 54%);
	color: white;
}

.butteruptoast.error .toast-button.secondary {
	background-color: hsl(354, 30%, 90%);
	color: hsl(354, 70%, 44%);
	border: solid 1px hsl(354, 70%, 74%);
}

/* Warning toast buttons */
.butteruptoast.warning .toast-button.primary {
	background-color: hsl(45, 100%, 51%);
	color: hsl(45, 100%, 15%);
}

.butteruptoast.warning .toast-button.secondary {
	background-color: hsl(45, 100%, 96%);
	color: hsl(45, 100%, 31%);
	border: solid 1px hsl(45, 100%, 76%);
}

/* Info toast buttons */
.butteruptoast.info .toast-button.primary {
	background-color: hsl(207, 90%, 54%);
	color: white;
}

.butteruptoast.info .toast-button.secondary {
	background-color: hsl(207, 90%, 94%);
	color: hsl(207, 90%, 34%);
	border: solid 1px hsl(207, 90%, 74%);
}




/* Entrance animations */
/*  Note: These animations need to differ depending on the location of the toaster
    Elements that are in the top should slide and fade down from the top
    Elemennts that are in the bottom should slide and fade up from the bottom
*/

.toastUp{
	animation: slideUp 0.5s ease-in-out;
	animation-fill-mode: forwards;
}

.toastDown{
	animation: slideDown 0.5s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(100%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeOutToast{
	animation: fadeOut 0.3s ease-in-out;
	animation-fill-mode: forwards;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*  Additional Styles
    These styles are an alternative to the standard option. A user can choose to use these
    styles by setting the theme: variable per toast
*/

/* Glass */

.butteruptoast.glass{
	background-color: rgba(255, 255, 255, 0.42) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	box-shadow: 0 4px 12px #0000001a;
	color: #282828;
}

.butteruptoast.glass.success{
	background-color: rgba(235, 254, 242, 0.42) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	box-shadow: 0 4px 12px #0000001a;
	color: hsl(140, 100%, 27%);
}

.butteruptoast.glass.error{
	background-color: rgba(254, 240, 240, 0.42) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	box-shadow: 0 4px 12px #0000001a;
	color: hsl(0, 100%, 27%);
}

.butteruptoast.glass.warning{
	background-color: rgba(255, 253, 240, 0.42) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	box-shadow: 0 4px 12px #0000001a;
	color: hsl(50, 100%, 27%);
}

.butteruptoast.glass.info{
	background-color: rgba(240, 248, 255, 0.42) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: none;
	box-shadow: 0 4px 12px #0000001a;
	color: hsl(210, 100%, 27%);
}

/* brutalist */
.butteruptoast.brutalist{
	border-radius: 0px;
	box-shadow: 0 4px 12px #0000001a;
	border: solid 2px #282828;
	font-size: 13px;
	align-items: center;
	display: flex;
	padding: 16px;
	background-color: white;
	gap: 6px;
	color: #282828;
	width: 325px;
}

.butteruptoast.brutalist.success{
	background-color: #ebfef2;
	color: hsl(140, 100%, 27%);
	border: solid 2px hsl(140, 100%, 27%);
}

.butteruptoast.brutalist.error{
	background-color: #fef0f0;
	color: hsl(0, 100%, 27%);
	border: solid 2px hsl(0, 100%, 27%);
}

.butteruptoast.brutalist.warning{
	background-color: #fffdf0;
	color: hsl(50, 100%, 27%);
	border: solid 2px hsl(50, 100%, 27%);
}

.butteruptoast.brutalist.info{
	background-color: #f0f8ff;
	color: hsl(210, 100%, 27%);
	border: solid 2px hsl(210, 100%, 27%);
}

/*--- INTEGRATIONS---*/

.rejectUpdate {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding: 5px 40px;
}

.rejectUpdate span {
	cursor: pointer;
	padding: 4px 10px;
	background: #CE171E;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 8px;
	transition: all .3s;
}
.rejectUpdate span:hover {
	box-shadow: 1px 1px 3px #a6a6a6;
}

.integrationsMenu {
	position: relative;
}

.integrations *, .integrations-modal * {

	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0;
	list-style: none;
	text-decoration: none;
	color: #444050;
	background: none;
	font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.integrations a:hover {
	background: inherit;
}
.integrations button, .integrations input[type="button"], .integrations input[type="submit"]  {
	cursor: pointer;
}
.integrations {
	width: 1400px;
	background: #fff;
	box-shadow: 0 .1875rem .75rem 0 rgba(47,43,61,.14);
	margin: auto;
	border-radius: .375rem;
	padding: 24px;
}
#integrations > form {
	padding: 0 2rem;
}
#integrations > form#dummyOrders {
	padding: 0;
}
.integrations .filterContainer {
	display: flex;
	flex-direction: column;
}
.integrations .filterContainer select {
	border: 1px solid #d1d0d4;
	background: #fff;
	font-size: 11px;
}

tr.canceled td {
	opacity: 0.6;
	height: 10px;
	line-height: 10px !important;
	padding: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	filter: brightness(0.4) grayscale(0.7) sepia(1);
	border-color: #a5a3a3;
}

.integrations .filterContainer input[type="text"]{
	width: auto;
	font-size: 12px;
	padding: 0;
	background: #fff;
}

.integrations .filterRow, .integrations .filterBox {
	display: flex;
	flex-direction: row;
	column-gap: 2px;
}

.integrations .vertical {
	flex-direction: column;
	row-gap: 5px;
}

.flightInformation {
	position: relative;
}

.live-time{
	margin: 0 4px;
	display:inline-block;
	width: 6px;
	height: 6px;
	background-color: #f00;
	border-radius: 50%;
	-webkit-animation: pulsate 2s;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
	0% {opacity: .1;}
	50% {opacity: 1.0;}
	100% {opacity: .1;}
}

.integrations .filterRow {
	margin: 5px 0;
	padding: 8px 0;
	background: #fafafa;
	justify-content: space-around;
}

.integrations .flexRight {
	justify-content: flex-end;
}

.integrations .orderGridList {
	width: 100%;
	font-size: 12px;
}

.integrations .heading, .integrations .heading * {
	background: #808080;
	color: #fff;
	font-size: 1em;
}

.integrations .orderGridRow {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 5px;
	padding: 4px 6px;
	grid-template-columns: 80px 50px 90px 90px 40px 1fr 30px 40px 1fr 180px 40px 50px 40px;
	margin: 6px 0;

}
.integrations .orderGridRow > div {
	align-self: center;
}

.integrations .privateOrGroup {
	text-decoration: underline;
}

.integrations .bokunNo {
	grid-area: 2 / 1 / 3 / 2;
	font-size: 0.8em;
}
.integrations .day {
	grid-area: 1 / 1 / 2 / 2;
}

.integrations .time {
	grid-area: 1 / 2 / 2 / 3;
}

.integrations .warningCell {
	grid-area: 2 / 2 / 3 / 3;
}

.integrations .serviceType {
	grid-area: 1 / 3 / 3 / 4;
}

.integrations .guideBox {
	grid-area: 1 / 4 / 3 / 5;
}

.integrations .flightNo {
	grid-area: 1 / 5 / 3 / 6;
}

.integrations .from {
	grid-area: 1 / 6 / 3 / 7;
}

.integrations .pax {
	grid-area: 1 / 7 / 3 / 8;
}

.integrations .language {
	grid-area: 1 / 8 / 3 / 9;
}

.integrations .to {
	grid-area: 1 / 9 / 3 / 10;
}

.integrations .customerDetails {
	grid-area: 1 / 10 / 3 / 11;
}

.integrations .shortcut {
	grid-area: 1 / 11 / 3 / 12;
}

.integrations .price {
	grid-area: 1 / 12 / 3 / 13;
}
.integrations .actions {
	grid-area: 1 / 13 / 3 / 14;
	justify-self: center;
}

.integrations .importOrder svg {
	margin: 8px 0;
	cursor: pointer;
}

.integrations .importOrder svg:hover {
	background: #ccc;
	border-radius: 8px;
}

.integrations h5, h6 {
	color: #7367f0;
	margin-left: 3rem;
	font-weight: 500;
}
.integrations h5 {
	font-size: 1.5rem;
}
.integrations h6 {
	font-size: 1.125rem;
}
.integrations > div {
	margin-top: 24px;
	flex-direction: row;
	display: flex;
	justify-content: start;
}
.integrations .hidden {
	display: none;
}
.integrations .types {
	width: 12rem;
	display: flex;
	flex-direction: column;
	border-right: 1px solid #e6e6e8;
}
.integrations .menu-header {
	text-align: center;
	letter-spacing: .4px;
	white-space: nowrap;
	text-transform: uppercase;
	color: #acaab1;
}
.integrations div > section {
	width: 100%;
}
.integrations .types button {
	padding: .1rem .2rem;
	margin: .5rem 0;
	text-align: left;
	cursor: pointer;
}
.integrations .button-title {
	font-weight: 500;
	color: #444050;
	font-size: 1rem;
	display: block;
	font-weight: 400;
}

.aTypeButton {
	border:1px solid #b8b089;
	font-family:Roboto,sans-serif;
	font-size:0.9em;
	font-weight:bold;
	cursor:pointer;
	text-decoration:none;
	color:black;
	padding:1px 6px;
	background-color:rgb(239, 239, 239);
}
.aTypeButton:hover {
	color: #000;
}

.integrations .active .button-title {
	font-weight: 700;
}
.integrations .active .button-desc {
	font-weight: 500;
}
.integrations .button-desc {
	font-size: .7125rem;
	color: #6d6b77;
	font-weight: 400;
}
.integrations .table-header {
	padding: 1rem .5rem;
	border-bottom: 1px solid #e6e6e8;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 100%;
}
.button-call {
	box-shadow: 0 .125rem .375rem 0 rgba(115,103,240,.3);
	border-radius: .375rem;
	background-color: #7367f0;
	color: #fff;
	padding: .3rem .6rem;
	transition: .135s ease-in-out;
	font-size: .9375rem;
	border: 0;
}
.button-call:hover, .integrations .button-call:hover {
	background-color: #685dd8;
}
.integrations table {
	width: 100%;
	border-collapse: collapse;
}
.integrations tr {
	border-bottom: 1px solid #e6e6e8;
}
.integrations td, .integrations th {
	text-overflow: ellipsis;
	padding: 1rem .5rem;
}
.integrations table thead {
	text-transform: uppercase;
	font-size: .8215rem;
	letter-spacing: .2px;
	color: #444050;
}
.integrations .unassigned th, .integrations .unassigned td {
	width: 50%;
}
.integrations tbody {
	color: #6D6B77;
	font-size: .9735rem;
}
.integrations .centered {
	margin-bottom: 1rem;
	text-align: center;
	vertical-align: middle;
}
.integrations .form-group {
	position: relative;
}
.integrations .form-arrow {
	position: absolute;
	top: 0.65rem;
	right: 0.5rem;
	z-index: 10;
	font-size: 1.35rem;
	line-height: inherit;
	color: rgba(115,103,240,.3);
}
.integrations .form .dropdown {
	position: relative;
}
.integrations .form .dropdown-select {
	position: relative;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	user-select: none;
	width: 100%;
	height: auto;
	border: none;
	outline: none;
	border-radius: 0.25rem;
	background-clip: padding-box;
	background-color: #fff;
	transition: all 0.3s ease-in-out;
}
.integrations .form .dropdown-menu {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 10;
	border-radius: 0.25rem;
	background-color: #fff;
	box-shadow: 0 .125rem .375rem 0 rgba(115,103,240,.3);
	transition: all 0.3s ease-in-out;
}
.integrations .form .dropdown-menu-inner {
	max-height: 16rem;
	overflow-y: scroll;
	overflow-x: hidden;
}
.integrations .form .dropdown-menu-inner::-webkit-scrollbar {
	width: 5px;
	height: auto;
}
.integrations .form .dropdown-menu-inner::-webkit-scrollbar-thumb {
	border-radius: 0.25rem;
}
.integrations .form .dropdown-menu-item {
	font-family: inherit;
	font-size: 1rem;
	font-weight: normal;
	line-height: inherit;
	cursor: pointer;
	user-select: none;
	padding: 0.65rem 1.25rem;
	background-color: #fff;
	transition: all 0.2s ease-in-out;
}
.integrations .form .dropdown-menu-item:hover {
	background: #eee;
}
.integrations .form .dropdown-menu-item.is-select, .integrations .form .dropdown-menu-item.is-select:hover {
	color: #fff;
	background-color: #7367f0;
}
.integrations .form .dropdown-menu-search {
	background: #fff;
	display: block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	width: 100%;
	height: auto;
	padding: 0.65rem 1.25rem;
	border: none;
	outline: none;
	background-clip: padding-box;
}
.integrations .wrapper-column {
	max-width: 40rem;
	height: auto;
	margin: 0 auto;
	border-radius: 0.25rem;
}
.integrations table.update tr td:last-child {
	text-align: center;
}
.icon-tabler-trash-x {
	transition: stroke 0.2s ease;
}
.icon-tabler-trash-x:hover {
	stroke: #ff2825;
}
.integrations-modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.integrations-modal-content {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 10px;
	padding: 20px;
	margin: 15% auto;
	width: 80%;
	max-width: 400px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
	text-align: center;
	color: white;
}
.integrations-modal-content h2 {
	margin: 0 0 10px;
}
.integrations-modal-content p {
	margin: 20px 0;
}
.btn-container {
	display: flex;
	justify-content: space-around;
}
.btn-container button {
	cursor: pointer;
}
.integrations .integrations-modal-content .button-danger, .button-danger {
	background-color: #ffe2e3;
	color: #ff4c51;
}

.button-danger:hover {
	background-color: #ffe2e3;
	color: #ff4c51;
}
.icon-tabler-square-plus {
	cursor: pointer;
}
.integrations input[type="text"] {
	display: block;
	width: 90%;
	padding: .426rem .9375rem;
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.425;
	color: #444050;
	appearance: none;
	background-color: rgba(0,0,0,0);
	background-clip: padding-box;
	border: 1px solid #d1d0d4;
	border-radius: 3px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.integrations .sellerType, .integrations select.privacyType {
	padding: .426rem .9375rem;
	border: 1px solid #d1d0d4;
	border-radius: 3px;
}

.integrations .offsetField input
{
	line-height: 1.425;
	height:34px;
	border-radius: 3px;
	width: calc(100% - 25px);
	text-align: right;
	padding-right: 5px;
	margin-right: 5px;
	border: 1px solid #d1d0d4;
	margin-left:5px;
}

.integrations .offsetField.offsetCheckbox input
{
	line-height: 1.425;
	height:20px;
	border-radius: 3px;
	margin-top: 10px;
}

.integrations .availabilityOffset input {
	line-height: 1.425;
	height:34px;
	border-radius: 3px;
	width: 50%;
	border: 1px solid #d1d0d4;
	margin: 0 5px;
	padding: 0 3px;
}
.availabilityOffset input::-webkit-outer-spin-button,
.availabilityOffset input::-webkit-inner-spin-button {
	/* display: none; <- Crashes Chrome on hover */
	-webkit-appearance: none;
	margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.integrations .sellerType option {
	line-height: 1.425;
}

.integrations .productTable {
	table-layout: fixed;
	width: 100%
}

.integrations th.productName {
	width: 40%;
	min-width: 300px
}
.integrations th.privacyType {
	width: 120px;
}
.integrations .externalLinks img {
	margin-right: 3px;
	padding-top: 3px;
	transition: all .2s;
}

.integrations .externalLinks a {
	display: block;
	line-height: 18px;
	margin: 2px 0;
}

.integrations .externalLinks a:hover {
	color: #000;
}

.integrations .externalLinks a:hover img {
	transform: translateY(-2px);
}

.integrations .warningType {
	width: auto;
	display: inline-block;
}

.integrations .bokun_warnings_table {
	display: flex;
	flex-direction: column;
	background: #fcfcfc;
}

.integrations .bokun_warnings_table .warningRow {
	padding: 15px 8px;
	border-bottom: 1px solid #CCC;
	display: grid;
	grid-column-gap: 5px;
	grid-row-gap: 0px;
	grid-template-columns: 100px 110px 200px 130px 1fr;
}

.integrations .warningRow > div {
	align-self: center;
	line-break: anywhere;
}

.additionalInfoModal .btn-container {
	margin-top: 30px;
}

.integrations .dateTime {
	font-size: 15px;
	font-weight: bold;
	display: block;
}

.integrations .warningTimes {
	font-size: 10px;
	text-align: center;
	display: block;
}
.integrations .resolved {
	font-size: 12px;
}

.integrations .warningsList {
	display: flex;
	flex-direction: column;
}
.integrations .warningsList > div {
	font-size: 11px;
	margin: 4px 0;
	padding: 5px 8px;
	background: #fff;
	border-bottom: 1px solid #eee;
}

.integrations .resolveBtn {
	border: 2px solid #727272;
	background: #eee;
	padding: 1px 4px 1px 1px;
	margin: 10px auto;
	display: flex;
	align-items: center;
	font-size: 11px;
	font-weight: bold;
	color: #727272;
	border-radius: 7px;
}

.integrations .resolveBtn:hover svg {
	transform: rotate(90deg);
}

.additionalInfoModal .resolveBtn svg {
	margin-right: -1px;
	transition: all .4s ease-in-out;
}

.additionalInfoModal .infoBox {
	background: #fdfdfd;
	width: 400px;
}
.additionalInfoModal .infoBox h5 {
	font-size: 15px;
	margin: auto;
}

.additionalInfoModal .infoBoxContent {
	padding: 15px 30px;
}

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

.belkaNamesModal {
	margin-top: 2rem;
	background: #fff;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	max-width: 1200px;
	width: 800px;
}
.belkaNamesModal * {
	margin: 0;
	padding: 0;
}
.belkaNamesModal header{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 1rem 0;
	padding-right: 1rem;
}

.belkaNameModalMenu ul{
	list-style:none;
	display: flex;
	flex-direction: row;
	gap: 10px;
}
.belkaNameModalMenu li {
	padding: 1.5rem 1rem;
	cursor: pointer;
}

.belkaNamesModal li.active {
	font-weight: bold;
}
.belkaNamesModal .quit {
	font-size: 2rem;
}
.belkaNamesModal table {
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}
.belkaNamesModal th, #belkaCustomerNameModal h6 {
	background: #444050;
	color: #fff;
	text-transform: uppercase;
	padding: .6rem 0;
}
.belkaNamesModal td {
	padding: .4rem .1rem;
	border-bottom: 1px solid #eee;
}

.belkaNamesModal tr:nth-child(even) td {
	background: #fafafa;
}

#belkaCustomerNameModal h6 {
	padding: .6rem 1rem;
}

.languagesCount {
	list-style: none;
	padding: 10px;
}
.languagesCount li {
	border-bottom: 1px solid #eee;
	padding: 4px 10px;
}

.bold {
	font-weight: bold;
}


.col-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

#modalGuide .label {
	font-weight: bold;
	margin-left: 2rem;
}

.belkaNamesModal .quit {
	cursor: pointer;
}
.alignCenter {
	text-align: center;
}
.statusOk, .statusWarning, .unpaid, .paid {
	padding: .3rem .6rem;
	border-radius: .4rem;
}
.statusWarning, .warningType, .unpaid {
	color: #ff9f43;
	background: #fff0e1;
}
.statusOk, .paid {
	color: #28c76f;
	background: #ddf6e8;
}
.searchModal {
	padding: .3rem;
	border-radius: .4rem;
	border: 1px solid #aaa;
	max-width: 20rem;
}

.settings ul li {
	margin: 20px 0;
}

.settings label {
	display: inline-block;
	font-weight: bold;
	width: 230px;
}
.settings input {
	border: 1px solid #e6e6e8;
	padding: 4px 8px;
}
.settings .descriptionIcon {
	cursor: pointer;
}

.badge {
	background: #f1f1f1;
	color: #000;
	padding: 2px 5px;
	border-radius: 4px;
	font-size: 12px;
	text-decoration: none;
}

.badge.badge-danger, .dropdown-box .payable input[type="radio"]:checked + div  {
	background: #ff4c51;
	color: #ffffff;
}

.badge.badge-warning {
	background: #ff9f43;
	color: #f1f1f1;
}

.badge.badge-success, .dropdown-box .refund input[type="radio"]:checked + div {
	background: #28c76f;
	color: #ffffff;
}

.badge.badge-info {
	background: #17a2b8;
	color: #fff;
}

.go2Button{
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 25px;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	margin: auto;
	position: fixed;
	cursor: pointer;
	font-size: 12px;
	font-weight: bold;
	outline: none;
	user-select: none;
	padding: 0;
	box-sizing: border-box;
}
.go2Button.go2Bottom {
	bottom: 50px;
	left: 10px;
}

.go2Button.go2top {
	bottom: 80px;
	left: 10px;
}
i[class*="-icon"] {
	transition: opacity .4s;
	margin: 3px 2px;
	display: inline-block;
	width: 16px;
	height: 16px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.totalsOnBelka {
	width: 100%;
	display: flex;
	justify-content: end;
	align-content: end;
	flex-wrap: wrap;
}

.purchaseRow, .occupancy {
	background: #fafbfd;
	border: 1px solid #d1d1d9;
	border-radius: 5px;
	padding: 5px 8px;
	max-width: 200px;
}

.occupancy {
	display: flex;
	flex-direction: column;
	line-height: 12px;
	color: #6D6B77;
	font-size: 10px;
}

.occupancy .totalSlots {
	color: #444050;
	margin: 4px 0;
	line-height: 15px;
	font-size: 14px;
	font-weight: bold;
}

.occupancy .totalSlots .badge {
	font-weight: normal;
	cursor: pointer;
}

.purchaseRow {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap:0;
	grid-row-gap:0;
	transition: .4s all;
	cursor: pointer;
}

.purchaseRow > div {
	height: 14px;
}
.purchaseRow .slots {
	display: flex;
	font-size: 10px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.purchaseRow .total {
	justify-content: end;
	font-size: 11px;
	font-weight: bold;
}

.purchaseRow .details {
	display: flex;
	flex-direction: row;
}

.company {
	font-weight: bold;
}
.purchaseRow div:nth-child(even) {
	text-align: right;
}
.purchaseRow .time {
	font-size: 11px;
}

.purchaseRow:hover {
	transform: translateY(-2px);
	box-shadow:0 3px 3px #919191;
}
.pl-icon {
	background-image: url('/html/images/svg/flags/pl.svg');
}
.eng-icon {
	background-image: url('/html/images/svg/flags/gb.svg');
}
.es-icon {
	background-image: url('/html/images/svg/flags/es.svg');
}
.fr-icon {
	background-image: url('/html/images/svg/flags/fr.svg');
}
.cz-icon {
	background-image: url('/html/images/svg/flags/cz.svg');
}
.de-icon {
	background-image: url('/html/images/svg/flags/de.svg');
}
.it-icon {
	background-image: url('/html/images/svg/flags/it.svg');
}
.sk-icon {
	background-image: url('/html/images/svg/flags/sk.svg');
}
.ru-icon {
	background-image: url('/html/images/svg/flags/ru.svg');
}
.question-icon {
	background-image: url('/html/images/svg/question.svg');
}
.timer-icon {
	background-image: url('/html/images/svg/timer.svg');
	opacity: .4;
}
.edit-icon {
	background-image: url('/html/images/svg/edit.svg');
}
.exit-icon {
	background-image: url('/html/images/svg/exit.svg');
}
.download-icon {
	background-image: url('/html/images/svg/download.svg');
}
.link-icon {
	background-image: url('/html/images/svg/link.svg');
}
.export-icon {
	background-image: url('/html/images/svg/export.svg');
}
.delete-icon {
	background-image: url('/html/images/svg/delete.svg');
}
.eye-icon {
	background-image: url('/html/images/svg/eye.svg');
}
.cancel-icon {
	background-image: url('/html/images/svg/cancel.svg');
}
.card-icon {
	background-image: url('/html/images/svg/credit-card.svg');
}
.bracket-icon {
	background-image: url('/html/images/svg/bracket-off.svg');
}
.directions-icon {
	background-image: url('/html/images/svg/directions-off.svg');
}

.restore-icon {
	background-image: url('/html/images/svg/restore.svg');
}

.restore2-icon {
	background-image: url('/html/images/svg/restore2.svg');
}

.prev-icon {
	background-image: url('/html/images/svg/prev.svg');
}

.next-icon {
	background-image: url('/html/images/svg/next.svg');
}

.wa-icon {
	background-image: url('/html/images/svg/wa.svg');
}

.translator-icon {
	background-image: url('/html/images/svg/translator.svg');
}

.unassigned-icon {
	background-image: url('/html/images/svg/sad-face.svg');
}

.redirected-icon {
	background-image: url('/html/images/svg/redirected.svg');
}
.expected-icon {
	background-image: url('/html/images/svg/plane-expected.svg');
}
.landed-icon {
	background-image: url('/html/images/svg/plane-landed.svg');
}

.expand-icon {
	background-image: url('/html/images/svg/expand.svg');
}

.expand-red-icon {
	background-image: url('/html/images/svg/expand-red.svg');
}

.warning-icon {
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url('/html/images/svg/warning.svg');
}

.warning-icon-light {
	background-size:contain;
	background-repeat: no-repeat;
	background-image: url('/html/images/svg/warning_light.svg');
}


i.gandalf-icon {
	background-image: url('/html/images/svg/gandalf.svg');
	height: 40px;
	width: 40px;
}

.bigModalBackground {
	z-index: 500;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .4);
	display: flex;
	justify-content: center;
	align-items: start;
	top: 0;
	left: 0;
}
.bigModal {
	margin-top: 60px;
	width: 1100px;
	min-height: 300px;
	max-height: 90vh;
	background: #fff;
	border-radius: 3px;
	box-shadow: rgba(30, 31, 33, 0.15) 0px 8px 12px 0px, rgba(30, 31, 33, 0.31) 0px 0px 1px 0px;
	display: flex;
	flex-direction: column;
}
.bigModal section.header {
	padding: 15px 30px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.bigModal .leftHeader {
	display: flex;
	flex-direction: row;
}

.bigModal .exit-icon {
	height: 23px;
	width: 23px;
	border: 1px solid #dadbe0;
	border-radius: 2px;
	cursor: pointer;
}
.bigModal .exit-icon:hover {
	background-color: #0515240F;
}

.bigModal section.purchaseColumns {
	padding: 10px 20px 20px 20px;
	box-sizing: content-box;
	display: flex;
	flex-direction: row;
	column-gap: 20px;
}

section.purchaseColumns .leftColumn {
	width: 60%;
	max-height: calc(90vh - 120px);
	overflow-y: scroll;
}

section.purchaseColumns .rightColumn {
	width: 40%;
}
.bigModal summary {
	user-select: none;
	cursor: pointer;
}
.bigModal details, .bigModal summary, .cancelledTickets {
	list-style: none;
}
.bigModal details {
	margin: 10px 0;
	width: 100%;
	border: 1px solid #dadbe0;
	border-radius: 4px;
	color: #505258;
}
.bigModal summary {
	border-bottom: 1px solid #dadbe0;
	padding: 12px;
	font-size: 12px;
	font-weight: 600;
	transition: all .2s;
}

.bigModal details[open] summary {
	background-color: #f0f1f2;
}

.bigModal summary:hover{
	background-color: #f0f1f2;
}

.bigModal .detailsRow {
	display: flex;
	flex-direction: column;
	padding: 8px 12px;
	font-size: 12px;
}

.bigModal .detailsRow .row {
	display: flex;
	flex-direction: row;
	padding: 6px 0;
}
.bigModal .detailsRow .row label {
	width: 140px;
	font-weight: 600;
}

.bigModal h5 {
	color: #000;
	font-size: 18px;
	margin: 10px 0;
}

.centerFlex {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.centerFlex.left {
	justify-content: start;
}

.buttonWithIcon {
	font-size: 11px;
	color: #505258;
	border: 0;
	cursor: pointer;
	background-color: inherit;
	border-radius: 4px;
	width: 140px;
}

.buttonWithIcon i {
	margin: 0 5px;
}

.buttonWithIcon:hover {
	background-color: #0515240F;
}

.bookingList {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.booking {
	box-sizing: border-box;
	height: 45px;
	display: grid;
	column-gap: 9px;
	align-items: center;
	justify-items: center;
	grid-template-columns: 1fr 2fr 1fr 4fr 1fr 2fr;
	justify-content: space-between;
	padding: 2px 0;
	border: 1px solid #dadbe0;
	border-radius: 4px;
	cursor: pointer;
	overflow: hidden;
}

.booking * {
	overflow: hidden;
}

.booking .serviceShortcut {
	text-align: center;
}

.booking .customerDetails {
	width: 100%;
	box-sizing: border-box;
	padding: 4px;
	background: #f3f3f3;
	border: none;
	border-radius: 4px;
	overflow-y: scroll;
	align-self: start;
	height: 100%;
	margin: 0 4px;
	font-size: 11px;
	color: #505258;
	resize: none;
}

.added {
	border: 2px solid #28c76f;
	opacity: 50%;
}

.halfAdded {
	border-color: #ff9f43;
}

.booking .price i {
	font-style: normal;
	display: inline-block;
}

.bigModal ::-webkit-scrollbar {
	background: #eee;
	margin: 0 3px;
	width: 5px;
	height: auto;
}
.bigModal ::-webkit-scrollbar-thumb {
	border-radius: 0.25rem;
	background: #8f8f8f;

}

.orderTicketRow {
	padding: 3px 20px;
	display: grid;
	grid-template-columns: 1fr 1fr 4fr 1fr;
	justify-items: start;
	align-items: center;
	border-bottom: 1px solid #dadbe0;
}

.orderTicketRow .exit-icon {
	height: 12px;
	width: 12px;
}
.orderTicketNames {
	display: flex;
	flex-direction: column;
}

.orderTicketNames {
	width: 100%;
	box-sizing: border-box;
	padding: 0 40px;
	justify-content: flex-start;
}
.orderTicketRow .name {

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	transition: .3s background;
}

.orderTicketRow .name:hover {
	background: #f0f1f2;
}

.orderTicketRow .orderLink a:hover {
	background: inherit;
	color: inherit;
}

.orderTicketStatus i {
	display: inline-block;
	font-style: normal;
}

.confirmationNameList {
	max-width: 250px;
}

.confirmationNameList li {
	padding: 4px 0;
}

.confirmationNameList li:nth-child(odd) {
	background: #efefef;
}

.blueButton {
	font-weight: bold;
	color: #0C66E4;
	margin: auto;
}

a.blueButton:hover {
	color: #0C66E4;
}

#order > .action {
	display: block;
	width: 100%;
	position: sticky;
	bottom: 0;
}

.blueButton:hover {
	text-decoration: underline;
}

.opinionList {
	max-width: 1800px;
	margin: auto;
}

.opinionList tr:nth-child(odd) td {
	background: #cac9ca;
}


/* Responsive design */
@media (max-width: 768px) {
	.belkaNamesModal {
		width: 95%;
		max-width: none;
	}

	#left-container .box {
		margin: 0;
	}

	.belkaNamesModal, .belkaNamesModal * {
		font-size: 2.2rem;
		line-height: 3rem;
	}

	.modal-overlay {
		position: fixed;
		overflow-y: scroll;
		width: 100%;
	}
}

.bigModal .guideSelectControl {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

.bigModal select {
	width: 100%;
	padding: 5px;
	border: 1px solid #ced4da;
	border-radius: 4px;
	font-size: 12px;
	color: #495057;
	background-color: #fff;
	box-sizing: border-box;
	transition: border-color 0.3s ease;
}

.bigModal .guideSaveButton {
	padding: 5px;
	gap: 5px;
	white-space: nowrap;
	font-size: 12px;
	font-weight: bold;
}

.bigModal .guideSelectControl.modified button {
	color: white;
	background-color: #007bff
}

.bigModal .guideSelectControl.modified svg {
	fill: white;
}
td.input.quickBtnsContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: stretch;
	flex-wrap: wrap;
	height: auto;
	gap: 5px;

}
.quickBtn i[class*="-icon"], .dropdown-box section.radio i[class*="-icon"] {
	text-align: center;
	display: block;
	margin: auto;
	width: 18px;
	height: 18px;
}
.quickBtn {
	transition: .3s background-color;
	cursor: pointer;
	font-size: 10px;
	background-color: #fff;
	border: 1px solid #aaa;
}
.quickBtn:hover {
	background-color: #eaeaea;
}

.btn-wrapper {
	position: relative;
}

.dropdown-box * {
	box-sizing: border-box;
}

.dropdown-box {
	padding: 8px 10px;
	z-index: 100;
	position: absolute;
	bottom: 10px;
	background: #f8f7fa;
	box-shadow: 0 0.25rem 1.125rem 0 rgba(47, 43, 61, 0.16);
	min-height: 50px;
	border-radius: 8px;
	cursor: default;
	min-width: 90px;
}
#dropdown-overlay {
	background: #000;
	opacity: .4;
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 50;
}

.dropdown-box input[type="number"]::-webkit-outer-spin-button,
.dropdown-box input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dropdown-box h5 {
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	padding: 0;
	color: #3E3E3E;
	margin: 0;
	border-bottom: 1px solid #afafaf;
}
.dropdown-box input[type="radio"] {
	display: none;
}
.dropdown-box section {
	margin: 4px 0;
	padding: 4px 10px;
	min-width: 140px;
	position: relative;
}

.dropdown-box section.radio {
	margin: 4px 0;
	display: flex;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
}
.dropdown-box input[type="radio"] + div {
	cursor: pointer;
	padding: 2px 3px;
	background: #fff;
	box-shadow: 0 .1875rem .75rem 0 rgba(47,43,61,.14);
}

.dropdown-box i {
	font-style: normal;
	font-size: 14px;
}

.dropdown-box .payable i {
	text-decoration: line-through;
}

.dropdown-box .input-label {
	font-size: 14px;
}

.dropdown-box .dropdown-input input {
	width: 100%;
	min-width: 70px;
	padding: 6px 3px 6px 10px;
	box-shadow: 0 .1875rem .75rem 0 rgba(47,43,61,.14);
}

.dropdown-box .submit {
	width: 100%;
	border: none;
	padding: 3px 5px;
	transition: .2s;
	background: #6593fd;
	color: #fff;
	border-radius: 3px;
	border: 1px solid #6593fd;
	cursor: pointer;
}
.dropdown-box .submit:hover {
	background: #e0e7f6;
	border: 1px solid #4b82ff;
	border-radius: 3px;
	color: #6593fd;
}

.dropdown-error .message {
	width: 130px;
	display: block;
	position: absolute;
	left: 140px;
	top: -10px;
	padding: 2px 5px;
	font-size: 12px;
	background-color: #ffe2e3;
	color: #ff4c51;
	border-left: 2px solid #f00;
}

.readonly {
	cursor: default;
	background-color: rgba(239, 239, 239, 0.3);
	color: rgb(84, 84, 84);
	border-color: rgba(118, 118, 118, 0.3);
	pointer-events: none;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-3 {
	margin-top: 3rem;
}

.mt-4 {
	margin-top: 4rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.mb-3 {
	margin-bottom: 3rem;
}

.mb-4 {
	margin-bottom: 4rem;
}

.my-1 {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.my-2 {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.my-3 {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.my-4 {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.mx-1 {
	margin-left: 1rem;
	margin-right: 1rem;
}

.mx-2 {
	margin-left: 2rem;
	margin-right: 2rem;
}

.mx-3 {
	margin-left: 3rem;
	margin-right: 3rem;
}

.mx-4 {
	margin-left: 4rem;
	margin-right: 4rem;
}

.pt-1 {
	padding-top: 1rem;
}

.pt-2 {
	padding-top: 2rem;
}

.pt-3 {
	padding-top: 3rem;
}

.pt-4 {
	padding-top: 4rem;
}

.pb-1 {
	padding-bottom: 1rem;
}

.pb-2 {
	padding-bottom: 2rem;
}

.pb-3 {
	padding-bottom: 3rem;
}

.pb-4 {
	padding-bottom: 4rem;
}

.py-1 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.py-2 {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.py-3 {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

.py-4 {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.pl-1 {
	padding-left: 1rem;
}

.pl-2 {
	padding-left: 2rem;
}

.pl-3 {
	padding-left: 3rem;
}

.pl-4 {
	padding-left: 4rem;
}

.pr-1 {
	padding-right: 1rem;
}

.pr-2 {
	padding-right: 2rem;
}

.pr-3 {
	padding-right: 3rem;
}

.pr-4 {
	padding-right: 4rem;
}

.px-1 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.px-2 {
	padding-left: 2rem;
	padding-right: 2rem;
}

.px-3 {
	padding-left: 3rem;
	padding-right: 3rem;
}

.px-4 {
	padding-left: 4rem;
	padding-right: 4rem;
}

.p-1 {
	padding: 1rem;
}

.p-2 {
	padding: 2rem;
}

.p-3 {
	padding: 3rem;
}

.p-4 {
	padding: 4rem;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.text-center{
	text-align: center;
}

.text-black{
	color: #000;
}

.text-bold {
	font-weight: bold;
}

.button-fresh-blue {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.button-fresh-blue:hover {
	background-color: #0056b3;
}

.button-fresh-blue:focus {
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(38, 143, 255, 0.5);
}

table tr.warning{
	background-color: #ff9f43;
}

table tr.danger{
	background-color: #ff4c51;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.space-between {
	justify-content: space-between;
}

.chart {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}
.chart .heatmap-container {
	width: 740px;
	height: 140px;
	background: #fafafa;
	padding: 20px 0;
	box-shadow: 0 .1875rem .75rem 0 rgba(47, 43, 61, .14);
	border-radius: 10px;
}

p.chart-description {
	margin: 0 20px;
	font-size: 11px;
	color: #9b9b9b;
}
table tr.warning{
	background-color: #ff9f43;
}

table tr.danger{
	background-color: #ff4c51;
}

.flex-row {
	display: flex;
	flex-direction: row;
}

.space-between {
	justify-content: space-between;
}

.space-around{
	justify-content: space-around;
}

.filter-with-badge {
	box-sizing: border-box;
	display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 5px;
    background: #fafbfd;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
    width: fit-content;
	height: 33px;
}

.flex-row-center {
	display: flex;
    flex-direction: row;
    align-items: center;
}
.step-box {
	background-color: #f6f8fd;
	border-radius: 16px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	min-width: 200px;
	min-height: 150px;
	text-align: left;
    position: relative;
}
.step-box .title{
    font-size: 14px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
}

.step-box .number {
    background-color: #007bffbb;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    position: absolute;
    top:4px;
    left: 4px;
}