/* Reset CSS Start */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select {
  font: inherit;
}

button{
  border: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

*:focus {
  outline: 2px solid rgba(0, 0, 0, 0.5);
  outline-offset: 2px;
}

html, body {
  overflow-x: hidden;
}

/* Reset CSS End */

/* Fonts Faces Start */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3jbZl5c.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3jbZl5c.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3jbZl5c.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3jbZl5c.woff2') format('woff2');
  }

  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3jbZl5c.woff2') format('woff2');
  }
/* Fonts Faces End */

/* Variables Start */

:root {
  --accent: #E32016;
  --accent-opaccity: rgb(227 32 22 / 0.7);
  --main: #3F3F46;
  --black: #000000;
  --dark-gray: #EFEFF2;
  --gray: #C2BEBE;
  --light-gray: #F7F7F7;
  --light: #0000000f;
  --hover: #EFEFEF;
  --white: #FFFFFF;
  --rounded-sm: 5px;
  --rounded-md: 12px;
  --rounded-lg: 20px;
  --rounded-xl: 30px;
  --rounded-full: 9999px;
  --rounded-8px: 8px;
  --font-h0: 1.8rem;
  --font-h1: 1.3rem;
  --font-h2: 1rem;
  --font-h3: 0.9rem;
  --font-h4: 0.8rem;
  --font-button: 0.9rem;
  --font-caption: 0.8rem;
  --text-4xl: 2.25rem;
}

/* Variables End */

/* Common Start */

@media (max-width: 991.98px) {
  .sidebar {
      display: none;
  }
  
  .main-content {
      margin-left: 0;
  }
}

*{
  font-family: 'Inter', sans-serif;
}

.text-bold{
  font-weight: 700;
}

.text-black{
  font-weight: 900;
}

h1, .h0 { font-size: var(--font-h0); }
h2, .h1 { font-size: var(--font-h1); }
h3, .h2 { font-size: var(--font-h2); }
h4, .h3 { font-size: var(--font-h3); }
h5, .h4 { font-size: var(--font-h4); }

.main-content-wrapper{
  background-color: var(--light-gray);
  padding: 1.5rem;
  min-height: 100vh;
  position: relative;
  width: calc(100% - 280px);
  margin-left: 280px;
  transition: all 0.3s;
}

.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 991.98px) {
  .main-content-wrapper {
      width: 100%;
      margin-left: 0;
  }
}

.hover-zoom-in,
.hover-zoom-out{
  transition: transform 0.3s;
}

.hover-zoom-in:hover{
  transform: scale(1.05);
}

.hover-zoom-out:hover{
  transform: scale(0.95);
}

.s-mobile{
  display: none !important;
}

@media (max-width: 991.98px) {
  .h-mobile{
    display: none !important;
  }

  .s-mobile{
    display: flex !important;
  }
}

.main-content{
  position: relative;
  padding: 2.5rem 1.5rem 3rem;
}

@media screen and (max-width: 991.98px){
  .main-content{
    padding: 2.5rem .2rem 5rem;
  }
}

