@font-face {
  font-family: 'Archivo';
  src: url('https://cdn.claudit.ro/_static/font/Archivo-VariableFont_wdth,wght.ttf') format('ttf');
  font-weight: 100 900; /* Supports the full range of weights */
  font-stretch: 62% 125%; /* Supports the full range of widths */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('https://cdn.claudit.ro/_static/font/Archivo-Italic-VariableFont_wdth,wght.ttf') format('ttf');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #111;
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  font-variation-settings:
    "wdth" 100;
}
body { width: 98vw; background-color: #ddd; }
p { font-size: 1.2rem; line-height: 2rem; }
h5 { font-size: 1.5rem; }
h4 { font-size: 1.8rem; }
h3 { font-size: 2rem; }
h2 { font-size: 2.5rem; }
h1 { font-size: 3rem; }
input[type="file"]::file-selector-button {
  box-sizing: border-box;
  border: 2px solid #333;
  box-shadow: 3px 3px #333;
  margin: 4px 8px 4px 0;
  padding: 8px 4px;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}
input[type="file"]::file-selector-button:focus {
  transform: translate(3px, 3px);
  box-shadow: 0;
}
.main-header {
	display: flex;
	align-items: end;
	padding: 4px;
}
.main-header > h3.logo-name-first {
	color: #C197DB;
  font-weight: 800;
}
.main-header > h3.logo-name-second {
	font-weight: 200;
  color: #4B2861;
}
button, button > a {
	text-decoration: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #4B2861;
  padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {
	background-color: rgba(207,169,255,.3);
}
th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  font-weight: 600;
  background-color: #4B2861;
  color: white;
}
.spotlight {
	display: block;
	max-width: 1400px;
	margin: 0 auto;
}
.btn {
	font-size: 1rem;
	color: #333;
	padding: 6px 12px;
	font-weight: 400;
	border-radius: 8px;
	border: 2px solid #333;
	background: #fff;
	gap: 8px;
	display: flex;
	align-items: center;
	box-shadow: 3px 3px #333;
	cursor: pointer;
	margin: 4px 0;
	transition: all 0.2s ease;
}
.btn:active, .btn:focus {
	box-shadow: none !important;
	transform: translate(3px, 3px);
}
.btn:disabled {
	background-color: dimgrey;
	cursor: not-allowed;
	color: linen;
	opacity: .85;
	box-shadow: none !important;
	transform: translate(3px, 3px);
}
.btn.danger {
	color: #dc3545;
	border: 2px solid #dc3545;
	box-shadow: 3px 3px #dc3545;
}
.btn.danger:active {
	box-shadow: 0;
	transform: translate(3px, 3px);
}
.no-display, .btn.no-display {
	display: none;
}
.flex {
	display: flex;
}
.col {
	flex-direction: column;
}
.row {
	flex-direction: row;
}
.gap-sm {
	gap: 8px;
}
.wrap {
	flex-wrap: wrap;
}
.form_group {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  margin: 0;
}
.input_style {
  box-sizing: border-box;
  width: 100%;
  border: 2px solid #333;
  box-shadow: 3px 3px #333;
  margin: 4px 0;
  padding: 8px 4px;
  border-radius: 4px;
  font-size: 15px;
  transition: all 0.2s ease;
}
.form_group > label {
  padding: 0 0 0 4px;
}
.input_style:focus, .input_style:active {
  transform: translate(3px, 3px);
  box-shadow: none !important;
}
.form_group.danger > .input_style {
  border: 2px solid #dc3545;
  box-shadow: 3px 3px #dc3545;
}
.form_group.danger > label {
  color: #dc3545;
}
.form_group.danger > .validation_msg {
  display: block;
}
label > sup {
  color: #dc3545;
}
.bold {
	font-weight: 800;
}
.w-128 {
	width: 128px;
}
.t-center {
	text-align: center;
}
.p-xs { padding: 4px; } .p-sm { padding: 8px; } .p-md { padding: 16px; } .p-lg { padding: 24px; } .p-xl { padding: 32px; }
.pt-xs { padding-top: 4px; } .pt-sm { padding-top: 8px; } .pt-md { padding-top: 16px; } .pt-lg { padding-top: 24px; } .pt-xl { padding-top: 32px; }
.pb-xs { padding-bottom: 4px; } .pb-sm { padding-bottom: 8px; } .pb-md { padding-bottom: 16px; } .pb-lg { padding-bottom: 24px; } .pb-xl { padding-bottom: 32px; }
.pl-xs { padding-left: 4px; } .pl-sm { padding-left: 8px; } .pl-md { padding-left: 16px; } .pl-lg { padding-left: 24px; } .pl-xl { padding-left: 32px; }
.pr-xs { padding-right: 4px; } .pr-sm { padding-right: 8px; } .pr-md { padding-right: 16px; } .pr-lg { padding-right: 24px; } .pr-xl { padding-right: 32px; }
.px-xs { padding-left: 4px; padding-right: 4px; } .px-sm { padding-left: 8px; padding-right: 8px; } .px-md { padding-left: 16px; padding-right: 16px; } .px-lg { padding-left: 24px; padding-right: 24px; } .px-xl { padding-left: 32px; padding-right: 32px; }
.py-xs { padding-top: 4px; padding-bottom: 4px; } .py-sm { padding-top: 8px; padding-bottom: 8px; } .py-md { padding-top: 16px; padding-bottom: 16px; } .py-lg { padding-top: 24px; padding-bottom: 24px; } .py-xl { padding-top: 32px; padding-bottom: 32px; }

.m-xs { margin: 4px; } .m-sm { margin: 8px; } .m-md { margin: 16px; } .m-lg { margin: 24px; } .m-xl { margin: 32px; }
.mt-xs { margin-top: 4px; } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 16px; } .mt-lg { margin-top: 24px; } .mt-xl { margin-top: 32px; }
.mb-xs { margin-bottom: 4px; } .mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 16px; } .mb-lg { margin-bottom: 24px; } .mb-xl { margin-bottom: 32px; }
.ml-xs { margin-left: 4px; } .ml-sm { margin-left: 8px; } .ml-md { margin-left: 16px; } .ml-lg { margin-left: 24px; } .ml-xl { margin-left: 32px; }
.mr-xs { margin-right: 4px; } .mr-sm { margin-right: 8px; } .mr-md { margin-right: 16px; } .mr-lg { margin-right: 24px; } .mr-xl { margin-right: 32px; }
.mx-xs { margin-left: 4px; margin-right: 4px; } .mx-sm { margin-left: 8px; margin-right: 8px; } .mx-md { margin-left: 16px; margin-right: 16px; } .mx-lg { margin-left: 24px; margin-right: 24px; } .mx-xl { margin-left: 32px; margin-right: 32px; }
.my-xs { margin-top: 4px; margin-bottom: 4px; } .my-sm { margin-top: 8px; margin-bottom: 8px; } .my-md { margin-top: 16px; margin-bottom: 16px; } .my-lg { margin-top: 24px; margin-bottom: 24px; } .my-xl { margin-top: 32px; margin-bottom: 32px; }