:root {
	--fortune-color: rgb(110, 44, 131);
}

html { font-size: 14px }
body { font-family: 'Roboto', sans-serif; font-size: 1rem; }


input, select, .input-text, .input-text-read-only { padding:4px; border:none; border-bottom:1px solid #ccc; }
input[type="text"], select {  }
input[type="checkbox"] { width: 20px; height: 20px; position: relative; top: 5px; }
input:read-only, .input-text-read-only { background-color: rgba(240,240,240,1) }
textarea { border-radius: 5px; border: 1px solid rgba(80,80,80,.4); }
a {text-decoration: none !important}
p,h1,h2,h3,h4,h5 { font-family: 'Nunito', sans-serif; margin-bottom: .5rem;}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.335rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1rem; }
pre {white-space: pre-wrap;}

.fa-spinner { color: steelblue }

@media screen {
	.page-navpane {
		position: fixed; top: 0; left: 0; bottom: 0; width: 150px;
		background: rgb(113,8,116); color: white;
	}
	.page-navpane .logo-wrapper {
		display: block;
		text-align: center;
	}
	.page-navpane .logo {
		text-align: center; line-height: 15px;
		padding: 4px 8px;
		font-size: 12px; font-family: "Times New Roman", Times, serif;
		display: inline-block;
		background: #710874;
		color: #fff;
		margin: 5px;
	}
	.page-navpane .menu-items .item { padding: 5px; display: block; margin: 5px 10px; border: 1px solid white;
			border-radius: 10px; text-transform: uppercase; text-align: center; cursor: pointer; }
	.page-navpane .logo img { height: 32px; width: auto; }
	.page-navpane .bottom { position: fixed; bottom: 0; left: 0; width: 150px; padding-left: 20px; font-size: 90%; }
	.page-navpane .dbname {  color: red; }
	.page-content { margin-left: 160px; padding-bottom: 200px; margin-right: 8px; }

	.menu-items .extra { margin-top: 100px }

	.site-header {
		overflow: hidden; padding: 0px 20px; border-bottom: 1px solid #ccc; color: #fff;
	}
	.site-header a {
		float: left; text-align: center; padding: 0px 4px; display: inline-block; margin: 3px 6px;
		 border-radius: 15px;
		text-decoration: none;
		line-height: 25px; border: 1px solid rgba(255,255,0,0.5);
		background: rgba(0, 0, 0, .2);
	}
	.site-header { margin-left: 130px; z-index: 2; border-radius: 25px 0 0 25px; position:relative  }
	.site-header a:hover {  }
	.site-title { vertical-align: middle; padding-left: 16px; font-size: 120% }
	.site-header-right { float: right; }
	.site-header-left { float: left; }

}
@media screen and (max-width: 500px) {
	.site-header a { float: none; display: block; text-align: left }
	.site-header-right, .site-header-left { float: none; }
}

@media print {
	.buttons-row { display: none; }
	.page-navpane, .site-header { display: none }
	.page-content { margin-left: 0; padding-bottom: 0; }
}

@media (min-width: 500px) { form.w3-container.input-form p { max-width: 600px } }

.label { font-weight: bold; color: var(--blue); }
.param-group, .line-group { margin-top: 15px }
.w3-input { margin-right: 5px }
.input-row { margin-bottom: 10px; }
.buttons-row { padding-left: 5rem; padding-top: 1rem; margin-bottom: 1rem; }
.buttons-row a, .buttons-row button, .buttons-row i, a.button { margin: 0 .3rem; }
.buttons-row .msg { color: var(--green); }
a.button { display: inline-block; border: 1px solid #333; border-radius: 3px; padding: 3px; color: black; background: rgb(239, 239, 239); }

.table-search td { padding: 0px 8px }
.table-search button {  }
.table-params td { padding: 8px 8px }

.pdf-icon { width: 24px; height: auto; }


.note { font-family: 'Roboto Mono', monospace; font-size: .9rem; }
.note .wrap { max-width: 97%; margin: 0 1rem; margin-bottom: 1rem; }
.note .body {
	background: rgba(175, 238, 238, .5);
	border: 1px solid rgba(204,204,204,.5);
	border-radius: 5px;
	padding: 2px 4px;
}
.note .footer { text-align: right; color: #777; margin-right: 1rem; }
.note .footer .delete { margin-right: 1rem; color: red; }
.note .footer .edit { margin-right: .5rem; color: green; }
.note.from .wrap { max-width: 80%; margin-right: 20%; }
.note.to .wrap { max-width: 80%; margin-left: 20%; }
.note.to .body { background: rgba(127,255,212, .4); }

.modal-close:hover { background-color: rgba(70,130,180,0.5) !important; border-radius: 5% }

header { background-color: #710874; color: white }

.drag-icon { height: 1rem; width: auto; vertical-align: bottom !important; opacity: 0.4; z-index:-1; user-select: none; }
tr.dragging { background-color: #ffeeba; }


#call-notification {
	position: fixed; z-index: 3; top: 50px; right: 30px; width: 310px; height: 100px;
	// background: rgba(70,130,180, .5);
	background-image: linear-gradient(to left, rgba(70,130,180, .3), rgba(70,130,180, .9));
	border: 3px solid rgba(0, 0, 200, .6); border-radius: 20px;
	color: black;
}
#call-notification .left-pane { position: absolute; top:0; left: 0; width: 200px; height: 100%; padding: 5px; line-height: 150%; overflow: hidden; }
#call-notification .right-pane { position: absolute; top:0; right: 0; width: 120px; height: 100%; padding: 5px }
#call-notification .close-window { position: absolute; right: 0; top: 0; display: inline-block; color: rgba(255, 0, 0, .8); font-size: 14px; padding: 2px 6px; cursor: pointer; }
#call-notification .right-pane .top-pane { position: absolute; width: 100%; height: 60%; top: 0; }
#call-notification .right-pane .bottom-pane { position: absolute; width: 100%; height: 30px; bottom: 0; }
#call-notification .customer-link { display: inline-block; margin-top: 5px; margin-right:15px; padding-top:5px; width: 85px; height: 58px;
	color: white; background: blue; border-radius: 40px; line-height: 100%; }
#call-notification .call-center-link { color: blue; cursor: pointer; text-decoration: underline }

.message-attachments { display: block; }
.message-attachments .attachment { display: block; margin-left: 10px; }

.border { border: 1px solid #ccc; }
.border-left { border-left: 1px solid #ccc }

.border-right,
	td.border-right, th.border-right,
	tr.border-right td, tr.border-right th { border-right: 1px solid #ccc }
.border-left,
	td.border-left, th.border-left,
	tr.border-left td, tr.border-left th { border-left: 1px solid #ccc }
.border-top,
	td.border-top, th.border-top,
	tr.border-top td, tr.border-top th { border-top: 1px solid #ccc }
.border-bottom,
	td.border-bottom, th.border-bottom,
	tr.border-bottom td, tr.border-bottom th { border-bottom: 1px solid #ccc }