@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import url("https://cdn-uicons.flaticon.com/2.1.0/uicons-regular-rounded/css/uicons-regular-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.0.0/uicons-brands/css/uicons-brands.css");
@import url("https://cdn-uicons.flaticon.com/2.0.0/uicons-solid-straight/css/uicons-solid-straight.css");
@import url("https://cdn-uicons.flaticon.com/2.3.0/uicons-solid-rounded/css/uicons-solid-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.3.0/uicons-bold-rounded/css/uicons-bold-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.3.0/uicons-thin-rounded/css/uicons-thin-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.3.0/uicons-thin-rounded/css/uicons-thin-rounded.css");

:root {
	--color-primary: #f66f47;
	--color-primary-96: #f66f47f5;
	--color-primary-88: #f66f47e0;
	--color-primary-80: #f66f47cc;
	--color-primary-72: #f66f47b8;
	--color-primary-64: #f66f47a3;
	--color-primary-56: #f66f478f;
	--color-primary-48: #f66f477a;
	--color-primary-32: #f66f4752;
	--color-primary-24: #f66f473d;
	--color-primary-16: #f66f4729;
	--color-primary-08: #f66f4714;
	--color-primary-04: #f66f470a;
	--color-primary-02: #f66f4705;

	--color-white: #ffffff;
	--color-white-96: #fffffff5;
	--color-white-88: #ffffffe0;
	--color-white-80: #ffffffcc;
	--color-white-72: #ffffffb8;
	--color-white-64: #ffffffa3;
	--color-white-56: #ffffff8f;
	--color-white-48: #ffffff7a;
	--color-white-32: #ffffff52;
	--color-white-24: #ffffff3d;
	--color-white-16: #ffffff29;
	--color-white-08: #ffffff14;
	--color-white-04: #ffffff0a;
	--color-white-02: #ffffff05;

	--color-dark: #23324c;
	--color-dark-96: #23324cf5;
	--color-dark-88: #23324ce0;
	--color-dark-80: #23324ccc;
	--color-dark-72: #23324cb8;
	--color-dark-64: #23324ca3;
	--color-dark-56: #23324c8f;
	--color-dark-48: #23324c7a;
	--color-dark-32: #23324c52;
	--color-dark-24: #23324c3d;
	--color-dark-16: #23324c29;
	--color-dark-08: #23324c14;
	--color-dark-04: #23324c0a;
	--color-dark-02: #23324c05;

	--color-yellow: #fec514;
	--color-yellow-04: #fec5140a;
	--color-yellow-08: #fec51414;
	--color-yellow-16: #fec51429;
	--color-yellow-88: #fec514e0;

	--color-orange: #ff6300;
	--color-orange-88: #ff6300e0;

	--color-blue: #0657a3;
	--color-blue-04: #0657a30a;
	--color-blue-08: #0657a314;
	--color-blue-16: #0657a329;
	--color-blue-88: #0657a3e0;

	--color-purple: #6e17b0;
	--color-purple-88: #6e17b0e0;

	--color-green: #188754;
	--color-green-04: #00bfb30a;
	--color-green-08: #00bfb314;
	--color-green-16: #00bfb329;
	--color-green-88: #00bfb3e0;

	--color-red: #dc3646;
	--color-red-04: #f0425f0a;
	--color-red-08: #f0425f14;
	--color-red-16: #f0425f29;
	--color-red-88: #f0425fe0;
}

.mode-dark {
	--color-dark: #ffffff;
	--color-dark-96: #fffffff5;
	--color-dark-88: #ffffffe0;
	--color-dark-80: #ffffffcc;
	--color-dark-72: #ffffffb8;
	--color-dark-64: #ffffffa3;
	--color-dark-56: #ffffff8f;
	--color-dark-48: #ffffff7a;
	--color-dark-32: #ffffff52;
	--color-dark-24: #ffffff3d;
	--color-dark-16: #ffffff29;
	--color-dark-08: #ffffff14;
	--color-dark-04: #ffffff0a;
	--color-dark-02: #ffffff05;

	--color-white: #001524;
	--color-white-96: #001524f5;
	--color-white-88: #001524e0;
	--color-white-80: #001524cc;
	--color-white-72: #001524b8;
	--color-white-64: #001524a3;
	--color-white-56: #0015248f;
	--color-white-48: #0015247a;
	--color-white-32: #00152452;
	--color-white-24: #0015243d;
	--color-white-16: #00152429;
	--color-white-08: #00152414;
	--color-white-04: #0015240a;
	--color-white-02: #00152405;
}

