*{
	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;
}

#root .active-audition-icon{
	color: #1d7488;
}
/* 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 .grid-container hr{
	grid-column: span 2;
	width: 100%;
	height: 1px;
	border: none;
	background: #EEE;
}
#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 .form-group-action-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#general-modal form .form-group label{
	font-size: 0.7vw;
}
#general-modal form .form-group input{
	min-width: 20vw;
	width: calc(100% - 1.8vw);
}
#general-modal form .form-group select{
	width: 100%;
}
#general-modal form table{
	min-width: 100%;
	width: 20vw;
	border-collapse: collapse;
	border-right: none;
	border-bottom: none;
	font-size: 0.65vw;
	overflow: visible;
}
#general-modal form table td, th{
	border: 1px solid #EAECEF;
}
#general-modal form table th{
	background: #f8f9fa;
	color: darkgrey;
	font-size: small;
	padding: 0.5vw;
	white-space: nowrap;
}
#general-modal form table td{
	padding: 0.4vw;
	font-size: 0.7vw;
	font-weight: 500;
	color: #191919;
	text-align: center;
	overflow: visible;
	z-index: 9;
}
#general-modal form table td input{
	width: calc(100% - 1.6vw) !important;
}
#general-modal form table td input[type="checkbox"]{
	cursor: pointer;
}
#general-modal form .form-group .form-images-container{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	max-width: 50vw;
	gap: 0.8vw;
	position: relative;
}
#general-modal form .form-group .form-images-container input{
	display: none;
}
#general-modal form .form-group .form-images-container label{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4vw;
	padding: 2vw 0;
	border: 2px dashed #EEE;
	border-radius: 5px;
	font-size: 0.8vw;
	cursor: pointer;
}
#general-modal form .form-group .form-images-container label:hover{
	border-color: #CCC;
}
#general-modal form .form-group .form-images-container .image-card{
	display: flex;
	flex-direction: column;
	width: 4vw;
	gap: 0.4vw;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	border: 1px solid #EEE;
	border-radius: 5px;
	overflow: hidden;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar{
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper .wrapper-toolbar button{
	border: none;
	border-radius: 5px;
	background: #EEE;
	color: #191919;
	cursor: pointer;
}
#general-modal form .form-group .form-images-container .image-card .image-card-wrapper:hover .wrapper-toolbar{
	opacity: 1;
	visibility: visible;
}
#general-modal form .form-group .form-images-container .image-card select{
	width: 100%;
}

#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;
	gap: 0.8vw;
}
#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-pagination{
	display: flex;
	align-items: end;
	justify-content: end;
	padding: 0.8vw;
	padding-bottom: 0;
	gap: 0.4vw;
}
#root .content-wrapper .content-pagination button{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75vw;
	padding: 0;
	height: 1.9vw;
	width: 1.9vw;
	border: 1px solid transparent;
	background: #EAECEF;
	color: #191919;
	font-weight: 500;
	border-radius: 0.4vw;
	cursor: pointer;
}
#root .content-wrapper .content-pagination button:hover{
	background: #1d7488;
	color: white;
}
#root .content-wrapper .content-pagination button.active-page-button{
	background: #1d7488;
	color: white;
}
#root .content-wrapper .content-pagination input{
	width: 6ch;
}
#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 .content-table table td label.chip-label{
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	padding: 0.2vw 1vw;
	border-radius: 100px;
	font-size: 0.65vw;
}
#root .content-wrapper .content-table table td label.chip-label-success{
	background: #1d7488;
	color: #f8f9fa;
}
#root .content-wrapper .content-table table td label.chip-label-secondary{
	background: #E2E2E2;
	color: #191919;
}
#root .content-wrapper .content-table table td label.chip-label-info{
	background: #E2E2E2;
	color: #191919;
}
#root .content-wrapper .content-table table td img{
	width: 10ch;
	height: 8ch;
	object-fit: contain;
	cursor: pointer;
}
#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;
	gap: 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 .content-tab-container form .form-row .form-group img{
	width: 100%;
	cursor: pointer;
}
#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 button:disabled,
#root .content-wrapper .transactions-constructor .constructor-table table td select:disabled,
#root .content-wrapper .transactions-constructor .constructor-table table td input:disabled{
	border-color: #E2E2E2;
	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;
}