/* GLOBAL ===================================================================== */
:root {
	--hue: 321deg;

	--background-color: hsla(210deg, 10%, 15%, 1);
    --muted-color: hsla(223deg, 10%, 15%, .8);
	--fixed-background-color: rgba(245, 245, 245, .8);
	--shadow-color: rgba(0, 0, 0, .15);
	--primary-border-color: hsla(321, 95%, 52%, .25);
	--primary-color: hsla(321, 95%, 52%, 1);
	--primary-brighter-color: hsla(321, 95%, 92%, 1);
	--pinky-bright-color: hsla(321deg, 99%, 97%, 1);
	--pinky-color: hsla(321deg, 99%, 62%, 1);

	/* SIZES */
    --big-size: 5.4em;
    --title-size: 14px;
    --normal-size: 12.4px;
    --default-size: 16px;
    --smaller-size: 10px;
    --smallest-size: 9.36px;
    --icon-floating-size: 2em;
    --swal2-title-size: 24px;
}

*,
*::before,
*::after {
	font-family: 'Nunito', sans-serif;
	font-size: var(--normal-size);
}

*::selection {
    background-color: var(--pinky-color);
    color: var(--pinky-bright-color);
}

::-webkit-scrollbar {
    width: 4px;
    background-color: var(--bs-gray-300);
}

::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-500);
    transition: all 300ms ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-gray-600);
}

/* CUSTOMS ==================================================================== */
body.nox {
	background-color: var(--background-color);
}

img {
	pointer-events: none;
}

.h-100 {
	height: 100vh;
}

.dotted {
	text-decoration: none;
}

.dotted:focus,
.dotted:hover {
	text-decoration: underline;
	text-decoration-style: dotted;
    cursor: pointer;
}

.underlined {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.underlined:focus,
.underlined:hover {
    text-decoration-style: solid;
    cursor: pointer;
}

.pointered {
    cursor: pointer;
}

.w-99 {
    width: 99px;
}

/* TEXT ======================================================================= */
.text-justify {
	text-align: justify;
}

.text-pinky {
	color: var(--pinky-color);
}

.text-bg-color {
    background-color: var(--primary-color) !important;
    color: var(--primary-brighter-color) !important;
}

.text-bg-color a {
    color: var(--fixed-background-color);
}

.text-bg-brighter-color {
    background-color: var(--secondary-bright-color) !important;
    color: var(--primary-color) !important;
}

.text-bg-brighter-color a {
    color: var(--primary-border-color);
}

.text-bg-black { font-weight: 500; color: white !important; background-color: black !important; }
.text-bg-green { font-weight: 500; color: white !important; background-color: green !important; }
.text-bg-red { font-weight: 500; color: white !important; background-color: red !important; }
.text-bg-grey { font-weight: 500; color: black !important; background-color: grey !important; }
.text-bg-orange { font-weight: 500; color: black !important; background-color: orange !important; }
.text-bg-yellow { font-weight: 500; color: black !important; background-color: yellow !important; }

/* PRELOADER ================================================================== */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 2701;
	background-color: var(--fixed-background-color);
}

#loader .mid {
	position: fixed;
	top: 50%;
	left: 50%;
	background-color: transparent;
	transform: translate(-50%, -50%);
	transform-origin: 0 0;
}

#move {
    top: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--primary-color);
    position: fixed;
    z-index: 1048;
}

/* INHERITANCE ================================================================ */
.card {
	transition: all 150ms ease-in-out;
}

.card:hover {
	/*transform: translateY(-8px);*/
	/*box-shadow: 0 .5em var(--shadow-color) !important;*/
}

.card-footer {
}

.carousel-item {
	height: calc(64vh - 45px);
	align-items: center;
	justify-content: center;
}
.carousel-item img {
	height: 100%;
	width: 100%;
	object-position: center;
	object-fit: cover;
}

/* AUTHENTICATION ============================================================= */
.img-login {
	position: absolute;
	transform-origin: 0 0;
	top: 0;
	z-index: -1;
	width: 48%;
	pointer-events: none;
}

.text-floating {
	position: absolute;
	top: 1em;
	right: 1em;
	z-index: 1;
}

/* SWAL ============================================================= */
.swal2-title { font-size: var(--swal2-title-size) !important; }
.swal2-html-container { font-size: var(--default-size) !important; }
.swal2-styled { font-size: var(--title-size) !important; }
.swal2-input { font-size: var(--normal-size); }

/* TABLE ============================================================= */
table.table-no-info {
    margin: 0 !important;
}
table.table-fetch,
.dataTable {
    width: inherit !important;
    /*margin: 0 !important;*/
}

table p {
	margin-bottom: 0 !important;
}

table.table-fetch th,
table.table-fetch td,
.dataTable th,
.dataTable td {
    white-space: nowrap;
    vertical-align: middle;
    text-overflow: ellipsis;
}

table.align-top td {
    white-space: wrap;
    vertical-align: top !important;
    text-overflow: unset;
}

table.no-wrap th,
table.no-wrap td {
    white-space: nowrap;
    text-overflow: ellipsis;
}

table.align-top th {
    vertical-align: bottom;
}

table.no-wrap th {
    vertical-align: bottom;
}

table.no-wrap td {
    vertical-align: top;
}

