*{
	transition: .3s ease;
	font-family: "Arimo", sans-serif;
	font-optical-sizing: auto;
}
body{
	margin: 0;
	padding: 0;
}

/* NOTIFICATION SYSTEM */
#notification-bar{
	position: fixed;
	z-index: 9999;
	top: 1vw;
	left: 50%;
	transform: translateX(-50%);
	width: fit-content;
	max-width: 50vw;
	display: flex;
	align-items: center;
	background: darkgrey;
	cursor: pointer;
	padding: 0 1vw;
	border-radius: 5px;
	gap: 0.8vw;
	opacity: 0;
	visibility: hidden;
}
#notification-bar.active{
	opacity: 1;
	visibility: visible;
}
#notification-bar p{
	padding: 0;
	font-size: 0.75vw;
	line-height: 1vw;
}
#notification-bar button{
	padding: 0;
	margin: 0;
	margin-left: 3vw;
	font-size: 0.8vw;
	border: none;
	cursor: pointer;
	background: none;
	color: inherit;
}
#notification-bar.notification-state-1{
	background: #0284c7;
	color: white;
}
#notification-bar.notification-state-2{
	background: #16a34a;
	color: white;
}
#notification-bar.notification-state-3{
	background: #d97706;
	color: white;
}
#notification-bar.notification-state-4{
	background: #dc2626;
	color: white;
}
/* NOTIFICATION SYSTEM */

/* Authorization Route */
#root .auth-root{
	display: flex;
	flex-direction: column;
	align-items: center;
	height: calc(100vh - 8vh);
	padding: 4vh 0;
	width: 100vw;
	background: whitesmoke;
}
#root .auth-root img{
	height: 1vw;
}
#root .auth-root form{
	margin-top: auto;
	color: #191919;
	display: flex;
	flex-direction: column;
	width: 16vw;
}
#root .auth-root form img{
	height: 2vw;
	margin-bottom: 1vw;
}
#root .auth-root form h1{
	font-weight: bold;
	font-size: 1.5vw;
	margin: 0;
	margin-bottom: 1.5vw;
	text-align: center;
}
#root .auth-root form input{
	width: calc(100% - 2vw);
	padding: 0.5vw 1vw;
	border: 1px solid lightgrey;
	border-radius: 0.5vw;
	background: transparent;
	margin-bottom: 0.5vw;
	color: black;
	font-size: 0.7vw;
}
#root .auth-root form input:focus{
	outline: none;
	border-color: grey;
}
#root .auth-root form font{
	margin-bottom: 0.5vw;
	font-size: 0.7vw;
	font-weight: 500;
	text-align: left;
	color: #B00020;
}
#root .auth-root form button{
	width: 100%;
	padding: 0.5vw;
	border: none;
	border-radius: 0.5vw;
	font-size: 0.7vw;
	font-weight: bold;
	background: #1d7488;
	color: white;
	cursor: pointer;
}
#root .auth-root form button:hover{
	background: #35899b;
}
#root .auth-root .auth-footer{
	width: 20vw;
	margin-top: auto;
	color: grey;
	text-align: center;
}
#root .auth-root .auth-footer span{
	font-size: small;
	opacity: .7;
}
#root .auth-root .auth-footer span a{
	color: grey;
}
#root .auth-root .auth-footer .auth-footer-meta{
	margin: 0 auto;
	margin-top: 1.5vw;
	display: flex;
	gap: 1vw;
	width: fit-content;
}
/* Authorization Route */

