:root {
  --standard: #3846C2;
  --white: #ffffff;
  --sidebarItemColor: #56404f;
  --grey: #C6C6C6;
  --greyDark: #404A56;
  --greyLight: #D9D9D9;
  --blueBG: #F7F9FA;
  --h3: #232323;
  --error: #F42449;
  --kt-scrollbar-color: #3846C2;
  --kt-scrollbar-hover-color: #3846C2;
}

.background-login {
  background-image: url("/media/misc/auth-bg.png");
}

.background-app {
  background-color: var(--blueBG);
}

.bg-white {
  background-color: var(--white);
}

.focus-visible-none:focus-visible {
  outline: none !important;
}

.circular-grey-button {
  background-color: #F7F9FA;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  display:flex;
  justify-content: center;
  align-items: center;
  cursor:pointer;
}

#kt_app_wrapper {
  background-image: url("../images/backgrounds/main-bg.svg");
  background-repeat: no-repeat;
}

.c-error {
  color: var(--error);
}

/* -------------------------------------- */
/* ------------- TEXT STYLES ------------ */
/* -------------------------------------- */

.bold {
  font-weight: bold;
}

.standard {
  font-weight: normal;
} 

h1.custom-h1 {
  font-size: 2.75em;
}

h2.custom-h2 {
  font-size: 2.25em;
}

h3.custom-h3 {
  font-size: 1.50em;
  color: var(--h3);
}

span.standard-text {
  font-size: 1.25em;
}

span.mini-text {
  font-size: 1em;
}

span.extramini-text {
  font-size: 0.6em;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-none > * {
  text-decoration: none !important;
}

.custom-link {
  cursor: pointer;
}

.custom-link > span {
  text-decoration: underline;
  color: var(--standard);
}

.custom-link > h3 {
  text-decoration: underline;
  color: var(--standard);
}

.profile-id-text {
  color: var(--greyDark);
  font-weight: normal;
}

/* ------------------------------------- */
/* ------------- TOP HEADER ------------ */
/* ------------------------------------- */

.app-header-custom {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--standard) !important;
}

/* -------------------------------------- */
/* ------------- SIDEBAR ---------------- */
/* -------------------------------------- */

[data-kt-app-layout="dark-sidebar"] .app-sidebar {
  background-color: var(--white);
  border-right: 1px solid var(--standard) !important;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon {
  color: #c5c5d8;
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .app-sidebar-logo {
  border-bottom: none;
}

[data-kt-app-layout="dark-sidebar"]
  .app-sidebar
  .menu
  .menu-item
  .menu-link
  .menu-title {
  color: var(--sidebarItemColor);
}

[data-kt-app-layout="dark-sidebar"]
  .app-sidebar
  .menu
  .menu-item.hover:not(.here)
  > .menu-link:not(.disabled):not(.active):not(.here)
  .menu-title,
[data-kt-app-layout="dark-sidebar"]
  .app-sidebar
  .menu
  .menu-item:not(.here)
  .menu-link:hover:not(.disabled):not(.active):not(.here)
  .menu-title {
  color: var(--standard);
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.hover:not(.here)>.menu-link:not(.disabled):not(.active):not(.here), [data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
  transition: color .2s ease;
  color: var(--standard);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon{
  color: var(--standard);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon .svg-icon {
  color: var(--standard);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-arrow:after {
  background-color: var(--standard);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active {
  background-color: white;
  color: var(--standard);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
  color: var(--standard);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon {
  color: var(--standard);
}

/* -------------------------------------------------------- */
/* ------------- COLORES ALTERNOS EN DATAGRID  ------------ */
/* -------------------------------------------------------- */

.Mui-even {
  background-color: #fff;
}

.Mui-odd {
  background-color: #F7F9FA;
}

div .MuiDataGrid-columnHeaders {
  background-color: #121640;
}
/* -------------------------------------------------------- */
/* -------------------- POSICIONAMIENTO  ------------------ */
/* -------------------------------------------------------- */

.float-right {
  float: right;
}

/* -------------------------------------------------------- */
/* -------------------- MUI CUSTOMIZATION  ------------------ */
/* -------------------------------------------------------- */

.custom-select > svg > path {
  d: path("M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z");
  fill: var(--standard);
}

.MuiSelect-select {
  color:var(--standard) !important;
}

.MuiInputLabel-shrink {
  color:var(--standard);
}

.MuiButtonBase-root {
  text-transform: none !important;
}

/* -------------------------------------------------------- */
/* --------------------- SIZE STYLES  --------------------- */
/* -------------------------------------------------------- */

.mh-300 {
  max-height: 300px;
}

.h-200 {
  height: 200px;
}

/* -------------------------------------------------------- */
/* ------------------- OVERFLOW STYLES  --------------------*/
/* -------------------------------------------------------- */
.overflow-y {
  overflow-y: auto;
}

.darker-scrollbar::-webkit-scrollbar {
  height: 7px;
  background-color: #c5c2c2;
}

.darker-scrollbar::-webkit-scrollbar-track {
  background-color: #F7F9FA;
}

.darker-scrollbar::-webkit-scrollbar-thumb {
  background-color: #c5c2c2 !important;
}

/* -------------------------------------------------------- */
/* --------------------- CARD STYLES  ---------------------*/
/* -------------------------------------------------------- */

.card-style {
  border: 1px solid var(--greyLight);
  border-radius: 5px;
}

/* -------------------------------------------------------- */
/* ------------------ CUSTOM COMPONENTS  ------------------ */
/* -------------------------------------------------------- */

#notistack-snackbar > span {
  color: var(--white) !important;
}

/* --- Line --*/
.custom-line {
  height: 1px;
  background-color: var(--greyLight);
  width: 100%;
}

.clickable {
  cursor: pointer;
}

.no-border {
  border: none !important;
}

.no-style-input {
  outline: none;
  border:none;
  background-image:none;
  background-color:transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;  
}