div.dataTables_wrapper
div.dataTables_info {
    padding: 0 !important;
}

table.table-fetch ul {
    margin: 0;
    padding-left: 1rem;
}

table tr.deleted td {
    background-color: var(--pinky-bright-color) !important;
    color: var(--pinky-color);
}

.dataTables_wrapper .form-control:focus,
.dataTables_wrapper .form-select:focus {
    box-shadow: 0px 0px transparent !important;
}

.clickable-row.active td {
    background-color: rgb(13, 110, 253);
    border-color: rgb(13, 110, 253);
    color: rgb(255, 255, 255);
}

/* PAGINATION ===================================================================== */
.page-item:first-child .page-link,
.page-item:first-child .dataTable-pagination a,
.dataTable-pagination .page-item:first-child a,
.dataTable-pagination li:first-child .page-link,
.dataTable-pagination li:first-child a {
    border-radius: 0;
}

.page-item:last-child .page-link,
.page-item:last-child .dataTable-pagination a,
.dataTable-pagination .page-item:last-child a,
.dataTable-pagination li:last-child .page-link,
.dataTable-pagination li:last-child a {
    border-radius: 0;
}

.page-item.active .page-link,
.page-item.active .dataTable-pagination a,
.dataTable-pagination .page-item.active a,
.dataTable-pagination li.active .page-link,
.dataTable-pagination li.active a {
    /*color: var(--primary-brighter-color);*/
    /*background-color: var(--primary-color);*/
    /*border-color: var(--primary-border-color);*/
}

.page-link:focus,
.dataTable-pagination a:focus,
.form-select:focus,
.form-control:focus,
.dataTable-input:focus {
    /*box-shadow: none;*/
    /*border-color: var(--primary-border-color);*/
    /*box-shadow: 0 0 0 0.25rem var(--primary-color);*/
}

a.page-link,
span.page-link {
    font-size: var(--normal-size);
}

ul.pagination {
    margin: 0;
}

/* FLEX ===================================================================== */
.flex-basis-6 {
    flex-basis: 270px;
    flex-grow: 1;
    flex-shrink: 0;
}
.flex-basis-4 {
    flex-basis: 120px;
    flex-grow: 1;
    flex-shrink: 0;
}

/* FORM ===================================================================== */
.form-floating > label {
    /*top: 4px;*/
}

.show-placeholder .form-control:focus::placeholder {
    color: var(--muted-color) !important;
}

.form-floating > .form-control {
    padding-top: 30px !important;
    padding-bottom: 15.9px !important;
}

.form-control,
.form-select {
    font-size: var(--normal-size) !important;
    border-radius: 0;
}

.form-date-floating,
.form-date-on-modal-floating,
.form-select-multiple-on-modal-floating,
.form-select-floating {
    position: relative;
}

.form-select-multiple-on-modal-floating .select2-selection--single,
.form-select-floating .select2-selection--single {
    padding-top: 20px !important;
    padding-left: 7px !important;
    padding-bottom: 25.9px !important;
}

.form-select-floating .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 4px;
}

.form-select-multiple-on-modal-floating .select2-selection--multiple,
.form-select-floating .select2-selection--multiple {
    padding-top: 23px !important;
    padding-bottom: 10px !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
.select2-selection__rendered {
    font-size: var(--normal-size) !important;
    font-family: monospace, sans-serif;
}

.select2-container--bootstrap-5 .select2-selection {
}

.form-select-floating label {
    opacity: 0.65;
    position: absolute;
    top: 7px;
    left: 0;
    padding-left: 12px;
    font-size: var(--smallest-size);
    color: var(--muted-color);
    z-index: 12;
}

.form-date-floating label,
.form-date-floating span {
    opacity: 0.65;
    position: absolute;
    top: 5px;
    left: 0;
    padding-left: 12px;
    font-size: var(--smallest-size);
    /*color: var(--muted-color);*/
    z-index: 12;
}

.form-date-floating input {
    padding-top: 20px !important;
    padding-left: 12px !important;
    padding-bottom: 7.3px !important;
}

td.is-invalid,
th.is-invalid {
    background-color: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    color: var(--bs-danger-text-emphasis);
}

/* FLATPICKR ===================================================================== */
.flatpickr-hand {
    /*position: relative;*/
    background-color: var(--white-color) !important;
    cursor: pointer;
}
#modalControl .flatpickr-calendar,
#modalControl .flatpickr-time {
    /*top: 0 !important;*/
    z-index: 9876;
}

/* SELECT ===================================================================== */
.select2-search .select2-search--dropdown {
    /*background-color: var(--primary-brighter-color);*/
}

.select2-selection {
    border-radius: 0 !important;
    font-size: var(--normal-size) !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field {
    margin-top: 4px;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    font-size: var(--normal-size) !important;
    /*font-family: monospace, sans-serif;*/
}

/* LIST ===================================================================== */
ul.square {
    list-style-type: square;
}

/* FOOTER ===================================================================== */
footer .nav-item {
	position: relative;
}

footer .nav-item + .nav-item {
	padding-left: 1.5em;
}

footer .nav-item + .nav-item::before {
	content: "·";
	position: absolute;
	top: 50%;
	left: 9px;
	transform: translateY(-50%);
}