/* DEFAULT COMPONENTS */
#root .jasper-default-button{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75vw;
	padding: 0 2vw;
	height: 1.9vw;
	border: 1px solid transparent;
	background: #1d7488;
	color: white;
	font-weight: 500;
	border-radius: 0.4vw;
	cursor: pointer;
}
#root .jasper-default-button:hover{
	background: #35899b;
}
#root .jasper-default-button.selected{
	background: #0f4d5c;
}
#root .jasper-default-button.jasper-secondary-button{
	background: transparent !important;
	color: #191919 !important;
	border: 1px solid darkgrey !important;
}
#root .jasper-default-button.jasper-secondary-button:hover{
	border-color: #191919 !important;
}
#root .jasper-default-button.jasper-danger-button{
	background: pink !important;
	color: #dc3545 !important;
}
#root .jasper-default-button.jasper-danger-button:hover{
	background: lightpink !important;
}
#root .jasper-default-button i{
	font-size: 0.75vw;
}
#root .jasper-default-input{
	position: relative;
	padding: 0.5vw 0.8vw;
	border: none;
	background: #f8f9fa;
	font-size: 0.8vw;
	border-radius: 5px;
}
#root .jasper-default-input:focus{
	outline: none;
}
#root .jasper-default-input:disabled{
	background: #EDEDED;
}
#root .jasper-default-suggestion-input{
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
}
#root .jasper-default-suggestion-input .suggestions-list{
	position: absolute;
	z-index: 99;
	top: 110%;
	width: 100%;
	max-height: 10vw;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	overflow: hidden;
	overflow-y: scroll;
	background: white;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.00),
		0px 0px 1px rgba(3, 7, 18, 0.00),
		0px 0px 2px rgba(3, 7, 18, 0.01),
		0px 0px 4px rgba(3, 7, 18, 0.01),
		0px 0px 6px rgba(3, 7, 18, 0.01),
		0px 0px 9px rgba(3, 7, 18, 0.01),
		0px 0px 12px rgba(3, 7, 18, 0.01),
		0px 0px 15px rgba(3, 7, 18, 0.02),
		0px 0px 19px rgba(3, 7, 18, 0.02),
		0px 0px 24px rgba(3, 7, 18, 0.02);
}
#root .jasper-default-suggestion-input .suggestions-list img{
	width: 100%;
	height: 100%;
	padding: 0.6vw 0;
	object-fit: contain;
}
#root .jasper-default-suggestion-input .suggestions-list span{
	display: flex;
	padding: 0.5vw;
	background: white;
	cursor: pointer;
	font-size: 0.75vw;
}
#root .jasper-default-suggestion-input .suggestions-list span:hover{
	background: #2a8599;
	color: white;
}
#root .jasper-default-suggestion-input .suggestions-list span em{
	margin-left: auto;
}
#root .jasper-default-suggestion-input input:focus-within ~ .suggestions-list{
	opacity: 1;
	visibility: visible;
}
#root .jasper-autocomplete-list{
	transition: 0s;
	position: fixed;
	z-index: 99;
	max-height: 10vw;
	display: flex;
	flex-direction: column;
	border-radius: 5px;
	overflow: hidden;
	overflow-y: scroll;
	opacity: 0;
	visibility: hidden;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.00),
		0px 0px 1px rgba(3, 7, 18, 0.00),
		0px 0px 2px rgba(3, 7, 18, 0.01),
		0px 0px 4px rgba(3, 7, 18, 0.01),
		0px 0px 6px rgba(3, 7, 18, 0.01),
		0px 0px 9px rgba(3, 7, 18, 0.01),
		0px 0px 12px rgba(3, 7, 18, 0.01),
		0px 0px 15px rgba(3, 7, 18, 0.02),
		0px 0px 19px rgba(3, 7, 18, 0.02),
		0px 0px 24px rgba(3, 7, 18, 0.02);
}
#root .jasper-autocomplete-list.active{
	visibility: visible;
	opacity: 1;
}
#root .jasper-autocomplete-list img{
	width: 100%;
	height: 100%;
	padding: 0.6vw 0;
	object-fit: contain;
	align-self: center;
}
#root .jasper-autocomplete-list span{
	display: flex;
	padding: 0.5vw;
	background: white;
	cursor: pointer;
	font-size: 0.75vw;
}
#root .jasper-autocomplete-list span:hover{
	background: #2a8599;
	color: white;
}
/* DEFAULT COMPONENTS */


