/******************************************/
/** General                              **/
/******************************************/

:root {
	--primary: #CB1517;
	--primary-dark: #af080b;
	--primary-light: #ffe9e9;

	--placeholder: #a5a5a5;
   
	--success: #0F960F;
   /* --warning: #E8B500; */
   --warning: #FFA800;
   --danger: #d40000;

	/* Calendar */
	--blue-soft: #CDE6FF;
	--blue: #0870D9;
	--green-soft: #D2FFE7;
	--green: #217346;
   
	/* Neutral */
   --black: #000000;
	--gray-dark: #212529;
   --gray: #444444;
   --gray-light: #737373;
   --gray-lighter: #8F8F8F;
	--light-darker: #e9e8e8;
	--light-dark: #f2f2f2;
	--light: #f9fafb;
   --white: #ffffff;
}

/* :root html.dark {
	--black: #ffffff;
	--white: #000000;
} */

*, *::before, *::after {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

body {overflow-x: hidden;}

html, body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   min-height: 100dvh;
   position: relative;
   color: var(--gray-light);
   background-color: var(--light);
   font-family: 'Inter', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.guest {overflow-x: hidden;}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
   font-weight: 700;
   color: var(--gray);
}



/******************************************/
/** Utilities and Helpers                **/
/******************************************/

/* Fonts */

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}

/* Colors */

.text-primary {color: var(--primary) !important;}
.text-success {color: var(--success) !important;}
.text-warning {color: var(--warning) !important;}
.text-gray-dark {color: var(--gray-dark) !important;}
.text-gray {color: var(--gray) !important;}
.text-gray-light {color: var(--gray-light) !important;}
.text-gray-lighter {color: var(--gray-lighter) !important;}

.hover\:text-primary:hover {color: var(--primary) !important;}
.hover\:text-gray:hover {color: var(--gray) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-gray {background-color: var(--gray) !important;}
.bg-light-dark {background-color: var(--light-dark) !important;}
.bg-light {background-color: var(--light) !important;}

.hover\:bg-primary-dark:hover {background-color: var(--primary-dark) !important;}
.hover\:bg-gray-dark:hover {background-color: var(--gray-dark) !important;}
.hover\:bg-light:hover {background-color: var(--light) !important;}
.hover\:bg-light-darker:hover {background-color: var(--light-darker) !important;}
.hover\:bg-light-dark:hover {background-color: var(--light-dark) !important;}

.border-primary {border-color: var(--primary) !important;}
.border-success {border-color: var(--success) !important;}

.hover\:border-placeholder:hover {border-color: var(--placeholder) !important;}

.hover\:fill-primary:hover,
.hover\:fill-primary:hover svg,
.hover\:fill-primary:hover svg path {fill: var(--primary);}
.hover\:fill-success:hover,
.hover\:fill-success:hover svg,
.hover\:fill-success:hover svg path {fill: var(--success);}
.hover\:fill-warning:hover,
.hover\:fill-warning:hover svg,
.hover\:fill-warning:hover svg path {fill: var(--warning);}
.hover\:fill-gray-dark:hover,
.hover\:fill-gray-dark:hover svg {fill: var(--gray-dark);}

/* Sizes */

.w-fit {width: fit-content;}
.h-fit {height: fit-content;}

.h-screen {
	min-height: 100vh;
   min-height: 100dvh;
}

.max-w-100 {max-width: 100%;}
.w-lg {width: 12rem;}

.size-xxs {
   width: .4rem;
   height: .4rem;
   min-width: .4rem;
   min-height: .4rem;
}

.size-xs {
   width: .5rem;
   height: .5rem;
   min-width: .5rem;
   min-height: .5rem;
}

.size-sm {
   width: .8rem;
   height: .8rem;
   min-width: .8rem;
   min-height: .8rem;
}

.size-md {
   width: 1.2rem;
   height: 1.2rem;
   min-width: 1.2rem;
   min-height: 1.2rem;
}

.size-lg {
   width: 1.6rem;
   height: 1.6rem;
   min-width: 1.6rem;
   min-height: 1.6rem;
}

.size-xl {
   width: 2.4rem;
   height: 2.4rem;
   min-width: 2.4rem;
   min-height: 2.4rem;
}

.size-xxl {
   width: 3rem;
   height: 3rem;
   min-width: 3rem;
   min-height: 3rem;
}

.size-xxxl {
   width: 5.2rem;
   height: 5.2rem;
   min-width: 5.2rem;
   min-height: 5.2rem;
}

/* Other */

.cursor-pointer {cursor: pointer;}
.cursor-grab {cursor: grab;}

.shadow-container {box-shadow: 1px 1px 30px 0px #0000000D;}

.transition-03 {
	transition: all .3s ease;
	-o-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-webkit-transition: all .3s ease;
}



/******************************************/
/** Components                           **/
/******************************************/

/* Buttons */

.button {padding: .8rem 1.6rem;}

.btn-close:focus,
.btn-close:focus-visible {
	outline: none;
	box-shadow: none;
}

/* Dropdowns */

.dropdown-toggle::after {display: none;}
.dropdown-divider {border-top: 1px solid var(--light-dark);}
.dropdown-item:active {background-color: #f8f9fa;}

/* Breadcrumbs */

.breadcrumb-item+.breadcrumb-item::before {
	top: -1px;
	font-weight: 700;
	position: relative;
	color: var(--primary);
}



/******************************************/
/** Navigation                           **/
/******************************************/

/* Logo */

#navbar > a > svg {max-width: 215px;}

/* Mobile toggle */

#toggleNavbar {
	width: 30px;
	height: 30px;
	z-index: 2050;
}

.line {
	z-index: 1;
	width: 25px;
	height: 3px;
	margin: 2px 2px;
	transition: all .4s ease-in-out;
}

#toggleNavbar.open .first-line {transform: rotate(45deg) translate(3px, 3px);}
#toggleNavbar.open .second-line {transform: rotate(-45deg) translate(2px, -2px);}

/* Responsive */

@media (max-width: 991px) {
	#navbarContainer {
		height: 100vh;
		height: 100dvh;
		z-index: 2000;
		position: fixed;
		overflow-y: scroll;
		transform: translateX(-150%);
	}

	#navbarContainer.open {transform: translateX(0);}
}

/* Dropdowns */

#navbar li > button.btn-toggle:not(.collapsed) > div > svg:not(.dropdown-arrow) > path:not(.keep),
#navbar li > button.btn-toggle:not(.collapsed) > div > svg:not(.dropdown-arrow) > circle {
	fill: var(--primary);
}

