/*++
PublicPage.css
--*/

/* Main heading */

body {
}

div.content {
}

@media all and (min-aspect-ratio: 13/9) {
	div.main-heading {
		margin-top: 50px;
		font-family: 'roboto', var(--nice-font);
		color: var(--dark);
	}

	div.main-heading i {
		font-size: 100%;
		margin-right: 15px;
	}

	div.main-heading {
		font-size: 240%;
	}
}
@media all and (max-aspect-ratio: 13/9) {
	div.main-heading {
		font-size: 240%;
		width: 100%;
		text-align: center;
	}
}

/* Sub-heading */
p.sub-heading {
    color: var(--accent);
    font-family: 'roboto', var(--nice-font);
}

@media all and (min-aspect-ratio: 13/9) {

	p.sub-heading {
		font-size: 140%;
	}
}

@media all and (max-aspect-ratio: 13/9) {

	p.sub-heading {
		text-align:center;
		font-size: 140%;
	}
}

/* Input container */
div.input-container {
	display: table;
	border: 1px solid var(--textbox-border-color);
	margin-bottom: 10px;
}

	div.input-container div.row {
		display: table-row;
	}

	div.input-container div.icon {
		background-color: #c0c0c0;
		display: table-cell;
		padding: 10px;
	}

		div.input-container div.icon i {
			color: #000000;
		}

	div.input-container div.input {
		display: table-cell;
	}

	div.input-container div.input input {
		font-family:'roboto',Arial;
		font-size:120%;
	}

@media all and (max-aspect-ratio: 13/9) {
	div.input-container div.input input {
		width: calc(100vw - 90px);
		font-size: 140%;
	}
}
@media all and (min-aspect-ratio: 13/9) {
	div.input-container div.input input {
		width: 380px;
	}
}

	div.input-container div.input input {
		border: none;
		outline: none;
		padding: 10px;
	}


@media all and (max-aspect-ratio: 13/9) {


	div.input-container div.icon i {
		font-size: 160%;
	}

	div.input-container div.input input {
		font-size: 140%;
	}
}

/* Buttons */
input.new-button, button.new-button {
    background-color: var(--action-color);
    border: 1px solid var(--action-color);
	border-radius:5px;
    color: #ffffff;
    padding: 12px 15px;
}

	input.new-button:hover, button.new-button:hover {
		cursor: pointer;
		background-color: var(--action-color-hover);
		border: 1px solid var(--action-color);
	}

@media all and (min-aspect-ratio: 13/9) {
	input.new-button, button.new-button {
		font-size: 110%;
	}
}

@media all and (max-aspect-ratio: 13/9) {
	input.new-button, button.new-button {
		font-size: 140%;
	}
}

input.new-button:active, button.new-button:active {
	color: var(--action-color);
}


/* Footer */
#footer {
	width: 100%;
	text-align: center;
}