@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root { 
    --accent: #1B4A6C; --primary: #000000; --secondary: #414141; --background: #EAECED; --selection: #f14a3840; --green: #62A248; --white: #FFFFFF;
    --radius: 16px; --old: #F14938;
}

html {scroll-behavior: smooth;}
body {margin: 0px; padding: 0px; font-family: 'Inter'; font-size: 16px; background-color: #FFFFFF;}
footer {z-index: 992; margin: 0px 30px; padding: 30px 0px; border-top: 1px solid #CCCCCC; font-size: 12px;}

a {text-decoration: none; color: var(--accent);}
button, .button {padding: 12px 16px; cursor: pointer; border: none; border-radius: 999px; box-shadow: none; color: var(--white); background-color: var(--accent); font-size: 14px; font-weight: 700;}
h1 {font-size: 60px;} 
h2 {margin: 0px; padding: 0px; font-size: 48px;} 
h3 {font-size: 32px;}
h4 {margin: 0px; padding: 0px; font-size: 24px;}
hr {width: 100%; color:#00000030}
header {margin: 0px; padding: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
input[type="checkbox"] {width: 16px; height: 16px; accent-color: var(--accent);}
input[type="text"], input[type="number"], input[type="date"], input[type=password] {padding: 0px 16px; width: 100%; min-height: 44px; max-width: calc(100% - 32px); border: 1px solid var(--secondary); border-radius: 4px; font-size: 14px;}
/* input[type="text"], input[type="number"] {padding: 0px 16px; width: 100%; min-height: 44px; max-width: calc(100% - 32px); border: 1px solid var(--secondary); border-radius: 4px; font-size: 14px;} */
select {appearance: none; margin: 0px; padding: 0px 0px 0px 16px; width: 100%; height: 44px; font-size: 14px; background: url("../img/icons/arrow_drop_down.svg") right/40px 24px no-repeat; outline: none;}
select:active {border: 2px solid var(--accent);}
table {width: 100%; text-align: left;}

/*  R  */
#spotlight {z-index: 993; position: fixed; width: 100%; height: 100%; display: none; background-color: rgba(0,0,0,0.75); align-items: center; justify-content: center;}
.spotlight-popup {display: none; padding: 40px 30px; width: 75%; max-width: 700px; gap: 24px; flex-direction: column; border-radius: 16px; background-color: var(--white); overflow: hidden;}
.spotlight-popup > div:first-child {display: flex; align-items: center; justify-content: space-between;}
.spotlight-popup > div:nth-child(2) {display: flex; margin: 32px 0px; flex-direction: column; gap: 20px;}
.spotlight-popup > div:last-child {text-align: right;}

#topbar {z-index: 990; display: flex; position: fixed; top: 0px; left: 0px; margin: 0px; padding: 0px 30px; height: 80px; width: calc(100% - 60px); justify-content: space-between; align-items: center; border-bottom: 1px solid var(--background); background-color: var(--white);}
#topbar-user {z-index: 992; display: flex; gap: 16px; flex-direction: row; align-items: center;} 
#topbar-user p:first-child {color: var(--secondary); font-size: 14px; text-align: right;}

#sidebar {z-index: 991; display: flex; position: fixed; margin: 0px; padding: 18px 0px; width: 72px; height: calc(100% - 36px); flex-direction: column; justify-content: space-between; align-items: center; border-right: 1px solid var(--background); background-color: var(--white);}
#sidebar > div:first-child {display: flex; gap: 32px; flex-direction: column;}


#sidebar > div:last-child {cursor: pointer; margin: 0px; padding: 10px; height: 24px; border-radius: 8px;}
#sidebar > div:last-child:hover {background-color: var(--background);}




.table-status {margin: 30px auto; padding: 0px; text-align: center;}


.spinner {display: inline-block; margin: 0; padding: 0; width: 24px; height: 24px; border: 5px solid var(--accent); border-top: 5px solid #F3F3F3; border-radius: 50%; animation: spin 1s linear infinite;}
.spinner-success {display: inline-block; width: 40px; height: 40px; background: url("../img/icons/success.svg") center/40px 40px no-repeat;}
.spinner-error {display: inline-block; width: 40px; height: 40px; background: url("../img/icons/error.svg") center/40px 40px no-repeat;}



.detail {display: flex; align-items: center; justify-content: space-between;}
.detail span:first-child {color: var(--secondary);}

#signin-form > * {margin: 24px 0px}
.card {border: 1.9px solid var(--background)}
.rounded-corners {border-radius: 16px;}
.max-width {width: 100%;}



/*  UI - GENERAL  */
.metrics {display: flex; gap: 16px;}
.metric {display: flex; flex-wrap: wrap; margin: 0; padding: 16px; align-items: center; border: 1px solid var(--background); border-radius: var(--radius); text-align: left;}
.metric > div {text-align: left;}
.metric > img {margin: 0px 16px 0px 0px; padding: 9px; width: 24px; height: 24px; background-color: var(--background); border-radius: 21px;}
.metric *:nth-child(2) {margin: 0px 6px 0px 0px; padding: 0;}
.metric > p {color: var(--secondary); margin: 0; padding: 0; width: 100%;}







#sidebar > div:first-child > div:first-child {display: flex; margin: 0px; padding: 10px; height: 24px; border-radius: 8px; align-items: center; justify-content: center;}
#sidebar > div:first-child > div:last-child {display: none; gap: 16px; flex-direction: column;}
#sidebar > div:first-child > div:first-child:hover {background-color: var(--background);}
#sidebar > div:first-child > div:last-child > div {margin: 0px; padding: 10px; border-radius: 8px;}
#sidebar > div:first-child > div:last-child > div:hover {background-color: var(--background);}
#sidebar > div:first-child > div:last-child > div > a {display: flex; margin: 0px; padding: 0px; align-items: center; justify-content: center;}

.sidebar-tooltip {position: absolute; border-radius: calc(var(--radius) / 2); text-align: center;}

.selected {background-color: var(--selection);}
.enforce {display: none;}


/*
#sidebar > div:first-child {display: flex; cursor: pointer; gap: 16px; flex-direction: column;}
#sidebar > div:first-child > div:first-child {cursor: pointer; margin: 0px 0px 32px 0px;}


#sidebar > div:first-child {display: flex; gap: 16px; flex-direction: column;}
#sidebar > div:last-child {display: flex; cursor: pointer; margin: 0px; padding: 10px; align-items: center; justify-content: center; border-radius: 8px;}

#sidebar > div > div {cursor: pointer; display: flex; margin: 0px; padding: 10px; align-items: center; justify-content: center; border-radius: 8px;}
#sidebar > div > div:hover, #sidebar > div:last-child:hover {background-color: var(--background);}
#sidebar > div > div.selected {background-color: var(--selection);}
#sidebar div a {display: flex; margin: 0px; padding: 0px; align-items: center; justify-content: center;}
*/




.user-circle {width: 40px; height: 40px; border-radius: 50%; background: var(--green) url("../img/icons/users_light.svg") center/20px 20px no-repeat;}



/* .admin {display: none;} */

/*  UI - PAGE SPECIFIC  */









.table-primary {display: none; margin: 0px auto 30px auto; padding: 0px; width: calc(100% - 30px); box-sizing: border-box; border-collapse: collapse;}
.table-primary tbody tr td {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.table-primary tbody tr td:first-child {padding-left: 15px; border-radius: 4px 0px 0px 4px;}
.table-primary thead tr th:first-child {padding-left: 15px;}
.table-primary tbody tr td:last-child {padding-right: 15px; border-radius: 0px 4px 4px 0px;}
.table-primary tbody tr:hover {background-color: var(--background);}
.table-primary tbody tr {cursor: pointer; height: 32px;}









/* Mod */

.tooltip {visibility: hidden; z-index: 1; width: 200px; background-color: #F14938; color: #fff; text-align: center; padding: 0px 20px; position: absolute;}




#sidebar > div:first-child > div:last-child > div:hover .tooltip:hover {visibility: visible;}



/*
990 - Top bar
992 - Topbar User
991 - Side bar, topbar-user-options
993 - Spotlight
*/


/* .spotlight-content > div:last-child {display: flex; align-items: center; justify-content: right; gap: 16px;} */

/* Mods */
.labeled-content {display: flex; align-items: center; justify-content: space-between;}



/* END */

header p {width: 100%; color: var(--secondary);}


/* Components */
.button-secondary {padding: 12px 16px; cursor: pointer; border: none; border-radius: 999px; box-shadow: none; color: var(--white); background-color: var(--primary); font-size: 14px; font-weight: 700;}

#sidebar-content {z-index: 899; position: relative; top: 0px; left: 72px; margin: 0px; padding: 80px 0px 0px 0px; width: calc(100% - 72px); background-color: var(--white);}


/* #spotlight {z-index: 993; position: fixed; width: 100%; height: 100%; display: none; background-color: rgba(0,0,0,0.75); align-items: center; justify-content: center;}
.spotlight-content {display: none; padding: 40px 30px; width: 75%; max-width: 700px; gap: 24px; flex-direction: column; border-radius: 16px; background-color: var(--white); overflow: hidden;} */



/* Modifiers */





/* Modifiers */
.clickable {cursor: pointer; color: var(--accent);}
/* .button-add::before {content: url("../img/icons/add_dark.svg"); display: inline-block; padding: 0px 2px 0px 0px; vertical-align: middle;} */

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

/* TEST */
.subtle-input {padding: 0px !important; min-height: 24px !important; width: 66px !important; font-size: 14px; text-align: center;} 

input:focus, input:focus-visible {border: 2px solid var(--accent); outline: none;}




.flex-align-right {align-items: center; justify-content:right;}
.flex-col {display: flex; flex-direction: column;}
.flex-gap {gap: 24px;}
.flex-row {display: flex; flex-direction: row;}


/* .spotlight-content > div {display: flex; align-items: center; justify-content: space-between;}
.spotlight-content > div > * {width: 100%;}
.spotlight-content > div:last-child > * {width: auto;}
.spotlight-content > div:last-child { justify-content: right; gap: 16px;} */


input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {-webkit-appearance: none;}
/* .spotlight-content > div > label {display: block; width: 100%;} */

.sidebar-icons {cursor: pointer; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px;}
.sidebar-icons a {margin:0px; padding: 0px; display: flex; align-items: center; justify-content: center;}
.sidebar-icons:hover {background-color: var(--background);}
.sidebar-icons img {height: 32px; width: 32px;}
.sidebar-icons:first-child {margin: 18px 0px 40px 0px;}

/* #topbar > ul {list-style: none; display: flex; gap: 20px; background-color: #FFFFFF; margin: 0; padding: 0; align-items: center;}
#topbar > ul > li > a {text-decoration: none; color: inherit} */

#topbar-user-options {z-index: 991; display: none; position: fixed; top: 0; right: 0; margin: 0px; padding: 96px 16px 16px 16px; width: 168px; list-style: none; border-radius: 0px 0px 0px var(--radius); background-color: var(--white); box-shadow: -3px 3px 8px var(--secondary); flex-direction: column; align-items: center; gap: 12px;}