:root {

	/* Bootstrap */
	--bs-body-bg: #09090B;
	--bs-border-color: #27272A;


	--color: #FAFAFA;
	--color-AAA: #AAAAAA;

	--blue: 13, 110, 253;
	--green: 32, 201, 151;
	--green-100: 219, 234, 254;
	--purple: 111, 66, 193;
	--red: 220, 53, 69;
	--yellow: 255, 193, 7;
	--yellow-100: 254, 243, 199;
	--orange: 253, 126, 20;
	--pink: 214, 51, 132;
	--cyan: 13, 202, 240;
	--teal: 32, 201, 151;
	--grey: 173, 181, 189;

}

body {font-family: "Outfit", sans-serif;}
a {text-decoration: none;}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {background-color: var(--bs-body-bg); color: var(--color);}
.nav-inbox-link.active {
	color: rgba(var(--blue), 1);
	border-left: 3px solid rgba(var(--blue), 1) !important;
	padding-left: 10px;
}
.nav-link {font-size: 17px;}

/* Grid */
.grid-item {
	max-height: calc(100vh - 100px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	margin-top: 40px;
}

/* Forms */
.form-control:focus {
	border-color: #2E3135;
	box-shadow: 0 0 0 .25rem rgba(46, 49, 53,.25);
}

.form-select:focus {
	border-color: #2E3135;
	box-shadow: 0 0 0 .25rem rgba(46, 49, 53,.25);
}

/* Link Inbox */
.link i {
	opacity: 0;
	transform: scale(0);
	transition: opacity 0.3s ease, transform 0.3s ease;
	display: inline-block;
}

.link:hover i {opacity: 1; transform: scale(1);}

/* Avatar HRM */
.avatar-container {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #111113;
}

.avatar-container img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}

.avatar-container .edit-icon {
	position: absolute;
	top: -10px;
	right: -10px;
	background-color: #333333;
	border-radius: 50%;
	padding: 4px 6px;
	cursor: pointer;
}

