/* style.css */
/* History:
 * Date Tag       Developer      Change Details: 
 * ERE20260406 - Ed Einfeld    - Add styles for loading spinner while data is loading.
 * 
 */
* {
	padding:0;
	margin:0;
	border:none;
	outline:none;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
body {
  margin: 0;
  padding: 0;
	background:#aaccff;
} 

/* Mapbox style */

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
/* End of Mapbox style */

.header-down-arrow {
  -webkit-animation: pulse 2s 3s ease-out infinite;
          animation: pulse 2s 3s ease-out infinite;
    bottom: 4vh;
    left: 0;
  /* position: absolute; */
    right: 0;
  text-align: center;
  z-index: 10;
  display: none;
}

.header-down-arrow img {
  width: 30px;
}

@-webkit-keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
  50% {
    opacity: .8;
    -webkit-transform: scale(.8);
            transform: scale(.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
  50% {
    opacity: .8;
    -webkit-transform: scale(.8);
            transform: scale(.8);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

area {
	display: block;
	cursor: pointer;
}

#prop-list {
  background-color: #000!important;
}


.close {
    color: #fff;
}

.modal-dlg .box {
	width:80%;
	margin:0 10%;
	position: absolute;
	top: 30%;
	-webkit-transform: translate(0, -50%);
			transform: translate(0, -50%);
	-webkit-transition: 0.3s;
	transition: 0.3s;
	border:1px solid #ccc;
	background:rgba(255,255,255,0.1);
}
.links {
	width:50%; /* ERE20210215*/
	height:auto;
	min-height:40px;
	padding:20px;
	float:left;
}
.links .title {
	font-family: serif;
	width:100%;
	min-height:70px;
	float:left;
	position:relative;
	color:#fff;
}
.links .title h1 {
	font-size:30px;
	width:100%;
	text-align:center;
    position:absolute;
    bottom:5px;
    right:0;
}
.links .radio-station {
	width:49%;
	float:left;
	margin-right:1%;
}
.links .website {
	width:49%;
	float:right;
	margin-left:1%;
}
.links .radio-station a {
	border-radius:8px 0 0 8px;
}
.links .website a {
	border-radius:0 8px 8px 0 ;
}
.links .radio-station a,
.links .website a {
	content: "\f04b";
	display:block;
	background:#fff;
	text-align:center;
	cursor:pointer;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.links .radio-station a i,
.links .website a i {
	font-size:28px;
	line-height:38px;
	color:#666;
	cursor:pointer;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.links .radio-station a:hover,
.links .website a:hover {
	background:#666;
}
.links .radio-station a:hover i,
.links .website a:hover i {
	font-size:28px;
	color:#fff;
}

.modal-content {
  background-color: black;
  opacity: .7;
}
/* ERE20200418 -- disable links */
a.disabled {
    pointer-events: none;
    cursor: default;
    background:#666!important;
}

/* ERE20260402 - spinner keyframe for mapping.js modal loading indicator */
@keyframes spin {
  to { transform: rotate(360deg); }
}

#spinner { /* ERE20260406 - spinner for mapping.js modal loading indicator */
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top-color: #337ab7;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media only all and (max-width:960px) {
	.links {
		width:50%;
	}
  
}

@media only all and (max-width:720px) {
  .header-down-arrow {
    display: inline-block;
  }

	.links {
		width: 100%;
	}
  
  .links { /* ERE20210212 */
    float: none;
    
  }
  #prop-list { /* ERE20210212 */
    margin-top: 5px;
    margin-bottom: 7px;
    overflow-x: hidden;
    overflow-y: auto;
    /* height: 490px; */
    background-color: #96969b;
  }
}

