*{
	transition: .3s ease;
	font-family: "Inter", sans-serif;
}
body{
	margin: 0;
	padding: 0;
	font-family: monospace;
}
#root{
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}
#progress-bar{
	height: 0.2vw;
	width: 100vw;
	overflow: hidden;
}
#progress-bar .slider{
	height: 100%;
	width: 30vw;
	background: #2563eb;
	position: relative;
	animation: loading 1s infinite;
	animation-timing-function: unset;
}
@keyframes loading{
	from {
		left: -30vw;
	}
	to {
		left: 130vw;
	}
}
#notification-bar{
	height: 100vh;
	width: 100vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
}
.show-dialog{
	opacity: 1 !important;
	visibility: visible !important;
}
#notification-card{
	margin: 0 auto;
	margin-top: 2vw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1vw;
	padding: .5vw 1vw;
	border-radius: 5px;
	max-width: 30vw;
	cursor: pointer;
	color: white;
}
.success-notification-card{
	background: darkgreen;
}
.fail-notification-card{
	background: darkred;
}
#notification-card i{
	font-size: 1vw;
}
#notification-card p{
	margin: 0;
}
#confirmation-dialog{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
}
#confirmation-dialog form{
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 0.5vw;
	padding: 1.5vw 2vw;
	padding-top: 2.5vw;
	border-radius: 10px;
	background: white;
	min-width: 20vw;
	max-width: 30vw;
	box-shadow:
		0px 0px 2.2px rgba(0, 0, 0, 0.02),
		0px 0px 5.3px rgba(0, 0, 0, 0.028),
		0px 0px 10px rgba(0, 0, 0, 0.035),
		0px 0px 17.9px rgba(0, 0, 0, 0.042),
		0px 0px 33.4px rgba(0, 0, 0, 0.05),
		0px 0px 80px rgba(0, 0, 0, 0.07);
}
#confirmation-dialog form i{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	cursor: pointer;
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 5px;
	position: absolute;
	top: 1vw;
	right: 1.5vw;
}
#confirmation-dialog form i:hover{
	background: #EEE;
}
#confirmation-dialog form h3{
	margin: 0;
	margin-bottom: 0.5vw;
}
#confirmation-dialog form p{
	margin: 0;
	font-size: 0.7vw;
}
#confirmation-dialog form .dialog-actions{
	margin-top: 1vw;
	margin-left: auto;
	display: flex;
	gap: 1vw;
}
#confirmation-dialog form .dialog-actions button{
	background: white;
	border-radius: 5px;
	padding: 0.6vw 1vw;
	border: none;
	font-weight: bold;
	cursor: pointer;
}
#confirmation-dialog form .dialog-actions .primary-button{
	background: #2563eb;
	color: white;
}
#confirmation-dialog form .dialog-actions button:hover{
	background: #DDD;
}
#confirmation-dialog form .dialog-actions .primary-button:hover{
	background: #003fc9;
}
#list-dialog{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
}
#list-dialog form{
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 0.5vw;
	padding: 1.5vw 2vw;
	padding-top: 2.5vw;
	border-radius: 10px;
	background: white;
	min-width: 20vw;
	max-width: 30vw;
	box-shadow:
		0px 0px 2.2px rgba(0, 0, 0, 0.02),
		0px 0px 5.3px rgba(0, 0, 0, 0.028),
		0px 0px 10px rgba(0, 0, 0, 0.035),
		0px 0px 17.9px rgba(0, 0, 0, 0.042),
		0px 0px 33.4px rgba(0, 0, 0, 0.05),
		0px 0px 80px rgba(0, 0, 0, 0.07);
}
#list-dialog form i{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	cursor: pointer;
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 5px;
	position: absolute;
	top: 1vw;
	right: 1.5vw;
}
#list-dialog form i:hover{
	background: #EEE;
}
#list-dialog form h3{
	margin: 0;
	margin-bottom: 0.5vw;
}
#list-dialog form .list-container{
	display: flex;
	flex-direction: column;
	gap: 0.6vw;
	height: 20vw;
	overflow-y: scroll;
	overflow-x: hidden;
}
#list-dialog form .list-item{
	display: flex;
	align-items: center;
	border-radius: 5px;
	overflow-y: hidden;
	background: #EEE;
	cursor: pointer;
	flex-shrink: 0;
	height: 10vw;
}
#list-dialog form .list-item img{
	width: 100%;
	height: 100%;
}
#list-dialog form .list-item:hover{
	background: #DDD;
	opacity: 0.7;
}
#list-dialog form .dialog-actions{
	margin-top: 1vw;
	margin-left: auto;
	display: flex;
	gap: 1vw;
}
#list-dialog form .dialog-actions button{
	background: white;
	border-radius: 5px;
	padding: 0.6vw 1vw;
	border: none;
	font-weight: bold;
	cursor: pointer;
}
#list-dialog form .dialog-actions .primary-button{
	background: #2563eb;
	color: white;
}
#list-dialog form .dialog-actions button:hover{
	background: #DDD;
}
#list-dialog form .dialog-actions .primary-button:hover{
	background: #003fc9;
}
#settings-dialog{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
}
#settings-dialog form{
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 0.5vw;
	padding: 1.5vw 2vw;
	padding-top: 2.5vw;
	border-radius: 10px;
	background: white;
	min-width: 20vw;
	max-width: 30vw;
	box-shadow:
		0px 0px 2.2px rgba(0, 0, 0, 0.02),
		0px 0px 5.3px rgba(0, 0, 0, 0.028),
		0px 0px 10px rgba(0, 0, 0, 0.035),
		0px 0px 17.9px rgba(0, 0, 0, 0.042),
		0px 0px 33.4px rgba(0, 0, 0, 0.05),
		0px 0px 80px rgba(0, 0, 0, 0.07);
}
#settings-dialog form i{
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	cursor: pointer;
	width: 1.5vw;
	height: 1.5vw;
	border-radius: 5px;
	position: absolute;
	top: 1vw;
	right: 1.5vw;
}
#settings-dialog form i:hover{
	background: #EEE;
}
#settings-dialog form h3{
	margin: 0;
	margin-bottom: 0.5vw;
}
#settings-dialog form .dialog-form-group{
	display: flex;
	flex-direction: column;
	gap: 0.6vw;
	margin-top: 0.5vw;
}
#settings-dialog form .dialog-form-group label{
	font-size: small;
	opacity: 0.6;
}
#settings-dialog form .dialog-form-group input{
	width: calc(100% - 1vw);
	padding: 0.5vw;
	border-radius: 5px;
	border: 1px solid darkgrey;
}
#settings-dialog form .dialog-form-group input:focus{
	outline: none;
	border-color: #003fc9;
}
#settings-dialog form .dialog-actions{
	margin-top: 1vw;
	margin-left: auto;
	display: flex;
	gap: 1vw;
}
#settings-dialog form .dialog-actions button{
	background: white;
	border-radius: 5px;
	padding: 0.6vw 1vw;
	border: none;
	font-weight: bold;
	cursor: pointer;
}
#settings-dialog form .dialog-actions .primary-button{
	background: #2563eb;
	color: white;
}
#settings-dialog form .dialog-actions button:hover{
	background: #DDD;
}
#settings-dialog form .dialog-actions .primary-button:hover{
	background: #003fc9;
}

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

