/*===================
GLOBAL CSS
====================*/
:root {
  --red: #ef4444;
  --pink: #ec4899;
  --purple: #a855f7;
  --deep-purple: #7c3aed;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --light-blue: #0ea5e9;
  --cyan: #06b6d4;
  --teal: #14b8a6;
  --green: #22c55e;
  --light-green: #84cc16;
  --lime: #a3e635;
  --yellow: #facc15;
  --amber: #f59e0b;
  --orange: #f97316;
  --deep-orange: #ea580c;
  --brown: #92400e;
  --grey: #9ca3af;
  --blue-grey: #64748b;

  --black: #0f172a; 
  --dark: #1e293b; 
  --dark-light: #334155; 
  --grey-light: #e5e7eb; 
  --white: #ffffff;
}

/*Body CSS
====================*/

/* Scrollbar Base */
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-radius: 10px;
  box-shadow: inset 0 0 4px rgba(var(--bs-primary-rgb), 0.2);
}

/* Scrollbar Thumb */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bs-primary), var(--bs-primary-hover));
  border-radius: 10px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* On Hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--bs-primary-hover), var(--bs-primary));
  box-shadow: 0 0 4px rgba(var(--bs-primary-rgb), 0.4);
}
/* 
body{
  background: linear-gradient(rgba(var(--bs-body-bg-rgb), 0.7), rgba(var(--bs-body-bg-rgb), 0.7)), url(https://img.freepik.com/free-vector/abstract-shiny-lines-white-gray-minimal-background-design_84443-2787.jpg?semt=ais_hybrid&w=740&q=80);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
} */
/*BACKGROUND Colors
=============*/
.bg-red {
  background-color: var(--red) !important;
  color: #fff;
}

.bg-pink {
  background-color: var(--pink) !important;
  color: #fff;
}

.bg-purple {
  background-color: var(--purple) !important;
  color: #fff;
}

.bg-deep-purple {
  background-color: var(--deep-purple) !important;
  color: #fff;
}

.bg-indigo {
  background-color: var(--indigo) !important;
  color: #fff;
}

.bg-blue {
  background-color: var(--blue) !important;
  color: #fff;
}

.bg-light-blue {
  background-color: var(--light-blue) !important;
  color: #fff;
}

.bg-cyan {
  background-color: var(--cyan) !important;
  color: #fff;
}

.bg-teal {
  background-color: var(--teal) !important;
  color: #fff;
}

.bg-green {
  background-color: var(--green) !important;
  color: #fff;
}

.bg-light-green {
  background-color: var(--light-green) !important;
  color: #fff;
}

.bg-lime {
  background-color: var(--lime) !important;
  color: #fff;
}

.bg-yellow {
  background-color: var(--yellow) !important;
  color: #fff;
}

.bg-amber {
  background-color: var(--amber) !important;
  color: #fff;
}

.bg-orange {
  background-color: var(--orange) !important;
  color: #fff;
}

.bg-deep-orange {
  background-color: var(--deep-orange) !important;
  color: #fff;
}

.bg-brown {
  background-color: var(--brown) !important;
  color: #fff;
}

.bg-grey {
  background-color: var(--grey) !important;
  color: #fff;
}

.bg-blue-grey {
  background-color: var(--blue-grey) !important;
  color: #fff;
}

.bg-black {
  background-color: var(--black) !important;
  color: #fff;
}

.bg-white {
  background-color: var(--white) !important;
  color: #000;
}

/*COLORS
=============*/
.col-red, .text-red {
  color: var(--red) !important;
}

.col-pink, .text-pink {
  color: var(--pink) !important;
}

.col-purple, .text-purple {
  color: var(--purple) !important;
}

.col-deep-purple, .text-deep-purple {
  color: var(--deep-purple) !important;
}

.col-indigo, .text-indigo {
  color: var(--indigo) !important;
}

.col-blue, .text-blue {
  color: var(--blue) !important;
}

.col-light-blue, .text-light-blue {
  color: var(--light-blue) !important;
}