#navbar li > button.btn-toggle:not(.collapsed) {
	font-weight: 700 !important;
	color: var(--primary) !important;
}

#navbar li > button.btn-toggle:not(.collapsed) > svg.dropdown-arrow {transform: rotate(180deg);}
#navbar li > button.btn-toggle:not(.collapsed) > svg.dropdown-arrow path {stroke: var(--primary);}

/* Changes rule if the user is in the selected routes */

#navbar li > button.btn-toggle.current > div > svg:not(.dropdown-arrow) > path:not(.keep),
#navbar li > button.btn-toggle.current > div > svg:not(.dropdown-arrow) > circle {
	fill: var(--primary);
}

#navbar li > button.btn-toggle.current {
	font-weight: 700 !important;
	color: var(--primary) !important;
}

#navbar li > button.btn-toggle.current > svg.dropdown-arrow path {stroke: var(--primary);}

/* Regular links */

#navbar .btn-toggle.active svg path {fill: var(--primary);}



/******************************************/
/** Search                               **/
/******************************************/

.search.input-group:focus-within {border-color: var(--primary) !important;}

.search.input-group:focus-within svg > path,
.search.input-group:focus-within svg > circle {
	stroke: var(--primary);
}



/******************************************/
/** Forms                                **/
/******************************************/

.form-select,
.form-control,
.input-group {
   border-radius: 8px !important;
   border: 1px solid #ececec !important;
}

.search.input-group {
	border-radius: 50px !important;
	background-color: var(--white) !important;
}

.input-group .form-control {border: none !important;}

.input-group:active,
.input-group:focus,
.input-group:focus-within,
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
	outline: none !important;
   box-shadow: none !important;
   border-color: var(--primary);
   background-color: transparent;
}

.input-group.disabled,
.form-control:disabled {background-color: #e9ecef;}

.form-check-input {
	outline: none !important;
   min-width: 1em !important;
   min-height: 1em !important;
   box-shadow: none !important;
}

.form-check-input:checked {
   border-color: var(--primary) !important;
   background-color: var(--primary) !important;
}

.form-check-input:focus {
   box-shadow: none;
   border-color: var(--primary) !important;
}

::placeholder {
   opacity: 1;
	font-weight: 400;
   color: var(--placeholder) !important;
}
::-ms-input-placeholder {
	font-weight: 400;
	color: var(--placeholder) !important;
}



/******************************************/
/** Tables                               **/
/******************************************/

.table th,
.table td {vertical-align: middle;}

.table th,
.table tr {white-space: nowrap;}

.table-responsive, .dt-scroll {
	overflow-x: auto;
	white-space: nowrap;
}

.dt-select-checkbox:hover {cursor: pointer;}

@media (max-width: 768px) {
	div.table-responsive > div.dt-container > div.row > div[class^=col-]:last-child {padding-left: 0 !important;}
}

#mainTable_wrapper .justify-content-between:nth-child(1) {margin-bottom: 2rem;}
#mainTable_wrapper .justify-content-between:nth-child(3) {margin-top: 1.5rem !important;}



/******************************************/
/** Pagination                           **/
/******************************************/

.page-item > .page-link {
   color: var(--gray);
   border: 1px solid var(--bs-pagination-border-color);
}

.page-item.active > .page-link {
   font-weight: 700;
   color: var(--primary);
   background-color: var(--foundation-light);
   border: 1px solid var(--bs-pagination-border-color);
}

.page-item.disabled > .page-link {background-color: #f9f9f9 !important;}

.btn-close:focus,
.page-link:focus {box-shadow: 0 0 0 0.25rem rgba(253, 13, 13, 0.25);}



/******************************************/
/** Clients                              **/
/******************************************/

.nav-client.nav-underline .nav-link.active,
.nav-client.nav-underline .show > .nav-link {color: var(--primary);}

.nav-client.nav-underline .nav-link {color: var(--gray-light);}



/******************************************/
/** Tasks                                **/
/******************************************/

.task-user {margin-left: -5px;}
.task-user-inside {margin-left: -10px;}

.task-user-inside:hover,
.task-user-inside-first:hover {z-index: 10;}



/******************************************/
/** Formations                           **/
/******************************************/

.splide__track {overflow: visible !important;}



/******************************************/
/** Profile                              **/
/******************************************/

.upload-image {
	right: -5px;
	bottom: -5px;
}