/*===================
GLOBAL CSS
====================*/
:root {
  --red: #FF4235;
  --pink: #E91E63;
  --purple: #9C27B0;
  --deep-purple: #673AB7;
  --indigo: #3F51B5;
  --blue: #2196F3;
  --light-blue: #03A9F4;
  --cyan: #00BCD4;
  --teal: #009688;
  --green: #4CAF50;
  --light-green: #8BC34A;
  --lime: #CDDC39;
  --yellow: #ffe821;
  --amber: #FFC107;
  --orange: #ff9000;
  --deep-orange: #FF5722;
  --brown: #795548;
  --grey: #9E9E9E;
  --blue-grey: #607D8B;
  --black: #000000;
  --white: #ffffff;
}

/*Body CSS
====================*/
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px var(--grey);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--blue-grey);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brown);
}

.btn-gradient-red {
  background-image: linear-gradient(130deg, #FF0000, #FF7800);
  /*background: linear-gradient(130deg,#FF0000,#FF0000,#FF0000,#FF9E5D,#FF0000,#FF0000,#FF0000);*/
  color: #fff;
}

.btn-gradient-yellow {
  background: linear-gradient(130deg, #ffc10794, #ffc107, #ffc107, #ffc107, #ffc107, #ffc10794, #ffc107, #ffc107, #ffc107, #ffc107);
  color: #fff;
}

.btn-gradient-blue {
  background: linear-gradient(105deg, #4285f4, #367cec, #2563c7, #1048a3, #7b2cd2, #6011a9, #7b2cd2, #1048a3, #2563c7, #367cec, #4285f4);
  color: #fff;
}

[class*=btn-gradient-]:hover {
  filter: brightness(0.9);
}

/*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 {
  color: var(--red) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col-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;
}

/* Verical 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: 100h !important;
}

/* Verical 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 in PX */

.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;
}

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

/* height in PX */
.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;
  -moz-appearance: textfield;
  margin: 0;
  resize: none;
}

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

/* Button Overwrite */
[class*=btn]:not(:disabled):not(.disabled):active:focus {
  transform: scale(1.01);
  -ms-transform: scale(1.01);
  transition: box-shadow 50ms !important;
}

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

.btn:focus,
.btn:active {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 5px 12px 0.1rem var(--secondary) !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--primary) !important;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--secondary) !important;
}

.btn-success:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--success) !important;
}

.btn-danger:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--danger) !important;
}

.btn-warning:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--warning) !important;
}

.btn-info:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--info) !important;
}

.btn-light:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--light) !important;
}

.btn-dark:not(:disabled):not(.disabled):active:focus {
  box-shadow: 0 0 12px 0.1rem var(--dark) !important;
}