/* MODALS */
#general-modal{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
}
#general-modal.active{
	opacity: 1;
	visibility: visible;
}
#general-modal .cover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: .3;
}
#general-modal .select-grid{
	position: relative;
	padding: 1.5vw;
	border-radius: 5px;
	background: white;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0.5vw;
	max-height: 60vh;
	overflow-y: scroll;
	box-shadow: 0px 0px 0px rgba(3, 7, 18, 0.00),
		0px 0px 1px rgba(3, 7, 18, 0.00),
		0px 0px 2px rgba(3, 7, 18, 0.01),
		0px 0px 4px rgba(3, 7, 18, 0.01),
		0px 0px 6px rgba(3, 7, 18, 0.01),
		0px 0px 9px rgba(3, 7, 18, 0.01),
		0px 0px 12px rgba(3, 7, 18, 0.01),
		0px 0px 15px rgba(3, 7, 18, 0.02),
		0px 0px 19px rgba(3, 7, 18, 0.02),
		0px 0px 24px rgba(3, 7, 18, 0.02);
}
#general-modal .select-grid h3{
	margin: 0;
	grid-column: span 4;
	font-size: 1vw;
	font-weight: 500;
	color: grey;
	margin-bottom: 1vw;
}
#general-modal .select-grid .grid-card{
	width: 100%;
	cursor: pointer;
	overflow: hidden;
	width: 8vw;
}
#general-modal .select-grid .grid-card :hover{
	opacity: .8;
}
#general-modal .select-grid .grid-card img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
#general-modal form{
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5vw;
	border-radius: 5px;
	background: white;
	gap: 0.8vw;
	max-height: 70vh;
	overflow-y: scroll;
}
#general-modal form h3{
	margin: 0;
	grid-column: span 4;
	font-size: 1vw;
	font-weight: 500;
	color: grey;
	margin-bottom: 0.5vw;
}
#general-modal form .grid-container{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.8vw;
}
#general-modal form .form-group{
	display: flex;
	flex-direction: column;
	gap: 0.4vw;
}
#general-modal form .grid-container .form-group.colspan-2{
	grid-column: span 2;
}
#general-modal form .form-group .form-chips-container{
	display: flex;
	flex-wrap: wrap;
	gap: 0.4vw;
	align-items: center;
	width: 20vw;
}
#general-modal form .form-group .form-chips-container span{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4vw 0.8vw;
	background: #1d7488;
	color: white;
	font-size: 0.7vw;
	cursor: pointer;
	border-radius: 5px;
}
#general-modal form .form-group .form-chips-container span:hover{
	opacity: .7;
}
#general-modal form .form-group label{
	font-size: 0.7vw;
}
#general-modal form .form-group select,
#general-modal form .form-group input{
	width: 20vw;
}

#bottom-sheet{
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	background: white;
	transform: translateY(100vh);
	visibility: hidden;
}
#bottom-sheet.active{
	transform: translateY(0);
	visibility: visible;
}
#bottom-sheet header{
	display: flex;
	align-items: center;
	padding: 1vw;
	border-bottom: 1px solid #EEE;
}
#bottom-sheet header h2{
	margin: 0;
	font-size: 1vw;
	font-weight: 500;
}
#bottom-sheet header .header-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#bottom-sheet form{
	display: flex;
	flex-direction: column;
}
#bottom-sheet form hr{
	height: 1px;
	border: none;
	background: #EEE;
	width: 100%;
}
#bottom-sheet form .form-row{
	display: flex;
	align-items: start;
	gap: 0.4vw;
	padding: 1vw;
}
#bottom-sheet form .form-row .form-group{
	display: flex;
	flex-direction: column;
	gap: 0.4vw;
	width: 100%;
}
#bottom-sheet form .form-row .form-group label{
	display: flex;
	align-items: center;
	font-size: 0.7vw;
	height: 0.8vw;
}
#bottom-sheet form .form-row .form-group label i{
	cursor: pointer;
	background: #1d7488;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 0.2vw;
	border-radius: 2px;
	margin-left: 1vw;
}
#bottom-sheet form .form-row .form-group input{
	width: calc(100% - 1.6vw);
}
#bottom-sheet form .form-row .form-group img{
	width: 100%;
	height: 8ch;
	object-fit: contain;
	cursor: pointer;
}
#bottom-sheet form .modular-section{
	display: flex;
	flex-direction: column;
	padding: 1vw;
	gap: 1vw;
}
#bottom-sheet form .modular-section .modular-section-switch{
	font-size: 0.8vw;
	color: #1d7488;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.4vw;
	width: fit-content;
}
#bottom-sheet form .modular-section .modular-section-switch i{
	font-size: small;
}
#bottom-sheet form .modular-section .modular-section-switch i.active{
	transform: rotate(90deg);
}
#bottom-sheet form .modular-section .modular-section-content{
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	height: 0;
	gap: 1vw;
}
#bottom-sheet form .modular-section .modular-section-content.active{
	opacity: 1;
	visibility: visible;
	height: fit-content;
}
#bottom-sheet form .modular-section .modular-section-content .form-row{
	padding: 0;
}
/* MODALS */

