@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

:root {
	--bs-body-font-family: 'Sora', sans-serif;
	--bs-body-color: #000;
	--bs-primary-rgb: 0, 112, 250;
	--bs-primary-text-emphasis: #003b83;
	--bs-secondary-rgb: 37, 37, 37;
	--bs-danger-rgb: 192, 45, 3;
	--bs-success-rgb: 46, 187, 112;
	--bs-warning-rgb: 255, 233, 155;
	--bs-secondary-bg-subtle: #a5a5a5;
	--bs-secondary-bg-rgb: 242, 242, 242;
	--bs-info-bg-subtle: #ecf5ff;
	--bs-border-color: #252525;
	--bs-light-rgb: 235, 235, 235;
	--bs-dark-rgb: 0, 0, 0;
	--bs-link-color-rgb: 0, 49, 104;
	--bs-border-radius-xxl: 1.4rem;
	--c1: #0070fa;
	--c2: #252525;
	--c3: #a5a5a5;
	--c4: #2ebb70;
	--c5: #C02D03;
	--c6: #ffe99b;
	--c1b: rgb(0, 112, 250);
	--c2b: rgb(37, 37, 37);
	--c4b: rgb(46, 187, 112);
	--c3b: rgb(165, 165, 165);
	--c5b: rgb(192, 45, 3);
	--c6b: rgb(255, 233, 155);
}

::selection {
	background-color: #252525;
	color: #fff;
}

strong {
	font-weight: 500;
}

html {
	background-color: #eef1f4;
	max-width: 1920px;
	position: relative;
}


/* ------ header ------ */
#header {
	transition: all 0.3s ease;
}

.headShadow {
	box-shadow: 0 0 0 1px rgba(40, 40, 40, .13);
	background-color: #fff !important;
}

#logo {
	height: 26px
}

#logo path,
#logo polygon {
	fill: #fff;
}

.headShadow #logo path,
.headShadow #logo polygon {
	fill: var(--c1);
}

#logo3 {
	bottom: 1.8rem;
	height: 22px;
	right: 2rem;
	position: absolute;
}

#logo3 path,
#logo3 polygon {
	fill: #000;
}

#logo4 {
	display: block;
	height: 20px;
}

#logo4 path,
#logo4 polygon {
	fill: #fff;
}

#logo5 {
	height: 34px;
}

#logo5 path,
#logo5 polygon {
	fill: var(--c1);
}

#bell .indicator {
	background-color: #FA8A00;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
	height: 9px;
	position: absolute;
	right: 0;
	top: 2px;
	width: 9px;
}

#bell .indicator.v2 {
	box-shadow: 0 0 0 2px var(--c1);
}

#userDrop {
	color: #fff;
}

#userDrop:hover {
	color: #e7e7e7;
}

.dropdown-toggle::after {
	margin-left: 6px;
}

/* .dropdown-menu {
	border-top: 1px solid var(--c2);
} */

.userBlock .dropdown-menu {
	--bs-dropdown-bg: #000;
}

.hWidth {
	width: 260px;
}

@media (max-width:1400px) {
	#logo {
		height: 22px
	}

	#logo3 {
		height: 18px
	}

	#logo4 {
		height: 21px
	}

	.hWidth {
		width: 220px;
	}
}

@media (max-width:1200px) {
	.hWidth {
		width: auto
	}
}

@media (max-width:768px) {
	#logo {
		height: 20px
	}

	#logo4 {
		height: 16px
	}

	#logo5 {
		height: 24px
	}
}

@media (max-width:576px) {
	#logo {
		height: 16px
	}
}


/* ------ headBox ------ */
.headBox {
	border: 12px solid #fff;
	border-radius: 4.5rem;
	height: 100%;
	left: -150px;
	position: absolute;
	top: -7rem;
	width: 300px;
}

.headBox.v3 {
	bottom: -10rem;
	height: 300px;
	left: initial;
	right: -16svw;
	top: initial;
	width: 25svw;
}

@media (max-width:1400px) {
	.headBox.v3 {
		border-width: 8px;
		bottom: -11rem;
		right: -15svw;
	}
}

@media (max-width:992px) {
	.headBox.v3 {
		bottom: -13rem;
		right: -13svw;
	}
}

@media (max-width:576px) {
	.headBox.v3 {
		border-radius: 2.5rem;
		border-width: 6px;
		bottom: -15.5rem;
		right: -17svw;
		width: 35svw;
	}
}


