:root {
  --danger: #910000;
  --primary: #003fbe;
  --primary2: #052d80;
}

@font-face {
    font-family: 'centuryGothic';
    src: url('../fonts/centurygothic/gothic.eot');
    src: url('../fonts/centurygothic/gothic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/centurygothic/gothic.woff') format('woff'),
         url('../fonts/centurygothic/gothic.ttf') format('truetype'),
         url('../fonts/centurygothic/gothic.svg#gothic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'centuryGothicBold';
    src: url('../fonts/centurygothic/gothicb.eot');
    src: url('../fonts/centurygothic/gothicb.eot?#iefix') format('embedded-opentype'),
         url('../fonts/centurygothic/gothicb.woff') format('woff'),
         url('../fonts/centurygothic/gothicb.ttf') format('truetype'),
         url('../fonts/centurygothic/gothicb.svg#gothicb') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
  font-family: arial;
  background: url(../img/bg.jpg?v=1) no-repeat center center fixed;
  background-size: cover;
  background-color: #000;
  font-size: 1rem;
  color: #111;
}

@font-face {
  font-family: 'LineIcons';
  src: url('../fonts/LineIcons.eot');
  src: url('../fonts/LineIcons.eot') format('embedded-opentype'), url('../fonts/LineIcons.woff2') format('woff2'), url('../fonts/LineIcons.woff') format('woff'), url('../fonts/LineIcons.ttf') format('truetype'), url('../fonts/LineIcons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
} 

@media only screen and (min-width: 992px) {
  .container {
    width: 1170px;
  }
}

.modal-content {
  background: url(../img/bg2.jpg?v=1) no-repeat center bottom;
  background-size: cover;
}

.no-bg {
  background: none !important;
}

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

.bg-danger {
  background-color: var(--danger) !important;
}

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

.bg-primary {
  background-color: var(--primary) !important;
}

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

.bg-primary2 {
  background-color: var(--primary2) !important;
}

.bg-gradient2 {
  background-image:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) !important;  
}

.d-desktop {
  display: block;
}

.d-mobile {
  display: none;
}

.bgcontainer {
  background: rgba(219, 248, 254, 0.95);
  border: 2px solid #0045be;
  padding-bottom: 2rem;
}

a {
  text-decoration: none;
}

.top-kartu {
  background: #eee;
  border: 1px solid #dadada;
}

#carinomor ::placeholder {
  color: #000;
}

.search {
  display: flex;
  grid-gap: 0 .5rem;
}

.btn-search {
  background: url(../img/btn-search.png) no-repeat;
  background-size: cover;
  color: #fff;
  font-weight: bold;
}

button.btn-dark {
  border: 1px solid #e8d489;
}

.header {
  padding-top: 2.5rem;
}

.runningtext {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be0000+0,580808+100 */
background: linear-gradient(to bottom,  #be0000 0%,#580808 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid #620707;
}

.fas.fa-volume-up {
  font-size: 18px;
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.navbar {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#003fbe+0,082258+100 */
background: linear-gradient(to bottom,  #003fbe 0%,#082258 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid #072e62;
border-radius: .5rem;  
}

.navbar-nav {
  justify-content: space-around;
  width: 100%;
}

.nav-link {
  color: #fff;
}

.dropdown-menu {
	background: #082258;
}

.dropdown-item {
	color: #eee;
}

.dropdown-item:focus, .dropdown-item:hover {
	background: #003ebd;
	color: #eee;
}


.hdg_operator {
  background: url(../img/bg-operator.png?v=0) no-repeat center;
  width: 797px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  padding: 0 5rem;
}

.img-operator {
  display: flex;
  grid-gap: .5rem;
  align-items: center;
}

.img-operator img {
  width: 70px;
  filter: grayscale(1);
  filter: brightness(100%);
}

.listnomor {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffe55e+0,f99f03+100 */
background: linear-gradient(to bottom,  #ffe55e 0%,#f99f03 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  position: relative;
  border-radius: .30rem;
  border: 1px solid #f98f05;
}

.listnomor a {
  text-decoration: none;
  color: #052d80;
}

.listnomor .tooltipnomor {
  width: 200px;
  background: #ab1615;
  position: absolute;
  display: none;
  color: #fff;
  padding: .5rem;
  border-radius: .25rem;
  font-size: .8rem;
  font-weight: bold;
  z-index: 9;
  left: calc(50% - 100px);
}

.listnomor:hover .tooltipnomor {
  display: block;
}

.border-gold {
  background: url(../img/border-nomor-atas.png?v=0) no-repeat center top, url(../img/border-nomor-atas.png?v=0) no-repeat center bottom !important;
  background-size: 100% auto !important;
  border-left: 1px solid #dda32f !important;
  border-right: 1px solid #dda32f !important;
}

.lihat-lain {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#be0000+0,580808+100 */
background: linear-gradient(to bottom,  #be0000 0%,#580808 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #fff;
  font-weight: bold;
}

.contact-icon {
  width: 35px;
  height:35px;
  display: flex;
  align-items: center;
  justify-content: center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#580808+0,be0000+100 */
background: linear-gradient(to top,  #580808 0%,#be0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid #620707;  
}

.contact-icon i {
  color: #ffea00;
}

.pengiriman {
  text-align: right;
}

.copyright {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#003fbe+0,082258+100 */
background: linear-gradient(to bottom,  #003fbe 0%,#082258 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
font-size: .8rem;
}

.bordernomor {
  border: 2px solid #ffe55e;
}

.urutnomor a {
  text-decoration: none;
}

.urutnomor a:hover {
  color: #ffd741 !important;
}

.active > .page-link, .page-link.active {
	background: #ffd741;
	border-color: #ffd741;
	color: #111;
}