@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
  color:white;
  overflow: hidden;
 /* background: rgb(33,51,68);
  background: -moz-linear-gradient(0deg, rgba(33,51,68,1) 0%, rgba(47,63,97,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(33,51,68,1) 0%, rgba(47,63,97,1) 100%);
  background: linear-gradient(0deg, rgba(33,51,68,1) 0%, rgba(47,63,97,1) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;*/
}

a {
  text-decoration: none; 
  transition: all 0.2s ease-out;
}

.backButton{
	color: #c9c9c9;
	position:fixed;
	bottom:10px;
	margin: 0px;
}

.rapidKey{
  color: white;
  position:fixed;
  bottom:10px;
  margin: 0px;
}

.backButton:hover{
	color: white!important;
	transition: all 0.2s ease-in;
  cursor: pointer;
}

.greenGradient {
	background: rgb(38,164,91);
	background: -moz-linear-gradient(90deg, rgba(38,164,91,1) 0%, rgba(46,204,113,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(38,164,91,1) 0%, rgba(46,204,113,1) 100%);
	background: linear-gradient(90deg, rgba(38,164,91,1) 0%, rgba(46,204,113,1) 100%);
}

.redGradient {
	background: rgb(255,99,23);
	background: -moz-linear-gradient(90deg, rgba(255,99,23,1) 0%, rgba(255,51,48,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,99,23,1) 0%, rgba(255,51,48,1) 100%);
	background: linear-gradient(90deg, rgba(255,99,23,1) 0%, rgba(255,51,48,1) 100%);
}

.nav-link {
	color:white!important;
}

.revised {
	line-height: 3px;
	color: #c9c9c9;
}

.info {
	line-height: 0px;
	margin-bottom: 6px;
	padding-right: 25px;
}

.shindoKey {
  width: 100%;
}

div.shindoKey {
  display: table;
  width: -webkit-fill-available;
} 

div.shindoKey span {
  display: table-cell;
  text-align: center;
}

.shindoKeyText {
  padding-right: 10px;
  padding-left: 10px;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#rapidDetails > div {
  vertical-align:top;
  display:inline-block;   
}

.navbar-toggler {
	color: white!important;
}

@media screen and (max-width: 850px) {
  #earthquakeDetailed {
    width: 100%;
  }
}

@media screen and (min-width: 851px) {
  #earthquakeDetailed {
    height: 100%;
  }
}

#earthquakeDetailed {
	padding-left: 15px;
	padding-top: 15px;
	background: rgb(33,51,68);
	background: -moz-linear-gradient(0deg, rgba(33,51,68,1) 0%, rgba(47,63,97,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(33,51,68,1) 0%, rgba(47,63,97,1) 100%);
	background: linear-gradient(0deg, rgba(33,51,68,1) 0%, rgba(47,63,97,1) 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
  margin: 0;
  position: absolute;
  z-index: 99;
}

.rapidEarthquakeDetailed {
  padding-left: 15px;
  padding-top: 15px;
  background: rgb(42,43,43)!important;
  background: -moz-linear-gradient(0deg, rgba(42,43,43,1) 0%, rgba(47,54,64,1) 100%)!important;
  background: -webkit-linear-gradient(0deg, rgba(42,43,43,1) 0%, rgba(47,54,64,1) 100%)!important;
  background: linear-gradient(0deg, rgba(42,43,43,1) 0%, rgba(47,54,64,1) 100%)!important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  position: absolute;
  z-index: 99;
}

#earthquakeKey {
	padding-left: 15px;
	padding-top: 15px;
	background: rgb(33,51,68);
	background: -moz-linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
	background: -webkit-linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
	background: linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
  margin: 0;
  position: relative;
  z-index: 99;
}

#settings {
	padding-left: 15px;
	padding-top: 15px;
  margin: 0;
  background: rgb(33,51,68);
  background: -moz-linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
  background: -webkit-linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
  background: linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  z-index: 99;
}

#filter {
	padding-left: 15px;
	padding-top: 15px;
  margin: 0;
  background: rgb(33,51,68);
  background: -moz-linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
  background: -webkit-linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
  background: linear-gradient(0deg, rgba(33,51,68,0.8) 0%, rgba(47,63,97,0.8) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;;
  z-index: 99;
}

.filterInput {
	width: 45px;
  background-color: rgb(33,51,68);
  border-width: 0;
  color: white;
  text-align: center;  
  height: 22px;
  font-size: 15px;
}

.rangeInput {
  background: rgb(33,51,68);
  border-width: 0;
  color: white;  
  font-size: 15px;
  width: 100px;
  height: 30px;
  border-color: white;
  padding-left: 5px;
  margin-left: 6px;
}

.applyButton {
  background: rgb(33,51,68);
  border-width: 0;
  color: white;  
  font-size: 15px;
  width: 100px;
  border-color: white;
  margin-top: 10px;
  margin-left: 6px;
  margin-bottom: 4px;
}


.settingsTittle:hover{
	color: #c9c9c9!important;
	transition: all 0.2s ease-in;
}

.form-check-input:focus {
	border-color: #2ecb71!important;
	box-shadow: 0 0 0 0.25rem rgb(33 51 68 / 0%)!important; 
}
.form-check-input:checked{
	background-color: #2ecb71!important;
	border-color: #2ecb71!important;
}

@media screen and (max-width: 850px) {
  #settingToggles {
    display: none;
  }
  #filterToggles {
    display: none;
  }
  #rapidKey {
    display: none;
  }
  #confirmedDataSection {
    display: none;
  }
  #scroll {
    display: none;
  }
  #widthFixer{
    width: 100%
  }
  #rapidLocation {
    margin-top: 10px;
    display: block;
  }
  #hrMobile {
  	display: none;
  }
  .shindoKey {
  	padding-bottom: 10px;
  }
  #mapPadding{
    padding-left: 0px;
  }
  .rapidKey {
    display: none;
  }
}

@media screen and (min-width: 851px) {
  #settingToggles {
    display: contents;
  }
  #filterToggles {
    display: contents;
  }
  #rapidKey {
    display: inherit;
  }
  #confirmedDataSection {
    display: inherit;
  }
  #widthFixer{
    width: 250px;
  }
  #mapPadding{
    padding-left: 345px;
  }
  .rapidKey {
    display: inherit;
  }
}



@media screen and (min-height: 761px) {
  #rapidKey {
    display: inherit;
  }
}

@media screen and (max-height: 760px) {
  #rapidKey {
    display: none;
  }
}

select {
  background-color: white;
}