/* ------ banner ------ */
.gradient {
	background: linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
	bottom: 0;
	height: 80%;
	left: 0;
	position: absolute;
	width: 100%;
}

.copyright {
	bottom: 14px;
	color: #fff;
	font-size: .55rem;
	font-weight: 600;
	left: 14px;
	opacity: .7;
	pointer-events: none;
	position: absolute;
	text-transform: uppercase;
	z-index: 10;
}

.copyright.v2 {
	opacity: 1;
	text-shadow: 0 0 10px #000;
}

@media (max-width:576px) {
	#carouselMain .carousel-indicators {
		display: none;
	}
}


/* ------ navs ------ */
#mainNav .nav-link {
	color: #fff;
	font-size: .94rem;
	font-weight: 500;
	opacity: .7;
	text-transform: uppercase;
}

#mainNav .nav-link.active {
	color: #fff;
	opacity: 1;
	text-decoration-line: underline;
	text-underline-offset: 8px;
}

#insideNav .nav-link {
	border-radius: 0;
	color: #fff;
	padding-bottom: .7rem;
	padding-top: .7rem;
}

#insideNav .nav-link:hover {
	background-color: #167cf8;
}

#insideNav .nav-link.active {
	background-color: #0065e0;
}

#insideNav .nav-link svg {
	fill: #67abff;
}

#insideNav .nav-link.active svg {
	fill: #fff;
}

.headShadow .nav-link {
	color: #000 !important;
	opacity: .5;
}

.headShadow .nav-link.active {
	opacity: 1;
}

.headShadow .link-light {
	color: #000 !important;
}

.headShadow .link-light svg {
	fill: #000 !important;
}

[data-bs-theme="dark"] .navbar-toggler-icon {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.headShadow [data-bs-theme="dark"] .navbar-toggler-icon {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler {
	border: 1px solid rgba(255, 255, 255, .5);
}

.headShadow .navbar-toggler {
	border: 1px solid rgba(0, 0, 0, .5);
}

@media (max-width:1400px) {
	#mainNav .nav-link {
		font-size: .9rem
	}

	#insideNav .nav-link {
		font-size: .95rem;
	}
}

@media (max-width:1200px) {
	#mainNav .nav-link.active {
		text-decoration-line: none;
	}

	.headShadow .nav-link {
		opacity: 1 !important;
	}
}


/* ------ landing ------ */
.trust {
	width: 330px;
}

.img1 {
	aspect-ratio: 700 / 800;
}

.img2 {
	aspect-ratio: 700 / 700;
}

.img3 {
	aspect-ratio: 970 / 600;
}

#iconos {
	height: 50px;
}

.sugef {
	filter: grayscale(1);
	mix-blend-mode: multiply;
	width: 140px;
}

.serviceBorder {
	border-left: 1px solid #d4d8db;
}

@media (max-width:1200px) {
	.trust {
		width: 300px;
	}
}

@media (max-width:992px) {
	.img3 {
		aspect-ratio: 970 / 240
	}

	.serviceBorder {
		border-top: 1px solid #d4d8db;
		border-left: none;
	}

	.trust {
		width: auto
	}
}

@media (max-width:768px) {
	.img4 {
		aspect-ratio: 660 / 620;
	}
}

@media (max-width:576px) {
	.img3 {
		aspect-ratio: 970 / 460
	}

	#iconos {
		height: 38px
	}
}


/* ------ btn ------ */
.btn {
	border-radius: .5rem !important;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .5px;
	padding: .4rem 1.3rem;
	text-transform: uppercase;
}

.btn-sm {
	font-size: .85rem;
	letter-spacing: 0;
	padding: .27rem .57rem;
}

.btn.lower {
	text-transform: initial;
}

.btn-primary {
	--bs-btn-bg: var(--c1);
	--bs-btn-border-color: var(--c1);
	--bs-btn-hover-bg: var(--c2);
	--bs-btn-hover-border-color: var(--c2);
	--bs-btn-active-bg: var(--c2);
	--bs-btn-active-border-color: var(--c2);
}

.btn-dark {
	--bs-btn-bg: var(--bs-body-color);
	--bs-btn-border-color: var(--bs-body-color);
	--bs-btn-hover-bg: var(--c2);
	--bs-btn-hover-border-color: var(--c2);
	--bs-btn-active-bg: var(--c2);
	--bs-btn-active-border-color: var(--c2);
}

