/* Global HTML */

body {
  font-family: 'Hind' !important;
}

a:focus {
  outline: none;
}

a:hover {
  color: #880000;
  text-decoration: none !important;
}

nav {
  font-size: large !important;
  font-stretch: expanded !important;
}

/* Extending Bootstrap */

/* Navbar */

.nav-link:hover {
  color: #FF0000 !important;
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

/* Carousel */

.carousel-indicators > :not(button.active) {
  background-color: #4A4D4E;
}

.carousel-indicators > button.active {
  background-color: #FF0000;
}

/* Alert */

.alert > div {
  font-weight: bold !important;
  font-size: large !important;
  font-stretch: expanded !important;
}

/* List group */

.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: #eeeeee !important;
  border: 1px solid #FF0000 !important;
}

.list-group-item-action.active {
  border: 1px solid #FF0000;
  background-color: #FF0000 !important;
}

/* Pagination */

.page-link {
  font-family: 'Hind' !important;
  color: #FF0000;
}

.page-link:hover, .page-link:focus {
  color: #880000;
}

.page-item.active .page-link {
  background-color: #FF0000;
  border-color: #FF0000;
}

/* Extending Select2 Bootstrap 5 */

.select2-selection--single {
  height: calc(3.5rem + 2px) !important;
}

.select2-selection__rendered {
  margin-top: 18px !important;
}

/* Custom CSS */

.heading-underline {
  height: 0.2rem;
  width: 5rem;
  background-image: linear-gradient(to right, transparent, #FF0000);
}

/* Backgrounds */

.bg-light-grey {
  background-color: #eeeeee;
}

.bg-dark-grey {
  background-color: #4A4D4E;
}

.bg-red {
  background-color: #FF0000;
}

/* Texts */

.text-red {
  color: #FF0000;
}

.text-dark-grey {
  color: #4A4d4e;
}

/* Buttons */

.btn-red {
  color: #fff;
  background-color: #FF0000;
  border-color: #FF0000;
}

.btn-red:hover {
  color: #fff;
  background-color: #880000;
  border-color: #880000;
}

.btn-red:focus, .btn-red.focus {
  color: #fff;
  background-color: #880000;
  border-color: #880000;
  box-shadow: 0 0 0 0.2rem rgba(136, 0, 0, 0.5);
}

.btn-red:not(:disabled):not(.disabled):active, .btn-red:not(:disabled):not(.disabled).active, .show > .btn-red.dropdown-toggle {
  color: #fff;
  background-color: #880000;
  border-color: #d60000;
}

.btn-red:not(:disabled):not(.disabled):active:focus, .btn-red:not(:disabled):not(.disabled).active:focus, .show > .btn-red.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(136, 0, 0, 0.5);
}

.btn-above-nav {
  color: #fff !important;
  text-decoration: none;
}

.btn-above-nav:hover {
  color: #FF0000 !important;
  text-decoration: none !important;
}

/* Miscellaneous */

.required-field:after {
  content: " *";
  color: red;
}

.description {
  line-height: 1.6;
}

/* Images */

.sidebar-img {
  width: 100%;
  height: 10em;
}

.service-img {
  max-height: 10rem;
}

.download-card-img {
  height: 100%;
  max-width: 5rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.hq-card-img {
  height: 10rem;
}

.venture-img {
  height: 15rem;
  width: 90%;
}

/* Card */

.plan-card {
  transition: 0.3s;
  min-width: 18rem;
}

.plan-card:hover {
  transform: scale(0.95);
}

.plan-card-img {
  height: 10rem;
}

.download-card {
  box-shadow: 3px 3px 2px #808080 !important;
  min-width: 18rem;
  max-width: 20rem;
  min-height: 100%;
}

.regional-office-card {
  min-width: 20rem;
  max-width: 25rem;
}

.about-card {
  min-width: 20rem;
  max-width: 25rem;
  min-height: 11rem;
  max-height: 11rem;
}

.active-plan-card {
  min-width: 18rem;
  max-width: 18rem;
  min-height: 6rem;
  max-height: 6rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.active-plan-card:hover {
  transform: scale(0.95);
}

.ott-subscription-card {
  min-width: 11rem;
  max-width: 13rem;
  min-height: 15rem;
  max-height: 20rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.ott-subscription-card:hover {
  transform: scale(0.95);
}

.ott-subscription-card > img {
  max-height: 6rem;
}

.iptv-subscription-card {
  min-width: 11rem;
  max-width: 13rem;
  min-height: 15rem;
  max-height: 20rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.iptv-subscription-card:hover {
  transform: scale(0.95);
}

.iptv-subscription-card > img {
  max-height: 6rem;
}

.onetime-plan-card {
  min-width: 10rem;
  min-height: 10rem;
  border: 2px solid #4A4d4e !important;
}

/* Logo */

.login-logo {
  color: #FF0000;
}

.login-logo:hover {
  color: #880000;
}

/* Tariff */

.tariff {
  min-height: 20rem;
  width: 16rem;
  border-radius: 25px 0px;
  border: 2px solid #4A4d4e !important;
  transition: 0.1s;
}

.tariff:hover {
  border: 2px solid #FF0000 !important;
}

/* Tab */

.tab-label {
  color: #fff !important;
  background-color: #FF0000 !important;
  border-color: #FF0000 !important;
}

.tab-label:hover {
  color: #fff !important;
  background-color: #880000 !important;
  border-color: #880000 !important;
}

.tab-input:checked + .tab-label {
  color: #fff !important;
  background-color: #880000 !important;
  border-color: #880000 !important;
}

/* Plan */

.plan-label {
  min-width: 10rem;
  min-height: 10rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.plan-label:hover {
  transform: scale(0.95);
  border: 2px solid #FF0000 !important;
}

.plan-input:checked + .plan-label {
  border: 2px solid #00CC00 !important;
}

/* Payment gateway */

.payment-gateway-label {
  min-width: 7rem;
  max-width: 9rem;
  min-height: 3rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.payment-gateway-label:hover {
  transform: scale(0.95);
  border: 2px solid #FF0000 !important;
}

.payment-gateway-input:checked + .payment-gateway-label {
  border: 2px solid #00CC00 !important;
}

/* IPTV */

.iptv-label {
  min-width: 10rem;
  max-width: 10rem;
  min-height: 10rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.iptv-label:hover {
  transform: scale(0.95);
  border: 2px solid #FF0000 !important;
}

.iptv-label img {
  max-height: 6em;
}

.iptv-input:checked + .iptv-label {
  border: 2px solid #00CC00 !important;
}

/* OTT */

.ott-label {
  min-width: 10rem;
  max-width: 10rem;
  min-height: 10rem;
  border: 2px solid #4A4d4e !important;
  transition: 0.3s;
}

.ott-label:hover {
  transform: scale(0.95);
  border: 2px solid #FF0000 !important;
}

.ott-label img {
  max-height: 6em;
}

.ott-input:checked + .ott-label {
  border: 2px solid #00CC00 !important;
}