.avatar-container input[type="file"] {display: none;}
.allowed-file-types {font-size: 12px; color: #777; margin-top: 10px;}

/* Padding */
.py-6 {padding-top: 5rem !important; padding-bottom: 5rem !important;}

/* Background */
.bg-login {
	background: url('../../assets/img/bg-etrader.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* Badge */
/* Use .badge-blue-color + .bfsd-pdo-brs */
.bfsd-pdo-brs {font-size: 12px; padding: 2px 8px; border-radius: 6px;}

.badge-blue-color {
	/* font-size: 12px; padding: 2px 8px; border-radius: 6px; - IMPORTANTE: reemplazar por ".bfsd-pdo-brs" */
	background-color: rgba(var(--blue), 0.1) !important;
	color: rgba(var(--blue), 1) !important;
}

.badge-green-color {background-color: rgba(var(--green), 0.1) !important; color: rgba(var(--green), 1) !important;}
.badge-yellow-color {background-color: rgba(var(--yellow), 0.1) !important; color: rgba(var(--yellow), 1) !important;}
.badge-purple-color {background-color: rgba(var(--purple), 0.1) !important; color: rgba(var(--purple), 1) !important;}
.badge-red-color {background-color: rgba(var(--red), 0.1) !important; color: rgba(var(--red), 1) !important;}
.badge-orange-color {background-color: rgba(var(--orange), 0.1) !important; color: rgba(var(--orange), 1) !important;}
.badge-cyan-color {background-color: rgba(var(--cyan), 0.1) !important; color: rgba(var(--cyan), 1) !important;}
.badge-grey-color {background-color: rgba(var(--grey), 0.1) !important; color: rgba(var(--grey), 1) !important;}

/* Colors */
.text-blue-color {color: rgba(var(--blue), 1) !important;}
.text-green-color {color: rgba(var(--green), 1) !important;}
.text-grey-color {color: rgba(var(--grey), 1) !important;}

/* Use .blue-color + .pdc-br5 */
.pdc-br5 {border-radius: 5px; padding: 2px 5px;}

.blue-color {
	/* padding: 2px 5px; border-radius: 5px; - IMPORTANTE: reemplaza por ".pdc-br5" */
	background-color: rgba(var(--blue), 0.1) !important;
	color: rgba(var(--blue), 1) !important;
}

.green-color {background-color: rgba(var(--green), 0.1) !important; color: rgba(var(--green), 1) !important;}
.yellow-color {background-color: rgba(var(--yellow), 0.1) !important; color: rgba(var(--yellow), 1) !important;}
.purple-color {background-color: rgba(var(--purple), 0.1) !important; color: rgba(var(--purple), 1) !important;}
.red-color {background-color: rgba(var(--red), 0.1) !important; color: rgba(var(--red), 1) !important;}
.orange-color {background-color: rgba(var(--orange), 0.1) !important; color: rgba(var(--orange), 1) !important;}
.cyan-color {background-color: rgba(var(--cyan), 0.1) !important; color: rgba(var(--cyan), 1) !important;}
.grey-color {background-color: rgba(var(--grey), 0.1) !important; color: rgba(var(--grey), 1) !important;}

/* Tasks */
.color-user-task {
	background-color: rgba(var(--grey), 0.1);
	font-size: 10px;
	color: rgb(var(--grey));
	padding: 2px 10px; 
	border: 1px solid rgba(var(--grey), 0.4);
}

.medio-task {
	background-color: rgba(var(--yellow), 0.1);
	font-size: 10px;
	color :rgb(var(--yellow));
	padding: 2px 10px;
	border: 1px solid rgba(var(--yellow), 0.4);
}

.normal-task {
	background-color: rgba(var(--blue), 0.1); 
	font-size: 10px;
	color: rgb(var(--blue));
	padding: 2px 10px;
	border: 1px solid rgba(var(--blue), 0.4);
}

.alto-task {
	background-color: rgba(var(--red), 0.1); 
	font-size: 10px;
	color: rgb(var(--red));
	padding: 2px 10px;
	border: 1px solid rgba(var(--red), 0.4);
}

.todo-border {border-left: 4px solid rgb(var(--pink));}
.inprogress-border {border-left: 4px solid rgb(var(--green));}
.done-border {border-left: 4px solid rgb(var(--purple));}

.category-task {
	background-color: rgba(var(--pink), 0.1); 
	font-size: 10px;
	color: rgb(var(--pink));
	padding: 2px 10px;
	border: 1px solid rgba(var(--pink), 0.4);
}

.qa-task {
	background-color: rgba(var(--green), 0.1); 
	font-size: 10px;
	color: rgb(var(--green));
	padding: 2px 10px;
	border: 1px solid rgba(var(--green), 0.4);
}

.git-task {
	background-color: rgba(var(--orange), 0.1); 
	font-size: 10px;
	color: rgb(var(--orange));
	padding: 2px 10px;
	border: 1px solid rgba(var(--orange), 0.4);
}

.time-task {
	background-color: rgba(var(--purple), 0.1); 
	font-size: 10px;
	color: rgb(var(--purple));
	padding: 2px 10px;
	border: 1px solid rgba(var(--purple), 0.4);
}

.branch-task {
	background-color: rgba(var(--cyan), .1);
	color: rgb(var(--cyan));
	font-size: 10px;
	padding: 2px 10px;
	border: 1px solid rgba(var(--cyan), 0.4);
}

/* Calendar */
.calendar {display: flex; justify-content: space-between; margin: 20px 0; flex-wrap: wrap;}
.day {width: 50px; text-align: center; padding: 10px; cursor: pointer;}
.day.selected {background-color: #FF0062; color: white; border-radius: 5px;}

.tasks {display: flex; flex-direction: column; gap: 10px;}
.task {background-color: #121212; padding: 15px; border-left: 8px solid; border-radius: 5px;}
.task .time {font-size: 16px; font-weight: bold;}
.task .title {font-size: 18px; margin: 5px 0;}
.task .lead {font-size: 12px; color: #777;}
.task.blue {border-color: rgb(var(--blue));}
.task.yellow {border-color: rgb(var(--yellow));}
.task.purple {border-color: rgb(var(--purple));}

/* Inbox Tags */
.tags-input {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: .375rem .75rem;
	border: 1px solid #2e3135;
	border-radius: 0.375rem;
}

.tags-input .tag {
	display: flex;
	align-items: center;
	background-color: transparent;
	color: #FFF;
	border-radius: 6px;
	border: 1px solid #2e3135;
	padding: 5px;
	font-size: 14px;
}

.tags-input .tag img {width: 20px; height: 20px; border-radius: 50%; margin-right: 5px;}
.tags-input .tag .close-btn {margin-left: 5px; cursor: pointer; font-size: 12px;}
.tags-input input {flex: 1; border: none; outline: none;}

.suggestions {
	background-color: #1e1e1e;
	border: 1px solid #333;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	max-height: 150px;
	overflow-y: auto;
	position: absolute;
	z-index: 1000;
	width: 220px;
}

.suggestions div {
	padding: 10px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.suggestions div:hover {background-color: #333;}

/* SignUp */
.is-invalid {border-color: #dc3545 !important; box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;}
.is-valid {border-color: #28a745 !important; box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;}
.error-message {display: block; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: #dc3545;}

.is-invalid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 4.6 1.4 1.4M7.2 4.6l-1.4 1.4'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
	padding-right: calc(1.5em + 0.75rem);
}

.is-valid {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.94-.94 1.83-1.83.94-.94L3.66 0 2.72.94 2.3 1.36l-.94.94-.94-.94L0 2.72l.94.94z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
	padding-right: calc(1.5em + 0.75rem);
}