:root {
  --main-color: #d40c04;
  --secondary-color: #d40c04;
  --hover-color: #810703;
}

.bg-image {
  background-image: url("/img/bg-login.jpg") !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100vw auto;
}

.bg-transparent {
  background-color: #00000044 !important;
}

hr.header {
  border-top: 2px solid var(--main-color) !important;
  width: 32px;
  margin-left: 0;
  margin-top: 12px;
  margin-bottom: 0;
}

hr.bottom {
  margin-top: 0 !important;
  margin-left: 0;
}

.content-wrapper>.card .card-body {
  padding: 0 !important;
}

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

.bg-iconnet-2 {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #fff;
}

.btn-iconnet {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
  color: #fff;
}

.btn-iconnet-2 {
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
  color: #fff;
}

.btn-iconnet:hover {
  background-color: var(--hover-color) !important;
  color: #fff;
  transition: ease-in-out 0.3s;
}

.btn-iconnet-2:hover {
  background-color: var(--hover-color) !important;
  color: #fff;
  transition: ease-in-out 0.3s;
}

a.bg-iconnet:hover {
  background-color: var(--hover-color) !important;
}

.block-icon {
  border-radius: 50% !important;
  padding: 10px;
}

.icon-shape {
  display: inline-flex;

  padding: 12px;

  text-align: center;

  border-radius: 50%;

  align-items: center;
  justify-content: center;
}

.icon-shape i,
.icon-shape svg {
  font-size: 1.25rem;
}

.icon {
  width: 3rem;
  height: 3rem;
}

.icon i,
.icon svg {
  font-size: 2.25rem;
}

.text-iconnet {
  color: var(--secondary-color) !important;
}

.text-iconnet-2 {
  color: var(--main-color) !important;
}

.dropdown-wave.dropdown-item:hover, .dropdown-wave.dropdown-item:focus {
  color: #fff;
  text-decoration: none;
  background-color: var(--secondary-color);
  transition: all 0.2s ease-in-out;
}

.card.card-telkom {
  background: var(--main-color);
  color: #ffffff;
}

.card.card-telkom:hover {
  background: var(--hover-color);
}

.card.card-telkom-secondary {
  background: #ffffff;
  color: #353535;
}

.card.card-telkom-secondary:hover {
  background: var(--secondary-color);
  color: #ffffff;
}

.card.card-telkom-secondary:hover a {
  color: #ffffff !important;
}

.notice {
  padding-left: 10.5rem !important;
}

.card-primary.card-outline {
  border-top: 3px solid var(--main-color) !important;
}

/* Background gradient */

.bg-gradient-primary {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important;
}

.bg-gradient-secondary {
  background: linear-gradient(87deg, #f7fafc 0, #f7f8fc 100%) !important;
}

.bg-gradient-success {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-info {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}

.bg-gradient-warning {
  background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
}

.bg-gradient-danger {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

.bg-gradient-light {
  background: linear-gradient(87deg, #adb5bd 0, #adaebd 100%) !important;
}

.bg-gradient-dark {
  background: linear-gradient(87deg, #212529 0, #212229 100%) !important;
}

.bg-gradient-default {
  background: linear-gradient(87deg, #172b4d 0, #1a174d 100%) !important;
}

.bg-gradient-white {
  background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-neutral {
  background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-darker {
  background: linear-gradient(87deg, black 0, black 100%) !important;
}

.bg-gradient-blue {
  background: linear-gradient(87deg, #5e72e4 0, #825ee4 100%) !important;
}

.bg-gradient-indigo {
  background: linear-gradient(87deg, #5603ad 0, #9d03ad 100%) !important;
}

.bg-gradient-purple {
  background: linear-gradient(87deg, #8965e0 0, #bc65e0 100%) !important;
}

.bg-gradient-pink {
  background: linear-gradient(87deg, #f3a4b5 0, #f3b4a4 100%) !important;
}

.bg-gradient-red {
  background: linear-gradient(87deg, #f5365c 0, #f56036 100%) !important;
}

.bg-gradient-orange {
  background: linear-gradient(87deg, #fb6340 0, #fbb140 100%) !important;
}

.bg-gradient-yellow {
  background: linear-gradient(87deg, #ffd600 0, #beff00 100%) !important;
}

.bg-gradient-green {
  background: linear-gradient(87deg, #2dce89 0, #2dcecc 100%) !important;
}

.bg-gradient-teal {
  background: linear-gradient(87deg, #11cdef 0, #1171ef 100%) !important;
}

.bg-gradient-cyan {
  background: linear-gradient(87deg, #2bffc6 0, #2be0ff 100%) !important;
}

.bg-gradient-white {
  background: linear-gradient(87deg, #fff 0, white 100%) !important;
}

.bg-gradient-gray {
  background: linear-gradient(87deg, #8898aa 0, #888aaa 100%) !important;
}

.bg-gradient-gray-dark {
  background: linear-gradient(87deg, #32325d 0, #44325d 100%) !important;
}

.bg-gradient-light {
  background: linear-gradient(87deg, #ced4da 0, #cecfda 100%) !important;
}

.bg-gradient-lighter {
  background: linear-gradient(87deg, #e9ecef 0, #e9eaef 100%) !important;
}

.bg-translucent-primary {
  background-color: rgba(63, 87, 223, .6) !important;
}

.select2-container--default .select2-selection--single {
  padding: 0.875rem .225rem;
}

.choose-region {
  padding: 0 .75rem;
}

@media (max-width: 567px) {
  #wave {
    display: none !important;
  }
}