#origin{
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	position: relative;
}
#origin .error-input{
	border-color: red !important;
}
#origin button{
	background: #2563eb;
	color: white;
	padding: 0.6vw 1.5vw;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-weight: bold;
}
#origin button:hover{
	background: #003fc9;
}
#origin .secondary-button{
	margin-top: 1vw;
	padding: 0.4vw;
	background: transparent;
	color: black;
}
#origin .secondary-button:hover{
	background: #EEE;
}
#origin .danger-button{
	background: #C80036;
}
#origin .danger-button:hover{
	background: #9c002a;
}
#origin #navbar{
	display: flex;
}
#origin #navbar a{
	font-size: 1vw;
	text-decoration: none;
	color: black;
	display: flex;
	width: 100%;
	padding: 1vw;
	align-items: center;
	justify-content: center;
	border-bottom: 3px solid transparent;
}
#origin #navbar a:hover{
	background: #EEE;
}
#origin #navbar .active-tab{
	background: #EEE;
	border-color: #2563eb;
	color: #2563eb;
}
#origin #content{
	display: flex;
	flex-direction: column;
	padding: 2vw;
	padding-bottom: 5vw;
	position: relative;
	z-index: 9;
}
#origin #content h4{
	margin: 0;
	margin-bottom: 1vw;
}
#origin #content .content-header{
	display: flex;
	align-items: center;
	margin-bottom: 1.5vw;
}
#origin #content .content-header .tools{
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: 1vw;
}
#origin #content .applications-list{
	display: flex;
	flex-direction: column;
}
#origin #content .applications-list table{
	border: 1px solid #DDD;
	border-collapse: collapse;
	font-size: 0.7vw;
}
#origin #content .applications-list table tr{
	border-bottom: 1px solid #DDD;
}
#origin #content .applications-list table tr:hover{
	background: #EEE;
}
#origin #content .applications-list table th{
	color: darkgrey;
}
#origin #content .applications-list table td, #origin #content .applications-list table th{
	padding: 0.5vw 0;
	text-align: center;
}
#origin #content .applications-list table td i{
	cursor: pointer;
}
#origin #content form{
	display: flex;
	flex-direction: column;
}
#origin #content form .inline-form-group{
	display: flex;
	gap: 1vw;
	margin-top: 1vw;
}
#origin #content form .inline-form-group input, #origin #content form .inline-form-group select{
	background: white;
	border: 1px solid #DDD;
	border-radius: 5px;
	padding: 0.6vw;
	font-size: 0.7vw;
	width: 100%;
}
#origin #content form .inline-form-group input:disabled, #origin #content form .inline-form-group select:disabled{
	background: #DDD;
}
#origin #content form .inline-form-group input:focus{
	outline: none;
	border-color: #2563eb;
}
#origin #content form .inline-form-group select:focus{
	outline: none;
	border-color: #2563eb;
}
#origin #content form .inline-form-group .inline-form-group-input{
	display: flex;
	flex-direction: column;
	gap: 0.5vw;
	width: 100%;
}
#origin #content form .inline-form-group .inline-form-group-input small{
	opacity: .6;
}
#origin #content form .inline-form-group .inline-form-group-input input{
	width: auto;
}
#origin #content .suggestion-input{
	display: flex;
	width: 100%;
	position: relative;
}
#origin #content .suggestion-input .suggestions-list{
	position: absolute;
	z-index: 999;
	top: 105%;
	width: calc(100% - 2px);
	max-height: 11.4vw;
	background: white;
	border: 1px solid #DDD;
	border-radius: 5px;
	overflow: hidden;
	overflow-y: scroll;
	visibility: hidden;
	opacity: 0;
}
#origin #content .suggestion-input .suggestions-list img{
	width: 100%;
	height: 8vw;
	cursor: pointer;
}
#origin #content .suggestion-input .suggestions-list img:hover{
	opacity: .7;
}
#origin #content .suggestion-input .suggestions-list span{
	padding: 0.6vw;
	display: flex;
	font-size: 0.7vw;
	cursor: pointer;
}
#origin #content .suggestion-input .suggestions-list span:hover{
	background: #2563eb;
	color: white;
}
#origin #content .suggestion-input input:focus ~ .suggestions-list{
	visibility: visible;
	opacity: 1;
}
#origin #content hr{
	margin: 1.5vw 0;
	width: 100%;
	color: transparent;
}
#origin #content .transactions-container{
	display: flex;
	flex-direction: column;
}
#origin #content .transactions-container table{
	border: 1px solid black;
	border-collapse: collapse;
}
#origin #content .transactions-container table th, #origin #content .transactions-container table td{
	border: 1px solid black;
	border-collapse: collapse;
}
#origin #content .transactions-container table input, #origin #content .transactions-container table select{
	padding: 0;
	min-width: fit-content;
	width: 100%;
	height: 100%;
	border: none;
}
#origin #content .transactions-container table input:focus{
	outline: none;
}
#origin #content .transactions-container table select{
	background: none;
	border: none;
}
#origin #content .transactions-container table i{
	cursor: pointer;
}
#origin #content .transactions-container-centered table td{
	text-align: center;
}
#origin #content .transactions-container-centered .transactions-container-cell-left{
	text-align: left;
}
#origin #content .transactions-container-centered input{
	text-align: center;
	font-size: 0.8vw;
}
#origin #content .transactions-advanced-container{
	width: 100%;
	height: auto;
	overflow-y: hidden;
	overflow-x: scroll;
	padding-bottom: 1vw;
}
#origin #content .transactions-advanced-container table td, #origin #content .transactions-advanced-container table th{
	padding: 0.4vw 0.6vw;
}
#origin #content .content-footer{
	margin-top: 2.5vw;
	display: flex;
	gap: 1vw;
	align-items: center;
	justify-content: end;
}
#origin #content .content-pagination{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1vw;
	flex-wrap: wrap;
	padding: 1vw 0;
}
#origin #content .content-pagination label{
	padding: 0.5vw 1vw;
	background: transparent;
	cursor: pointer;
	border-radius: 5px;
	font-size: 0.8vw;
}
#origin #content .content-pagination label:hover{
	background: #DDD;
}
#origin #content .content-pagination .active-page{
	background: #DDD;
}
#origin #content .invisible-cell-label{
	display: none;
}
#origin #content .invisible-container{
	display: none;
}
#origin #content table .aspect-file-input{
	display: none;
}
#origin #content table img{
	width: 10vw;
}

