/* webkit ######################## */
/* Hide the scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 12px;
  display: none;
}


/* Scrollbar track */
::-webkit-scrollbar-track {
  background: #f7fafc;
  /* Background color of the track */
  border-radius: 10px;
  /* Rounded corners for track */
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom right, #b9bdbe, #bcc0c2b1);
  border-radius: 10px;
  /* Rounded corners for thumb */
}

/* ############################################################## */


.layout-info-lightmode {
  background: #e9ecef;
}

.layout-primary-lightmode {
  background: #efe9ef;
}
.layout-info-darkmode {
  background: #0e1419;
}

.layout-primary-darkmode {
  background: #180e19;
}

.bg-box-active-nav-info-light {
  background-color: #f8f9fac5 !important;
}
.bg-box-active-nav-info-dark {
  background-color: #21354549 !important;
}
.bg-box-active-nav-primary-light {
  background-color: #faf8f9c5 !important;
}
.bg-box-active-nav-primary-dark {
  background-color: #45213e49 !important;
}

    

.shadow-blur-info-light {
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9), 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-blur-info-dark {
  box-shadow: inset 0 0px 1px 1px rgba(33, 53, 69, 0.786), 0 20px 27px 0 rgba(72, 72, 72, 0.05) !important;
}

.shadow-blur-primary-light {
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9), 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.shadow-blur-primary-dark {
  box-shadow: inset 0 0px 1px 1px rgba(69, 33, 59, 0.786), 0 20px 27px 0 rgba(72, 72, 72, 0.05) !important;
}



.text-dark-primary-light {
  color: #533058 !important;
}
.text-dark-primary-dark {
  color: #c8b0c4 !important;
}
.text-dark-info-light {
  color: #344767 !important;
}
.text-dark-info-dark {
  color: #a9b3c6 !important;
}

.text-light-primary{
  color: #e6dde4 !important;
}
.text-light-info {
  color: #d8dddf !important;
}

.text-secondary-primary {
  color: #997d93 !important;
}
.text-secondary-info {
  color: #8392AB !important;
}



.bg-dark-primary-light {
  background-color: #7c3d66 !important;
}
.bg-dark-primary-dark {
  background-color: #c297b3 !important;
}
.bg-dark-info-light {
  background-color: #1e2b3b  !important;
}
.bg-dark-info-dark {
  background-color: #426083 !important;
}


.nav-blur-info-light {
  background-color: rgba(220, 239, 245, 0.656) !important;
  backdrop-filter: saturate(100%) blur(6px);
}

.nav-blur-info-dark {
  background-color: rgba(33, 53, 69, 0.686) !important;
  backdrop-filter: saturate(100%) blur(6px);
}

.nav-blur-primary-light {
  background-color: rgba(245, 220, 230, 0.656) !important;
  backdrop-filter: saturate(100%) blur(6px);
}

.nav-blur-primary-dark {
  background-color: rgba(69, 33, 57, 0.686) !important;
  backdrop-filter: saturate(100%) blur(6px);
}



.sidebar-profile-info-card-light {
  background: rgba(105, 118, 144, 0.693);
}
.sidebar-profile-info-card-dark {
  /* background: rgba(125, 190, 244, 0.286); */
  background: rgba(57, 86, 110, 0.286);
}
.sidebar-profile-primary-card-light {
  background: rgba(144, 105, 137, 0.693);
}
.sidebar-profile-primary-card-dark {
  /* background: rgba(125, 190, 244, 0.286); */
  background: rgba(110, 57, 104, 0.286);
}


.active .nav-link-name-info-light {
  color: #3b484d;

}
.active .nav-link-name-primary-light {
  color: #4c3b4d;

}

.active .nav-link-name-dark {
  color: #ffffff;

}

.nav-link-name-info-light {
  color: #3f4b50;

}
.nav-link-name-primary-light {
  color: #4c3b4d;

}
.nav-link-name-info-dark {
  color: #a6bac2;

}
.nav-link-name-primary-dark {
  color: #c2a6ba;

}





