@import "/css/Averta.css";

:root {
	--main-color: rgb(0, 21, 81);
	--font-color: rgb(255, 255, 255);
	--hover-main-color: rgb(151, 226, 255);
	--hover-font-color: var(--main-color);
	--disabled-main-color: rgb(250, 250, 250);
	--disabled-font-color: rgb(177,179,179);
	--alarm-main-color: rgb(184, 0, 7);
	--alarm-font-color: rgb(255, 255, 255); 
	--hover-alarm-main-color: rgb(255, 75, 80);
	--hover-alarm-font-color: var(--alarm-font-color);

	--link-font-color: rgb(0,100,200);

	--general-font-color: rgb(51, 51, 51);

	--subtle-border-color: rgb(215, 215, 215);

	--header-background-color: rgb(255, 255, 255);
}

* {
	font-family: "Averta",Helvetica,Arial,sans-serif;
	color: var(--general-font-color);

	font-size: 18px;
	font-weight: 400;
}

pre, code {
	font-family: "Courier New",monospace;
}

b, strong {
	font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
	padding: 0;
	color: var(--main-color);
	font-weight: 700;
	line-height: 130%;
}

h1, h2 {
	margin: 25px 0 8px 0;
	width: 100%;
	border: none;

	margin: 30px 0 20px 0;
	padding: 0;
	line-height: normal;
}

h3, h4, h5, h6 {
	margin: 4px 0px 8px;
}

h1 {
	font-size: 40px;
}

body.iframe h1 {
	display: none;
}

h2 {
	font-size: 37px;
}

h3 {
	font-size: 32px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16;
	line-height: 24px;
}

hr {
	display: none;
}


