/*<style>*/

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
/* Default */
html, body {height: 100%;}
body, input, select, button, textarea, pre, #FilesBox {font-family: roboto, "open sans", "segoe ui", "segoeui", "arial", sans-serif; font-size: 12pt;}
form {margin: 0px;}
input[type=text] {box-sizing: border-box;}

/* Title Bar */
#TitleBar {position: fixed; top: 0px; left: 0px; z-index: 200; width: 100%; text-align: left; font-size: 0px; letter-spacing: -0.4px; background: black; height: 64px; color: black; font-family: "open sans", roboto, sans-serif; font-size: 10pt; padding-top: 15px; padding-left: 10px; padding-right: 54px; padding-bottom: 15px; box-sizing: border-box; box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28); vertical-align: middle; overflow: hidden; white-space: nowrap;}
#TitleBar * {vertical-align: middle;}
#TitleBarIcon {width: 32px; height: 32px; vertical-align: middle; margin: 0px 16px 0px 16px; border-radius: 10px;}
#TitleBarText {display: inline-block; vertical-align: middle; font-size: 22.1px;}
#SignOutButton, #SignUpButton, #ProfileButton {z-index: 301; display: block; opacity: 0; transition: opacity 0.5s; width: 32px; height: 32px; border-radius: 100px; background-size: contain; top: 16px; right: 14px; position: fixed; cursor: pointer; text-align: center;}
	#ProfileButton.SignInButton, #SignUpButton.SignUpButton {width: auto; display: inline-block; padding-top: 10px; padding-right: 5px;}
#SignOutButton.TextOnly, #ProfileButton:not(.HasMenu).TextOnly {box-sizing: border-box; opacity: 1; padding-top: 6px; padding-bottom: -6px; font-size: 14pt; text-align: center; background: white; color: black;}
#SearchBox {background-color: rgba(255,255,255,0.3); background-image: url('../graphics/search.png?'); background-position: 10px 12px; background-repeat: no-repeat; width: 600px; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid transparent; border-radius: 8px; margin-top: -6px; margin-bottom: -6px; margin-left: 30px; cursor: text; vertical-align: middle; outline-width: 0; transition: background 0.3s;}
#SignOutButton.TextOnly, #ProfileButton.TextOnly {box-sizing: border-box; opacity: 1; text-align: center; background: white; color: black;}
#SignOutButton.TextOnly, #ProfileButton:not(.HasMenu).TextOnly {padding-top: 6px; padding-bottom: -6px; font-size: 14pt;}
#SearchBox:focus {background-color: rgba(255,255,255,1);}
#TitleBar button {display: inline-block; background: transparent; color: inherit; font-size: 10pt; margin-top: 1px; margin-left: 10px; border-radius: 4px; box-sizing: border-box; padding: 6px 12px 6px 12px; height: 34px; width: auto; cursor: pointer; outline: none;}
#TitleBar button, #TitleBar select {border: solid 1px rgba(0, 0, 0, 0.3);}
#TitleBar.DarkBackground button, #TitleBar.DarkBackground select {border-color: rgba(255, 255, 255, 0.8);}
#TitleBar button:nth-child(3):not(.Right) {margin-left: 40px;}
#TitleBar button:hover {background: rgba(255, 255, 255, 0.2); filter: none;}
#TitleBar .RoundButton {margin: 0px 3px 0px 3px; width: 36px; height: 36px; display: inline-block; background-size: 76%; background-repeat: no-repeat; background-position: 50%; vertical-align: middle; border-radius: 20px; cursor: pointer; font-size: 20pt; text-align: center;}
#TitleBar .Right {float: right;}
#TitleBar .RoundButton.Disabled, button.Disabled {opacity: 0.6; cursor: default; pointer-events: none;}
#TitleBar .RoundButton:hover:not(.Disabled) {background-color: rgba(255, 255, 255, 0.5);}
#TitleBar select {border-radius: 4px; font-size: 10pt; padding: 6px 12px 6px 12px; background: rgba(255,255,255,0.5);}
#TitleBar label {margin-right: 4px; margin-left: 10px;}
#TitleBar label:nth-child(3):not(.Right) {margin-left: 20px;}
#TitleBar.DarkBackground {color: white;}