.btn-outline-success {
	--bs-btn-color: var(--c4);
	--bs-btn-border-color: var(--c4);
	--bs-btn-hover-bg: var(--c4);
	--bs-btn-hover-border-color: var(--c4);
	--bs-btn-active-bg: var(--c4);
	--bs-btn-active-border-color: var(--c4);
}

.btn-danger {
	--bs-btn-bg: var(--c5);
	--bs-btn-border-color: var(--c5);
	--bs-btn-hover-bg: #a22400;
	--bs-btn-hover-border-color: #a22400;
	--bs-btn-active-bg: #a22400;
	--bs-btn-active-border-color: #a22400;
}

.btn-outline-danger {
	--bs-btn-color: var(--c5);
	--bs-btn-border-color: var(--c5);
	--bs-btn-hover-bg: var(--c5);
	--bs-btn-hover-border-color: var(--c5);
	--bs-btn-active-bg: var(--c5);
	--bs-btn-active-border-color: var(--c5);
}

.btn-success {
	--bs-btn-bg: var(--c4);
	--bs-btn-border-color: var(--c4);
	--bs-btn-hover-bg: #1ca45b;
	--bs-btn-hover-border-color: #1ca45b;
	--bs-btn-active-bg: #1ca45b;
	--bs-btn-active-border-color: #1ca45b;
}

.btn-close:focus {
	box-shadow: 0 0 0 .22rem rgba(40, 40, 40, .12);
}

.btn-outline-dark:hover svg {
	fill: #fff;
}

@media (max-width:576px) {
	.btn {
		letter-spacing: 0;
		padding: .4rem 1.1rem;
	}

	.btn-sm {
		padding: .27rem .57rem;
	}
}


/* ------ misc ------ */
.textBalance {
	text-wrap: balance;
}

.lastP p:last-child {
	margin-bottom: 0;
}

.fs-5b {
	font-size: 1.15rem;
}

.fs-5c {
	font-size: .95rem;
}

.fs-5d {
	font-size: .9rem;
}

.fw-200 {
	font-weight: 200;
}

.small2 {
	font-size: .8rem;
}

.backArrow:hover svg {
	fill: var(--c1);
}

.top-2 {
	top: 2px;
}

.infoP {
	color: #707070;
	font-size: .75rem;
	margin-bottom: 0;
	text-transform: uppercase;
}

.mainPad {
	padding-bottom: 6rem;
	padding-top: 6rem;
}

@media (max-width:1400px) {
	.mainPad {
		padding-bottom: 4rem;
		padding-top: 4rem;
	}

	.display-5 {
		font-size: 2.5rem;
	}
}

@media (max-width: 1400px) {
	.display-5 {
		font-size: 2.2rem;
	}
}

@media (min-width: 1200px) {
	.display-5 {
		font-size: 2.4rem;
	}
}

@media (max-width:992px) {
	.mainPad {
		padding-bottom: 2rem;
		padding-top: 2rem;
	}
}

