:root {

	--color-primary: #15161e;
	--color-primary-96: #15161ef5;
	--color-primary-88: #15161ee0;
	--color-primary-80: #15161ecc;
	--color-primary-72: #15161eb8;
	--color-primary-64: #15161ea3;
	--color-primary-56: #15161e8f;
	--color-primary-48: #15161e7a;
	--color-primary-32: #15161e52;
	--color-primary-24: #15161e3d;
	--color-primary-16: #15161e29;
	--color-primary-08: #15161e14;
	--color-primary-06: #15161e09;
	--color-primary-04: #15161e0a;
	--color-primary-02: #15161e05;

	--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-06: #ffffff09;
	--color-white-04: #ffffff0a;
	--color-white-02: #ffffff05;

	--color-dark: #292c3d;
	--color-dark-96: #292c3df5;
	--color-dark-88: #292c3de0;
	--color-dark-80: #292c3dcc;
	--color-dark-72: #292c3db8;
	--color-dark-64: #292c3da3;
	--color-dark-56: #292c3d8f;
	--color-dark-48: #292c3d7a;
	--color-dark-32: #292c3d52;
	--color-dark-24: #292c3d3d;
	--color-dark-16: #292c3d29;
	--color-dark-08: #292c3d14;
	--color-dark-06: #292c3d09;
	--color-dark-04: #292c3d0a;
	--color-dark-02: #292c3d05;

	--color-yellow: #fec514;
	--color-yellow-96: #fec514f5;
	--color-yellow-88: #fec514e0;
	--color-yellow-80: #fec514cc;
	--color-yellow-72: #fec514b8;
	--color-yellow-64: #fec514a3;
	--color-yellow-56: #fec5148f;
	--color-yellow-48: #fec5147a;
	--color-yellow-32: #fec51452;
	--color-yellow-24: #fec5143d;
	--color-yellow-16: #fec51429;
	--color-yellow-08: #fec51414;
	--color-yellow-06: #fec51409;
	--color-yellow-04: #fec5140a;
	--color-yellow-02: #fec51405;

	--color-orange: #ff6300;
	--color-orange-96: #ff6300f5;
	--color-orange-88: #ff6300e0;
	--color-orange-80: #ff6300cc;
	--color-orange-72: #ff6300b8;
	--color-orange-64: #ff6300a3;
	--color-orange-56: #ff63008f;
	--color-orange-48: #ff63007a;
	--color-orange-32: #ff630052;
	--color-orange-24: #ff63003d;
	--color-orange-16: #ff630029;
	--color-orange-08: #ff630014;
	--color-orange-06: #ff630009;
	--color-orange-04: #ff63000a;
	--color-orange-02: #ff630005;

	--color-blue: #0657a3;
	--color-blue-96: #0657a3f5;
	--color-blue-88: #0657a3e0;
	--color-blue-80: #0657a3cc;
	--color-blue-72: #0657a3b8;
	--color-blue-64: #0657a3a3;
	--color-blue-56: #0657a38f;
	--color-blue-48: #0657a37a;
	--color-blue-32: #0657a352;
	--color-blue-24: #0657a33d;
	--color-blue-16: #0657a329;
	--color-blue-08: #0657a314;
	--color-blue-06: #0657a309;
	--color-blue-04: #0657a30a;
	--color-blue-02: #0657a305;

	--color-purple: #6e17b0;
	--color-purple-96: #6e17b0f5;
	--color-purple-88: #6e17b0e0;
	--color-purple-80: #6e17b0cc;
	--color-purple-72: #6e17b0b8;
	--color-purple-64: #6e17b0a3;
	--color-purple-56: #6e17b08f;
	--color-purple-48: #6e17b07a;
	--color-purple-32: #6e17b052;
	--color-purple-24: #6e17b03d;
	--color-purple-16: #6e17b029;
	--color-purple-08: #6e17b014;
	--color-purple-06: #6e17b009;
	--color-purple-04: #6e17b00a;
	--color-purple-02: #6e17b005;

	--color-green: #00bdb0;
	--color-green-96: #00bdb0f5;
	--color-green-88: #00bdb0e0;
	--color-green-80: #00bdb0cc;
	--color-green-72: #00bdb0b8;
	--color-green-64: #00bdb0a3;
	--color-green-56: #00bdb08f;
	--color-green-48: #00bdb07a;
	--color-green-32: #00bdb052;
	--color-green-24: #00bdb03d;
	--color-green-16: #00bdb029;
	--color-green-08: #00bdb014;
	--color-green-06: #00bdb009;
	--color-green-04: #00bdb00a;
	--color-green-02: #00bdb005;
    
    --color-dark-green: #008077;
    --color-dark-green-96: #008077f5;
    --color-dark-green-88: #008077e0;
    --color-dark-green-80: #008077cc;
    --color-dark-green-72: #008077b8;
    --color-dark-green-64: #008077a3;
    --color-dark-green-56: #0080778f;
    --color-dark-green-48: #0080777a;
    --color-dark-green-32: #00807752;
    --color-dark-green-24: #0080773d;
    --color-dark-green-16: #00807729;
    --color-dark-green-08: #00807714;
    --color-dark-green-06: #00807709;
    --color-dark-green-04: #0080770a;
    --color-dark-green-02: #00807705;

	--color-red: #f0425f;
	--color-red-96: #f0425ff5;
	--color-red-88: #f0425fe0;
	--color-red-80: #f0425fcc;
	--color-red-72: #f0425fb8;
	--color-red-64: #f0425fa3;
	--color-red-56: #f0425f8f;
	--color-red-48: #f0425f7a;
	--color-red-32: #f0425f52;
	--color-red-24: #f0425f3d;
	--color-red-16: #f0425f29;
	--color-red-08: #f0425f14;
	--color-red-06: #f0425f09;
	--color-red-04: #f0425f0a;
	--color-red-02: #f0425f05;
}