.col-cyan, .text-cyan {
  color: var(--cyan) !important;
}

.col-teal, .text-teal {
  color: var(--teal) !important;
}

.col-green, .text-green {
  color: var(--green) !important;
}

.col-light-green, .text-light-green {
  color: var(--light-green) !important;
}

.col-lime, .text-lime {
  color: var(--lime) !important;
}

.col-yellow, .text-yellow {
  color: var(--yellow) !important;
}

.col-amber, .text-amber {
  color: var(--amber) !important;
}

.col-orange, .text-orange {
  color: var(--orange) !important;
}

.col-deep-orange, .text-deep-orange {
  color: var(--deep-orange) !important;
}

.col-brown, .text-brown {
  color: var(--brown) !important;
}

.col-grey, .text-grey {
  color: var(--grey) !important;
}

.col-blue-grey, .text-blue-grey {
  color: var(--blue-grey) !important;
}

.col-black, .text-black {
  color: var(--black) !important;
}

.col-white, .text-white {
  color: var(--white) !important;
}

/*BOX SHADOW
=============*/
.shadow-sm-red {
  box-shadow: 0 .125rem .25rem rgba(255, 66, 53, .075) !important;
}

.shadow-sm-pink {
  box-shadow: 0 .125rem .25rem rgba(233, 30, 99, .075) !important;
}

.shadow-sm-purple {
  box-shadow: 0 .125rem .25rem rgba(156, 39, 176, .075) !important;
}

.shadow-sm-deep-purple {
  box-shadow: 0 .125rem .25rem rgba(103, 58, 183, .075) !important;
}

.shadow-sm-indigo {
  box-shadow: 0 .125rem .25rem rgba(63, 81, 181, .075) !important;
}

.shadow-sm-blue {
  box-shadow: 0 .125rem .25rem rgba(33, 150, 243, .075) !important;
}

.shadow-sm-light-blue {
  box-shadow: 0 .125rem .25rem rgba(3, 169, 244, .075) !important;
}

.shadow-sm-cyan {
  box-shadow: 0 .125rem .25rem rgba(0, 188, 212, .075) !important;
}

.shadow-sm-teal {
  box-shadow: 0 .125rem .25rem rgba(0, 150, 136, .075) !important;
}

.shadow-sm-green {
  box-shadow: 0 .125rem .25rem rgba(76, 175, 80, .075) !important;
}

.shadow-sm-light-green {
  box-shadow: 0 .125rem .25rem rgba(139, 195, 74, .075) !important;
}

.shadow-sm-lime {
  box-shadow: 0 .125rem .25rem rgba(205, 220, 57, .075) !important;
}

.shadow-sm-yellow {
  box-shadow: 0 .125rem .25rem rgba(255, 232, 33, .075) !important;
}

.shadow-sm-amber {
  box-shadow: 0 .125rem .25rem rgba(255, 193, 7, .075) !important;
}

.shadow-sm-orange {
  box-shadow: 0 .125rem .25rem rgba(255, 144, 0, .075) !important;
}

.shadow-sm-deep-orange {
  box-shadow: 0 .125rem .25rem rgba(255, 87, 34, .075) !important;
}

.shadow-sm-brown {
  box-shadow: 0 .125rem .25rem rgba(121, 85, 72, .075) !important;
}

.shadow-sm-grey {
  box-shadow: 0 .125rem .25rem rgba(158, 158, 158, .075) !important;
}

.shadow-sm-blue-grey {
  box-shadow: 0 .125rem .25rem rgba(96, 125, 139, .075) !important;
}

