html { margin: 0; padding: 0; }
body { font-family: "Open Sans", sans-serif; margin: 0; padding: 0; }
input, textarea { font-family: "Open Sans", sans-serif; }

:root {
	--nav-height: 60px;
}

nav { position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height); background: #231f20; display: flex; align-items: center; padding: 10px; box-sizing: border-box; }
nav .logo { height: 40px; }
nav .menu { margin-left: 80px; }
nav .menu a { margin: 0 20px; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 300; text-decoration: none; font-size: 10pt; }
nav .menu a:hover { color: #eee; }

/*main { padding-top: calc(var(--nav-height) + 10px); padding-left: 20px; padding-right: 20px; } */

@media only screen { 
	main { padding-top: calc(var(--nav-height) + 10px); padding-left: 20px; padding-right: 20px; }
	.print-only { display: none; }
}

@media only print {    
	.no-print, .no-print * { display: none !important; }
}

.content { font-size: 11pt; color: #4d4d4f; }
.content a { color: #e75200; text-decoration: none; }
.content a:hover { color: #cf4900; text-decoration: underline; }
.content h1 { font-size: 2em; font-weight: 600; margin-top: 0; }


.btn { appearance: none; border-radius: 3px; padding: 4px 10px; color: #e75200; cursor: pointer;  }
.btn-primary { background-color: #231f20; color: #fff; text-transform: uppercase; border: solid 1px #231f20; font-size: 0.85em; outline: none; } 
.btn-primary:active { background-opacity: 0.8; }
.btn-icon { appearance: none; color: #e75200; border: none; background: none; cursor: pointer; padding: 0; outline: none; vertical-align: text-bottom; }


.panel { background: #fafafa; padding: 10px; box-sizing: border-box; }
.field-group { margin-bottom: 15px; }
.field-group label { font-size: 0.7em; text-transform: uppercase; color: #000; display: block; margin-bottom: 2px; font-weight: 600; }
.field-group p { margin: 0; }
.field-group input[type="text"] { width: 100%; padding: 5px; border: solid 1px #ccc; border-radius: 3px; background: #fff; font-size: 11pt; color: #4d4d4f; box-sizing: border-box; }
.field-group input[type="PASSWORD"] { width: 100%; padding: 5px; border: solid 1px #ccc; border-radius: 3px; background: #fff; font-size: 11pt; color: #4d4d4f; box-sizing: border-box; }
.field-group textarea { width: 100%; height: 120px; padding: 5px; border: solid 1px #ccc; border-radius: 3px; background: #fff; font-size: 11pt; color: #4d4d4f; box-sizing: border-box; }


.tabs { display: flex; width: 100%; border-bottom: solid 1px #eee; margin-bottom: 0px;}
.tabs a { font-weight: 600; color: #4d4d4f; display: block; border-bottom: solid 1px #fff; padding: 15px 15px; }
.tabs a.active { color: #e75200; border-bottom: solid 1px #e75200; pointer-events: none;}
.tabs a.active:hover { text-decoration: none; }
.tabs a:hover:not(.active) { color: #333; border-bottom: solid 1px #333; text-decoration: none; }


.breadcrumbs { font-size: 9pt; }
.breadcrumbs a {  }
.breadcrumbs span { margin-right: 5px; }


.toast { position: fixed; top: 5px; right: 5px; background: green; color: #fff; padding: 10px; font-size: 10pt; animation: fadeInOut 4s linear 1 forwards; }

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
	10% {
    opacity: 0;
	}
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}