/****************************************************************
*
*	@author: Alejandro D. Carraretto (alejo@sistema54.ar)
*	@copyright: Nov/2024
*
****************************************************************/

@import "app.fonts.css" ;
@import "app.reset.css" ;
@import "app.helpers.css" ;

/* Some values as style colors */
@import "vars.css" ;

/* media sets */
@media all
{
	.page-break { display: none ; }
}

@media print
{
	* {
		color: black ;
		background: white ;
		_border: 1px solid salmon ;
	}

	@page
	{
		margin: 0.5cm 0 0 0 ;
	}

	.page-break
	{
		display: block ;
		page-break-before: always ;
	}

	.no-print { display: none ; }
}

/* global sets */
* {
	font-family: OpenSans, NotoMono, Helvetica ;
	font-size: 0.8rem ;
	letter-spacing: 0.02rem ;
}

/* Some fixes */
a, input, textarea, select, button
{
	outline: none ;
}
input:focus, textarea:focus, select:focus, button:focus
{
	box-shadow: 0px 0px 0px 1px var( --input-focus-color );
}
input[readonly], textarea[readonly], select[readonly]
{
	pointer-events: none ;
	opacity: 0.90 ;
}

/* HTML TAG */
body
{
	color: var( --fore-color );
	background: var( --back-color );
	_border: 1px solid salmon ;
}

code, pre
{
	font-family: monospace ;
	font-size: 1em ;
}

code
{
	background: var( --opt-back-color );
	padding: 1em ;
}

pre
{
	overflow: auto ;
	background: var( --opt-back-color );
	padding: 1em ;
}

label
{
	padding: var( --universal-padding );
}

button
{
	cursor: pointer ;
	padding: var( --universal-padding );
}

input, textarea, select
{
	background: var( --input-back-color );
	color: var( --input-fore-color );
}

input[type="color"]
{
	background: var( --input-back-color );
	color: var( --input-fore-color );
	border: 0.06rem solid var( --input-border-color );
	border-radius: var( --universal-border-radius );
}

select
{
	max-width: 100% ;
}

option
{
	overflow: hidden ;
	text-overflow: ellipsis ;
	border-radius: var( --universal-border-radius );
	padding: 0.2em 0.6em 0.2em 0.6em ;
}

input:disabled, input[disabled], textarea:disabled, textarea[disabled],
select:disabled, select[disabled], button:disabled, button[disabled],
.button:disabled, .button[disabled],
[role="button"]:disabled, [role="button"][disabled]
{
	cursor: not-allowed ;
	opacity: 0.75 ;
}

mark
{
	background: var( --mark-back-color );
	color: var( --mark-fore-color );
	font-size: 0.95em ;
	line-height: 1em ;
	border-radius: var( --universal-border-radius );
	padding: var( --universal-padding );
	_padding: calc( var( --universal-padding ) / 4 ) calc( var( --universal-padding ) / 1 );
}

button
{
    color: white ;
	background: var( --section-color );
	border-radius: 1.5em ;
	padding: 0.5em 2em 0.5em 2em ;
	margin-top: 0.5em ;
	border: none ;
}

button:hover
{
	opacity: 0.8 ;
}

/** EOF HTML TAG **/

.preload-icon
{
	color: transparent ;
	background: transparent ;
	border-color: transparent ;
	padding: 2em ;
	_border: 1px solid salmon ;
}

/* SECTION */
section
{
	color: var( --fore-color );
	background: var( --section-color );
	_border: 1px solid salmon ;
}

section .title
{
    color: white ;
	_border: 1px solid salmon ;
}

section .block
{
	padding: 3em ;
    color: var( --fore-color );
	background: var( --form-back-color );
	border-radius: 1.5em ;
	_border: 1px solid salmon ;
}

/** EOF **/