.main-title{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.main-title .title{
  display: flex;
  gap: 5px;
}

.main-title .title span{
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}

.main-title .title img{
  padding: 0.5rem;
}

.main-title .title h2{
  font-size: var(--font-h0);
  font-weight: 500;
}

.main-title p{
  font-size: var(--font-p);
  color: var(--gray);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.status-pill {
  border-radius: var(--rounded-full);
  padding: 0.5rem 1.25rem;
}
.status-pill.high {
  background-color: #fee2e2;
  color: #dc2626;
}
.status-pill.medium {
  background-color: #dbeafe;
  color: #2563eb;
}
.status-pill.low {
  background-color: #dcfce7;
  color: #16a34a;
}
.status-pill p {
  margin-bottom: 0;
}

.action-type {
  border-radius: var(--rounded-8px);
  padding: 0.5rem;
}
.action-type img {
  aspect-ratio: 1/1;
  width: 24px;
  height: 24px;
}
.action-type:hover {
  background-color: var(--hover) !important;
}

@media (min-width: 768px) {
  .gap-md-128 {
    gap: 8rem !important;
  }
}

.grid-layout {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  margin-top: 50px;
}

.grid-son-1{grid-column: span 1 !important;}
.grid-son-2{grid-column: span 2 !important;}
.grid-son-3{grid-column: span 3 !important;}
.grid-son-4{grid-column: span 4 !important;}
.grid-son-5{grid-column: span 5 !important;}
.grid-son-6{grid-column: span 6 !important;}
.grid-son-7{grid-column: span 7 !important;}
.grid-son-8{grid-column: span 8 !important;}
.grid-son-9{grid-column: span 9 !important;}
.grid-son-10{grid-column: span 10 !important;}
.grid-son-11{grid-column: span 11 !important;}
.grid-son-12{grid-column: span 12 !important;}

@media (max-width: 1024px) {
  .grid-son-md-1{grid-column: span 1 !important;}
  .grid-son-md-2{grid-column: span 2 !important;}
  .grid-son-md-3{grid-column: span 3 !important;}
  .grid-son-md-4{grid-column: span 4 !important;}
  .grid-son-md-5{grid-column: span 5 !important;}
  .grid-son-md-6{grid-column: span 6 !important;}
  .grid-son-md-7{grid-column: span 7 !important;}
  .grid-son-md-8{grid-column: span 8 !important;}
  .grid-son-md-9{grid-column: span 9 !important;}
  .grid-son-md-10{grid-column: span 10 !important;}
  .grid-son-md-11{grid-column: span 11 !important;}
  .grid-son-md-12{grid-column: span 12 !important;}
  }

  .animation-grow-up{
    transition: transform 0.3s;
  }
  .animation-grow-up:hover{
    transform: scale(1.05);
  }

  .form-select{
    border-radius: var(--rounded-md);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.102);
    background-color: var(--white);
  }

  .form-select:focus{
    outline: none !important;
    box-shadow: none;
    border: 1px solid var(--accent);
  }

  .nav-link{
    border: none !important;
    font-weight: 500;
    font-size: .9rem;
    color: #00000070 !important;
  }



  .nav-link.active{
    background: transparent !important;
    border: none !important;
    color: black !important;
    border-bottom: 2px solid var(--accent) !important;
  }

  input[type="text"]{
    border-radius: var(--rounded-md);
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.102);
    background-color: var(--white);
    height: 48px;
    transition: all .3s;
  }

  input[type="text"]:focus{
    outline: none !important;
    box-shadow: none;
    border: 1px solid var(--accent);
    transform: scale(1.05);
  }

  .form-label{
    font-size: 0.8rem;
    font-weight: 600;
    color: #00000070;
    display: flex;
    justify-content: space-between;
  }

  .form-label img{
    height: 1.25rem;
    cursor: pointer;
    opacity: .5;
    padding: 0 .5rem 0 0;
    opacity: .5;
  }

  .tab-content.white-wrapper{
    margin-top: 10px;
  }

  *:focus{
    outline: none;
  }

  .subtitle-section{
    font-size: .8rem;
    color: rgb(0 0 0 / 0.5);
  }

/* Common End */