.gradient {
	background: #28e946;
	background-image: -moz-linear-gradient(left, #28e946 0%, #2ec4ff 100%);
	background-image: -webkit-linear-gradient(left, #28e946 0%,#2ec4ff 100%);
	background-image: linear-gradient(to right, #28e946 0%,#2ec4ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#28e946", endColorstr="#2ec4ff",GradientType=1 );
}

.gradient-blue {
	background: #2364c8;
	background-image: -moz-linear-gradient(left, #2364c8 0%, #2ec4ff 100%);
	background-image: -webkit-linear-gradient(left, #2364c8 0%,#2ec4ff 100%);
	background-image: linear-gradient(to right, #2364c8 0%,#2ec4ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#2364c8", endColorstr="#2ec4ff",GradientType=1 );
}

a {
	color: var(--link-font-color);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

small {
	font-size: 10px;
}

p, div p {
	color: var(--main-color);
	margin-top: 7px;
	margin-bottom: 12px;
}

.fa-gradient {
	color: #00D649;
	background: -webkit-gradient(linear, left top, right top, from(#00D649), to(#2EC4FF));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

label {
	display: block;
	margin-bottom: 5px;    
	font-weight: 400;
}

input[type="text"], input[type="email"], input[type="date"], input[type="number"], 
input[type="password"], input[type="datetime"], input[type="month"], input[type="week"], 
input[type="time"], input[type="url"], input[type="search"], select, textarea,
.frminput, .frmselect, .frmtextarea {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	font-size: 14px;
	color: #555;
	vertical-align: middle;
	background-color: #fff !important;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	height: 40px;
	box-sizing: border-box;

	border-radius: 0;
	border: 1px solid #d7d7d7;
	padding: 2px 5px;
	
	&:focus, &:focus-visible {
		background-color: #f4f4f4 !important;
		border: 1px solid #d7d7d7;
		outline: none;
	}
}



textarea, .frmtextarea {
	height: auto;
	resize: vertical;
}

input.mandatory, select.mandatory, textarea.mandatory, span.mandatory, div.frminput.mandatory,
input:required, select:required, textarea:required {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yNy8xMVJxs+AAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAAL0lEQVQImW2LsQ0AIAzDHMSv3NRr04UBlGa0Hdlm2gbgKOwa87JSlJWPC3/xQIAGiY0K1iHby1gAAAAASUVORK5CYII=);
	background-repeat: no-repeat;
	background-position: 3px 3px;
}

input[type=text].invalid {
	color: #ff5c5c;
}

input[type=checkbox], input[type=radio] {
	margin-right: 5px;    
}

input[type="submit"], input[type="button"], input[type="reset"], button, a.button, a.buttn , div a.button {
	cursor: pointer;
	display: inline-block;
	line-height: 26px;
	padding: 6px 42px 6px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	text-decoration: none;
	border-top-left-radius:1.5em;
	border-top-right-radius:2.5em;
	border-bottom-right-radius:2.5em;
	border-bottom-left-radius: 6px;
	background-color: var(--main-color);
	border: 1px solid transparent;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 700;
	color: var(--font-color);
	transition: all .1s ease 0s;

	background-image: url( "data:image/svg+xml,<svg width='20' height='19' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23'><path transform='translate(-2,1)' fill='rgb(0, 21, 81)' d='M11.64 10.11L3.27 0.92C2.68 0.28 1.56 0.15 0.76 0.63-0.03 1.11-0.19 2.01 0.4 2.67L7.99 10.97 0.36 19.33C-0.23 19.97-0.07 20.89 0.72 21.37 1.04 21.57 1.41 21.67 1.79 21.67 2.33 21.67 2.87 21.47 3.21 21.08L11.64 11.85C12.11 11.33 12.11 10.63 11.64 10.11Z'/></svg>" )
	, url( "data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle fill='rgb(151, 226, 255)' cx='13' cy='13' r='13' /></svg>" );

	background-repeat: no-repeat;
	background-position: right 6px top 50%;


	&:hover, &:active, &:focus {
		background-color: var(--hover-main-color);
		color: var(--hover-font-color);
		background-image: url( "data:image/svg+xml,<svg width='20' height='19' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23'><path transform='translate(-2,1)' fill='rgb(255, 255, 255)' d='M11.64 10.11L3.27 0.92C2.68 0.28 1.56 0.15 0.76 0.63-0.03 1.11-0.19 2.01 0.4 2.67L7.99 10.97 0.36 19.33C-0.23 19.97-0.07 20.89 0.72 21.37 1.04 21.57 1.41 21.67 1.79 21.67 2.33 21.67 2.87 21.47 3.21 21.08L11.64 11.85C12.11 11.33 12.11 10.63 11.64 10.11Z'/></svg>" )
		, url( "data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle fill='rgb(0, 21, 81)' cx='13' cy='13' r='13' /></svg>" );
	}

	&:disabled, &.disabled {
	cursor: not-allowed;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 2px solid var(--disabled-font-color);
	color: var(--disabled-font-color);
	background-color: var(--disabled-main-color);
	background-image: url( "data:image/svg+xml,<svg width='20' height='19' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23'><path transform='translate(-2,1)' fill='rgb(255, 255, 255)' d='M11.64 10.11L3.27 0.92C2.68 0.28 1.56 0.15 0.76 0.63-0.03 1.11-0.19 2.01 0.4 2.67L7.99 10.97 0.36 19.33C-0.23 19.97-0.07 20.89 0.72 21.37 1.04 21.57 1.41 21.67 1.79 21.67 2.33 21.67 2.87 21.47 3.21 21.08L11.64 11.85C12.11 11.33 12.11 10.63 11.64 10.11Z'/></svg>" )
		, url( "data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle fill='rgb(177,179,179)' cx='13' cy='13' r='13' /></svg>" );
	}

	&.red {
		background-color: var(--alarm-main-color);
		color: var(--alarm-font-color);
		background-image: url( "data:image/svg+xml,<svg width='20' height='19' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23'><path transform='translate(-2,1)' fill='rgb(184, 0, 7)' d='M11.64 10.11L3.27 0.92C2.68 0.28 1.56 0.15 0.76 0.63-0.03 1.11-0.19 2.01 0.4 2.67L7.99 10.97 0.36 19.33C-0.23 19.97-0.07 20.89 0.72 21.37 1.04 21.57 1.41 21.67 1.79 21.67 2.33 21.67 2.87 21.47 3.21 21.08L11.64 11.85C12.11 11.33 12.11 10.63 11.64 10.11Z'/></svg>" )
		, url( "data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle fill='rgb(255, 255, 255)' cx='13' cy='13' r='13' /></svg>" );
	}

	&.red:hover {
		background-color: var(--hover-alarm-main-color);
		color: var(--hover-alarm-font-color);
		background-image: url( "data:image/svg+xml,<svg width='20' height='19' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23'><path transform='translate(-2,1)' fill='rgb(255, 75, 80)' d='M11.64 10.11L3.27 0.92C2.68 0.28 1.56 0.15 0.76 0.63-0.03 1.11-0.19 2.01 0.4 2.67L7.99 10.97 0.36 19.33C-0.23 19.97-0.07 20.89 0.72 21.37 1.04 21.57 1.41 21.67 1.79 21.67 2.33 21.67 2.87 21.47 3.21 21.08L11.64 11.85C12.11 11.33 12.11 10.63 11.64 10.11Z'/></svg>" )
		, url( "data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle fill='rgb(255, 255, 255)' cx='13' cy='13' r='13' /></svg>" );
	}

	&.white {
		background-color: #fff;
		color: var(--main-color);
		border: 0.8px solid var(--subtle-border-color);
	}

	&.white:hover {
		background-color: var(--hover-main-color);
		color: var(--hover-font-color);
		border: 0.8px solid transparent;
		background-image: url( "data:image/svg+xml,<svg width='20' height='19' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23'><path transform='translate(-2,1)' fill='rgb(255, 255, 255)' d='M11.64 10.11L3.27 0.92C2.68 0.28 1.56 0.15 0.76 0.63-0.03 1.11-0.19 2.01 0.4 2.67L7.99 10.97 0.36 19.33C-0.23 19.97-0.07 20.89 0.72 21.37 1.04 21.57 1.41 21.67 1.79 21.67 2.33 21.67 2.87 21.47 3.21 21.08L11.64 11.85C12.11 11.33 12.11 10.63 11.64 10.11Z'/></svg>" )
		, url( "data:image/svg+xml,<svg width='26' height='26' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><circle fill='rgb(0, 21, 81)' cx='13' cy='13' r='13' /></svg>" );
	}

	&.small {
		padding-right: 35px;
		padding-left: 6px;
		line-height: 15px;
	}

	&:has(> svg.button-svg) {
		background-image: none;
	}

	& > svg.button-svg {
		fill: var(--font-color);
	}
	&:hover > svg.button-svg {
	}
}

button > span {
	color: inherit;
	text-transform: inherit;
	text-decoration: inherit;
	font-weight: inherit;
	font-size: inherit;
}

input[type=submit] i, input[type="button"] i, button i, a.button i, a.buttn i {
	margin-right: 3px;
}

body {
	padding: 0;
	margin: 0;
}

div.header {
	background-color: var(--header-background-color);
	padding: 15px;
	z-index: 100;
}

html:not([data-scroll='0']) {

}


body.iframe div.header {
	display: none;
}

div.logo, div.body {
	width: 1000px;
	position: relative;
	left: 50%;
	margin-left:-500px;
}

@media screen and (max-width: 1050px) {

	div.logo, div.body {
/*		width: calc(100% - 20px) !important;	*/
		box-sizing: border-box;
		width: 100% !important;

		margin: 0 !important;
		left: 0;
		padding: 0 10px;
	}
}


@media screen and (max-width: 768px),
	screen and (max-height: 412px) and (orientation: landscape) {

	h1 {
		font-size: 30px;
	}

	div.logo {
		background-size: contain !important;
	}

	div.header {
		position: sticky;
		top: 0;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
	}
}


@media screen and (max-width: 768px) {

	div.logo {
		height: 36px !important;
	}

	div.header {
		padding: 10px;
	}
}


@media screen and (max-height: 412px) and (orientation: landscape) {

	div.logo {
		height: 16px !important;
	}

	div.header {
		padding: 5px;
	}
}

body.iframe div.body {
	left: 0;
	width: 100%;
	margin:0;
}



/*
** lower base width start
*/
@media screen and (max-width: 800px) {
	body.w800 div.logo, body.w800 div.body {
		width: 100%;
		margin: 0;
		left: 0;
		padding: 0 10px;
	}
}
@media screen and (min-width: 840px) {
	body.w800 div.logo, body.w800 div.body {
		width: 800px !important; /* required due to previous !important */
		margin-left: -400px !important; /* required due to previous !important */
		left: 50%;
		padding: 0px;
	}
}
/*
** lower base width end
*/


/*
** lower base width start
*/
@media screen and (max-width: 600px) {
	body.w600 div.logo, body.w600 div.body {
		width: 100%;
		margin: 0 !important;
		left: 0;
		padding: 0 10px;
	}
}

@media screen and (min-width: 600px) {
	body.w600 div.logo, body.w600 div.body {
		position: relative;
		width: 600px !important; /* required due to previous !important */
		margin-left: -300px !important; /* required due to previous !important */
		left: 50%;
		padding: 0px;
	}
}
/*
** lower base width end
*/



div.content {
	padding-left: 0;
}


body.iframe div.content {
	padding: 0;
}

div.container {
	margin-top: 7px;
	margin-bottom: 12px;
}

body.iframe div.footer {
	display: none;
}