.awsomefont-info-light {
  background-color: #ffffffc5;
  --fa-primary-color: #3b4752f3;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #516972;
  --fa-secondary-opacity: 0.3;
}

.awsomefont-info-dark {
  background-color: #1e2b3bc3;
  --fa-primary-color: #6c7c88;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #426171;
  --fa-secondary-opacity: 0.3;
}

.awsomefont-primary-light {
  background-color: #ffffffc5;
  --fa-primary-color: #796682f3;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #976e8b;
  --fa-secondary-opacity: 0.3;
}

.awsomefont-primary-dark {
  background-color: #3b1e3ac3;
  --fa-primary-color: #987e94;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #7e6883;
  --fa-secondary-opacity: 0.3;
}

.active .awsomefont-primary-light,
.active .awsomefont-primary-dark,
.active .awsomefont-info-light,
.active .awsomefont-info-dark {
  --fa-primary-color: #fff;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #fff;
  --fa-secondary-opacity: 0.6;
}


.border-info {
  border: 2px solid #17a3b895 !important;
}
.border-primary {
  border: 2px solid #c6277eb1 !important;
}

.border-info-hover,
.border-primary-hover {
  transition: border-color 0.3s ease;
}

.border-info-hover {
  border: 2px solid #17a3b895 !important;
}
.border-primary-hover {
  border: 2px solid #c6277eb1 !important;
}
.border-info-hover:hover {
  border: 2px solid #17a3b8b4 !important;
}
.border-primary-hover:hover {
  border: 2px solid #c6277ec1 !important;
}




.table-head-info-dark {
  background-color: #111f2480 !important;
  color: #d9dddf !important;
  border-bottom: 1px solid #dee1e2;
}

.table-head-info-light {
  background-color: #d7e0e280 !important;
  color: #1c3237 !important;
  border-bottom: 1px solid #dee1e2;
}

.table-head-primary-dark {
  background-color: #24112080 !important;
  color: #dfd9dd !important;
  border-bottom: 1px solid #e2dee1;
}

.table-head-primary-light {
  background-color: #e5dae180 !important;
  color: #432038 !important;
  border-bottom: 1px solid #e2dee1;
}


.aiOverlay-info {
  background-color: rgba(45, 49, 49, 0.47);
}
.aiOverlay-primary {
  background-color: rgba(49, 45, 48, 0.47);
}





.font-style-1 {
  font-family: Arial, Helvetica, sans-serif;
}

.text-warning-light {
  color: #d8bd0f;
}

.form-control-light {
  background-color: #ffffffd3;
}

.form-control-dark {
  background-color: #252a2ea1;
}

.blur-light {
  background-color: rgba(220, 223, 224, 0.233) !important;
  backdrop-filter: saturate(100%) blur(7px);
}

.blur-dark {
  background-color: rgba(33, 53, 69, 0.732) !important;
  backdrop-filter: saturate(100%) blur(6px);
}

/* Sidebar######################## */

.nav-blur {
  box-shadow: inset 0px 0px 2px #fefefed1;
  -webkit-backdrop-filter: saturate(200%) blur(2px);
  backdrop-filter: saturate(100%) blur(2px);

}

.nav-blur-light {
  background-color: rgba(220, 239, 245, 0.656) !important;
  backdrop-filter: saturate(100%) blur(6px);
}

.nav-blur-dark {
  background-color: rgba(33, 53, 69, 0.686) !important;
  backdrop-filter: saturate(100%) blur(6px);
}

.sidebar-profile-card {
  background: rgba(105, 118, 144, 0.693);
}

.sidebar-profile-card-dark {
  /* background: rgba(125, 190, 244, 0.286); */
  background: rgba(57, 86, 110, 0.286);
}