/* Component UI: Buttons Start */

  .button{
    padding: 0.75rem 1.5rem;
    transition: transform 0.3s;
    cursor: pointer;
    font-size: 0.9rem;
    border-radius: var(--rounded-md);
  }

  .button-primary{
    background-color: var(--accent);
    color: var(--white);
    border-radius: var(--rounded-full);
    padding: 1rem 1.5rem;
    transition: all 0.3s;
    font-weight: 600;
  }

  .button-secondary{
    background-color: var(--accent);
    color: var(--white);
    border-radius: var(--rounded-md);
    padding: .8rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s;
  }

  .button-secondary:hover{
    filter: brightness(110%);
  }

  .button-primary:hover{
    transform: scale(0.95);
  }

  .button-hover:hover{
    transform: scale(0.95) !important;
  }

  .button-wrap-sidemenu{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.9rem;
    background-color: var(--accent);
    padding: 0.5rem;
  }

  .link-button{
    font-size: .9rem;
    transition: all .3s;
    padding: 5px 10px;
    font-weight: 600;
  }
  
  .link-button:hover{
    color: var(--accent);
  }

  .button-with-icon{
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
  }
  
  .main-content .buttons-container-fixed{
    position: fixed;
    top: 60px;
    right: 25px;
    z-index: 1000;
    
  }
  
  @media screen and (max-width: 991.98px){
    .main-content .buttons-container-fixed{
      bottom: 1.5rem;
      top: auto;
      left: 50%;
      transform: translate(-50%, 0);
      padding: .8rem;
      width: 100%;
    }
  }

  .buttons-container-fixed {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
  }

  .btn-icon-hover {
    background: white;
    border: none;
    padding: 0.5rem;
    border-radius: var(--rounded-full);
    height: 3.5rem;
    width: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-icon-hover img {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .btn-icon-hover .hover-label {
    position: absolute;
    bottom: -2rem;
    right: 0;
    background-color: var(--black);
    color: white;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    border-radius: var(--rounded-sm);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.3s ease;
    z-index: 10;
  }
  
  .btn-icon-hover:hover .hover-label {
    opacity: 1;
    transform: translateY(0);
  }

  .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .close-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #4b5563;
  }

  .button-tertiary {
    background-color: rgb(227 32 22 / 0.1);
    color: var(--accent);
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: transform 0.3s;
    font-size: 0.9rem;
    border-radius: var(--rounded-8px);
    width: fit-content;
  }
  
  .button-tertiary:hover {
    filter: brightness(1.1)
  }

/* Component UI: Buttons End */


/* Component UI: Inputs */

.input-text{
  border-radius: var(--rounded-md);
  background-color: var(--white);
  outline: 2px solid transparent;
  outline-offset: 2px;
  border: 1px solid rgba(0, 0, 0, 0.102);
  height: 48px;
  padding: 0 1rem;
  font-size: .8rem;
  font-weight: 600;
}
select.input-text{
  min-width: 220px;
}

.input-checkbox input {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid #0000004D;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.input-checkbox input:checked {
  background-color: #E32016;
  border-color: #E32016;
}

.input-checkbox input:checked::after {
  content: '\2714';
  color: white;
  font-size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.input-checkbox{
  display: flex;
  align-items: center;

  gap: 5px;
}

.input-checkbox label {
  font-size: 14px;
  font-weight: 500;
  color: #0000004D;
  cursor: pointer;
  font-size: .8rem;
}
/* Component UI: Inputs End */



/* Component UI: Cards */


.cards-content-wrapper{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-top: 15px;
}



.card{
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--rounded-md);
  background-color: var(--white);
  border: none;
  cursor: pointer;
}

.card-header{
  background: white;
  align-items: center;
  gap: 10px;
  border: none;
  justify-content: flex-start;
  padding: 0;
}

.card-header h3{
  font-size: var(--font-h1);
}

.card-body{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 10px 0 15px 0;
  align-items: center;
}

.card-body span{
  font-size: var(--font-h4);
  text-transform: uppercase;
  color: var(--gray);
}

.card-control{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}

.card-control button{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

.card-control .button-create-area span{
  padding: 1rem;
  border-radius: var(--rounded-full);
}

.card-control button p{
  font-size: var(--font-h1);
  font-weight: 600;
  color: var(--accent);
}

.card-control .button-create-area span{
  background-color: rgb(227 32 22 / 0.1);
  
}

.card-control .button-create-area{
  background-color: rgb(227 32 22 / 0.05);  
  border-radius: var(--rounded-md);
  border: dashed 1px var(--accent);
}

.card-control .button-see-area{
  background-color: var(--accent);
  color: var(--white);
  border-radius: var(--rounded-md);
}

.card-control .button-see-area img{
  height: 52px;
}

.card-control .button-see-area p{
  color: var(--white)
}

@media screen and (max-width: 1500px){
  .cards-content-wrapper{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 1024px){
  .cards-content-wrapper{
    grid-template-columns: repeat(2, 1fr);
  }

  .button-create-area,
  .button-see-area{
    padding: 20px 0;

  }
}

@media screen and (max-width: 768px){
  .cards-content-wrapper{
    grid-template-columns: repeat(1, 1fr);
  }
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 2rem ;
}

.filter-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.select-wrapper {
  position: relative;
}

.modal-content .link-button{
  padding: 10px;
  text-align: center;
}

.project-card img{
  max-width: 3rem;
  max-height: 3rem;
}

.project-card h3{
  color: rgb(96 165 250);
  font-size: 1.3rem;
  font-weight: 600;
}

.project-card h1{
  margin-top: 80px;
  font-size: 14px;
  font-weight: 500;
}

/* Component UI: Cards End */


 /* Component: Sidebar Start */
 .sidebar {
  width: 280px;
  height: 100vh;
  position: fixed;
  z-index: 99;
  flex-direction: column;
  top: 0;
  left: 0;
  background-color: var(--white);
  padding: 5px 15px 30px;
  overflow-y: auto;
  transition: all 0.3s;
  overflow: hidden;
}

.colapsed .sidebar{
  width: 75px;
}


@media (min-width: 992px) {
  .colapsed .main-content-wrapper{
    width: calc(100% - 75px);
    margin-left: 75px;
  }
}

@media (max-width: 991.98px) {
  .sidebar {
    width: 0px;
    padding: 0;
  }
  
  .colapsed .sidebar{
    width: 280px;
  }


}

.header-mobile{
  display: none;
}



.sidebar-collapse,
.sidebar .logo, 
.sidebar .separator,
.sidebar .user-profile,
.sidebar .icon-bar,
.sidebar .sidebar-footer,
.sidebar .cert-logos{
  flex-shrink: 0;
  width: 280px;
}

.sidebar-wrapper{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.menu-sidebar{
  width: 280px;
}

.menu-sidebar *:focus{
  outline: 0;
  box-shadow: none;
}

.menu-sidebar{
  flex-grow: 1;
  overflow-y: auto;
}

.sidebar-collapse{
  margin-bottom: 20px;
}

.app-logo-sidebar{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 0.9rem;
  width: 2.5rem;
  height: 2.5rem;
}

.logo img{
  width: 100%;
  height: 100%;
}

.logo-sidebar img{
  height: 2rem;
}


.logo{
  display: flex;
  gap: 25px;
  justify-content: flex-start;
  align-items: center;
  width: 280px;
}

.sidebar .separator{
  margin: 10px -15px 15px;
  border-bottom: 1px solid var(--light);
}

.user-profile{
  display: flex;
  gap: 25px;
  align-items: center;
}

.user-profile img{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.user-profile h5{
  font-size: 1.125rem; 
}

.user-profile p{
  font-size: .9rem;
  font-weight: 300;
  color: var(--gray);
}

.icon-bar{
  display: flex;
  gap: 8px;
  padding: 0 0 0 10px;
  margin-top: 20px;
}

.sidebar .icon-bar button{
  padding: .5rem;
  transition: transform background-color 0.3s;
  border-radius: var(--rounded-md);
  background: none;
  display: flex;  
  justify-content: center;
  align-items: center;
}

.sidebar .icon-bar button:hover{
  background-color: var(--hover);
  transform: scale(0.95);
}

.menu-sidebar{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 0 90px;
}

.menu-sidebar h5{
  padding: 15px 0px 15px 65px;
  font-size: 1rem;
  color: var(--gray);
}

.menu-sidebar .menu-item{
  display: flex;
  gap: 25px;
  border-radius: var(--rounded-md);
  justify-content: flex-start;
  align-items: center;
  padding: 5px 10px;
}

.menu-sidebar .menu-item span{
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: -0.8px;
}

.menu-sidebar .menu-item.active span{
  color: var(--accent);
  line-height: inherit;
}

.menu-sidebar .menu-item.active{
  background-color: var(--hover);
}

.menu-sidebar .menu-item:hover{
  background-color: var(--hover);
}

.menu-sidebar .menu-item:hover span{
  color: var(--accent);
}

.menu-sidebar .menu-item img{
  width: 28px;
}

.sidebar-footer{
  display: flex;
  gap: 10px;
}

.sidebar .icon-bar button img{
  width: 24px;
  height: auto;
}

.sidebar-footer button{
  transition: transform background-color 0.3s;
  border-radius: var(--rounded-full);
  background: none;
  display: flex;  
  justify-content: center;
  align-items: center;
}

.cert-logos{
  padding: 30px 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.cert-logos img{
  width: 56px;
  object-fit: contain;
}

.mobile-logo-header{
  display: flex;
  gap: 25px;
}

.mobile-logo-header img{
  max-width: 100px;
  max-height: 50px;
  object-fit: contain;
}

@media (max-width: 991.98px) {
  .header-mobile{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 60px;
    background-color: var(--white);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  }

  .main-content-wrapper{
    padding-top: 80px;
  }

  .sidebar-collapse,
  .logo{
    display: none;
  }

  .colapsed .sidebar{
    width: 100vw;
  }

  .colapsed .sidebar-wrapper{
    width: 280px;
  }

  .sidebar{
    z-index: 1030;
    background-color: transparent;
    backdrop-filter: blur(10px);
  }

  .sidebar-wrapper{
    padding: 50px 15px 30px;
    background: white;
  }

  .button-wrap-sidemenu{
    background: transparent;
  }

}



/* Component: Sidebar End */


/* Component: Login Start */
.login-backdrop-blur {
  backdrop-filter: blur(1rem);
}

.login-container {
  background-color: rgba(244, 244, 245, 0.5);
  border-radius: 1.5rem;
  padding: 3rem 6rem 5rem 6rem;
}

.error-validation{
  color: var(--accent);
  max-width: 380px;
  font-size: 12px;
}

.select-login{
  padding: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
  background: transparent;
  font-size: 16px;
}

.select-login:focus{
  border-bottom: 2px solid var(--accent);
}

.login-rounded-3xl {
  border-radius: 1.5rem;
}

.login-header-login img {
  height: 2.5rem;
}

@media (max-width: 768px) {
  .login-container {
    padding: 5rem 1.5rem;
    min-height: 100vh;
    min-width: 100vw;
    border-radius: 0;
  }
  
  .login-header-login img {
    height: 2.25rem;
  }
}

@media (min-width: 768px) {
  .pt-md-2_25 {
    padding-top: 2.25rem !important;
  }
}

.login-access-button {
  padding: 1.25rem 0;
  margin-top: 36px;
  margin-bottom: 0;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
  line-height: 1.5rem;
}

.login-access-button:not(.disabled):hover {
  background-color: var(--accent) !important;
  color: white !important;
  filter: brightness(110%);
}

.login-access-button.disabled {
  cursor: not-allowed !important;
  background-color: rgba(0, 0, 0, 0.2) !important;
  filter: none !important;
}

.login-input-primary {
  width: 100%;
  padding: 0.5rem 0;
  font-weight: 600;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0;
}

.login-input-primary::placeholder {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.login-input-primary:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 2px solid var(--accent);
}

.form-control {
  background-color: transparent;
  border-width: 0 0 1px 0;
  border-radius: 0;
  border-color: rgba(0, 0, 0, 0.2);
  padding-left: 0;
  padding-right: 0;
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: none;
  border-width: 0 0 2px 0;
}

.login-custom-checkbox .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check.login-custom-checkbox {
  margin-bottom: 0;
}

.login-custom-checkbox .form-check-label {
  transition: all 0.3s ease-in-out;
}

.login-custom-checkbox .form-check-label:hover {
  color: var(--black) !important;
}

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

.login-text-black-60 {
  color: rgba(0, 0, 0, 0.6);
}

.login-text-black-30 {
  color: rgba(0, 0, 0, 0.3);
}

.login-bg-black-30 {
  background-color: rgba(0, 0, 0, 0.3);
}

.login-bg-black-20 {
  background-color: rgba(0, 0, 0, 0.2);
}

.login-footer-link {
  transition: all 0.3s ease-in-out;
  color: #000000;
  line-height: unset;
  margin-bottom: 0;
  font-weight: 400;
}

.login-footer-link:hover,
.login-forgot-password:hover {
  text-decoration: underline;
  color: var(--black) !important;
}

.login-forgot-password {
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0;
}

.login-hover-scale {
  transition: all 0.3s ease-in-out;
}

.login-hover-scale:hover {
  transform: scale(1.05);
}

.step-verification {
  grid-template-columns: repeat(6,1fr);
}

.step-verification .login-input-primary {
  width: 100%;
  max-width: 3rem;
  font-size: 3rem;
  text-align: center;
  color: var(--accent);
}

.back-to-login {
  margin-top: 2.25rem;
  color: rgb(0 0 0 / 0.6);
  font-weight: 500;
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
  line-height: unset;
  margin-bottom: 0;
}

.back-to-login:hover {
  color: #000000;
}

/* Component: Login End */


/* Component: Breadcrumb Start */

.breadcrumb-container{
  font-size: 12px;
  color: var(--gray);
}

.breadcrumb-item::before{
  color: var(--gray);
}

.breadcrumb-container .breadcrumb-item+.breadcrumb-item{
  padding: 0 2px;
}

.breadcrumb-item+.breadcrumb-item::before{
  padding: 0 5px 0 2px;
  color: var(--gray);
}


/* Component: Breadcrumb End */

/* Component: Search Input Start */
.search-input {
  background-color: var(--light);
  font-size: var(--font-button);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  border: none;
  border-radius: var(--rounded-md);
  margin-bottom: 0;
}

.search-input:hover {
  transform: scale(1.03);
}

.search-input:focus {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--accent);
  outline: none;
}

.search-input::placeholder {
  color: var(--gray);
}

.search-input-img {
  width: 1.25rem;
}
/* Component: Search Input End */

/* Component: Sidebar menu in dashboard Start */

/* Sidebar Styling */
.menu-sidebar.scroll-hidden {
  width: 100%;
  overflow-x: hidden;
}

.scroll-hidden::-webkit-scrollbar {
  display: none;
}

.scroll-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Menu Details & Summary Styling */
.menu-details summary {
  list-style: none;
}

.menu-details summary::-webkit-details-marker {
  display: none;
}

.menu-sidebar summary:focus {
  outline: none;
}

.menu-sidebar summary::-moz-focus-inner {
  border: 0;
}

.menu-item:focus {
  outline: none;
}

.menu-sidebar summary.menu-item:hover {
  background-color: transparent;
}

/* Content Styling */
.first-layer-detail {
  color: var(--black);
}

.menu-sidebar details.menu-details img {
  min-width: 24px;
  max-width: 24px;
}

details.menu-details .content-container {
  gap: 15px;
}

/* Icon Container */
.icon-container {
  position: relative;
  width: 12px;
  height: 12px;
  transition: all 0.3s ease-in-out;
}

.icon-container img {
  width: 12px;
  height: 12px;
  max-width: 12px;
  max-height: 12px;
}

/* Expand/Collapse Icons */
.menu-details .plus-icon,
.menu-details .plus-icon-2,
.menu-details .minus-icon,
.menu-details .minus-icon-2 {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.menu-details .plus-icon,
.sub-menu-details .plus-icon-2 {
  opacity: 1;
  visibility: visible;
}

.menu-details .minus-icon,
.sub-menu-details .minus-icon-2 {
  opacity: 0;
  visibility: hidden;
}

.menu-details[open] .plus-icon,
.sub-menu-details[open] .plus-icon-2 {
  opacity: 0;
  visibility: hidden;
}

.menu-details[open] .minus-icon,
.sub-menu-details[open] .minus-icon-2 {
  opacity: 1;
  visibility: visible;
}

/* Sub-Item Styling */
.sub-item {
  display: flex;
  gap: 20px;
  border-radius: var(--rounded-md);
  justify-content: flex-start;
  align-items: center;
  padding: 8px 15px;
  margin-top: 5px;
  font-size: .8rem;
  background-color: var(--light-gray);
  color: #00000080;
}

.sub-item:hover {
  color: var(--accent);
}

.sub-item-ul {
  padding: 1px 15px 5px 30px;
  background-color: var(--light-gray);
  border-radius: 0px 0px 12px 12px;
}

.sub-item-ul .sub-item {
  background-color: transparent;
}

.sub-item-ul .sub-item:hover {
  background-color: var(--white);
}

.sub-item-ul .sub-item:first-child {
  margin-top: 0;
}

details.sub-menu-details[open] summary.sub-item {
  border-radius: 12px 12px 0px 0px;
}

/* Image Styling */
img.sub-item-img,
.sub-menu-details .sub-item .icon-container img {
  opacity: 0.4;
}

.sub-menu-details .sub-item:hover .icon-container img,
.sub-item:hover img.sub-item-img {
  opacity: 1;
}

/* Clickable Item */
.item-with-children {
  cursor: pointer;
}

/* Drop-Down Animation */
.animation-sub-items {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

/* When Open - Animate Expansion */
details[open] .animation-sub-items {
  opacity: 1;
  transition: all 0.4s ease-in-out;
}

/* Component: Sidebar menu in dashboard End */



/* Component: Filter Component Start */
.filter-content-wrapper{
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 30px;
}

.filter-content-wrapper input:focus{
  box-shadow: 0 10px 15px -3px rgb(228, 228, 231), 
              0 4px 6px -4px rgb(228, 228, 231); /* shadow-lg y shadow-zinc-200 */
  border: 1px solid rgb(127, 29, 29); /* border y border-red-900 */
  outline: none;
  transform: scale(1.05);
}

.grid-button-two,
.grid-button-three{
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--white);
  border-radius: var(--rounded-md);
  cursor: pointer;
}

.filter-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  bottom: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: end;
}

.filter-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay {
  position: absolute;
  display: none;
  inset: 0;
  transition: all .3s;
  backdrop-filter: blur(8px) opacity(0);
}

.filter-modal.active .modal-overlay{
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px) opacity(1);
}

.modal-content {
  position: relative;
  width: 100%;
  padding: 1.5rem;
  padding-bottom: 8rem;
  background-color: white;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.filter-modal.active .modal-content {
  transform: translateY(0);
}

/* Component: Filter Component End */

/* Component: Table Start */


.table-content-wrapper {
  overflow: hidden;
}

.table-content-wrapper .heading-title {
  font-size: .8rem;
  color: rgb(0 0 0 / 0.5);
}

.table-content-wrapper .table-element th {
  color: rgb(0 0 0 / 0.3);
  font-size: 0.8rem;
  white-space: nowrap;
}

table.table-element {
  width: 100%;
  border-collapse: collapse;
  /* min-width: 1080px; */
}

table.table-element tbody tr:nth-child(odd) {
  background-color: var(--light-gray);
}

table.table-element tbody tr td{
  padding: .25rem 0.5rem;
}

table.table-element .hover-zoom-in:hover {
  transform: scale(1.01);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 
  0 1px 2px -1px rgba(0, 0, 0, 0.1);
}


table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover {
  outline: none !important;
}

.table-wrapper .dt-info,
.table-wrapper .dt-length label,
.table-wrapper .dt-column-title {
  color: rgb(0 0 0 / 0.3);
  font-size: 0.8rem;
  font-weight: 600 !important;
}

.table-wrapper .dt-column-title:last-child {
  padding-right: 15px;
}

.table-wrapper  #table-form_wrapper {
  margin-right: calc(0.5* var(--bs-gutter-x));
  margin-left: calc(.5* var(--bs-gutter-x));
}

.table-wrapper .dt-layout-table {
  overflow-x: auto;
}

.table-wrapper table.table-element {
  min-width: 1440px;
}

.table-wrapper .dt-paging .pagination {
  gap: .25rem;
}

.table-wrapper .dt-paging .pagination .dt-paging-button button {
  color: #c2bebe;
  background-color: #f7f7f7;
  padding: .5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--rounded-8px);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border: 0;
}

.table-wrapper .dt-paging .pagination .dt-paging-button.active button {
  color: var(--black);
}



/* Component: Table End */

/* Component: File upload End */
.upload-box {
  padding: 1rem;
  border: 1px dashed #0000004d;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  cursor: pointer;
}

.upload-box:hover {
  background-color: var(--light-gray);
}

.file-display-box {
  padding: 1rem 1.5rem;
}

.file-display-box .icon-btn {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.file-display-box:hover {
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Component: File upload End */

/* Component: Summary Start */

.summary-box {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: linear-gradient(to top right, var(--accent), var(--accent-opaccity));
  border-radius: var(--rounded-md);
  color: white;
}

.summary-header {
  display: flex;
  align-items: center;
  gap: 5px;
}

.summary-title {
  font-size: 28px;
  font-weight: 500;
}

.summary-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
}

.summary-item {
  width: 100%;
  max-width: 250px;
}

.summary-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.summary-value {
  font-size: 14px;
  font-weight: 600;
  color: white;
}

/* Component: Summary End */


/* Component: Tooltip Start */

.info-tooltip {
  position: relative;
  display: inline-block;
  height: fit-content;
}

.info-icon {
  cursor: pointer;
}

.tooltip-text {
  position: absolute;
  left: 100%;
  bottom: 0;
  width: 160px;
  background: #002b36;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  display: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.info-tooltip:hover .tooltip-text {
  display: block;
}

/* Component: Tooltip End */

/* Page: Dashboard Start */

.dashboard-layout{
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.dashboard-row,
.dashboard-row-chart{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
}

.dashboard-item,
.dashboard-chart{
  padding: 1.5rem;
  position: relative;
  background-color: white;
  border-radius: var(--rounded-md);
  transition: all .3s;
}

.dashboard-fake-chart{
  width: 100%;
  height: 430px;
}

.dashboard-chart{
  grid-column: span 2;
}



.dashboard-chart h4{
  color: var(--accent);
}

.dashboard-chart h3{
  font-weight: 600;
}

.dashboard-item-value{
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 600;
}

.dashboard-item-text{
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
}

.dashboard-title{
  display: flex;
  gap: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.section-title{
  font-size: 1.3rem;
  color: black;
  font-weight: 600;
}

.dashboard-wrapper{
  margin-top: 50px;
}

.dashboard-dropdown-content{
  position: absolute;
  z-index: 99;
  background-color: var(--light-gray);
  padding: .7rem;
  display: flex;
  flex-direction: column;
  border-radius: var(--rounded-md);
  box-shadow: 0 5px 8px -1px rgba(0, 0, 0, 0.1), 
    0 2px 3px -2px rgba(0, 0, 0, 0.1);
  bottom: 35px;
  left: 100%;
  display: none;
  min-width: 150px;
}

.dashboard-dropdown-content button{
  font-size: .8rem;
  font-weight: 500;
  text-align: left;
  background-color: var(--light-gray);
  white-space: nowrap;
  width: 100%;
  padding: 3px 5px;
}

.dashboard-dropdown-content button:hover{
  background-color: white;
  color: var(--accent);
}

.dashboard-dropdown{
  position: absolute;
  right: 10px;
  top: 10px;
}

.dashboard-dropdown button[data-trigger="delete"]{
  color: var(--accent);
}

.dashboard-dropdown > div {
  position: relative;
}

.dashboard-dropdown.active .dashboard-dropdown-content{
  display: flex;
}

.dashboard-item:hover{
  transform: scale(1.05);
  box-shadow: 0 7px 12px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.dashboard-chart:hover{
  transform: scale(1.05);
  box-shadow: 0 7px 12px -3px rgba(0, 0, 0, 0.1), 
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1024px){
  .dashboard-row,
  .dashboard-row-chart{
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-chart{
    grid-column: span 3;
  }
}

@media (max-width: 1024px){
  .dashboard-row,
  .dashboard-row-chart{
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-chart{
    grid-column: span 3;
  }
}

@media (max-width: 768px){
  .dashboard-row,
  .dashboard-row-chart{
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-chart{
    grid-column: span 2;
  }
}

.dashboard-item-move{
  position: absolute;
  bottom: 10px;
  right: 10px;
  opacity: 0;
  transition: all .3s;
}

.dashboard-item:hover .dashboard-item-move{
  opacity: 1;
}

.open-dropdown{
  cursor: pointer;
}

/* Page: Dashboard End */


.white-wrapper{
  background: white;
  border-radius: var(--rounded-md);
  padding: 1rem;
}

.white-wrapper-form-select{
  grid-column: span 2;
  padding: 1.5rem 1rem;
}

.white-wrapper-form-select select{
  width: 100%;
}

.form-top-buttons button{
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: var(--rounded-md);
  font-size: 0.9rem;
  background-color: white;
  font-size: 1rem;
  color: black;
  font-weight: 600;
  transition: all .3s;
}

.form-top-buttons button:hover{
  transform: scale(1.05);
}

.form-top-buttons button span{
  font-size: .8rem;
  color: rgb(0 0 0 / 0.4);
  font-weight: 600;
}

.form-top-buttons button img {
  height: 2rem;
}

.section-wrapper{
  margin-top: 50px;
}

.switch-container {
  text-align: center;
  margin: 10px auto;
}
.switch-bar {
  display: flex;
  position: relative;
  flex-wrap: nowrap;
  width: fit-content;
  padding-bottom: 4px;
}

.switch-bottom-bar{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #ddd;
}

.switch-bar::-webkit-scrollbar {
  display: none;
}

.switch-bar-content{
  display: flex;
}

.switch-bar-wrapper{
  overflow: scroll;
}

.switch-bar-wrapper::-webkit-scrollbar{
  display: none;
}

.switch-button {
  flex: 1;
  padding: 10px 20px;
  cursor: pointer;
  max-width: fit-content;
  position: relative;
  font-weight: 500;
  font-size: .9rem;
  color: #00000070;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.switch-button:hover {
  color: #000;
}
.switch-button.active {
  color: #000;
  font-weight: 900;
}
.switch-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 2px;
  background-color: var(--accent);
  transition: all 0.3s ease;
}
.switch-content {
  display: none;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.switch-content.active {
  display: grid;
}

.switch-container .white-wrapper{
  margin-top: 10px;
  padding: 2.25rem;
}

.form-input-wrapper{
  display: flex;
  gap: 5px;
  flex-direction: column;
  justify-content: flex-start;
}

.form-input-wrapper label{
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 600;
  color: rgb(0 0 0 / 0.4);

}

.form-input-wrapper label img{
  height: 1.25rem;
  cursor: pointer;
  opacity: .5;
  padding: 0 .5rem 0 0;
}

.input-text:disabled{
  background-color: var(--light-gray);
  border: 0;
  cursor: not-allowed;
}

.input-text:disabled:hover{
  transform: none;
}

@media (max-width: 1024px){
  .switch-container .white-wrapper {
    padding: 1.25rem;
  }
}

.form-input-wrapper input:focus{
  border: 1px solid var(--accent);
  outline: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}