.shadow-sm-black {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.shadow-sm-white {
  box-shadow: 0 .125rem .25rem rgba(255, 255, 255, .075) !important;
}

.shadow-red {
  box-shadow: 0 .5rem 1rem rgba(255, 66, 53, .15) !important;
}

.shadow-pink {
  box-shadow: 0 .5rem 1rem rgba(233, 30, 99, .15) !important;
}

.shadow-purple {
  box-shadow: 0 .5rem 1rem rgba(156, 39, 176, .15) !important;
}

.shadow-deep-purple {
  box-shadow: 0 .5rem 1rem rgba(103, 58, 183, .15) !important;
}

.shadow-indigo {
  box-shadow: 0 .5rem 1rem rgba(63, 81, 181, .15) !important;
}

.shadow-blue {
  box-shadow: 0 .5rem 1rem rgba(33, 150, 243, .15) !important;
}

.shadow-light-blue {
  box-shadow: 0 .5rem 1rem rgba(3, 169, 244, .15) !important;
}

.shadow-cyan {
  box-shadow: 0 .5rem 1rem rgba(0, 188, 212, .15) !important;
}

.shadow-teal {
  box-shadow: 0 .5rem 1rem rgba(0, 150, 136, .15) !important;
}

.shadow-green {
  box-shadow: 0 .5rem 1rem rgba(76, 175, 80, .15) !important;
}

.shadow-light-green {
  box-shadow: 0 .5rem 1rem rgba(139, 195, 74, .15) !important;
}

.shadow-lime {
  box-shadow: 0 .5rem 1rem rgba(205, 220, 57, .15) !important;
}

.shadow-yellow {
  box-shadow: 0 .5rem 1rem rgba(255, 232, 33, .15) !important;
}

.shadow-amber {
  box-shadow: 0 .5rem 1rem rgba(255, 193, 7, .15) !important;
}

.shadow-orange {
  box-shadow: 0 .5rem 1rem rgba(255, 144, 0, .15) !important;
}

.shadow-deep-orange {
  box-shadow: 0 .5rem 1rem rgba(255, 87, 34, .15) !important;
}

.shadow-brown {
  box-shadow: 0 .5rem 1rem rgba(121, 85, 72, .15) !important;
}

.shadow-grey {
  box-shadow: 0 .5rem 1rem rgba(158, 158, 158, .15) !important;
}

.shadow-blue-grey {
  box-shadow: 0 .5rem 1rem rgba(96, 125, 139, .15) !important;
}

.shadow-black {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}

.shadow-white {
  box-shadow: 0 .5rem 1rem rgba(255, 255, 255, .15) !important;
}

.shadow-lg-red {
  box-shadow: 0 1rem 3rem rgba(255, 66, 53, .175) !important;
}

.shadow-lg-pink {
  box-shadow: 0 1rem 3rem rgba(233, 30, 99, .175) !important;
}

.shadow-lg-purple {
  box-shadow: 0 1rem 3rem rgba(156, 39, 176, .175) !important;
}

.shadow-lg-deep-purple {
  box-shadow: 0 1rem 3rem rgba(103, 58, 183, .175) !important;
}

.shadow-lg-indigo {
  box-shadow: 0 1rem 3rem rgba(63, 81, 181, .175) !important;
}

.shadow-lg-blue {
  box-shadow: 0 1rem 3rem rgba(33, 150, 243, .175) !important;
}

.shadow-lg-light-blue {
  box-shadow: 0 1rem 3rem rgba(3, 169, 244, .175) !important;
}

.shadow-lg-cyan {
  box-shadow: 0 1rem 3rem rgba(0, 188, 212, .175) !important;
}

.shadow-lg-teal {
  box-shadow: 0 1rem 3rem rgba(0, 150, 136, .175) !important;
}

.shadow-lg-green {
  box-shadow: 0 1rem 3rem rgba(76, 175, 80, .175) !important;
}

.shadow-lg-light-green {
  box-shadow: 0 1rem 3rem rgba(139, 195, 74, .175) !important;
}

.shadow-lg-lime {
  box-shadow: 0 1rem 3rem rgba(205, 220, 57, .175) !important;
}

.shadow-lg-yellow {
  box-shadow: 0 1rem 3rem rgba(255, 232, 33, .175) !important;
}

.shadow-lg-amber {
  box-shadow: 0 1rem 3rem rgba(255, 193, 7, .175) !important;
}

.shadow-lg-orange {
  box-shadow: 0 1rem 3rem rgba(255, 144, 0, .175) !important;
}

.shadow-lg-deep-orange {
  box-shadow: 0 1rem 3rem rgba(255, 87, 34, .175) !important;
}

.shadow-lg-brown {
  box-shadow: 0 1rem 3rem rgba(121, 85, 72, .175) !important;
}

.shadow-lg-grey {
  box-shadow: 0 1rem 3rem rgba(158, 158, 158, .175) !important;
}

.shadow-lg-blue-grey {
  box-shadow: 0 1rem 3rem rgba(96, 125, 139, .175) !important;
}

.shadow-lg-black {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
}

.shadow-lg-white {
  box-shadow: 0 1rem 3rem rgba(255, 255, 255, .175) !important;
}


/*TEXT SHADOW 
===========*/
.text-shadow-sm {
  text-shadow: 0 1px 2px rgb(0 0 0 / 39%) !important;
}

.text-shadow {
  text-shadow: 0 2px 4px rgb(0 0 0 / 39%) !important;
}

.text-shadow-lg {
  text-shadow: 0 3px 6px rgb(0 0 0 / 45%) !important;
}

/*FONT SIZE 
===========*/
.font-6 {
  font-size: 6px !important;
}

.font-7 {
  font-size: 7px !important;
}

.font-8 {
  font-size: 8px !important;
}

.font-9 {
  font-size: 9px !important;
}

.font-10 {
  font-size: 10px !important;
}

.font-11 {
  font-size: 11px !important;
}

.font-12 {
  font-size: 12px !important;
}

.font-13 {
  font-size: 13px !important;
}

.font-14 {
  font-size: 14px !important;
}

.font-15 {
  font-size: 15px !important;
}

.font-16 {
  font-size: 16px !important;
}

.font-17 {
  font-size: 17px !important;
}

.font-18 {
  font-size: 18px !important;
}

.font-19 {
  font-size: 19px !important;
}

.font-20 {
  font-size: 20px !important;
}

.font-21 {
  font-size: 21px !important;
}

.font-22 {
  font-size: 22px !important;
}

.font-23 {
  font-size: 23px !important;
}

.font-24 {
  font-size: 24px !important;
}

.font-25 {
  font-size: 25px !important;
}

.font-26 {
  font-size: 26px !important;
}

.font-27 {
  font-size: 27px !important;
}

.font-28 {
  font-size: 28px !important;
}

.font-29 {
  font-size: 29px !important;
}

.font-30 {
  font-size: 30px !important;
}

.font-31 {
  font-size: 31px !important;
}

.font-32 {
  font-size: 32px !important;
}

.font-33 {
  font-size: 33px !important;
}

.font-34 {
  font-size: 34px !important;
}

.font-35 {
  font-size: 35px !important;
}

.font-36 {
  font-size: 36px !important;
}

.font-37 {
  font-size: 37px !important;
}

.font-38 {
  font-size: 38px !important;
}

.font-39 {
  font-size: 39px !important;
}

.font-40 {
  font-size: 40px !important;
}

.font-41 {
  font-size: 41px !important;
}

.font-42 {
  font-size: 42px !important;
}

.font-43 {
  font-size: 43px !important;
}

.font-44 {
  font-size: 44px !important;
}

.font-45 {
  font-size: 45px !important;
}

.font-46 {
  font-size: 46px !important;
}

.font-47 {
  font-size: 47px !important;
}

.font-48 {
  font-size: 48px !important;
}

.font-49 {
  font-size: 49px !important;
}

.font-50 {
  font-size: 50px !important;
}

.font-60 {
  font-size: 60px !important;
}

.font-70 {
  font-size: 70px !important;
}

.font-80 {
  font-size: 80px !important;
}

.font-90 {
  font-size: 90px !important;
}

.font-100 {
  font-size: 100px !important;
}

/* Vertical Height  */
.vh-10 {
  height: 10vh !important;
}

.vh-20 {
  height: 20vh !important;
}

.vh-30 {
  height: 30vh !important;
}

.vh-40 {
  height: 40vh !important;
}

.vh-50 {
  height: 50vh !important;
}

.vh-60 {
  height: 60vh !important;
}

.vh-70 {
  height: 70vh !important;
}

.vh-80 {
  height: 80vh !important;
}

.vh-90 {
  height: 90vh !important;
}

.vh-100 {
  height: 100vh !important;
}

/* Vertical Width  */
.vw-10 {
  width: 10vw !important;
}

.vw-20 {
  width: 20vw !important;
}

.vw-30 {
  width: 30vw !important;
}

.vw-40 {
  width: 40vw !important;
}

.vw-50 {
  width: 50vw !important;
}

.vw-60 {
  width: 60vw !important;
}

.vw-70 {
  width: 70vw !important;
}

.vw-80 {
  width: 80vw !important;
}

.vw-90 {
  width: 90vw !important;
}

.vw-100 {
  width: 100vw !important;
}

/* width/height */
.wpx-10 {
  width: 10px !important;
}
.wpx-20 {
  width: 20px !important;
}
.wpx-30 {
  width: 30px !important;
}
.wpx-40 {
  width: 40px !important;
}
.wpx-50 {
  width: 50px !important;
}
.wpx-60 {
  width: 60px !important;
}

.wpx-70 {
  width: 70px !important;
}

.wpx-80 {
  width: 80px !important;
}

.wpx-90 {
  width: 90px !important;
}

.wpx-100 {
  width: 100px !important;
}

.wpx-120 {
  width: 120px !important;
}

.wpx-150 {
  width: 150px !important;
}

.wpx-160 {
  width: 160px !important;
}

.wpx-170 {
  width: 170px !important;
}

.wpx-180 {
  width: 180px !important;
}

.wpx-190 {
  width: 190px !important;
}

.wpx-200 {
  width: 200px !important;
}

.wpx-220 {
  width: 220px !important;
}

.wpx-250 {
  width: 250px !important;
}

.wpx-280 {
  width: 280px !important;
}

.wpx-320 {
  width: 320px !important;
}

/* Height */
.hpx-10 {
  height: 10px !important;
}
.hpx-20 {
  height: 20px !important;
}
.hpx-30 {
  height: 30px !important;
}
.hpx-40 {
  height: 40px !important;
}
.hpx-50 {
  height: 50px !important;
}
.hpx-60 {
  height: 60px !important;
}

.hpx-70 {
  height: 70px !important;
}

.hpx-80 {
  height: 80px !important;
}

.hpx-90 {
  height: 90px !important;
}

.hpx-100 {
  height: 100px !important;
}

.hpx-120 {
  height: 120px !important;
}

.hpx-150 {
  height: 150px !important;
}

.hpx-160 {
  height: 160px !important;
}

.hpx-170 {
  height: 170px !important;
}

.hpx-180 {
  height: 180px !important;
}

.hpx-190 {
  height: 190px !important;
}

.hpx-200 {
  height: 200px !important;
}

.hpx-220 {
  height: 220px !important;
}

.hpx-250 {
  height: 250px !important;
}

.hpx-280 {
  height: 280px !important;
}

.hpx-320 {
  height: 320px !important;
}

/*===================
BOOTSTRAP Overwrite
====================*/

/*Remove input type NUMBER Arrows/Spinners...*/
.arrow-none::-webkit-outer-spin-button,
.arrow-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: textfield;
  margin: 0;
  resize: none;
}
select.arrow-none {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: '';
  background: #ffffff none;
}

/*Remove text area resize icon... */
.resize-none {
  resize: none;
}

/* Button Overwrite */
[class*=btn]:not(:disabled):not(.disabled):active:focus {
  transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn:not(:disabled):not([class*="btn-outline-"]) {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.btn:not(:disabled):hover {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.btn:not(:disabled):active{
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.swal-button:focus,
.swal-button:active {
  box-shadow: 0 0 12px 0.1rem var(--primary) !important;
}