.shadow-dark {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

.awsomefont-white {
  --fa-primary-color: #ffffff;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #ffffff;
  --fa-secondary-opacity: 0.6;
}

.awsomefont-black {

  --fa-primary-color: #3b4752f3;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #516972;
  --fa-secondary-opacity: 0.3;
}

.bg-item-light {
  background-color: #ffffffc5 !important;
}

.bg-item-dark {
  background-color: #1e2b3bc3 !important;
}

.awsomefont {
  background-color: #ffffffc5;
  --fa-primary-color: #3b4752f3;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #516972;
  --fa-secondary-opacity: 0.3;
}

.awsomefont-dark {
  background-color: #1e2b3bc3;
  --fa-primary-color: #6c7c88;
  --fa-primary-opacity: 1;
  --fa-secondary-color: #426171;
  --fa-secondary-opacity: 0.3;
}



.nav-link-name {
  color: #3b484d;
}



.nav-link-name-dark {
  color: #a6bac2;
}

.active-nav-link-name-dark {
  color: #ffffff;

}

.blur-transparent {

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.47);
  /* Semi-transparent white color */
  backdrop-filter: blur(2px);
  /* Apply 2px blur effect on the content behind */
  box-shadow: 0px 4px 15px rgba(113, 113, 113, 0.47);
  /* Optional box shadow for visual effect */

}

.bigOne {
  position: fixed;
  /* Fixed position to overlay on top of the content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  /* Ensure it's on top of other elements */
}

/* custom colors */
.custom-color-info {
  color: #17a2b8 !important;
}

.custom-color-warning {
  color: #dcb43c !important;
}

.custom-color-danger {
  color: #bb3d4a !important;
}

.custom-color-primary {
  color: #c6277e !important;
}

.custom-color-success {
  color: #327541 !important;
}

.custom-color-dark {
  color: #363e45 !important;
}

.custom-color-light {
  color: #f3f7f8 !important;
}

.background-blur-primary {
  background-color: rgba(146, 45, 112, 0.1) !important;
  backdrop-filter: 'blur(8px)' !important;
}

.background-blur-success {
  background-color: rgba(45, 146, 116, 0.1) !important;
  backdrop-filter: 'blur(8px)' !important;
}

.background-blur-danger {
  background-color: rgba(167, 34, 74, 0.1) !important;
  backdrop-filter: 'blur(8px)' !important;
}

.background-blur-warning {
  background-color: rgba(175, 152, 36, 0.1) !important;
  backdrop-filter: 'blur(8px)' !important;
}

.background-blur-info {
  background-color: rgba(34, 140, 167, 0.2) !important;
  backdrop-filter: 'blur(8px)' !important;
}

.background-blur-white {
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: 'blur(8px)' !important;
}

.background-blur-dark {
  background-color: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: 'blur(8px)' !important;
}