@media (max-width:768px) {
	.badgeA {
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.notiDate {
		padding-left: 24px;
	}
}

@media (max-width:576px) {
	.mainPad {
		padding-bottom: 1.8rem;
		padding-top: 1.8rem;
	}

	.display-5 {
		font-size: 1.8rem;
	}

	.display-5.v2 {
		font-size: 1.5rem;
	}

	.fs-5b {
		font-size: 1.08rem
	}
}


/* ------ listP ------ */
.listP {
	list-style: none;
	margin-bottom: 0 !important;
}

.listP li {
	position: relative;
}

.listP li::after {
	background-color: var(--c1);
	border-radius: 10px;
	content: "";
	height: 8px;
	left: -22px;
	position: absolute;
	top: 10px;
	width: 8px;
}

@media (max-width:576px) {
	.listP li::after {
		top: 8px;
	}
}


/* ------ accordion ------ */
.accordion-button {
	box-shadow: none !important;
	border: 0 !important;
	transition: all 0.3s ease;
}

.accordion-button:hover {
	padding-left: 10px !important;
}

.accordion {
	--bs-accordion-active-color: var(--c1);
}

@media (max-width:992px) {
	.accordion-button:hover {
		padding-left: 0 !important
	}
}


/* ------ form ------ */
.form-floating>label {
	font-size: .95rem;
}

.form-control {
	padding: .6rem .75rem;
}

.form-control-sm {
	padding: .25rem .5rem;
}

.form-control:focus {
	border-color: var(--c1);
	box-shadow: 0 0 0 .25rem rgba(0, 112, 250, .2);
}

.form-label {
	font-size: .95rem;
	margin-bottom: .5rem;
}


/* ------ table ------ */
.table {
	font-size: .92rem;
	font-weight: 300;
}

.table.separate {
	border-collapse: separate;
	border-spacing: 0;
}

.table th {
	font-size: .85rem;
	font-weight: 600;
	text-transform: uppercase;
}

.lineLink {
	color: var(--bs-body-color);
	text-decoration: none;
}

.lineLink:hover {
	color: var(--c1);
}

.table> :not(caption)>*>* {
	background-color: rgba(255, 255, 255, .95);
}

.approvalCircle {
	height: 32px;
	width: 32px;
}

.hoverDelete:hover svg {
	fill: var(--c5) !important;
}

.hoverEdit {
	white-space: nowrap;
}

.hoverEdit .editIc {
	visibility: hidden;
}

.hoverEdit:hover .editIc {
	visibility: visible;
}

@media (max-width:1200px) {
	.table {
		font-size: .85rem;
	}
}

@media (max-width: 768px) {
	.table.resp thead {
		display: none;
	}

	.table.resp,
	.table.resp tbody,
	.table.resp tr,
	.table.resp td {
		display: block;
		width: 100%;
	}

	.table.resp tr {
		background-color: #eef1f4;
		margin-bottom: 1rem;
		padding: .3rem .7rem;
	}

	.table.resp td {
		background-color: #eef1f4;
		border-bottom: 1px solid #d6d6d6;
	}

	.table.resp td:last-child {
		border: none;
	}

	/* .table.resp td {
        position: relative;
    } */
	.table.resp td::before {
		content: attr(data-label);
		display: block;
		font-size: .73rem;
		font-weight: 600;
		text-transform: uppercase;
	}

	.hoverEdit .editIc {
		visibility: visible;
	}
}


/* ------ login ------ */
.dvh-100 {
	height: 100dvh;
}

.logPad {
	padding-left: 5rem;
	padding-right: 5rem;
}

.loginImg {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#headLine {
	height: 300px;
	left: -150px;
	position: absolute;
	overflow: visible;
	top: -180px;
	width: 300px;
	z-index: 2;
}

.draw-border {
	fill: none;
	stroke: white;
	stroke-width: 20;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw 2s ease-out forwards;
}

.langToggle {
	position: absolute;
	right: 12px;
	top: 4px;
}

.langLog {
	height: 30px;
	top: 2px;
	width: 100%;
	z-index: 10;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0
	}
}

@media (max-width:1400px) {
	.logPad {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	#headLine {
		left: -190px;
		top: -210px;
	}

	.draw-border {
		stroke: white;
		stroke-width: 15;
	}
}

@media (max-width:1200px) {
	.logPad {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media (max-width:768px) {
	.dvh-100 {
		height: initial
	}

	.logPad {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.loginImg {
		aspect-ratio: 992 / 650;
		height: initial;
		left: initial;
		position: relative;
		top: initial;
	}

	#headLine {
		height: 220px;
		left: -137px;
		top: -150px;
		width: 220px;
	}

	.draw-border {
		stroke-width: 14
	}

	.langLog {
		top: 10px
	}

	.langLog .link-dark {
		color: #fff !important;
		text-decoration: none;
	}
}


/* ------ insideBox ------ */
#insideBox {
	border: 12px solid var(--c1);
	border-radius: 4.5rem;
	bottom: -180px;
	display: none;
	height: 300px;
	position: fixed;
	right: -180px;
	width: 360px;
}

@media (max-width:1400px) {
	#insideBox {
		border-width: 9px;
		border-radius: 4rem;
		bottom: -200px;
		right: -210px;
	}
}

@media (max-width:992px) {
	#insideBox {
		display: none
	}
}


/* ------ aside ------ */
aside {
	background-color: var(--c1);
	height: 100svh;
	position: sticky;
	top: 0;
	width: 310px;
	z-index: 20;
}

.userBlock {
	border-top: 1px solid white;
}

@media (max-width:1400px) {
	aside {
		width: 240px
	}
}

@media (max-width:992px) {
	aside {
		height: initial;
		position: relative;
		top: initial;
		width: initial;
	}

	#headTop {
		position: sticky;
		top: 0;
		z-index: 30;
	}
}


/* ------ linkItem ------ */
.linkItem {
	border: 1px solid #c7c8c9;
	color: var(--bs-body-color);
	text-decoration: none;
}

