@import url("https://fonts.googleapis.com/css2?family=Open%20Sans&display=swap");

/* CENIC added Tailwind directives */

.left-0 {
  left: 0;
}

.left-400 {
  left: 400px;
}

.top-0 {
  top: 0;
}

.z-1000 {
  z-index: 1000;
}

.bg-dark-blu-800 {
  background-color: #0a0c10d1;
}

/*
  Ben's TailwindCSS recommendations
*/

theme: {

   minWidth: {
		'0': '0',
		'1/4': '25%',
		'1/2': '50%',
		'3/4': '75%',
		'full': '100%',
    }, 

	extend: {	
		container: { center: true },
 
		fontFamily: {
			display: ['bree-serif', 'sans-serif'],
			body: ['proxima-nova-alt', 'sans-serif'], 
		},
			
      	/* c-mid-green and c-baby-blue added Aug 2024 per Hunter's stylesheet */
		colors: {
        	'c-blue' : '#000066',
        	'c-dark-blue' : '#091b35', 
			'c-mid-blue' : '#4545c5',
			'c-lt-blue' : '#e3ebf6',
			'c-cyan' : '#009999',
			'c-mid-cyan' : '#33cccc',
			'c-lt-cyan'	: '#ccffff',
			'c-dk-gray'	: '#565D67',
        	'c-mid-green' : '#8fc73e',
        	'c-sky-blue' : '#83b9d4',
        	'c-baby-blue' : '#6d9eeb',
        	'g-dark-gray' :	'#333333',
        	'g-light-gray' : '#cccccc',
			'g-dark-blue' : '#000033',
			'g-gold' : '#ffcc00',
			'g-light-blue' : '#3399ff',
        	'g-very-light-blue' : '#a6d2fe',
        	'c-blue-shade': {
          		'50': '#f1f4ff',
          		'100': '#e5e8ff',
          		'200': '#ced5ff',
          		'300': '#a7b1ff',
          		'400': '#767fff',
          		'500': '#3f42ff',
          		'600': '#2118ff',
          		'700': '#1007fa', 
          		'800': '#0d05d2',
          		'900': '#0c06ac',
          		'950': '#000066',
      		},
      	},
	}
}

/* This section needs Tailwind translation/integration */

#watermark {
  position: relative;
  left: 36px;
}

#legend {
  width: 360px;
}

/*
  Based on TailwindCSS recommendations
  @see https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction
*/

/* Dialog Boxes */
#id01 {
  top: 26px;
  left: 66.67%;
  width: 460px;
}

#id02 {
  top: 26px;
  left: 66.67%;
  width: 460px;
}

.w3-container li + li {
  border-color: #ffffff70;
}

.w3-modal {
  width: 460px;
  padding-top: 100px;
}

.w3-title {
  font-size: 32px; 
  line-height: 30px;
  padding-top: 30px;
}

.w3-modal-content {
  width: 460px;
  outline: 0;
  border-radius: 15px;
}

.id02-content {
  width: 448px;
  outline: 0;
  border-radius: 15px;
}

.w3-button {
  border: none;
  background-color: #0d5382;
  left: 24%;
  width: 50%;
  padding: 8px 16px;
}

.w3-button:hover {
  color: #a09ea7;
  background-color: #2a2e33;
}
/* End Dialog Boxes */

#reload_img {
	width: 42px;
}

#png_img {
	width: 36px;
}

#b1,
#b2 {
  font-family: "Proxima Nova", "Open Sans", sans-serif;
  font-size: 18px;
  width: 164px;
  height: 51px;
  background-color: #0d5382;
  border-color: #4c535c;
}

#b1:hover,
#b2:hover {
  color: #a09ea7;
  background-color: #2a2e33;
  border-color: #4c535c;
}

#bnft_head,
#wlcm_head {
  line-height: 12px;
  font-family: "Bree Serif", serif;
}
#bnft_body,
#wlcm_body {
  width: 380px;
  color: #e4e4e4d1;
  top: -26px;
}
#footer {
  overflow: hidden;
}
.leaflet-control ul {
  list-style-type: none;
}
td {
  font-family: "Open Sans";
}
#legend_buttons td {
  font-family: "Proxima Nova", "Open Sans", sans-serif;
}
.accordion {
  list-style: none;
}
.leaflet-popup-content-wrapper {
  width: 542px;
  font-size: 20px;
  color: #ffffff;
  background-color: #0a0c10d1;
}
#load_waiting {
  top: 300px;
  left: 43%;
  background-color: #0a0c10d1;
  font-family: "Proxima Nova", "Open Sans", sans-serif;
}