html,
body {
	color: var(--color-dark);
	background: var(--color-white);

	font-size: 16px;
}

body {
	max-width: 100vw;

	overflow-x: hidden;
}

i.fi {
	width: 1rem;
	height: 1rem;

	line-height: 1;

	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.title h2{
	font-weight: 600;
	font-size: 1.875rem;
}


/* buttons */

[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

.buttons {
    display: flex;
    gap: 0.5rem;
	justify-content: end;
}

button {
	padding: 0;
	margin: 0;

	background: transparent;
	border: 0;
}

.link {
	font-weight: 500;

	color: var(--color-primary);
}

.link-grey {
	color: var(--color-dark-56);
}

.btn {
	font-size: 0.85rem;
	text-transform: uppercase;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.75rem 1.25rem;

	border-radius: 0.75rem;

	transition: all 0s;

	font-weight: 600;

	min-height: 2.4rem;

	cursor: pointer;
}

.btn.small {
	padding: 0.5rem 1rem;
}

.btn:hover {
	opacity: .75;
}

.btn > i,
.link > i {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;

	margin: 0 -0.25rem;
}

.btn > span,
.link > span {
	white-space: nowrap;
}

.btn:has(> span) > i:first-child,
.link:has(> span) > i:first-child {
	margin-right: 0.35rem;
}

.btn:has(> span) > i:last-child,
.link:has(> span) > i:last-child {
	margin-left: 0.35rem;
}

.btn.default {
	background: var(--color-dark-04);

	color: var(--color-dark);
}

.btn.primary {
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-white);
}

.btn.primary-outline {
	background: transparent;
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.btn.dark {
	background: var(--color-dark);
	border: 1px solid var(--color-dark);
	color: var(--color-white);
}

.btn.dark-outline {
	background: transparent;
	border: 1px solid var(--color-dark);
	color: var(--color-dark);
}

.btn.green {
	background: var(--color-green);
	border: 1px solid var(--color-green);
	color: var(--color-white);
}

.btn.red {
	background: var(--color-red);
	border: 1px solid var(--color-red);
	color: var(--color-white);
}

.btn.blue {
	background: var(--color-blue);
	border: 1px solid var(--color-blue);
	color: var(--color-white);
}

.btn.purple {
	background: var(--color-purple);
	border: 1px solid var(--color-purple);
	color: var(--color-white);
}

.btn.yellow {
	background: var(--color-yellow);
	border: 1px solid var(--color-yellow);
	color: var(--color-dark);
}

.btn.orange {
	background: var(--color-orange);
	border: 1px solid var(--color-orange);
	color: var(--color-white);
}

/* alert */

.alert {
	padding: 0.75rem 1rem;
	margin: 0;

	background: transparent;

	font-weight: 500;

	border-width: 1px;

	border-radius: 0.75rem;

	display: flex;
	align-items: center;
}

.alert i {
	font-size: 1rem;

	width: 1rem;
	height: 1rem;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.alert span {
	position: relative;
	bottom: -0.5px;
}

.alert.slim {
	padding: 0;

	border-width: 0;
}

.alert.alert-red,
.alert.red {
	border-color: transparent;
	background: var(--color-red-08);
	color: var(--color-dark);
}

.alert.alert-default,
.alert.default {
	border-color: transparent;
	background: var(--color-dark-04);
	color: var(--color-dark);
}

.alert.alert-green,
.alert.green {
	border-color: transparent;
	background: var(--color-green-08);
	color: var(--color-dark);
}

/* forms */

::placeholder {
	font-weight: 500;

	color: var(--color-dark-48);
}

.input {
	padding: 0.65rem .85rem;

	height: auto;

	width: 100%;

	border-radius: 0.75rem;

	border: 1px solid var(--color-dark-16);
	background: var(--color-white);
	color: var(--color-dark);
}

select.input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;

	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 1rem center / 1rem;
}

.input.between {
	display: flex;
	justify-content: space-between;
}

.input.a-center {
	display: flex;
	align-items: center;
}

.input:active,
.input:focus,
.input:focus-visible,
.input:focus-within {
	border-color: var(--color-dark);
}

.label-input {
	margin-bottom: 0.25rem;

	font-size: 0.85rem;

	display: block;
}

span.switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

span.switch label {
    font-size: 0.85rem;
    font-weight: 500;
}

span.switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;

    position: relative;
    display: inline-block;
    vertical-align: middle;

    width: 3rem;
    height: 1.5rem;

    border-radius: 1rem;
    background: var(--color-dark-08);
    border: 1px solid var(--color-dark-16);
    transition: background .25s ease, border-color .25s ease;
    cursor: pointer;
}

span.switch input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: transform .25s ease;
}

