/*Basic Colors*/
.color-white {
  color: #FFF !important;
}

.color-black {
  color: #000 !important;
}

.bg-white {
  background-color: #FFF !important;
}

.bg-black {
  background-color: #000 !important;
}


/* Generating Color Pack*/
.color-highlight {
  color: #4A89DC !important;
}

.bg-highlight {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-highlight {
  border-color: #4A89DC !important;
}

.gradient-highlight {
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC) !important;
  color: #FFF !important;
}

.gradient-menu {
  background-image: linear-gradient(130deg, #7ea5f6, #ff384c) !important;
}

.bg-fade2-highlight {
  background-color: !important;
  color: #FFF !important;
}

.bg-fade-highlight {
  background-color: !important;
  color: #FFF !important;
}

.color-highlight-light {
  color: #5D9CEC !important;
}

.bg-highlight-light {
  background-color: #5D9CEC !important;
  color: #FFF !important;
}

.color-highlight-dark {
  color: #4A89DC !important;
}

.color-icon-highlight {
  stroke: #4A89DC !important;
  fill: !important;
}

.bg-highlight-dark {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-highlight-light {
  border-color: #5D9CEC !important;
}

.border-highlight-dark {
  border-color: #4A89DC !important;
}

.border-fade-highlight {
  border-color: !important;
}

.focus-highlight:focus {
  border-color: #4A89DC !important;
}

.gradient-highlight {
  border: none;
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
}

.bg-fade2-green {
  background-color: rgba(140, 193, 82, 0.15) !important;
  color: #FFF !important;
}

.bg-fade-green {
  background-color: rgba(140, 193, 82, 0.3) !important;
  color: #FFF !important;
}

.color-green-light {
  color: #A0D468 !important;
}

.bg-green-light {
  background-color: #A0D468 !important;
  color: #FFF !important;
}

.color-green-dark {
  color: #8CC152 !important;
}

.color-icon-green {
  stroke: #8CC152 !important;
  fill: rgba(140, 193, 82, 0.3) !important;
}

.bg-green-dark {
  background-color: #8CC152 !important;
  color: #FFF !important;
}

.border-green-light {
  border-color: #A0D468 !important;
}

.border-green-dark {
  border-color: #8CC152 !important;
}

.border-fade-green {
  border-color: rgba(140, 193, 82, 0.3) !important;
}

.focus-green:focus {
  border-color: #8CC152 !important;
}

.gradient-green {
  border: none;
  background-image: linear-gradient(to bottom, #A0D468, #8CC152);
}

.bg-fade2-red {
  background-color: rgba(218, 68, 83, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-red {
  background-color: rgba(218, 68, 83, 0.2) !important;
  color: #FFF !important;
}

.color-red-light {
  color: #ED5565 !important;
}

.bg-red-light {
  background-color: #ED5565 !important;
  color: #FFF !important;
}

.color-red-dark {
  color: #d84558 !important;
}

.color-icon-red {
  stroke: #d84558 !important;
  fill: rgba(218, 68, 83, 0.2) !important;
}

.bg-red-dark {
  background-color: #d84558 !important;
  color: #FFF !important;
}

.border-red-light {
  border-color: #ED5565 !important;
}

.border-red-dark {
  border-color: #d84558 !important;
}

.border-fade-red {
  border-color: rgba(218, 68, 83, 0.2) !important;
}

.focus-red:focus {
  border-color: #d84558 !important;
}

.gradient-red {
  border: none;
  background-image: linear-gradient(to bottom, #ED5565, #d84558);
}

.bg-fade2-orange {
  background-color: rgba(233, 87, 63, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-orange {
  background-color: rgba(233, 87, 63, 0.3) !important;
  color: #FFF !important;
}

.color-orange-light {
  color: #FC6E51 !important;
}

.bg-orange-light {
  background-color: #FC6E51 !important;
  color: #FFF !important;
}

.color-orange-dark {
  color: #E9573F !important;
}

.color-icon-orange {
  stroke: #E9573F !important;
  fill: rgba(233, 87, 63, 0.3) !important;
}

.bg-orange-dark {
  background-color: #E9573F !important;
  color: #FFF !important;
}

.border-orange-light {
  border-color: #FC6E51 !important;
}

.border-orange-dark {
  border-color: #E9573F !important;
}

.border-fade-orange {
  border-color: rgba(233, 87, 63, 0.3) !important;
}

.focus-orange:focus {
  border-color: #E9573F !important;
}

.gradient-orange {
  border: none;
  background-image: linear-gradient(to bottom, #FC6E51, #E9573F);
}

.bg-fade2-yellow {
  background-color: rgba(246, 187, 66, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-yellow {
  background-color: rgba(246, 187, 66, 0.25) !important;
  color: #FFF !important;
}

.color-yellow-light {
  color: #FFCE54 !important;
}

.bg-yellow-light {
  background-color: #FFCE54 !important;
  color: #FFF !important;
}

.color-yellow-dark {
  color: #F6BB42 !important;
}

.color-icon-yellow {
  stroke: #F6BB42 !important;
  fill: rgba(246, 187, 66, 0.25) !important;
}

.bg-yellow-dark {
  background-color: #F6BB42 !important;
  color: #FFF !important;
}

.border-yellow-light {
  border-color: #FFCE54 !important;
}

.border-yellow-dark {
  border-color: #F6BB42 !important;
}

.border-fade-yellow {
  border-color: rgba(246, 187, 66, 0.25) !important;
}

.focus-yellow:focus {
  border-color: #F6BB42 !important;
}

.gradient-yellow {
  border: none;
  background-image: linear-gradient(to bottom, #FFCE54, #F6BB42);
}

.bg-fade2-blue {
  background-color: rgba(74, 137, 220, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-blue {
  background-color: rgba(74, 137, 220, 0.25) !important;
  color: #FFF !important;
}

.color-blue-light {
  color: #5D9CEC !important;
}

.bg-blue-light {
  background-color: #5D9CEC !important;
  color: #FFF !important;
}

.color-blue-dark {
  color: #4A89DC !important;
}

.color-icon-blue {
  stroke: #4A89DC !important;
  fill: rgba(74, 137, 220, 0.25) !important;
}

.bg-blue-dark {
  background-color: #4A89DC !important;
  color: #FFF !important;
}

.border-blue-light {
  border-color: #5D9CEC !important;
}

.border-blue-dark {
  border-color: #4A89DC !important;
}

.border-fade-blue {
  border-color: rgba(74, 137, 220, 0.25) !important;
}

.focus-blue:focus {
  border-color: #4A89DC !important;
}

.gradient-blue {
  border: none;
  background-image: linear-gradient(to bottom, #5D9CEC, #4A89DC);
}

.bg-fade2-teal {
  background-color: rgba(125, 177, 177, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-teal {
  background-color: rgba(125, 177, 177, 0.3) !important;
  color: #FFF !important;
}

.color-teal-light {
  color: #A0CECB !important;
}

.bg-teal-light {
  background-color: #A0CECB !important;
  color: #FFF !important;
}

.color-teal-dark {
  color: #7DB1B1 !important;
}

.color-icon-teal {
  stroke: #7DB1B1 !important;
  fill: rgba(125, 177, 177, 0.3) !important;
}

.bg-teal-dark {
  background-color: #7DB1B1 !important;
  color: #FFF !important;
}

.border-teal-light {
  border-color: #A0CECB !important;
}

.border-teal-dark {
  border-color: #7DB1B1 !important;
}

.border-fade-teal {
  border-color: rgba(125, 177, 177, 0.3) !important;
}

.focus-teal:focus {
  border-color: #7DB1B1 !important;
}

.gradient-teal {
  border: none;
  background-image: linear-gradient(to bottom, #A0CECB, #7DB1B1);
}

.bg-fade2-mint {
  background-color: rgba(55, 188, 155, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-mint {
  background-color: rgba(55, 188, 155, 0.3) !important;
  color: #FFF !important;
}

.color-mint-light {
  color: #48CFAD !important;
}

.bg-mint-light {
  background-color: #48CFAD !important;
  color: #FFF !important;
}

.color-mint-dark {
  color: #37BC9B !important;
}

.color-icon-mint {
  stroke: #37BC9B !important;
  fill: rgba(55, 188, 155, 0.3) !important;
}

.bg-mint-dark {
  background-color: #37BC9B !important;
  color: #FFF !important;
}

.border-mint-light {
  border-color: #48CFAD !important;
}

.border-mint-dark {
  border-color: #37BC9B !important;
}

.border-fade-mint {
  border-color: rgba(55, 188, 155, 0.3) !important;
}

.focus-mint:focus {
  border-color: #37BC9B !important;
}

.gradient-mint {
  border: none;
  background-image: linear-gradient(to bottom, #48CFAD, #37BC9B);
}

.bg-fade2-pink {
  background-color: rgba(215, 112, 173, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-pink {
  background-color: rgba(255, 89, 190, 0.3) !important;
  color: #FFF !important;
}

.color-pink-light {
  color: #ff5982 !important;
}

.bg-pink-light {
  background-color: #ff5982 !important;
  color: #FFF !important;
}

.color-pink-dark {
  color: #fb3365 !important;
}

.color-icon-pink {
  stroke: #fb3365 !important;
  fill: rgba(255, 89, 190, 0.3) !important;
}

.bg-pink-dark {
  background-color: #fb3365 !important;
  color: #FFF !important;
}

.border-pink-light {
  border-color: #ff5982 !important;
}

.border-pink-dark {
  border-color: #fb3365 !important;
}

.border-fade-pink {
  border-color: rgba(255, 89, 190, 0.3) !important;
}

.focus-pink:focus {
  border-color: #fb3365 !important;
}

.gradient-pink {
  border: none;
  background-image: linear-gradient(to bottom, #ff5982, #fb3365);
}

.bg-fade2-magenta {
  background-color: rgba(150, 122, 220, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-magenta {
  background-color: rgba(150, 122, 220, 0.3) !important;
  color: #FFF !important;
}

.color-magenta-light {
  color: #AC92EC !important;
}

.bg-magenta-light {
  background-color: #AC92EC !important;
  color: #FFF !important;
}

.color-magenta-dark {
  color: #967ADC !important;
}

.color-icon-magenta {
  stroke: #967ADC !important;
  fill: rgba(150, 122, 220, 0.3) !important;
}

.bg-magenta-dark {
  background-color: #967ADC !important;
  color: #FFF !important;
}

.border-magenta-light {
  border-color: #AC92EC !important;
}

.border-magenta-dark {
  border-color: #967ADC !important;
}

.border-fade-magenta {
  border-color: rgba(150, 122, 220, 0.3) !important;
}

.focus-magenta:focus {
  border-color: #967ADC !important;
}

.gradient-magenta {
  border: none;
  background-image: linear-gradient(to bottom, #AC92EC, #967ADC);
}

.bg-fade2-brown {
  background-color: rgba(170, 142, 105, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-brown {
  background-color: rgba(170, 142, 105, 0.25) !important;
  color: #FFF !important;
}

.color-brown-light {
  color: #BAA286 !important;
}

.bg-brown-light {
  background-color: #BAA286 !important;
  color: #FFF !important;
}

.color-brown-dark {
  color: #AA8E69 !important;
}

.color-icon-brown {
  stroke: #AA8E69 !important;
  fill: rgba(170, 142, 105, 0.25) !important;
}

.bg-brown-dark {
  background-color: #AA8E69 !important;
  color: #FFF !important;
}

.border-brown-light {
  border-color: #BAA286 !important;
}

.border-brown-dark {
  border-color: #AA8E69 !important;
}

.border-fade-brown {
  border-color: rgba(170, 142, 105, 0.25) !important;
}

.focus-brown:focus {
  border-color: #AA8E69 !important;
}

.gradient-brown {
  border: none;
  background-image: linear-gradient(to bottom, #BAA286, #AA8E69);
}

.bg-fade2-gray {
  background-color: rgba(170, 178, 189, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-gray {
  background-color: rgba(170, 178, 189, 0.4) !important;
  color: #FFF !important;
}

.color-gray-light {
  color: #e2e5ea !important;
}

.bg-gray-light {
  background-color: #e2e5ea !important;
  color: #FFF !important;
}

.color-gray-dark {
  color: #AAB2BD !important;
}

.color-icon-gray {
  stroke: #AAB2BD !important;
  fill: rgba(170, 178, 189, 0.4) !important;
}

.bg-gray-dark {
  background-color: #AAB2BD !important;
  color: #FFF !important;
}

.border-gray-light {
  border-color: #e2e5ea !important;
}

.border-gray-dark {
  border-color: #AAB2BD !important;
}

.border-fade-gray {
  border-color: rgba(170, 178, 189, 0.4) !important;
}

.focus-gray:focus {
  border-color: #AAB2BD !important;
}

.gradient-gray {
  border: none;
  background-image: linear-gradient(to bottom, #e2e5ea, #AAB2BD);
}

.bg-fade2-night {
  background-color: rgba(67, 74, 84, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-night {
  background-color: rgba(67, 74, 84, 0.3) !important;
  color: #FFF !important;
}

.color-night-light {
  color: #222529 !important;
}

.bg-night-light {
  background-color: #222529 !important;
  color: #FFF !important;
}

.color-night-dark {
  color: #16181c !important;
}

.color-icon-night {
  stroke: #16181c !important;
  fill: rgba(67, 74, 84, 0.3) !important;
}

.bg-night-dark {
  background-color: #16181c !important;
  color: #FFF !important;
}

.border-night-light {
  border-color: #222529 !important;
}

.border-night-dark {
  border-color: #16181c !important;
}

.border-fade-night {
  border-color: rgba(67, 74, 84, 0.3) !important;
}

.focus-night:focus {
  border-color: #16181c !important;
}

.gradient-night {
  border: none;
  background-image: linear-gradient(to bottom, #222529, #16181c);
}

.bg-fade2-dark {
  background-color: rgba(67, 74, 84, 0.2) !important;
  color: #FFF !important;
}

.bg-fade-dark {
  background-color: rgba(67, 74, 84, 0.4) !important;
  color: #FFF !important;
}

.color-dark-light {
  color: #656D78 !important;
}

.bg-dark-light {
  background-color: #656D78 !important;
  color: #FFF !important;
}

.color-dark-dark {
  color: #434A54 !important;
}

.color-icon-dark {
  stroke: #434A54 !important;
  fill: rgba(67, 74, 84, 0.4) !important;
}

.bg-dark-dark {
  background-color: #434A54 !important;
  color: #FFF !important;
}

.border-dark-light {
  border-color: #656D78 !important;
}

.border-dark-dark {
  border-color: #434A54 !important;
}

.border-fade-dark {
  border-color: rgba(67, 74, 84, 0.4) !important;
}

.focus-dark:focus {
  border-color: #434A54 !important;
}

.gradient-dark {
  border: none;
  background-image: linear-gradient(to bottom, #656D78, #434A54);
}

/*Social Colors*/
.color-facebook {
  color: #3b5998 !important;
}

.bg-facebook {
  background-color: #3b5998 !important;
  color: #FFF;
}

.color-linkedin {
  color: #0077B5 !important;
}

.bg-linkedin {
  background-color: #0077B5 !important;
  color: #FFF;
}

.color-twitter {
  color: #4099ff !important;
}

.bg-twitter {
  background-color: #4099ff !important;
  color: #FFF;
}

.color-google {
  color: #d34836 !important;
}

.bg-google {
  background-color: #d34836 !important;
  color: #FFF;
}

.color-whatsapp {
  color: #34AF23 !important;
}

.bg-whatsapp {
  background-color: #34AF23 !important;
  color: #FFF;
}

.color-pinterest {
  color: #C92228 !important;
}

.bg-pinterest {
  background-color: #C92228 !important;
  color: #FFF;
}

.color-mail {
  color: #3498db !important;
}

.bg-mail {
  background-color: #3498db !important;
  color: #FFF;
}

.color-phone {
  color: #27ae60 !important;
}

.bg-phone {
  background-color: #27ae60 !important;
  color: #FFF;
}

.color-instagram {
  color: #e1306c !important;
}

.bg-instagram {
  background-color: #e1306c !important;
  color: #FFF;
}

/*Default Colors*/
.color-white {
  color: #FFF !important;
}

.color-black {
  color: #000 !important;
}

.bg-white {
  background-color: #FFF !important;
}

.bg-black {
  background-color: #000 !important;
}

.border-transparent {
  border-color: transparent !important;
}

/*Rounded Borders*/
.rounded-0 {
  border-radius: 0px !important;
}

.rounded-xxs {
  border-radius: 5px !important;
}

.rounded-xs {
  border-radius: 10px !important;
}

.rounded-s {
  border-radius: 15px !important;
}

.rounded-m {
  border-radius: 20px !important;
}

.rounded-l {
  border-radius: 25px !important;
}

.rounded-xl {
  border-radius: 30px !important;
}

.rounded-xxl {
  border-radius: 35px !important;
}

.rounded-top {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.rounded-bottom {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

/*Shadows*/
.shadow-0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

.shadow-xxs {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.03) !important;
}

.shadow-xs {
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04) !important;
}

.shadow-s {
  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.06) !important;
}

.shadow-m {
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08) !important;
}

.shadow-l {
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.12) !important;
}

.shadow-xl {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.18) !important;
}

.shadow-xxl {
  box-shadow: 0 14px 15px 0 rgba(0, 0, 0, 0.18) !important;
}

/*Borders*/
.border-xxs {
  border-width: 1px !important;
}

.border-xs {
  border-width: 2px !important;
}

.border-s {
  border-width: 3px !important;
}

.border-m {
  border-width: 4px !important;
}

.border-l {
  border-width: 5px !important;
}

.border-xl {
  border-width: 6px !important;
}

.border-xxl {
  border-width: 7px !important;
}

/*Line Height Control*/
.line-height-xxs {
  line-height: 12px !important;
}

.line-height-xs {
  line-height: 14px !important;
}

.line-height-s {
  line-height: 18px !important;
}

.line-height-m {
  line-height: 24px !important;
}

.line-height-l {
  line-height: 26px !important;
}

.line-height-xl {
  line-height: 32px !important;
}

.line-height-xxl {
  line-height: 46px !important;
}

/*Text Shadow*/
.text-shadow-s {
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}

.text-shadow-l {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

/*Boxed Text*/
.boxed-text-xl, .boxed-text-l, .boxed-text-m, .boxed-text-s {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.boxed-text-xl {
  width: 90%;
  max-width: 340px;
}

.boxed-text-l {
  width: 85%;
  max-width: 300px;
}

.boxed-text-m {
  width: 80%;
  max-width: 300px;
}

.boxed-text-s {
  width: 70%;
  max-width: 260px;
}

/*Font Weights*/
.font-200 {
  font-weight: 200 !important;
}

.font-300 {
  font-weight: 300 !important;
}

.font-400 {
  font-weight: 400 !important;
}

.font-500 {
  font-weight: 500 !important;
}

.font-600 {
  font-weight: 600 !important;
}

.font-700 {
  font-weight: 700 !important;
}

.font-800 {
  font-weight: 800 !important;
}

.font-900 {
  font-weight: 900 !important;
}

/*Opacity Values - Used for Contrasting Text, example opacity-30 will make the opacity 0.3*/
.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-20 {
  opacity: 0.2 !important;
}

.opacity-30 {
  opacity: 0.3 !important;
}

.opacity-40 {
  opacity: 0.4 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.opacity-70 {
  opacity: 0.7 !important;
}

.opacity-80 {
  opacity: 0.8 !important;
}

.opacity-85 {
  opacity: 0.85 !important;
}

.opacity-90 {
  opacity: 0.9 !important;
}

/*Font Array - Better Typography Control, example font-30 class will make the font size 30px*/
.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;
}

.disabled {
  display: none !important;
}

.no-click {
  pointer-events: none !important;
}

.no-outline {
  outline: none !important;
}

.notch-clear {
  padding-top: calc(0px + (constant(safe-area-inset-top))*0.8) !important;
  padding-top: calc(0px + (env(safe-area-inset-top))*0.8) !important;
}

.notch-push {
  transform: translateY(-150%) !important;
  top: calc(0px + (constant(safe-area-inset-top))*0.8) !important;
  top: calc(0px + (env(safe-area-inset-top))*0.8) !important;
}

.rounded-end {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.rounded-start {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.icon {
  line-height: 0px;
  display: inline-block;
  text-align: center;
  transition: all 120ms ease;
}

.icon:hover {
  opacity: 0.9;
}

.icon:not(.icon-border):active {
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5) !important;
}

.icon {
  font-family: "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 12px;
  font-size: 14px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  transform: translateY(2px);
}

.icon .badge {
  position: absolute;
  font-size: 11px;
  text-align: center;
  padding: 3px 4px 2px 5px;
  font-style: normal;
  margin-top: -3px;
}

.icon-xxs {
  font-size: 12px;
  height: 34px;
  line-height: 34px;
  width: 34px;
  transform: translateY(0px);
}

.icon-xs {
  font-size: 11px;
  height: 38px;
  line-height: 38px;
  width: 38px;
  transform: translateY(0px);
}

.icon-s {
  font-size: 11px;
  height: 42px;
  line-height: 42px;
  width: 42px;
  transform: translateY(0px);
}

.icon-m {
  font-size: 14px;
  height: 45px;
  line-height: 45px;
  width: 45px;
  transform: translateY(2px);
}

.icon-l {
  font-size: 16px;
  height: 49px;
  line-height: 49px;
  width: 49px;
  transform: translateY(2px);
}

.icon-xl {
  font-size: 16px;
  height: 51px;
  line-height: 51px;
  width: 51px;
  transform: translateY(2px);
}

.icon-xxl {
  font-size: 17px;
  height: 65px;
  line-height: 65px;
  width: 65px;
  transform: translateY(2px);
}

/*Buttons*/
.btn {
  color: #FFF;
  display: inline-block;
  transition: all 120ms ease;
}

.btn:hover {
  opacity: 0.9;
  color: #FFF;
}

.btn:focus {
  box-shadow: none !important;
}

.btn:not(.btn-border):active {
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5) !important;
}

.btn {
  font-family: "Source Sans Pro", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 12px;
  font-size: 13px;
  padding: 14px 20px;
  box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.1);
}

.btn-3d {
  border-bottom-width: 4px !important;
  border-left: none;
  border-right: none;
  border-top: none;
}

.btn-3d:hover {
  opacity: 1 !important;
  border-bottom: solid 0px rgba(255, 255, 255, 0) !important;
}

.btn-3d:active {
  opacity: 1 !important;
  border-bottom: solid 0px rgba(255, 255, 255, 0) !important;
}

.btn-xxs {
  font-size: 11px;
  padding: 8px 13px;
}

.btn-xs {
  font-size: 12px;
  padding: 9px 14px;
}

.btn-s {
  font-size: 12px;
  padding: 12px 18px;
}

.btn-m {
  font-size: 13px;
  padding: 13px 20px;
}

.btn-l {
  font-size: 14px;
  padding: 13px 22px;
}

.btn-xl {
  font-size: 15px;
  padding: 14px 24px;
}

.btn-xxl {
  font-size: 15px;
  padding: 15px 28px;
}

.btn-full {
  display: block;
}

.btn .badge {
  font-size: 9px;
  margin-left: 10px;
  padding: 3px 5px;
  border-radius: 5px;
}

.btn .badge-border {
  border: solid 1px #FFF;
  color: #FFF;
}

.btn .badge-shadow {
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3) !important;
  color: #FFF;
}

.btn-danger {
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-warning {
	color: #fff;
	background-color: #ddf015;
	border-color: #ddf015;
}

.btn-success {
	color: #fff;
	background-color: #35dc38;
	border-color: #35dc38;
}

.btn-primary {
	color: #fff;
	background-color: #353ddc;
	border-color: #353ddc;
}

/*Notifications*/
.notification-bar {
  opacity: 1 !important;
  position: fixed;
  top: calc(0px + (env(safe-area-inset-top)) * 1.1);
  left: 0px;
  right: 0px;
  transform: translateY(-120%);
  transition: all 250ms ease;
  z-index: 100 !important;
}

.notification-bar .toast-header {
  background-color: transparent !important;
}

.notification-bar.detached {
  left: 10px;
  right: 10px;
  top: calc(10px + (env(safe-area-inset-top)) * 1.1);
}

.notification-bar {
  overflow: hidden;
}

.notification-bar.show {
  transform: translateY(0%);
}

.pagination {
  display: flex;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: #0a58ca;
  background-color: #e9ecef;
  border-color: #dee2e6;
}
.page-link:focus {
  z-index: 3;
  color: #0a58ca;
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

.page-link {
  padding: 0.375rem 0.75rem;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
}
.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}
.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}
.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}
.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}