.button-custom-info {
  /* background-image: linear-gradient(135deg, rgb(66, 159, 178) 0%, rgb(68, 153, 179) 100%) !important; */
  background-image: linear-gradient(135deg, #17c1e8 0%, #17c1e8 100%) !important;
  color: #e9ecef !important;
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
    0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.button-custom-info:hover {
  background-image: linear-gradient(135deg, rgba(72, 163, 148, 0.9) 0%, rgba(73, 161, 139, 0.9) 100%) !important;
}

.button-custom-warning {
  background-image: linear-gradient(135deg, rgb(178, 143, 66) 0%, rgb(179, 144, 68) 100%) !important;
  color: #e9ecef !important;
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
    0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.button-custom-warning:hover {
  background-image: linear-gradient(135deg, rgba(163, 72, 72, 0.9) 0%, rgba(161, 73, 73, 0.9) 100%) !important;
}

.button-custom-danger {
  background-image: linear-gradient(135deg, rgb(220, 53, 69) 0%, rgb(218, 50, 65) 100%) !important;
  color: #e9ecef !important;
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
    0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.button-custom-danger:hover {
  background-image: linear-gradient(135deg, rgba(200, 43, 59, 0.9) 0%, rgba(180, 33, 49, 0.9) 100%) !important;
}

.button-custom-success {
  background-image: linear-gradient(135deg, rgb(46, 204, 113) 0%, rgb(39, 174, 96) 100%) !important;
  color: #e9ecef !important;
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
    0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.button-custom-success:hover {
  background-image: linear-gradient(135deg, rgba(33, 136, 65, 0.9) 0%, rgba(27, 124, 60, 0.9) 100%) !important;
}

.button-custom-secondary {
  background-image: linear-gradient(135deg, rgb(108, 117, 125) 0%, rgb(90, 98, 104) 100%) !important;
  color: #e9ecef !important;
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
    0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.button-custom-secondary:hover {
  background-image: linear-gradient(135deg, rgba(78, 88, 97, 0.9) 0%, rgba(68, 78, 87, 0.9) 100%) !important;
}

.button-custom-primary {
  background-image: linear-gradient(135deg, rgb(195, 67, 109) 0%, rgb(197, 48, 103) 100%) !important;
  color: #e9ecef !important;
 
  box-shadow: inset 0 0px 1px 1px rgba(254, 254, 254, 0.9),
    0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
}

.button-custom-primary:hover {
  background-image: linear-gradient(135deg, rgba(194, 24, 91, 0.9) 0%, rgba(173, 20, 87, 0.9) 100%) !important;
}




/* ################## Table ###################### */

.table-header-dark {
  background-color: #111f2480 !important;
  color: #d9dddf !important;
}

.table-header-light {
  background-color: #d1dadc80 !important;
  color: #1c3237 !important;
}




@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}


@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}










@import url('https://fonts.googleapis.com/css?family=Exo+2');


.gooey-info{
  background-image: linear-gradient(120deg, #3489f0 0%, #7700ff 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 150px; height: 144px;
  animation: morph 3s linear infinite; 
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}
.gooey-info:before,
.gooey-info:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px rgba(0, 204, 255, 0.21);
  will-change: border-radius, transform, opacity;
  animation-delay: 200ms;
  /* background-image: linear-gradient(120deg, rgba(0,67,255,.55) 0%, rgba(0,103,255,.89) 100%); */
  background-image: linear-gradient(120deg, rgba(0, 204, 255, 0.55) 0%, rgba(0, 153, 255, 0.89) 100%);
}

.gooey-info:before{
  animation: morph 3s linear infinite;
  opacity: .21;
  animation-duration: 1.5s;
}

.gooey-info:after{
  animation: morph 3s linear infinite;
  animation-delay: 400ms;
  opacity: .89;
  line-height: 120px;
  text-indent: -21px;
}

@keyframes morph{
  0%,100%{
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  34%{
      border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform:  translate3d(0,5px,0) rotateZ(0.01deg);
  }
  50%{
    opacity: .89;
    transform: translate3d(0,0,0) rotateZ(0.01deg);
  }
  67%{
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ;
    transform: translate3d(0,-3px,0) rotateZ(0.01deg);
  }
}

@keyframes fadeIn{
  100%{
    transform: scale(1.03);
    opacity: 0;
  }}

.gooey-primary{
  background-image: linear-gradient(120deg, #ff3366 0%, #8b0033 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 150px; height: 144px;
  animation: morph 3s linear infinite; 
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}
.gooey-primary:before,
.gooey-primary:after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0; top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px rgba(255, 51, 102, 0.21);
  will-change: border-radius, transform, opacity;
  animation-delay: 200ms;
  background-image: linear-gradient(120deg, rgba(255, 51, 102, 0.55) 0%, rgba(139, 0, 51, 0.89) 100%);
}

.gooey-primary:before{
  animation: morph 3s linear infinite;
  opacity: .21;
  animation-duration: 1.5s;
}

.gooey-primary:after{
  animation: morph 3s linear infinite;
  animation-delay: 400ms;
  opacity: .89;
  line-height: 120px;
  text-indent: -21px;
}