/* Message Box */
.MessageBoxContainer {display: none; z-index: 900; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8);}
.MessageBox {background: white; position: fixed; top: 100px; width: 600px; left: calc(50% - 340px); color: black; padding: 20px; box-shadow: 0px 0px 4px rgba(0,0,0,0.14), 0px 4px 8px rgba(0,0,0,0.28); font-size: 10pt;}
.MessageBoxContainer.Show {display: block;}
.MessageBox h1 {font-size: 12pt; margin: -4px 0px 10px 0px; text-align: left;}
.MessageBox h2 {font-size: 10pt; margin: 0px 0px 6px 0px; text-align: left;}
.MessageBox button, .MessageBox pre {font-size: 10pt;}
.MessageBox .Table {display: table; width: 100%; border-spacing: 0px 4px;}
.MessageBox .Row {display: table-row;}
.MessageBox .Cell {display: table-cell; padding: 2px; vertical-align: middle;}
.MessageBox .Cell.Heading {font-weight: bold;}
.MessageBox .Cell:first-child {width: 10px; padding-right: 10px;}
.MessageBox .Cell input[type=text] {width: 100%;}
.MessageBox .BottomButtons {text-align: center;}
.MessageBox .BottomButtons button {min-width: 80px;}

.Tabs {border-bottom: solid 1px rgba(0,0,0,0.3); background: white; text-align: center;}
.Tab {display: inline-block; padding: 15px; text-transform: uppercase; border-bottom: solid 2px transparent; font-family: roboto, sans-serif; font-size: 11pt; font-weight: 500; color: rgba(0,0,0,0.66); -webkit-font-smoothing: antialiased; cursor: pointer;}
.Tab:hover {color: rgba(0,0,0,0.75);}
.Tab.Active, .Tab.Active:hover {border-bottom: solid 2px #548fff; color: #548fff;}


/* Buttons */
input[type="file"] {display: none;}
button, input[type=submit], input[type=button], .FileUploadButton, .Button {display: inline-block; font-family: roboto, sans-serif; font-size: 10pt; min-width: 57px; padding: 6px 10px; border: solid 1px rgba(0,0,0,0.3); border-radius: 2px; color: black; cursor: pointer; text-decoration: none;}
button:not(.Disabled), input[type=submit], input[type=button], .FileUploadButton, .Button {background: #f4f4f4;}
button:hover, input[type=submit]:hover, input[type=button]:hover, .FileUploadButton:hover, .Button:hover {filter: brightness(0.9);}
.GreyButton {background-color: #f4f4f4 !important; color: black !important;}
.DefaultButton, input[type=submit] {background-color: #548fff !important; color: white !important;}
.DeleteButton, .RedButton {background-color: red !important; color: white !important;}

/* Select List Box with icons */
select.IconListBox {width: 100%;}
select.IconListBox option {background-size: contain; background-repeat: no-repeat; box-sizing: border-box; xtext-align: center;}
select.IconListBox.LargeIcons option {height: 48px; margin-bottom: 4px; padding-left: 54px; padding-top: 12px; width: 100%;}
select.IconListBox.LargeIcons option:checked {}

/* ListView */
.ListView {padding: 4px; overflow-y: scroll; height: 258px; max-height: calc(100% - 180px); margin: 0px 0px 0px 0px; text-align: left; border: solid 1px silver;}
.ListViewItem {width: 104px; height: 104px; margin: 2px; text-align: center; cursor: pointer; display: inline-block; font-size: 10pt; vertical-align: top; text-align: center; box-sizing: border-box; border-radius: 5px; text-decoration: none; color: black;}
.ListViewSelectionBox {padding-top: 4px; padding-bottom: 4px; box-sizing: border-box; border-radius: 5px; border: solid 1px transparent;}
.ListViewItem.Selected .ListViewSelectionBox, .ListViewItem .ListViewSelectionBox:hover {color: navy; border-color: #548fff; background-color: #A8D2FF;}
.ListViewItem.Selected .ListViewSelectionBox {background: #CEE5FF !important;}
.ListViewItemImage {position: relative; height: 50px; width: 100%; background-color: transparent; background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: 5px; margin-bottom: 1px; box-sizing: border-box;}
.ListViewItemImage div {position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; background-size: contain; background-position: center; background-repeat: no-repeat;}
.ListViewItemTitle {max-height: 50px; min-height: 14px; overflow: hidden; text-overflow: ellipsis;}

/* Files */
#FilesBox {margin-top: 80px; text-align: center;}
#FilesBox .ListView {overflow: visible; border: none; width: auto;}
#StatusText {text-align: center;}

/* JSColor */
.SmallColourPicker, .SmallColourPicker, .SmallWideColourPicker {border-radius: 5px; border: solid 1px silver; width: 43px; height: 43px; color: transparent; font-size: 0; text-align: center; content: '\25B8'; cursor: pointer;}
.SmallColourPicker {width: 18px; height: 18px;}
.SmallWideColourPicker {width: 100px; height: 18px;}

/* Printing */
@media print {
	.NoPrint, #SignOutButton, #ProfileButton {display: none;}
}