/*
		NOTE: Each popup needs its own id to function rn because of the variable setting in scripts
		
		TODOs as of 12/11: 
			(COMPLETE) make it so the JS is told what popup to target for the window opening and closing; Suspicion: Need popup opener to have unique ID and for close button to have unique ID too 
			(WIP) change opener to text instead of button (find out if onClick attribute can be added to text instead of btn)
			(WIP) make a more concise way of the opening/closing method that doesn't need coder to type unique ids for everything or can automatically generate an id for interior objects based on main object id
		*/

		/*EDIT POPUP ASTHETICS HERE*/
		.popup {
			
			background-color: #f1f1f1;
			border: 1px solid #d3d3d3;
			text-align: center;
			
			min-height: 150px;
			min-width: 300px;
			max-height: 700px; /*changed from 300*/
			max-width: 600px;

			border-radius: 5px;

			/*popup autos as closed -> needs button to open*/
			visibility: hidden;

			/*TODO: add open/close movement*/
		}
		
		/*Dragable*/
		.popup {
			position: absolute;
			/*resize: both; !*enable this to css resize*! */
			overflow: auto;
		} 
		
		.popup p {
			padding: 10px; /*adds space from div wall for text*/
		}

		.popup-header {
			/*header portion of the popup*/
			padding: 10px; /*changed from 10*/
			cursor: move;
			z-index: 10; 
			background-color: aquamarine;
			color: blue;
		}

		/*opening section*/
		.open-popup {
			visibility: visible;

			/*TODO: add open/close movement*/
			}


		/*Resizeable section*/
		.popup .resizer-right {
		  width: 5px;
		  height: 100%;
		  background: transparent;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  cursor: e-resize;
		}

		.popup .resizer-bottom {
		  width: 100%;
		  height: 5px;
		  background: transparent;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  cursor: n-resize;
		}

		.popup .resizer-both {
		  width: 5px;
		  height: 5px;
		  background: transparent;
		  z-index: 10;
		  position: absolute;
		  right: 0;
		  bottom: 0;
		  cursor: nw-resize;
		}

		/*exit button*/		
		.exit-btn {
		  float: right; /*causes button to be on the far right*/	
		}

		/*NOSELECT*/
		.popup * {
		  -webkit-touch-callout: none; /* iOS Safari */
		  -webkit-user-select: none; /* Safari */
		  -khtml-user-select: none; /* Konqueror HTML */
		  -moz-user-select: none; /* Firefox */
		  -ms-user-select: none; /* Internet Explorer/Edge */
		  user-select: none; /* Non-prefixed version, currently
										  supported by Chrome and Opera */
		}