/*===================
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 1px var(--grey);  */
  border-radius: 0px;
  background: #00000024;
}
::-webkit-scrollbar-thumb {
  background: var(--blue-grey); 
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2f3d44; 
}

.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/height */
.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;
}
.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-180{
  height: 180px !important;
}
.hpx-200{
  height: 200px !important;
}
.hpx-220{
  height: 220px !important;
}

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

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

/*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;
}

/*===================
BOOTSTRAP 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;
}


/*===================
/*RESPONSIVE CSS
====================*/

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

/*X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {

}