/* Others */
body, a, p, h1, h2, h3, h4, h5, h6, span, div, td, th {font-family: Verdana;}

h1,h2,h3,h4,h5,h6,p {margin-left:0px;}
h1,h2,h3,h4,h5,h6 {margin-top:3px; margin-bottom: 3px;}

body {margin: 0px; }

hr { border-radius: 25px;}

.clearfix::after { content: ""; clear: both; display: table; }

.error {font-size: 20px; font-weight: bold; padding: 5px; }

* {outline: none;}

/* Pop up Data */
#Popup { border: 1px solid; padding: 10px; border-radius: 25px; }


/* Inputs, Labels & Buttons */
.FormContainer .FieldPrefix,
input[type=text],input[type=password] {font-size:120%; border-radius:25px; padding:5px; padding-left: 12px;}
input[type=button] {font-size:150%; border-radius: 25px;cursor:pointer; padding: 5px 12px;}
input[type=submit] {font-size:150%; border-radius: 25px;cursor:pointer; padding: 5px 10px;}
input[type=checkbox] {cursor:pointer;}
select {min-width:200px;}
select option {cursor:pointer; }

label { cursor: pointer; }

.ActionButton { float: right; }
.BadButton {font-weight: bold; text-transform: uppercase;}

/* Loading */
.LoadingText { text-align:center; font-size:24pt; margin: 0 auto; width: 270px;}
.LoadingSpin { margin: 0px 6px; border-radius: 50%; width: 15px; height: 15px; animation: spin 2s linear infinite; float: left; border: 10px solid; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#LoadingScreen { margin: 25px; border: 1px solid; padding: 15px; border-radius: 25px; top: 25px; position: relative;}
#LoadingScreen .LoadingText { width: 225px;}
#LoadingScreen .LoadingError { margin: 5px 10px;}
#LoadingScreen .ContinueButtonContainer { text-align:center; padding-bottom: 12px;}
#LoadingScreen .ProgressLog { max-height: 500px; overflow-y:auto;}

.ProgressBar { border: 1px solid; margin: 4px 10px 12px 10px; }
.ProgressBarInternal { overflow: hidden; min-height: 12px;}

/* Headers */
#HeaderBar  {  padding: 0px; text-align: left; position: relative;}
#HeaderBar h1 { font-size: 54pt; font-weight: bold; letter-spacing: 5px; padding-left: 235px; text-transform:uppercase; margin: 0; margin-top: -5px;}
#HeaderBar:after { content: ""; position: absolute; bottom: 0px; height: 6px; width: 100%; }
#HeaderBar a { font-size: 16px; text-decoration: none; }

.HeaderUserPanel {float: right; max-width: 500px; font-size: 14pt; padding: 10px; margin-top: 5px;}
.UserLine {margin: 3px; text-align:right;}
.UserPanelLinks {float: right;}

#userID {font-weight: bold;}

/* Logging In & Out */
.LoginContainer {margin: 20px auto; width:600px; border: 1px; border-radius:20px; padding:15px;}
.LoginForm table {width: 100%;}
.LoginForm td {width: 100%;}
.LoginForm td input[type=text],.LoginForm td input[type=password] {width: 95%;}
.LoginForm .error { margin: 2px; text-align: center;}

#UserLoginCheck .LoadingText {width: 620px;}

#UserLoginCheck {margin: 10px; border: 1px solid; padding: 10px; text-align: center; font-size:24pt; border-radius: 25px;}

/* Sections - Main Menu */
.SectionContainer {padding:0px;}
.Section {margin:0px;}

.SectionMenuBig { max-width: 1548px; margin: 60px auto; }
.SectionMenuBig .SectionContainer { float: left; width: 250px; height: 250px; border: 1px solid; text-align: center; margin: 3px; position: relative; cursor: pointer; border-radius: 25px; }
.SectionMenuBig .SectionContainer img {max-width: 210px; max-height: 170px; padding: 10px; }
.SectionMenuBig .SectionContainer h2 { position: absolute; bottom: 5px; width: 100%; text-align: center; font-size: 20pt;}

.SectionMenuSmall {width:100%; text-align:center; }
.SectionMenuSmall .SectionContainer {float:left; border: 0px solid; margin: 0px;  position: relative; cursor:pointer;}
.SectionMenuSmall .Section { height: 60px; padding-top:5px; padding-bottom: 5px; }
.SectionMenuSmall .SectionContainer img {max-width: 85px; max-height:55px; padding: 2px; }
.SectionMenuSmall .SectionContainer h2 {visibility: hidden; display: none; position: absolute; font-size: 85%; margin-top: 3px; white-space:nowrap;}
/*.SectionMenuSmall .SectionContainer:hover h2 {visibility:visible;display:block; border: 1px solid; padding: 2px;}*/

/* Sections - Menu Side Bar */
.SectionMenuSide { width: 200px; position: absolute; margin-top: 5px;}
.SectionMenuSide .SectionContainer:first-child {border-top-right-radius: 10px;}
.SectionMenuSide .SectionContainer:last-child {border-bottom-right-radius:10px;}
.SectionMenuSide .SectionContainer {width: 100%; width: 200px; border: 0px solid; margin: 1px; position: relative; cursor:pointer;}
.SectionMenuSide .Section { height: 40px; margin-top:0px; padding:3px 0px;}
.SectionMenuSide .SectionContainer .SectionImageContainer {text-align:center; float:left; width:55px;  }
.SectionMenuSide .SectionContainer img {max-width: 55px; max-height:35px; padding: 2px;}
.SectionMenuSide .SectionContainer h2 {font-size: 12pt; height: 35px; vertical-align: middle; margin: 0px 3px 3px 63px; text-align: left;}
.SectionMenuSide .SectionContainerSelected .SubSections {visibility:visible !important; display:block !important; font-weight: bold;}
.SectionMenuSide .SectionContainerSelected { margin-top: 5px; margin-bottom: 5px;}

/* Sections - Menu Top Bar */
.SectionContainer .SubSection {margin:0px; padding: 3px 3px 3px 61px; font-size: 11pt;}
.SectionContainer .SubSections {visibility:hidden; display:none;}
.SectionMenuSmall .SectionContainer .SubSections {position:absolute; min-width:100%; z-index:50000; text-align:left; border: 1px solid; border-top:0px; left:-1px;}
.SectionMenuSmall .SectionContainer .SubSection {padding: 6px; font-size: 12pt; white-space:nowrap;}
.SectionMenuSmall .SectionContainer:last-child .SubSections {right:0px;left:auto;}
.SectionMenuSmall .SectionContainerClicked .SubSections,
.SectionMenuSmall .SectionContainerSelected:hover .SubSections,
.SectionMenuSide .SectionContainerSelected .SubSections {visibility:visible !important; display:block !important; font-weight: bold;}

/* Sections - Titles */
.PageTitle { user-select: none; text-align: center; text-transform: uppercase; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin-top: -10px; margin-bottom: 13px; padding: 5px;}

/* Document Area */
#DocumentArea {clear:left; margin: 10px 0px 0px;}
#DocumentArea.Side {clear:none; margin: 10px 3px 0px 210px;}
#DocumentArea.Small > div {padding: 10px;}
#DocumentArea > div {margin: 3px;}

/* Data Table */
.DataTableLoading { font-size: 18pt; margin: 0px;}
.DataTableContainer {overflow-x:auto;overflow-y:visible; height:auto; clear:right; margin-top:12px; min-height: 60px;}
.DataTable { margin:3px 3px 10px 3px; width:99%; border:1px solid; border-radius:20px;}
.DataTable thead {margin:0px;}
.DataTable thead th {margin:0px; padding:2px 0px 2px 5px; font-size: 12pt; text-align:center; white-space:nowrap; cursor:pointer; min-width: 85px;}
.DataTable tbody {font-size:12pt;}
.DataTable tbody tr {cursor:pointer;}
.DataTable tbody td {margin:0px; padding:5px 3px; white-space:nowrap; overflow:hidden; max-width: 300px;}
.DataTable tfoot { margin:0px; padding:0px; }
.DataTableContainer input[type=button] {font-size:10pt; margin: 0px 2px;}
.DataTable .Summary,
.DataTable .RecordCountSelector { margin: 8px 2px 2px;font-weight:bold;}
.DataTable .Paginator {float:right;}
.DataTable .Paginator td { border: 2px outset; padding: 2px 5px; cursor:pointer; }
.DataTable .Summary {float:left; padding-right: 10px; }
.DataTable .RecordCountSelector {border-left: 1px solid; padding-left: 10px; float:left;}
.DataTableControls .DataTableFields,
.DataTable .PageInput {border:1px solid; border-radius: 3px;}
.DataTable .PageInput p {margin:0px; padding: 4px; text-align:center;}
.DataTable .PageInput input[type=text] {font-size:12pt; padding: 2px; margin:3px; width:100px !important;}
.DataTable .Filters input[type=text] {font-size:10pt; padding: 3px; width:96% !important; text-align:center;}
.RecordCountSelector select { padding: 3px; border-radius: 25px; cursor: pointer; width: 70px; text-align:right; min-width:70px;}

.DataTableControls .FilterButtons {width: 42px; max-width: 42px;}
.DataTableControls .FiltersButton {background-image: url(../img/datatable/filters.png); background-repeat: no-repeat;background-position: 4px 6px; width: 36px; height:36px; }
.DataTableControls .FieldsButton  {background-image: url(../img/datatable/fields.png);  background-repeat: no-repeat;background-position: 4px 6px; width: 36px; height:36px; } 

/* Calendar */
.Calendar { border: 1px solid; border-radius: 15px; padding: 6px; clear: right; min-height: 50px; }
.CalendarTable {border-collapse: collapse; border-radius: 10px;}
.CalendarTable .CalendarNavRow select { font-size: 14pt; margin:0px; }
.CalendarTable .CalendarNavRow { font-size: 16pt; }
.CalendarTable .CalendarNavRow span,
.CalendarTable .CalendarNavPrevious,
.CalendarTable .CalendarNavNext { cursor: pointer; }
.CalendarTable .CalendarBox .CalendarEventText {max-height:60px; overflow:hidden;}
.CalendarTable .CalendarDate { text-align: center; border-radius: 25px; border-top-left-radius: 0; border-top-right-radius: 0;}
.CalendarTable td { width: 14.28%; }
.WeekdayTitle { padding: 3px;}

.CalendarTable td,
.CalendarTable th {border-left: 1px solid; padding: 5px;}
.CalendarTable .CalendarDateRow td {border-bottom: 3px solid;}
.CalendarTable thead tr th {border-top: 1px solid;}
.CalendarTable .CalendarDayNameRow th {border-bottom: 1px solid;}
.CalendarTable th:last-child,.CalendarTable td:last-child {border-right:1px solid;}
.CalendarTable .CalendarEvent { border: 1px solid !important; text-align: center; }
.CalendarTable .CalendarEventTimes {font-size:10pt;}

.WidgetCalendarDisplay {border-radius: 6px; border: 1px solid; margin-left: 10px;}
.WidgetCalendarDisplay .WidgetCalendarTimeContainer {border-left: 1px solid; position:relative;}
.WidgetCalendarDisplay .WidgetCalendarTimeContainer .WidgetCalendarTimeTitle {padding: 5px; margin:0px; height: 20px; margin-bottom: 5px; text-align:center; }
.WidgetCalendarTable {border-collapse:collapse; border-radius: 6px;}
.WidgetCalendarTable thead select { font-size: 16pt;}
.WidgetCalendarTable .WidgetCalendarDayNameRow {padding: 3px 0px;}
.WidgetCalendarButton { height: 32px; width: 40px; background-image:url(../img/form/calendar24black.png); background-repeat:no-repeat; background-position: 6px 2px;}
.WidgetCalendarButton:hover {background-image:url(../img/form/calendar24white.png); }
.WidgetCalendarText {min-width: 185px; text-align:right;}
.WidgetCalendarTable .WidgetCalendarNavPrevious,
.WidgetCalendarTable .WidgetCalendarNavNext {cursor:pointer;}
.WidgetCalendarDate {text-align:center; padding: 4px; cursor:pointer;}

.CalendarFullDay thead th {font-size: 24pt;}
.CalendarFullDay tbody th {font-size: 18pt;}
.CalendarDayEventContainer {padding: 3px; margin:3px;}
.CalendarDayEventContainer h3 { margin:0px;}
.CalendarDayEventContainer .CalendarDayEventCategory {margin:0px; text-align:center;}
.CalendarDayEventContainer .CalendarDayEventTimes {text-align:center; margin: 3px;}
.CalendarDayEmpty {border:1px solid; font-size:14pt;}


.CalendarTable .CalendarDateRow .CalendarToday {font-weight: bold;}


/* Forms */
.FormContainer {clear:right; margin:12px auto; width:90%; border:1px solid; border-radius:15px; padding:8px; }
.FormContainer .FormModeSelector {width: 350px; float: right; text-align: right; margin-top: 3px;}
.FormContainer .FormModeSelector select {font-size: 16pt; border-radius: 25px; cursor:pointer;}
.FormContainer .FormModeSelector select option {cursor:pointer;}
.FormContainer .FormPageSection {clear:left;}
.FormContainer .FormField { clear:left;}
.FormContainer .FormField input[type=checkbox] {height: 32px; width:32px;}
.FormContainer .FormFieldLabel {width:200px; display:block; float:left;  text-align:right; font-weight:bold; padding: 7px;}
.FormContainer .FormFieldValueReadOnly { padding: 7px; display:block;}
.FormContainer .FormFieldValue {margin-bottom: 3px; float:left; margin-right: 10px; width:calc(50% - 13px);min-width: 300px;}
.FormContainer input.FormFieldValue[type=checkbox] {min-width: 0; }
.FormContainer select.FormFieldValue  {font-size: 16pt; border-radius: 6px; padding: 3px;}
.FormContainer select.FormFieldValue option {cursor:pointer;}
.FormContainer .FormFieldError { font-weight: bold; padding: 6px;}
.FormContainer .FormSectionDescription {padding: 10px;}
.FormContainer .FormButtonContainer {margin-top: 15px; clear:left;}
.FormContainer .FormButtonContainer .Next { float: right; }
.FormContainer .FormButtonContainer .Back { float: left; }
.FormContainer .FormSummary { padding-left: 10px;}
.FormContainer .FormSummaryFields {margin: 20px;}
.FormContainer .FormSummaryField {height: 30px;}
.FormContainer .FormSummaryFieldLabel {float:left; text-align:right; width: 200px; padding-right:4px; font-weight:bold; }
.FormContainer .FormSummaryButtonContainer {text-align:center;}
.FormContainer .FormSummaryBack {float:left;}
.FormContainer h3 { padding: 5px; font-weight: bold; font-size: 18pt; padding-left: 25px;}
.FormContainer .FormFieldErrorMessage {font-weight: bold; font-size: 14pt;}
.FormContainer .FieldPrefix {float:left; padding-bottom: 6px; text-align:right; border: 1px solid; border-right:0px; display:block; min-width:0px; width:60px; overflow:hidden; padding-left:5px; border-top-right-radius:0px; border-bottom-right-radius:0px;}
.FormContainer .FieldSuffix {padding-bottom: 6px; text-align:right; border: 1px solid; border-left:0px; display:block; min-width:0px; width:60px; overflow:hidden; padding-right:5px; border-top-left-radius:0px; border-bottom-left-radius:0px;}
.FormContainer .FormFieldValuePrefixed {border-top-left-radius:0px; border-bottom-left-radius:0px;width:calc(100% - 103px);min-width: 240px;}
#FormModeSelect {padding-left: 5px;}
/* LookUp List*/
.LookupListResults { margin-left: 80px; border:1px solid; border-top: 0px; margin-top: -3px; max-height: 200px; overflow-y: auto; }
.LookupListResults .LookupListResult { padding: 7px; font-size: 12pt; cursor: pointer; }

/* Settings */
.SettingsContainer {border: 1px solid; border-radius:4px; padding: 26px 6px 26px 6px; min-height: 50px; clear: right;}
.SettingsContainer label {width: 200px; display: block; float: left; text-align: right; font-weight: bold; padding: 6px; cursor: pointer;}
.SettingsContainer select {font-size: 16pt; border-radius: 15px; cursor: pointer; text-align: center; padding:5px;}
.SettingsContainer select option {cursor: pointer;}
.SettingsContainer .SettingsValue {margin-bottom: 3px; }

/* Tabs */
.TabControl .TabTitles { position:relative; padding-left: 20px; height:36px; font-size:18pt; padding-bottom: 2px;}
.TabControl .TabTitle {float:left; padding: 4px 12px; border: 1px solid; border-top-left-radius: 10px;border-top-right-radius: 10px; cursor:pointer;}
.TabControl .TabTitleSelected {font-weight:bold;}
.TabControl .TabContents {min-height: 60px; border: 1px solid; border-radius: 10px; }
.TabControl .FormContainer {border:0px;}

/* WYSIWYG */
.FormField .WysiwygContainer {width:50%;min-width: 313px; }
.WysiwygContainer { border: 1px solid; box-sizing: border-box; }
.WysiwygContainer .WysiwygContent {  box-sizing: border-box; height: 300px; outline: 0; overflow-y: auto; padding: 10px; }
.WysiwygContainer .WysiwygActionBar { border-bottom: 1px solid; }
.WysiwygContainer .WysiwygButton { border: none; cursor: pointer; height: 30px; outline: 0; width: 30px; vertical-align: bottom; }
  
  
.MapContainer {border: 1px solid;}
.MapContainer .MapCoordinates {text-align:center; border-bottom: 1px solid;}