:root {
	--zero: #FAFAFA;
	--one: #f0f1f1;
	--two: #e8feff;
	--three: #3d7583;
	--four: #2a4f58;
	--contrast: #EE6C4D;
	
	--dark-shadow: #AAA;

	--text: var(--three);
	--background:  #fff;
	--input: rgb(253, 253, 253);

	--topmost-zindex:  1000;

	--panel-border: #c8d9d5;
	--menu-separator: #dbe3ec;
	--menu-width: 15em;

	--main-item-height: 80vh;

	--loader-size: 80px;
	--loader-color: #554433 transparent transparent transparent;
	font-size:  14px;
}

body {
	min-width: 320px;
	background-color: var(--background);
	background: linear-gradient(108deg, rgb(253 253 253) 0%, rgb(208 215 217) 100%);
	background-repeat: no-repeat;
    background-attachment: fixed;
	color:  var(--text);
}

input, select {
	border: 1px solid var(--panel-border);
	border-radius: 0.25em;
	background-color: var(--input);
	color: var(--three);
}

input:focus-visible, select:focus-visible {
    outline: 1px solid var(--three);
}

input[readonly] {
    background-color: var(--one);
}

select[readonly] {
    background-color: var(--one);
  	pointer-events: none;
  	touch-action: none;
}

select[readonly] {
     -webkit-appearance: none;
    -moz-appearance: none;
}

textarea[readonly] {
    background-color: var(--one);
  	pointer-events: none;
  	touch-action: none;
  	resize: none;
}


.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus{
    color: var(--zero) !important;
    background-color: var(--three)!important;
    border-color: var(--two)!important;
}

.btn-primary:hover {
    filter: brightness(90%)
}

.btn-primary:active {
    filter: brightness(80%)
}

.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--one);
}

.btn-secondary, .btn-secondary:hover, .btn-primabtn-secondary:active, .btn-primabtn-secondaryry:focus {
    color: var(--three)!important;
    background-color: var(--background)!important;
    border-color: var(--three)!important;
}

.btn-secondary:hover {
    filter: brightness(95%)
}

.btn-secondary:active {
    filter: brightness(90%)
}

.btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem var(--one);
}

.badge {
	position:  fixed;
	display: inline-block;
	bottom: -1.5em;
	right: -5em;
	padding: 0.5em 3em 5em 3em;
	background-color: var(--four);
	color: var(--contrast);
	font-size: 1.3em;
	text-shadow:  2px 2px 5px #333;
	text-align: center;
	transform:  rotate(-45deg);
	user-select:  none;
}

.badge::empty {
	display: none;
}

.right-text {
	text-align: right;
}

.bold {
	font-weight: 700;
}

.table thead {
	border-bottom: 1px solid var(--panel-border);
}

.table tbody tr:nth-of-type(odd) {
	background-color: var(--zero) !important;
}

.table tbody tr:nth-of-type(even) {
	background-color: var(--background) !important;
}

.table tbody tr:hover {
	background-color: var(--one) !important;
}

.table td {
	color: var(--three);
}

.table-action {
	display: inline-block;
	cursor: pointer;
}

.table-action:hover {
	color: var(--contrast);
}

.table-action .material-icons {
	font-size: 1.4em!important;
}

.section-separator {
		margin: 1em 0;
}

.modal-body {
     overflow-y: auto;
}