/* Components */
#component{
	display: flex;
	flex-direction: column;
	position: relative;
}
#component header{
	display: flex;
	align-items: center;
	padding: 0.4vw;
	background: #1d7488;
}
#component header .header-leading{
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#component header .header-leading a{
	display: flex;
	align-items: center;
	gap: 0.3vw;
	text-decoration: none;
}
#component header .header-leading a:hover{
	opacity: .8;
}
#component header .header-leading a img{
	height: 1.5vw;
}
#component header .header-leading a span{
	font-size: 0.7vw;
	color: white;
	font-weight: 500;
}
#component header .header-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#component header .header-trailing button{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 1.5vw;
	height: 1.5vw;
	background: white;
	border: none;
	border-radius: 5px;
	font-weight: 500;
	color: black;
	cursor: pointer;
	font-size: 0.7vw;
}
#component header .header-trailing button.alt-button{
	width: auto;
	padding: 0 0.5vw;
	background: #35899b;
	color: white;
}
#component header .header-trailing button:hover{
	background: whitesmoke;
}
#component header .header-trailing button.alt-button:hover{
	background: #35899b;
	color: lightgrey;
}
#component header .header-trailing button.danger-button:hover{
	color: #ff6b6b;
}
#component progress-bar{
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 5px;
	width: 100vw;
	background: #CCC;
}
#component progress-bar span{
	display: flex;
	height: 100%;
	background: linear-gradient(
		90deg,
		#2EADBD,
		#42B8C7,
		#56C3D1,
		#42B8C7,
		#2EADBD
	);
	background-size: 300% 100%;
	animation: wave-progress 2s linear infinite;
}
@keyframes wave-progress {
	0% {
		background-position: 0% 0%;
	}
	100% {
		background-position: 100% 0%;
	}
}
/* Components */

/* Panel */
#root .content-wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
}
#root .content-wrapper .content-toolbar{
	display: flex;
	align-items: center;
	padding: 0.8vw;
	padding-bottom: 0;
}
#root .content-wrapper .content-toolbar .toolbar-leading{
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#root .content-wrapper .content-toolbar .toolbar-leading button{
	padding: 0.5vw 0.6vw;
	border: none;
	border-radius: 5px;
	background: #d4f1f5;
	color: #3d8a9c;
	cursor: pointer;
	font-size: 0.75vw;
	font-weight: 500;
}
#root .content-wrapper .content-toolbar .toolbar-leading button:hover{
	background: #3d8a9c;
	color: #d4f1f5;
}
#root .content-wrapper .content-toolbar .toolbar-leading button.active{
	background: #3d8a9c;
	color: #d4f1f5;
}
#root .content-wrapper .content-toolbar .toolbar-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input{
	display: flex;
	align-items: center;
	gap: 0.2vw;
	padding: 0.4vw;
	background: #f8f9fa;
	border: 1px solid #CCC;
	border-radius: 8px;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input i{
	color: grey;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input input{
	font-size: 0.8vw;
	font-weight: normal;
	border: none;
	background: none;
	width: 10vw;
}
#root .content-wrapper .content-toolbar .toolbar-trailing .search-input input:focus{
	outline: none;
}
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading{
	padding: 0.8vw;
	width: 100%;
	background: #FAFAFA;
	border: 1px solid #EEE;
	border-radius: 5px;
}
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading select,
#root .content-wrapper .content-toolbar-emphasized .toolbar-leading input{
	background: #EEE;
}
#root .content-wrapper .content-table {
	display: flex;
	flex-direction: column;
	padding: 0.8vw;
}
#root .content-wrapper .content-table table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 5px;
	border: 1px solid #EAECEF;
	border-right: none;
	border-bottom: none;
	overflow: hidden;
	font-size: 0.65vw;
}
#root .content-wrapper .content-table table th, td{
	border: none;
	border-bottom: 1px solid #EAECEF;
	border-right: 1px solid #EAECEF;
}
#root .content-wrapper .content-table table tr:hover td{
	background: whitesmoke;
}
#root .content-wrapper .content-table table th{
	background: #f8f9fa;
	color: darkgrey;
	font-size: small;
	padding: 0.5vw;
	text-align: left;
}
#root .content-wrapper .content-table table th:first-child{
	text-align: center;
}
#root .content-wrapper .content-table table td{
	padding: 0.8vw 0.5vw;
	font-size: 0.7vw;
	font-weight: 500;
	color: #191919;
	cursor: pointer;
}
#root .content-wrapper .content-table table .leading-cell{
	border-top-left-radius: 5px;
}
#root .content-wrapper .content-table table .trailing-cell{
	border-top-right-radius: 5px;
}
#root .content-wrapper .empty-table-placeholder{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#root .content-wrapper .empty-table-placeholder img{
	width: 10vw;
}
#root .content-wrapper .empty-table-placeholder span{
	font-size: .7vw;
	color: grey;
}