#origin #footer{
	display: flex;
	align-items: center;
	position: fixed;
	z-index: 99;
	background: white;
	bottom: 0;
	left: 0;
	width: calc(100vw - 2vw);
	padding: 1vw;
	box-shadow:
		0px 0px 2.2px rgba(0, 0, 0, 0.02),
		0px 0px 5.3px rgba(0, 0, 0, 0.028),
		0px 0px 10px rgba(0, 0, 0, 0.035),
		0px 0px 17.9px rgba(0, 0, 0, 0.042),
		0px 0px 33.4px rgba(0, 0, 0, 0.05),
		0px 0px 80px rgba(0, 0, 0, 0.07);
}
#origin #footer img{
	position: relative;
	height: 2vw;
	margin-right: 1vw;
	border-radius: 100px;
}
#origin #footer .toolbar{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1vw;
}
#origin #footer .toolbar button{
	color: black;
	padding: 0.2vw 1vw;
	background: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
#origin #footer .toolbar button:hover{
	background: #DDD;
}

#origin #error-container{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#origin #error-container #error-form{
	display: flex;
	flex-direction: column;
	align-items: center;
}
#origin #error-container #error-form h1{
	font-size: 8vw;
	margin: 0;
	color: #2563eb;
}
#origin #error-container #error-form button{
	margin-top: 2vw;
	background: #2563eb;
	border-radius: 5px;
	padding: 0.6vw 1vw;
	border: none;
	font-weight: bold;
	cursor: pointer;
}