.linkItem:hover {
	border-color: var(--c1);
}

.eIcon {
	margin-top: -3px;
}


/* ------ offcanvas ------ */
.offcanvas {
	--bs-offcanvas-width: 310px;
	background-color: var(--c1);
	border-left: none !important;
}


/* ------ filter ------ */
.dateWidth {
	width: 102px;
}

svg.bi {
	fill: var(--c2) !important;
	margin-bottom: 2px;
}

svg.bi:hover {
	fill: var(--c1) !important;
}

@media (min-width: 1200px) {
	.keyWidth {
		width: 160px
	}
}

@media (max-width:1200px) {
	.wrapFilter {
		width: 100%
	}
}

@media (max-width:576px) {
	.w100Change {
		width: 100%
	}

	/* .dateWidth { width: 100% } */
}


/* ------ flat ------ */
.flatpickr-day.selected {
	background-color: var(--c1);
}

.flatpickr-current-month {
	font-size: 120%;
}


/* ------ loading ------ */
.loading {
	align-content: center;
	background-color: rgba(30, 30, 31, .6);
	backdrop-filter: blur(3px);
	font-size: xxx-large;
	inset: 0;
	position: fixed;
	text-align: center;
	z-index: 2000;
}


/* ------ alert ------ */
.alert-danger {
	--bs-alert-border-color: #ECCAC1;
	--bs-alert-color: #851e00;
	--bs-alert-bg: #fffaf9;
}

.alert-success {
	--bs-alert-border-color: #b9dbc9;
	--bs-alert-color: #098b46;
	--bs-alert-bg: #f3fff8;
}

.alert-info {
	--bs-alert-border-color: #d7dadd;
	--bs-alert-color: #000;
	--bs-alert-bg: #fbfbfb;
}


/* ------ dashboardTabs ------ */
#dashboardTabsContainer {
	margin-top: -60px;
}

#dashboardTabs {
	background-color: #fff;
	border-radius: 1.25rem;
}

#dashboardTabsContent {
	margin: 3rem 0;
}

#dashboardTabs .nav-link {
	color: #808080;
}

#dashboardTabs .nav-link.active {
	color: #fff;
	font-weight: 600;
}

@media (max-width:992px) {
	#dashboardTabsContainer {
		margin-top: -43px;
		padding-top: 20px;
	}

	#dashboardTabsContent {
		margin: 1.1rem 0 0 0;
	}
}


/* ------ myAccount ------ */
#myAccount a {
	text-decoration: none;
}

#myAccount img {
	border-radius: 0 5rem 0 1rem;
	border-right: 18px solid var(--c1);
	border-top: 18px solid var(--c1);
	margin-top: 20px;
	width: 28%;
}

#myAccount .icon {
	height: 60px;
	width: 60px;
}

#myAccount .icon svg {
	fill: var(--bs-body-color);
}

#myAccount .hoverTxt {
	opacity: 0;
	transition: all 0.3s ease;
}

#myAccount a:hover .hoverTxt {
	opacity: 1;
}

@media (max-width:992px) {
	#myAccount .icon {
		height: 50px;
		width: 50px;
	}

	#myAccount img {
		border-bottom: 12px solid var(--c1);
		border-right: 12px solid var(--c1);
		border-top: none;
		border-radius: 1rem 0 3.5rem 0;
		margin-top: 0;
	}

	#myAccount .icon svg {
		zoom: .85;
	}
}

@media (max-width:576px) {
	#myAccount img {
		width: 55%;
	}
}

/* ------ requests ------ */
#requests a {
	text-decoration: none;
}

#requests img {
	border-radius: 0 5rem 0 1rem;
	border-right: 18px solid #000;
	border-top: 18px solid #000;
	margin-top: 20px;
	width: 28%;
}

#requests .icon {
	height: 60px;
	width: 60px;
}

#requests .icon svg {
	fill: var(--c1);
}

#requests .hoverTxt {
	opacity: 0;
	transition: all 0.3s ease;
}

#requests a:hover .hoverTxt {
	opacity: 1;
}

@media (max-width:992px) {
	#requests .icon {
		height: 50px;
		width: 50px;
	}

	#requests img {
		border-bottom: 12px solid #000;
		border-right: 12px solid #000;
		border-top: none;
		border-radius: 1rem 0 3.5rem 0;
		margin-top: 0;
	}

	#requests .icon svg {
		zoom: .85;
	}
}

@media (max-width:576px) {
	#requests img {
		width: 55%;
	}
}