/**
 * ui.css
 */

/* aesthetic */
	span.terminal-cursor {
		animation: cursor-blink 1s infinite linear;
		display: inline-block;
		vertical-align: middle;
		width: 6px;
		height: 10px;
	}
	@keyframes cursor-blink {
		0% {background-color: white; }
		50% {background-color: black;}
		100% {background-color: white; }
	}
/* textboxes */
	input[type=textbox], input[type=password], input[type=number], select {
		/*margin-top: 6px;*/
		margin-bottom: 6px;

		font-size: 14px;
		/*border: none;*/
		width: 200px;

		border: 1px solid var(--ui-textbox-border);
	    border-radius: 4px;
/*	    border-width: 1px;*/
	    padding: 6px 10px;

	    background: var(--ui-textbox-bg);
		color: var(--ui-textbox-fg);
		/* border-color: var(--ui-textbox-border); */
	}

	input[type=textbox]:focus, input[type=password]:focus, input[type=number]:focus {
		background: var(--ui-textbox-focus-bg);
		color: var(--ui-textbox-focus-fg);
		border-color: var(--ui-textbox-focus-border); 
	}

	input[type=textbox].fullwidth, input[type=password].fullwidth, input[type=number].fullwidth {
		width: 100%;
	}

/* buttons */
	button {
		padding: 6px 10px;
		margin-top: 6px;
		margin-left: 4px;
		/*margin-right: 16px;*/
		font-size: 14px;
		border: 1px solid var(--ui-button-border);
		/*border: none;*/
		cursor: pointer;
		border-radius: 10px;

		background: var(--ui-button-bg);
		color: var(--ui-button-fg);

		user-select: none;
	}

	button:hover {
		background: var(--ui-button-hover-bg);
		color: var(--ui-button-hover-fg);
		border-color: var(--ui-button-hover-border);
	}

	button:active {
		background: var(--ui-button-active-bg);
		color: var(--ui-button-active-fg);
		border-color: var(--ui-button-active-border);
	}

	button.ml {
		margin-left: 0;
	}

	button.left {
		float: left;
		margin-right: 4px;
	}

	button.right {
		float: right;
		margin-left: 4px;
	}

	button.alert {
		background: var(--ui-button-alert-bg);
		color: var(--ui-button-alert-fg);
		border-color: var(--ui-button-alert-border);
	}

	button.alert:hover {
		background: var(--ui-button-alert-hover-bg);
		color: var(--ui-button-alert-hover-fg);
		border-color: var(--ui-button-alert-hover-border);
	}

	button.alert:active {
		background: var(--ui-button-alert-active-bg);
		color: var(--ui-button-alert-active-fg);
		border-color: var(--ui-button-alert-active-border);
	}

	button[type=submit] {
		background: var(--ui-button-submit-bg);
		color: var(--ui-button-submit-fg);
		border-color: var(--ui-button-submit-border);
	}

	button[type=submit]:hover {
		background: var(--ui-button-submit-hover-bg);
		color: var(--ui-button-submit-hover-fg);
		border-color: var(--ui-button-submit-hover-border);
	}

	button[type=submit]:active {
		background: var(--ui-button-submit-active-bg);
		color: var(--ui-button-submit-active-fg);
		border-color: var(--ui-button-submit-active-border);
	}


/* MODAL DIALOG POPUP */
	/* ref: https://css-tricks.com/considerations-styling-modal/ */

	div.modalpageoverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 50;
		
		background: rgba(0, 0, 0, 0.6);
	}

	div.modalcontainer {
		/* This way it could be display flex or grid or whatever also. */
		display: flex; /* block */
		flex-direction: column;
		
		/* Probably need media queries here */
		width: 460px;
		max-width: 100%;
		
		/*height: 400px;*/
		max-height: 100%;
		
		position: fixed;
		
		z-index: 100;
		
		left: 50%;
		top: 50%;
		
		/* Use this for centering if unknown width/height */
		transform: translate(-50%, -50%);
		
		/* If known, negative margins are probably better (less chance of blurry text). */
		/* margin: -200px 0 0 -200px; */
		
		/*background: white;*/

		border-style: solid;
		border-width: 1px;
		border-radius: 12px;

		border-color: var(--container-hborder);
		background: var(--container-bg);
		color: var(--container-fg);

		box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); /* 0 0 60px 10px rgba(0, 0, 0, 0.9); */
	}

	div.modalclosed {
		display: none;
	}

	div.modalcontent {
		/*position: absolute;*/
		/*top: 0;*/
		top: 39px;
		left: 0;
		width: 100%;
		/*height: 100%;*/
		height: 90%;

		flex-grow: 1;
		overflow-y: auto;

		padding: 8px 20px 20px 20px;
	}


	div.modalcontainer button.close-button {
		position: absolute;
  
		/* don't need to go crazy with z-index here, just sits over .modal-guts */
		z-index: 2;
		
		top: -2px;
		
		/* needs to look OK with or without scrollbar */
		right: 8px;
	}

	div.modalcontainer .action-button {
		z-index: 1;
	}
	
	div.modalcontainer .title-bar {
		z-index: 1;

		font-size: 18pt;
		margin-bottom: 12px;

		padding-left: 20px;
		padding-top: 4px;
		padding-bottom: 2px;

		border-top-left-radius: 12px;
		border-top-right-radius: 12px;

		background: var(--container-headerbar-hbg);
		color: var(--container-headerbar-hfg);
		border-color: var(--container-headerbar-hborder);
	}

	div.modalcontainer .bsco_modalbuttonsrow {
		/*z-index: 1;*/
		text-align: right;

		/*position: absolute;*/
		/*bottom: 20px;*/
		/*right: 20px;*/
		padding: 0px 20px 8px 20px;
	}

	div.modalcontainer form.modalform {
		margin-top: 8px;
	}

	div.modalcontainer hr.modalhr {
		border-color: var(--postcontainer-hr);
	}

	div.modalcontainer .modal-control-label {
		margin-bottom: 3px;
		line-height: 24px;
	}