﻿
html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	
	font-family: var(--font-sheet);
	background-color: var(--color-background);
}

@media print{
	html, body{
		background-color: white;
	}
}

input, textarea, select {
	font-family:inherit;
}

.ui-widget{
	font-family:inherit !important;
}

.ui-dialog-titlebar {
	font-family: var(--font-title);
	color: var(--color-title);
	background-color: var(--color-background);
}

header{
	height: 60px;
	
}

section.main_section{
	position: relative;
	width: 100%;
	height:  calc(100% - 60px); /* -header */
	overflow: auto; 
}

*:not(input):not(button):not(a) {
	cursor: default;
}
*:not(input) {
	
  -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 */
}


*::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 5px;
	background-color: #F5F5F5;
}

*::-webkit-scrollbar
{
	width: 5px;
	height: 5px;
	background-color: #F5F5F5;
}

*::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	
	background-image: repeating-linear-gradient(
		45deg,
		#999,
		#999 3px,
		#CCC 3px,
		#CCC 6px
	); 
}

.title{
	font-size: 55px;
	text-align: center;
	max-width: calc(100% - 100px);
	font-family: var(--font-title);
	font-weight: normal;
	color: var(--color-title);
	margin: auto;
}

.subtitle{
	font-size: 18px;
	text-align: center;
	max-width: calc(100% - 100px);
	font-family: var(--font-sheet);
	font-weight: normal;
	color: var(--color-title);
	margin: auto;
}

.home-button{
	position: absolute;
	top: 10px;
	left: 20px;
	width: 25px;
	height: 25px;
	
}

.home-button img{
	width: 100%;
	height: 100%;
	cursor: pointer;
}

#serverStatus{
	display: inline-block;
	position: absolute;
	top: 15px;
	left: 60px;
	color: var(--color-text);
	font-weight: bold;
}

#serverStatus.serverNOK{
	animation: blinker 1s linear infinite;
	color: red;
}


.sheet{
	border-radius: 3px;
	box-shadow: 3px 3px 5px #444;
	
	color: var(--color-sheet-text);
	background-color: var(--color-sheet-bg);
}

.sheet-title{
	text-align: center;
	font-weight: normal;
	font-family: var(--font-sheet-title);
	color: var(--color-sheet-title);
}

.sheet-button, .sheet-file-input::file-selector-button{
	cursor: pointer;
	
	font-family: var(--font-sheet-button);
	font-size: 16px;
	
	border: 1px solid var(--color-sheet-button-border);
	border-radius: 5px;
	
	color: var(--color-sheet-button-text);
	background-color: var(--color-sheet-button-bg);
}

.sheet-button:disabled, .sheet-file-input::file-selector-button:disabled{
	cursor: default;
	border-color: var(--color-sheet-button-border-disabled);
	background-color: var(--color-sheet-button-bg-disabled);
}

.sheet-button:focus, .sheet-button:active, .sheet-file-input::file-selector-button:focus, .sheet-file-input::file-selector-button:active{
	outline: 0;
	background-color: var(--color-sheet-button-bg-focus);
}

.sheet-button-delete{
	cursor: pointer;
	
	font-family: var(--font-sheet-button-delete);
	font-size: 16px;
	
	border: 1px solid var(--color-sheet-button-delete-border);
	border-radius: 5px;
	
	color: var(--color-sheet-button-delete-text);
	background-color: var(--color-sheet-button-delete-bg);
}

.sheet-button-delete:disabled{
	cursor: default;
	border-color: var(--color-sheet-button-delete-border-disabled);
	background-color: var(--color-sheet-button-delete-bg-disabled);
}

.sheet-button-delete:focus, .sheet-button-delete:active{
	outline: 0;
	background-color: var(--color-sheet-button-delete-bg-focus);
}

.sheet-link {
	font-family: var(--font-sheet-title);
	color: var(--color-sheet-title);
}

.sheet-checkbox {
	width: 20px;
	height: 20px;
}