#root .content-wrapper .content-header{
	display: flex;
	align-items: center;
	padding: 1vw;
	border-bottom: 1px solid #EEE;
}
#root .content-wrapper .content-header .header-leading{
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#root .content-wrapper .content-header .header-leading h2{
	margin: 0;
	font-weight: 600;
}
#root .content-wrapper .content-header .header-leading small{
	font-size: 0.6vw;
	color: grey;
}
#root .content-wrapper .content-header .header-leading small span{
	font-weight: bold;
	color: black;
}
#root .content-wrapper .content-header .header-trailing{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.5vw;
}
#root .content-wrapper .content-header .header-trailing button{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75vw;
	padding: 0.5vw 2vw;
	border: none;
	background: #1d7488;
	color: white;
	font-weight: 500;
	border-radius: 0.4vw;
	cursor: pointer;
}
#root .content-wrapper .content-header .header-trailing button:hover{
	background: #35899b;
}
#root .content-wrapper .content-tabs{
	display: flex;
	align-items: center;
	padding: 1vw;
	padding-bottom: 0;
	border-bottom: 1px solid #EEE;
}
#root .content-wrapper .content-tabs .tab-button{
	border: none;
	border-bottom: 2px solid transparent;
	background: none;
	padding: 0.6vw;
	padding-top: 0;
	font-size: 0.8vw;
	cursor: pointer;
}
#root .content-wrapper .content-tabs .tab-button:hover{
	color: #35899b;
}
#root .content-wrapper .content-tabs .active-tab{
	color: #35899b;
	border-color: #1d7488;
}
#root .content-wrapper .content-tabs.alternative .active-tab{
	background: none;
	padding-bottom: 0.4vw;
}
#root .content-wrapper .content-tabs.alternative .active-tab span{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.2vw 0.6vw;
	border-radius: 5px;
	background: #35899b;
	color: white;
}
#root .content-wrapper .content-tab-container{
	display: flex;
	flex-direction: column;
}
#root .content-wrapper .content-tab-container hr{
	width: 100%;
	height: 1px;
	border: none;
	background: #EEE;
}
#root .content-wrapper .content-tab-container form{
	display: flex;
	flex-direction: column;
	padding: 0.8vw;
}
#root .content-wrapper .content-tab-container form .form-row{
	display: flex;
	align-items: center;
	gap: 0.8vw;
}
#root .content-wrapper .content-tab-container form .form-row .form-group{
	display: flex;
	flex-direction: column;
	gap: 0.4vw;
	width: 100%;
}
#root .content-wrapper .content-tab-container form .form-row .form-group label{
	font-size: 0.7vw;
}
#root .content-wrapper .transactions-constructor{
	display: flex-direction;
	flex-direction: column;
}
#root .content-wrapper .transactions-constructor .constructor-header{
	display: flex;
	align-items: center;
	padding: 0.8vw;
	gap: 0.8vw;
}
#root .content-wrapper .transactions-constructor .constructor-header select{
	background: #EEE;
	min-width: 8vw;
}
#root .content-wrapper .transactions-constructor .constructor-header .constructor-header-trailing{
	display: flex;
	gap: 0.8vw;
	margin-left: auto;
}
#root .content-wrapper .transactions-constructor .constructor-table{
	display: flex;
	flex-direction: column;
	padding: 0.8vw;
	padding-top: 0;
	width: calc(100% - 1.6vw);
}
#root .content-wrapper .transactions-constructor .constructor-table .table-wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: visible;
	overflow-x: scroll;
	scrollbar-width: none;
}
#root .content-wrapper .transactions-constructor .constructor-table .table-wrapper::-webkit-scrollbar{
	display: none;
}
#root .content-wrapper .transactions-constructor .constructor-table table{
	width: 100%;
	border-collapse: collapse;
	border-right: none;
	border-bottom: none;
	font-size: 0.65vw;
	overflow: visible;
}
#root .content-wrapper .transactions-constructor .constructor-table table td, th{
	border: 1px solid #EAECEF;
}
#root .content-wrapper .transactions-constructor .constructor-table table th{
	background: #f8f9fa;
	color: darkgrey;
	font-size: small;
	padding: 0.5vw;
	white-space: nowrap;
}
#root .content-wrapper .transactions-constructor .constructor-table table td{
	padding: 0;
	font-size: 0.7vw;
	font-weight: 500;
	color: #191919;
	text-align: center;
	overflow: visible;
	z-index: 9;
}
#root .content-wrapper .transactions-constructor .constructor-table table td select,
#root .content-wrapper .transactions-constructor .constructor-table table td input{
	width: 20ch;
	padding: 0.4vw;
	border: 1px solid transparent;
	background: #fcfeff;
	font-size: 0.7vw;
}
#root .content-wrapper .transactions-constructor .constructor-table table td select{
	width: 10ch;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input:focus{
	outline: none;
	border-color: #E2E2E2;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input:disabled{
	background: #E2E2E2;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input::placeholder{
	color: #CCC;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input[type="number"]{
	width: calc(100% - 0.8vw - 2px);
	min-width: 5ch;
	-moz-appearance: textfield;
	appearance: textfield;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input[type="number"]::-webkit-inner-spin-button,
#root .content-wrapper .transactions-constructor .constructor-table table td input[type="number"]::-webkit-outer-spin-button{
	-webkit-appearance: none;
	margin: 0;
}
#root .content-wrapper .transactions-constructor .constructor-table table input[type="checkbox"]{
	width: fit-content;
	cursor: pointer;
	margin: 0;
}
#root .content-wrapper .transactions-constructor .constructor-table table td input.cell-fill{
	width: calc(100% - 0.8vw - 2px);
}
#root .content-wrapper .transactions-constructor .constructor-table table td button{
	width: 100%;
	height: 100%;
	border: 1px solid #35899b;
	padding: 0.4vw;
	background: #35899b;
	color: white;
	cursor: pointer;
	font-size: 0.7vw;
	font-weight: 500;
}
#root .content-wrapper .transactions-constructor .constructor-table table td button:hover{
	background: #1d7488;
}
#root .content-wrapper .transactions-constructor .constructor-table table td button.selected{
	background: #0f4d5c;
}
#root .content-wrapper .transactions-constructor .constructor-table table td img{
	width: 10ch;
	height: 8ch;
	object-fit: contain;
	cursor: pointer;
}
#root .content-wrapper .transactions-constructor .constructor-table table td img:hover{
	opacity: .7;
}
#root .content-wrapper .forecast-container{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 0.8vw;
	padding: 0.8vw;
}
#root .content-wrapper .forecast-container .forecast-container-stats{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.8vw;
}
#root .content-wrapper .forecast-container .forecast-container-stats .stat-card{
	display: flex;
	flex-direction: column;
	gap: 0.8vw;
	border: 1px solid #1d74884d;
	border-radius: 5px;
	background: #1d74880d;
	padding: 1vw;
}
#root .content-wrapper .forecast-container .forecast-container-stats .stat-card.colspan-2{
	grid-column: span 2;
}
#root .content-wrapper .forecast-container .forecast-container-stats .stat-card span{
	font-size: 0.8vw;
}
#root .content-wrapper .forecast-container .forecast-container-stats .stat-card h2{
	margin: 0;
	font-size: 1.4vw;
	font-weight: bold;
}
#root .content-wrapper .forecast-container form{
	padding: 1vw;
	border: 1px solid #EEE;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	gap: 0.8vw;
}
#root .content-wrapper .forecast-container form .form-group{
	display: flex;
	flex-direction: column;
	gap: 0.5vw;
	margin-top: auto;
}
#root .content-wrapper .invoice-container{
	display: flex;
	flex-direction: column;
	gap: 0.8vw;
	padding: 0.8vw;
}
#root .content-wrapper .invoice-container .invoice-product-card{
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-gap: 0.8vw;
}
#root .content-wrapper .invoice-container .invoice-product-card table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 5px;
	border: 1px solid #EAECEF;
	border-right: none;
	border-bottom: none;
	overflow: hidden;
	font-size: 0.65vw;
}
#root .content-wrapper .invoice-container .invoice-product-card table th,
#root .content-wrapper .invoice-container .invoice-product-card table td{
	/*width: 100%;*/
}
#root .content-wrapper .invoice-container .invoice-product-card table th{
	background: #f8f9fa;
	color: darkgrey;
	font-size: small;
	padding: 0.5vw;
	text-align: left;
	border-top: none;
	border-left: none;
}
#root .content-wrapper .invoice-container .invoice-product-card table td{
	padding: 0.8vw 0.5vw;
	font-size: 0.7vw;
	font-weight: 500;
	color: #191919;
}
#root .content-wrapper .invoice-container .invoice-product-card .invoice-product-card-image{
	display: flex;
	align-items: center;
	justify-content: center;
}
#root .content-wrapper .invoice-container .invoice-product-card .invoice-product-card-image img{
	width: 100%;
	height: 30vw;
	object-fit: contain;
}