.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: #292c3d;
	--color-white-96: #292c3df5;
	--color-white-88: #292c3de0;
	--color-white-80: #292c3dcc;
	--color-white-72: #292c3db8;
	--color-white-64: #292c3da3;
	--color-white-56: #292c3d8f;
	--color-white-48: #292c3d7a;
	--color-white-32: #292c3d52;
	--color-white-24: #292c3d3d;
	--color-white-16: #292c3d29;
	--color-white-08: #292c3d14;
	--color-white-04: #292c3d0a;
	--color-white-02: #292c3d05;
}

/* html */

html, body {
    font-size: 16px;
}

/* labels */

label {
    display: inline-block;

    font-size: .875rem;
}

/* icons */

i.fi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* fi spinner */

.fi-rr-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* links */

.link {
    color: var(--color-primary);
    text-decoration: underline;

    cursor: pointer;

    font-weight: 500;
}

/* buttons */

.btn {
    padding: .65rem 1.25rem;

    cursor: pointer;

    border-radius: .75rem;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;

    font-weight: 500;

    text-align: center;
}

.btn > i:first-child {
    /* margin-left: -.125rem; */
}

.btn > i:last-child {
    /* margin-right: -.25rem; */
}

.btn.small {
    padding: .4rem .85rem;

    font-size: .875rem;
}

.btn:hover {
    opacity: .8;
}

.btn:disabled {
    opacity: .5;

    cursor: default;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* input/textarea */

.input-control,
input.control,
textarea.control {
    width: 100%;

    padding: .65rem .8rem;

    border-radius: .75rem;

    outline: 0;

    font-size: .875rem;

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

.input-control:focus,
input.control:focus,
textarea.control:focus {
    outline: 1px solid var(--color-dark);
}

.input-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.input-control[type*="date"] {
    display: block;
}

.input-control.clean {
    padding: 0;

    border: 0;

    outline: 0;
}

/* checkbox */

div.checkbox {
    display: inline-flex;
    gap: .5rem;
}

div.checkbox input[type="checkbox"] {
    -webkit-appearance: none;  /* Para navegadores Webkit */
    -moz-appearance: none;     /* Para navegadores Firefox */
    appearance: none;          /* Para navegadores modernos */

    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid var(--color-primary);
    border-radius: .25rem;
    position: relative;
    cursor: pointer;

    margin-top: .125rem;
}

  /* Estilo quando o checkbox está marcado */
div.checkbox input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);

    overflow: hidden;
}

div.checkbox input[type="checkbox"]:checked::before {
    content: "";

    background: var(--color-white);

    width: .5rem;
    height: .5rem;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

div.checkbox input[type="checkbox"]:checked::after {
    font-family: uicons-solid-straight !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    content: "\f3c4";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 1.125rem;

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

/* switch */

div.switch {
    display: flex;
    align-items: center;
    gap: .5rem;
}

div.switch > input[type="checkbox"] {
    width: 2.75rem;
    height: 1.4rem;

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    background-position: left center;

    border-radius: 2rem;

    transition: background-position .15s ease-in-out;

    flex-shrink: 0;

    vertical-align: top;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--color-white);
    background-repeat: no-repeat;
    background-size: contain;

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

    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;

    cursor: pointer;
}

div.switch > input[type="checkbox"]:checked {
    background-position: right center;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* alert-inline */

.alert-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.alert-inline.red {
    color: var(--color-red);
}

/* alert */

div.alert {
    padding: 1rem 1.25rem;

    border-radius: .75rem;

    display: flex;
    align-items: center;
    gap: .65rem;

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

div.alert.green {
    background: var(--color-green-16);
}
div.alert.green > i {
    color: var(--color-green);
}

div.alert.red {
    background: var(--color-red-16);
}
div.alert.red > i {
    color: var(--color-red);
}

/* container buttons */

.buttons-container {
    display: flex;
    gap: .5rem;
}

/* table */

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

    max-width: 100%;
    overflow-x: auto;
}

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

    margin-bottom: 1rem;
}

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

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

    text-align: left;
    white-space: nowrap;
    font-size: .875rem;
}

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: .25rem .5rem;

    font-size: .75rem;

    border-radius: .5rem;

    gap: .25rem;
}

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

/* 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-primary) 94%, #0000) top/.25rem 0.25rem no-repeat, conic-gradient(#0000 30%, var(--color-primary));
	-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);
	}
}

/* fullscreen loader */

span.loader.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

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

    background: var(--color-white-80);

    z-index: 8888;
}

/* tags */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.tags > span {
    padding: .25rem .5rem;

    border-radius: .5rem;

    display: inline-flex;
    align-items: center;
    gap: .375rem;

    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;

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

.tags > span.red {
    background: var(--color-red-16);
}

.tags > span.green {
    background: var(--color-green-16);
}

.tags > span.blue {
    background: var(--color-blue-16);
}

.tags > span.purple {
    background: var(--color-purple-16);
}

.tags > span.orange {
    background: var(--color-orange-16);
}

.tags > span.yellow {
    background: var(--color-yellow-16);
}

/* daterangepicker */

.daterangepicker .calendar-table table {
    border-spacing: 0 .25rem;

    border-collapse: separate;
}

.daterangepicker td.in-range {
    background: var(--color-dark-04);
}

.daterangepicker td.active, .daterangepicker td.active:hover {
    background: var(--color-primary);
}

.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
    width: 2rem;
    height: 2rem;
}

.daterangepicker .drp-buttons .btn {
    padding: .65rem 1.25rem;
}