span.switch input[type="checkbox"]:checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

span.switch input[type="checkbox"]:checked::after {
    transform: translateX(1.5rem);
}

span.switch input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-primary-32);
    outline-offset: 2px;
}

span.switch input[type="checkbox"]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* pagination */

nav.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav.pagination div.count {
    color: var(--color-dark-56);

    font-size: 0.875rem;
}

nav.pagination ul {
    display: flex;
    gap: 0.5rem;
}

nav.pagination ul li a.disabled {
    opacity: 0.4;
}

nav.pagination ul li:first-child a,
nav.pagination ul li:last-child a {
    background: var(--color-dark-08);
}

nav.pagination ul li a {
    width: 2rem;
    height: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-weight: 500;
    font-size: 0.875rem;

    border-radius: 0.5rem;

    color: var(--color-dark-56);
    background: var(--color-dark-02);
}

nav.pagination ul li a.active {
    background: var(--color-primary);
    color: #ffffff;
}


/* table */

div.table-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

div.table-container > table {
    width: 100%;
}

div.table-container > table > thead > tr > th,
div.table-container > table > tbody > tr > th {
    border: 1px solid var(--color-dark-16);

    padding: .5rem .5rem .5rem .75rem;

    text-align: left;

    font-size: .875rem;

    font-weight: 600;
}

div.table-container > table > tbody > tr > td {
    border: 1px solid var(--color-dark-16);

    padding: .5rem .5rem .5rem .75rem;

    font-size: .875rem;
}

div.table-container > table > tbody > tr > td input {
    width: 100%;

    outline: 0;
}

div.table-container > table > tbody > tr > td .btn {
    padding: .5rem .75rem;

    font-size: .75rem;

    border-radius: .5rem;

    gap: .25rem;
}

/* loading */

.loading {
  position: relative;
}

.loading::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255);
  z-index: 10;
  pointer-events: none;
}

.loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 0.3rem solid var(--color-primary, #3490dc);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 11;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* loader */

span.loader {
	display: flex;
	justify-content: center;
}

span.loader::before {
	content: "";

	display: block;

	width: 2rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(farthest-side, var(--color-dark) 94%, #0000) top/.25rem 0.25rem no-repeat, conic-gradient(#0000 30%, var(--color-dark));
    mask: radial-gradient(farthest-side, #0000 calc(100% - 0.25rem), #000 0);
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 0.25rem), #000 0);
	animation: loader 1s infinite linear;
}
span.loader.small::before {
	width: 1.5rem !important;
}
span.loader.tiny::before {
	width: 1.25rem !important;
}

@keyframes loader {
	100% {
		transform: rotate(1turn);
	}
}

/* tags */

.tags {
	display: flex;
	gap: 0.5rem;
}

.tags .tag {
	padding: 0.25rem 0.5rem;

	border-radius: 0.5rem;

	font-size: 0.75rem;

	color: var(--color-dark);
	background: var(--color-dark-04);

	font-weight: 500;
}