/* Page sections
----------------------------------------------------------*/
.contextPopup
{
    visibility: hidden;
    z-index: 10;
    position: absolute;
}

.contextPopup button { font-size: 0.625em; width: 100%;}

#version
{
	position: absolute;
    right: 10px;
    bottom: 1px;
    z-index: -100;
}

html, body
{
	width: 100%;
	margin: 0px;
	padding: 0px;
}

#main {margin: 10px 10px 0px 10px;}
#header
{ 
	display: block;
	width: 100%;
	min-width: 800px;
	margin: 0px;
	padding: 0px;
}

#menucontainer
{ 
	float: right;
	z-index: 50;}

#title { margin-top: -3px;}
#title a { display: inline-block; }

/* Other default settings
-----------------------------------------------------------*/
/* buttons which are only there to push css around */
button.HideButton 
{
	visibility:hidden;
}

img { border:0px; margin: 0;}

a:link, a:visited { text-decoration: none; }
a.ReadOnlyField:not(.cursor) {color:#646464;
                              cursor:default;}
td:not(.cursor) a.ReadOnlyField
{
	cursor:default;
}

td.cursor a.ReadOnlyField
{
	cursor:pointer;
}

a.ReadOnlyField {color:#646464; }

a.ShowLink:link, a.ShowLink:visited { text-decoration: underline; }

table { border-collapse: collapse; }
table.GridLayout td { padding-left: 5px; padding-right: 4px; }
table.GridLayout th { margin-left: 6px; }

table.GridLayout input.offPeriodStartDate {width: 80px;}
table.GridLayout input.offPeriodEndDate {width: 80px;}
table.GridLayout input.offPeriodStartTime {width: 80px;}
table.GridLayout input.offPeriodEndTime {width: 80px;}

ul { line-height: 1.4em; }

.cursor { cursor:pointer; }

#overlay 
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 100; 
    display:none;
}

.overlay 
{
    position: absolute;
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 49; 
    display:none;
}

#messageBox
{
    position:relative;
    padding: 8px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    max-width: 500px;
    z-index:115;
}
#messageBox #errorimg { float: left; margin-right: 2px; }

#messageBox .buttons { text-align: right; white-space: nowrap; }
#messageBox .buttons form { display: inline-block; }

/* Buttons */
button.editDetails, button.new, button.ok, input.ok, button.cancel, button.delete, button.save { width: 80px; }
button.ok .ui-icon
{
    background-image: url(images/ui-icons_00a300_256x240.png);
}
button.delete .ui-icon,
.ui-icon.Red
{
    background-image: url(images/ui-icons_ff2800_256x240.png);
}

.IconAndText { display: inline-block; white-space: nowrap; }
.IconAndText .ui-icon { vertical-align: bottom; }

/* AjaxLoadingPopup
----------------------------------------------------------*/
.AjaxLoadingPopup
{
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2000;
}
.AjaxLoadingPopup .TFPPanel
{
	width: 300px;
	margin: auto;
	text-align: center;
	background-color: #fff;
}

#AjaxLoadingOverlay
{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    z-index: 1999; 
    display:none;
}
#AjaxLoadingOverlay.Visible { display: block; }


/* TFPPanel
----------------------------------------------------------*/
.TFPPanel
{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

.TFPPanel fieldset
{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

.TFPPanel.NamedIdPanel
{
	padding: 0;
	margin-right: 20px;
	display: inline-block;
}


/* Invisible table
----------------------------------------------------------*/

table.noBorder {border-collapse: collapse; }
table.noBorder>tr>td,
table.noBorder>tbody>tr>td,
table.noBorder>tr,
table.noBorder>tbody>tr
{
    background: inherit;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Generic style for table
----------------------------------------------------------*/
.TFPTable input {margin: 0;}
.TFPTable input[type=text]{ width: 100%;}
.TFPTable select {margin: 0; width: 100%;}
.TFPTable thead th { text-align:left; }
.TFPTable thead th.Number { text-align: center;}
.TFPTable tbody tr:hover { background-color: #E8E8E8; }

/* Datatables
----------------------------------------------------------*/

/* 
	Fix for header alignment in datatables 
	Padding left/right (and margin?) of <th> must be the same in the dataTables_scrollHead and dataTables_scrollBody sections
	in order to let datatables set the column widths correctly.
*/
.dataTables_wrapper .dataTables_scrollHead thead>tr>th,
.dataTables_wrapper .dataTables_scrollBody thead>tr>th
{ margin: 0; }
.dataTables_wrapper .dataTables_scrollHead thead>tr>th,
.dataTables_wrapper .dataTables_scrollBody thead>tr>th,
.dataTables_wrapper .dataTables_scrollBody tbody>tr>td
{
	/* cell padding must also be the same as the headers - otherwise the header and tds won't align when they're left aligned */
	padding-left: 4px; 
	padding-right: 4px;
}

.dataTables_wrapper>.ui-toolbar { overflow:hidden; }

.ui-toolbar.ui-widget-header
{
	border: 0;
	padding: 4px;
}

.ui-toolbar .ButtonPlaceholder { display: inline; }
.ui-toolbar .ButtonPlaceholder .ButtonList { float: right; }
div.dataTables_scroll td 
{
	height:18px;
}

.ui-toolbar .dataTables_filter, .ui-toolbar .dataTables_info
{
	margin-bottom: 2px;
	margin-right: 4px;
	float: inherit;
	display: inline-block;
	text-align: inherit;
}

.ui-toolbar .dataTables_filter span.ui-icon { display: inline-block; vertical-align: sub; }

.ui-toolbar .dataTables_info { display: block; }
.ui-toolbar .dataTables_info.ui-enabled { cursor: pointer; }
.ui-toolbar .dataTables_info.ui-enabled:hover { text-decoration: underline; }
.ui-toolbar .dataTables_info span.ui-icon { display: inline-block; vertical-align: bottom; }
.ui-toolbar .dataTables_info .ShowingText { padding: 3px 0 0 0px; font-weight: normal; }

.ui-toolbar .LengthWrapper { display: inline-block; min-width: 142px; text-align: center;}
.ui-toolbar .LengthWrapper ul { list-style: none; text-align: right; margin: 0px; padding: 0; position: absolute; text-align: center; padding: 10px 0 10px 0; z-index: 2; display: none;}
.ui-toolbar .LengthWrapper ul li { font-weight: normal; cursor: pointer; display: inline; padding-right: 8px;}
.ui-toolbar .LengthWrapper ul li:hover { text-decoration: underline; }
.ui-toolbar .LengthWrapper ul li.ui-selected { font-weight: bold; }
.ui-toolbar .LengthWrapper .dataTables_length { display: none; width: 100%;}
.ui-toolbar .LengthWrapper .dataTables_length select { display: none; }


/* Make sure that the processing screen is visible */
.dataTables_processing 
{ 
	z-index: 201;
	background: url('Images/ajax-loader_transparent.gif') no-repeat bottom center;
	background-color: white;
}

/* Crazy fix for avoiding increasing table height when adding css styles dynamically in IE9 */
.dataTables_scrollBody  
{
	margin-top: auto;
	background-color:White;
}

.dataTables_wrapper td.Right
{
	text-align: right;
}

/* Button list
----------------------------------------------------------*/
.ButtonList { margin-bottom:3px; padding:3px 0 3px 4px; display: inline-block; }
.ButtonList ul li
{
	display: inline;
	padding: 0px 6px 0px 0px;
	margin: 2px;
	text-decoration:none;
	cursor: pointer;
	white-space: nowrap;
}

/* Make it possible to render button lists vertically */
.ButtonList.Vertical ul li
{
	display: block;
}
.ButtonList ul li:hover { text-decoration: none }

.ButtonList ul li.TextOnly { cursor:inherit; }
.ButtonList ul li.TextOnly:hover { text-decoration: inherit; }

.ButtonList ul li.ui-state-disabled { cursor:inherit; }
.ButtonList ul li.ui-state-disabled:hover { text-decoration: inherit; }

.ButtonList .IconWrapper { display: inline-block; vertical-align: middle; }
.ButtonList span.ui-icon { position: relative; }


/* Table Button list
----------------------------------------------------------*/
.TFPTable tbody .ButtonList { margin: 0; padding: 0; }
.TFPTable tbody .ButtonList ul { text-align: right; }


/* Make Buttons in tables a bit smaller */
.TFPTable tbody button, .TFPTable tbody button span { font-size: 0.9em; }

/* Table Column Search
----------------------------------------------------------*/
.ColumnFilterPlaceHolder { padding: 6px; overflow: auto; }
.ColumnFilterPlaceHolder>table { width: 100%; }
.ColumnFilterPlaceHolder>table>tbody>tr>th { text-align: left; padding: 5px 0 5px 5px; white-space: nowrap;}
.ColumnFilterPlaceHolder>table>tbody>tr>td { padding-right: 10px; padding-left: 2px; }
.ColumnFilterPlaceHolder input, .ColumnFilterPlaceHolder select 
{
	border: 0;
	width: 100%;
	-ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
}


/* Scroll tables
----------------------------------------------------------
- The outer div defines the position of the table in the view and includes a huge top border to hold the headers.
- The inner div implements a scroll bar
- The header is floating on top of the outer div top border. The allows the header to skip the scrollbar, but it 
also breaks the even-column-width link between header and body. I.e. every col must have a defined width.
- If the total width of the columns (including padding) exceeds the total width of the outer div, an approximation
will be used to define column width, resulting in header and body column width comming out of sync.
*/

.outerscrolltable 
{
    position:relative;
    margin:0 auto 20px auto;
}
.innerscrolltable { overflow-y: auto; }
.outerscrolltable thead tr 
{
    position:absolute;
    left:0;
    top:-28px;
}

.outerscrolltable table td { padding: 5px; }
.outerscrolltable table th { padding: 6px 5px; }

.outerscrolltable .tablev2 thead th 
{ 
    padding: 5px 4px;
    border-bottom: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.outerscrolltable table.tablev2 tbody td 
{ 
    padding: 5px 4px; 
    border-left: 0;
    border-top: 0;
    border-right: 0;
}

/* NamedIdList */
.NamedIdList
{
    width: 244px;
    padding: 20px;
    z-index: 1;
}

.NamedIdList .innerscrolltable { height: 570px; z-index: 1;}
.NamedIdList .outerscrolltable { margin: 0; }
.NamedIdList .outerscrolltable thead tr 
{
    position:absolute;
    left:0;
    top:-39px;
}
.NamedIdList .outerscrolltable table td { padding: 5px; }
.NamedIdList.outerscrolltable table th { padding: 6px 5px; }

.NamedIdList .listCol1{width: 227px; text-align: left; }
.NamedIdList .outerscrolltable tbody td { border-right: 0; }

.NamedIdList .outerscrolltable div#HeaderDiv 
{  
    display: inline-block;
    color: White;
}

.NamedIdList .outerscrolltable #CustomerManagerAC,
.NamedIdList .outerscrolltable .ui-icon
{
	display: inline-block;
}


/* VerticalLabelValue
----------------------------------------------------------*/
.VerticalLabelValue { width: 100%; }
.VerticalLabelValue .Head { text-align: left; font-weight: bold; }
.VerticalLabelValue td:first-child { width: 1%; white-space: nowrap; padding-right: 4px; }
.VerticalLabelValue .FieldComment { font-size: 0.8em; font-style: italic; white-space: normal; }

.TipText { font-size: 0.8em; font-style: italic; }


/* Table filter
----------------------------------------------------------*/
.TWPTableFilter { margin-top: 4px; }
.TWPTableFilter>label,
.TWPTableFilter>span,
.TWPTableFilter>input
{ display: inline-block;  }
.TWPTableFilter>span { vertical-align: sub; }


/* Auto complete
----------------------------------------------------------*/

.ui-autocomplete {
	max-height: 150px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
	/* add padding to account for vertical scrollbar */
	padding-right: 20px;
}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
* html .ui-autocomplete {
	height: 150px;
}

/* LazyMenu
----------------------------------------------------------*/
.ActionMenu { white-space: nowrap; }
.ActionMenu button {}
.ActionMenu .PopupList { position: absolute; min-width: 100px; z-index:100; }
.ActionMenu .PopupList ul { min-width: 100px; }
.ActionMenu .ui-widget span, 
.ActionMenu .ui-widget a
{ font-size: 0.9em; }

/* Change index
----------------------------------------------------------*/

#changeindex
{
    padding: 10px 20px;
    border: 1px solid #000;
    width: 400px;
}

.textMessage
{
    bottom:0;
    left: 0;
    position:fixed;
    width: 100%;
    text-align:center;
    font-size: 1.5em;
 }

.RightAlign
{
	text-align:right;
}

/* IndexGlobal
---------------------------------*/
#PortalButtonList
{
	margin: 60px auto 0 auto;
	width: 540px;
}

#PortalButtonList a
{
	display: block;
	width: 500px;
}

/* Index
--------------------------------------*/

#TabsPanel
{
	position: absolute;
	left: 360px;
	right: 40px;
	height: 631px;
	display: inline-block;
}

.popup
{
    position: absolute;
    z-index: 101;
    top: 340px;
    left: 400px;
}

#SitePanel { min-width: 600px; }
#SitePanel #PanelHeader
{
	margin-bottom: 6px;
}

#SitePanel #SiteList { padding: 0px; }
#SitePanel #SiteList thead tr { height: 30px; }
#SitePanel #SiteList td img { vertical-align: middle; }
#SitePanel #SiteList td.Buttons .ButtonsWrapper { text-align: right; white-space: nowrap; }

/* Customer manager  */
#CustomerManagerPanel 
{
    position: absolute;
    width: 250px;
	height: 648px;
   
    margin-bottom: 20px; 
    padding: 20px;
    z-index: 1;
    
    -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

#CustomerManagerPanel .innerscrolltable{ height: 580px; z-index: 1;}
#CustomerManagerPanel .outerscrolltable thead tr 
{
    position:absolute;
    left:0;
    top:-39px;
}
#CustomerManagerPanel .outerscrolltable table td { padding: 5px; }
#CustomerManagerPanel.outerscrolltable table th { padding: 6px 5px; }

#CustomerManagerPanel .listCol1{width: 227px; text-align: left; }
#CustomerManagerPanel .outerscrolltable tbody td { border-right: 0; }

#CustomerManagerTabsPanel
{
    position: absolute;
    left: 350px;
    right: 40px;
    min-width: 850px;
    height: 648px;
}

table#CustomerTable th.col1 input 
{
	width: 147px;

}

/* Site Manager*/
/*#region Site manager*/
#siteManagerPanel 
{
    position: absolute;
    width: 250px;
	height: 648px;
   
    margin-bottom: 20px; 
    padding: 20px;
    z-index: 1;
    
    -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

#siteManagerPanel .innerscrolltable{ height: 580px; z-index: 1;}
#siteManagerPanel .outerscrolltable thead tr 
{
    position:absolute;
    left:0;
    top:-39px;
}
#siteManagerPanel .outerscrolltable table td { padding: 5px; }
#siteManagerPanel.outerscrolltable table th { padding: 6px 5px; }

#siteManagerPanel .listCol1{width: 227px; text-align: left; }
#siteManagerPanel .outerscrolltable tbody td { border-right: 0; }
#siteManagerPanel #customerFilterSelect { width: 190px; margin-bottom: 5px;}

#SiteManagerTabsPanel
{
    position: absolute;
    left: 350px;
    min-width: 850px;
    height: 648px;
}

#SiteManagerTabsPanel .tabs { height: 100%; }

#siteMapPanel table
{
	width: 100%;
	height:530px;
}


table#sitesTable th.col1 input 
{
	width: 147px;

}
#resourcePanel .outerscrolltable thead tr 
{
    position:absolute;
    left:0;
    top:-39px;
}

table.ACSearchListTable
{
	outline:none;
}

table#resourceTable th.col1 input 
{
	width: 150px;

}
table.ACSearchListTable th.col1
{
	text-align: left;
	padding-right:0px;
}

table.ACSearchListTable th.col2
{
	text-align: right;
	padding-left: 3px;
	padding-right: 0px;
}

table.ACSearchListTable div.ButtonList
{
	padding-left: 0px;
}

table.ACSearchListTable th.col1 input 
{
	margin-top:5px;
	margin-bottom: 5px;
	display:inline-block;
}

table.ACSearchListTable th.col1 span
{
	display:inline-block;
	vertical-align: sub;
}

table#sitesTable .ui-icon
{
	background-image: url("images/ui-icons_cccccc_256x240.png");
}

#siteMapPanel table td.Map { vertical-align: top; width: auto;}
#siteMapPanel table td.Details { vertical-align: top; width: 250px; padding-left:6px; }

#siteMapPanel .SiteMap
{
	width: 99%;
	height:500px;
	margin: 0px 5px;
}

#SiteOpeningHoursManagerPanel  { display: inline-block; }
#SiteOpeningHoursManagerPanel table.noBorder>tbody>tr>td { vertical-align: top; }
#SiteOpeningHoursManagerPanel #WeekPattern { min-width: 260px; }

#AddClosingDayDialog .Time,
#AddAdditionalOpeningDayDialog .Time
{ width: 58px; text-align: center; }
#AddClosingDayDialog .Date,
#AddAdditionalOpeningDayDialog .Date
{ width: 90px; text-align: center; }

#SiteOpeningHoursTable>tbody>tr>td 
{
	vertical-align:top;
}

#SiteOpeningHoursManagerPanel .TabRegion { padding: 10px; }
#SiteOpeningHoursManagerPanel #SaveOpeningHours { position: absolute; bottom: 20px; }

#SiteOpeningHoursPanel
{
	width: 800px;
}

#SiteOpeningHoursPanel #CustomeAndSiteSelect select {width:300px;}
#WeekDaysTable thead table td
{
	padding: 2px;
}

#SiteOpeningHoursManagerPanel #AdditionalOpeningDays,
#SiteOpeningHoursManagerPanel #ClosingDays
 { min-width: 440px; }

.OpeningHoursTemplate td,
td.Day
{
	height: 22px;
}

.OpeningHoursTemplate td.TimeEntry
{
	 width: 60px; text-align: center; 
}

#SiteOpeningHoursTable .Time
{
	width: 58px; text-align: center; 
}

#SiteOpeningHoursTable .Day
{
	vertical-align:top; 
	padding-top: 1px;
}
/*#endregion*/


.hidden { display: none; }
.invisible { visibility:hidden; }

#canvasContainer
{
    position:absolute;
    top:150px;
    width:60%;
    left:20%;
    z-index:101;
    display:none;
}

.outerscrolltable2 { position:relative; table-layout:fixed; }
.outerscrolltable2 thead tr { position:relative; }
.innerscrolltable2 { overflow-y:hidden;}
.outerscrolltable2 tbody td 
{
    text-align:center;
    padding:0px;
    padding-bottom:15px;
    padding-top:5px;
    min-width:50px;
}

#ajaxUploadForm { margin-top:15px; }

/*
**************************************
		User management
*/
.checkboxCell 
{
	text-align: left;
	white-space: nowrap;
}

#UserTerminalsTable .Terminal { text-align: left; }

/* Menu 
---------------------------------------------------------*/
#menu .MenuItem .ui-icon
{
	display: inline-block;
	vertical-align:sub;
}

ul#menu li { list-style: none; position: relative;}
ul#menu>li { display: inline-block; vertical-align: top;}

/* Sub Menu
----------------------------------------------------------*/


ul.submenu
{
	position: absolute;
	margin: 0;
	right: 0;
}

ul.submenu { display: block; }

ul.submenu li a
{
	padding: 6px 10px;
	text-decoration: none;
	display: block; /*make the entire li clickable*/
}

/* By default hide the element separators in the drop down menu (but still show the group separators) */
ul.submenu hr.ElementSeparator
{
	display: none;
}

#menucontainer li select { width: 100px; }

#SelectSiteCustomerName
{
	width: 175px;
	display:inline-block;
}

.gray
{ 
     filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Webkit Nightlies & Google Chrome Canary */
    cursor: default;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { font-weight: bold; opacity: 1.0; filter:Alpha(Opacity=100); }
div.ui-datepicker { font-size:100% } 

/* Table Icon
----------------------------------------------------------*/
.TableUIIcon
{
	background-color: #fff;
    background-image: url(images/ui-icons_222222_256x240.png);
	border: 1px solid #999;
    -moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	margin: 2px;
}

.ui-combobox
{
	position: relative;
	display: inline-block;
	padding-right: 28px;
}
.ui-combobox-toggle 
{
	position: absolute !important;
	top: 0;
	bottom: -1px;
	margin-left: -1px;
	padding: 0;
}
.ui-combobox-input 
{
	margin: 0;
	padding: 0.3em;
	background: #fff !important;
}

.ResourceDetails .ui-combobox-input 
{
	width:170px;
}

.ui-combobox-input[disabled] { border:0px !important; } 

.InfoField {display: inline-table;}

#selectGeneratorSite
{
	position: absolute;
    left: 350px;
    top: 250px;
    z-index: 101;
}

#selectGeneratorSiteButtons
{
	float:right;
}

/* Administration portal */
div.CustomerFilter 
{
	margin-bottom: 5px;
}

#viewDeleteDetails div.AssociatedRolesMessage { color:Red; font-weight: bold; font-style:italic; width:360px; word-break:break-word; word-wrap: break-word}
/* ManageUsers styles
----------------------------------------------------------*/
select.role
{
    z-index: 2;
    text-align: right;
}

.DashboardColumn
{
	display:inline;
	float:left;
	margin-right:1%;
}

#columns .dataTables_length
{
	margin-left: 15px;
}

#editDashboard
{

}

#panel
{
	min-width:800px;
}

.container
{
	width:500px;

}

.newContainer
{
	position: absolute;
	top:0px;
	left:0px;
}

.ui-resizable-helper 
{ 
	border: 2px dotted #8a8a8a; 
}

.containerTitle
{
	text-align:center;
	display:inline-block;
	vertical-align:top;
	cursor:pointer;
}

.containerTitle div.drag
{
	text-align:center;
	display:inline;
}

.containerTitle div.remove
{
	float:right;
}

iframe
{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

.Dashboard
{
	height:820px;
}

#addView:hover
{
	-moz-border-radius:		5px 5px 0 0;
	-webkit-border-radius:	5px 5px 0 0;
	-khtml-border-radius:	5px 5px 0 0;
	border-radius:			5px 5px 0 0;
}

.Dashboard .container:nth-child(1)
{
	float:left;
	width:54.8%;
}

.Dashboard .container:nth-child(1) iframe
{
	height:803px;
}

.tempoaryDemoClass
{
	height:760px !important;
}

.Dashboard .container:nth-child(2)
{
	float:right;
	width:45%;
}

.Dashboard .container:nth-child(3)
{
	float:right;
	width:45%;
}

/*-----------------drop down menu ----------------------*/
/*#region Drop down menu*/
.DashboardButtons
{
	text-align:right;
	padding-bottom:5px;
	display:table;
	list-style:none;
}

.DashboardButtons li
{
	text-decoration: none;
	list-style: none;
}

.DashboardButtons li
{
	margin-left:5px;
	font-weight: bold;
	cursor: pointer;
	display:inline-block;
}

ul.DashboardButtons
{
	display: table;
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

ul.DashboardButtons li
{
	margin: 0px;
	padding: 3px;
	list-style: none;
	display: table-cell;
	float: left;
	position: relative;
}

ul.DashboardButtons a
{
	position: relative;
	display: block;
}
ul.SubMenu
{
	left:103% !important;
	top:0px !important;
}

ul.DropDown, ul.SubMenu 
{
	-moz-border-radius:		0 5px 5px 5px;
	-webkit-border-radius:	0 5px 5px 5px;
	-khtml-border-radius:	0 5px 5px 5px;
	border-radius:			0 5px 5px 5px;
	margin: 0;
	padding: 0;
	display: block;
	position: absolute;
	z-index: 999;
	top: 100%;
	width: 100px;
	display: none;
	left: 0;
}

ul.DropDown li span
{ 
	float:right;
	vertical-align: bottom; 
}

ul.DropDown ul.DropDown, ul.SubMenu ul.SubMenu
{
	top: 0;
	left: 95%;
}

ul.DropDown li, ul.SubMenu li
{
	margin: 3px;
	padding: 0;
	float: none;
	position: relative;
	list-style: none;
	display: block;
}

ul.DropDown li a, ul.SubMenu li a
{
	text-align:left;
	display: block;
}
/*#endregion*/
/*-----------------drop down menu end ----------------------*/

/*So the FixedColumns data table is nicely aligned horizontally and vertically, furthermore there is no border between the fixed column and the other (scrollable) columns*/
div.dataTables_scroll, div.ColumnFilterPlaceHolder
{
	/*need to overwrite the default built-in css of FixedColumns hence the use of !important*/
	border-width: 0px !important;
}

.InlineLabelContent { white-space: nowrap; display: inline-block; }
.InlineLabelContent input,
.InlineLabelContent select
{ margin-left: 2px; margin-right: 2px; }

/* Weekselector */
.WeekSelect #nextWeek { left:4px; margin:0px; }
.WeekSelect #prevWeek { margin-left: 5px; margin-right: 4px;}

/* Dateselector */
.DateSelect #nextWeek { left:4px; margin:0px; }
.DateSelect #prevWeek { margin-left: 5px; margin-right: 4px;}

table.TFPTable td.Number, table.TFPTable td.Number input
{
	text-align:right;
	white-space:nowrap;
}

td.Number
{
	text-align:right;
	padding-right:5px;
}

td.Center
{
	text-align:center;
}

table.TFPTable>tbody>tr>td
{
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.ui-tooltip 
{
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 600px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}

.TFPTable thead th.CanEdit, .TFPTable thead th.CanView
 { text-align:center; }

/**************************************************************************/
/*because datatables is bugged and shows columns without sort as clickable*/
table.dataTable thead th {
	cursor: inherit;
}

table.dataTable thead th.sorting, table.dataTable thead th.sorting_asc, table.dataTable thead th.sorting_desc {
	cursor: pointer !important;
}
/**************************************************************************/

/* bindingHandlers.label */
.KOLabelTable { width: 100%; }
.KOLabelTable .KOLabelText { text-align: left; font-weight: bold;}
.KOLabelTable .KOLabelSubText { text-align: left; padding-left: 8px; font-weight: bold;}
.KOLabelTable .KOLabelHeader { text-align: left; font-weight: bold; }
.KOLabelDescription { font-size: 0.8em; font-style: italic; white-space: normal; }
.KOLabelTable td:first-child { height:24px; width: 1%; white-space: nowrap; padding-right: 4px; }

/* styling important for dataTable editable fields - START */
div.EditBox 
{
	margin: 0 0;
	overflow: auto;
	border: 1px solid #bbb;
	padding: 2px;
	text-align: justify;
	background: transparent;
	min-height: 50px;
}

div.EditBox p
{
	margin: 0;
}

div.EditBox a
{
	color:Blue;
	text-decoration:underline;
	margin-left:1px;
	margin-right:1px;
}

.TFPTable td a:empty ~ span { visibility: inherit; display:inline-table; }
/* styling important for dataTable editable fields - END */

.HiddenColumn { display: none; }

#dropboxDiv
{
	width: 100%;
	min-height: 70px;
	background: rgba(0,0,0,0.1);
	border-radius: 10px;
	border: 4px dashed rgba(0,0,0,0.2);
	padding: 20px 0 20px 0;
	text-align: center;
	font-size: 1em;
	float: left;
	font-weight: bold;
}

.dropbox-thumbnail
{
	padding: 5px;
}

#ClientLogFilters
{
	padding-top: 15px;
	padding-bottom: 15px;
}

#ClientLogFilters th { text-align: left; }

#ClientLogFilters td { padding-right: 10px; }

#ClientLogTable td.cursor { text-decoration: inherit; }

#ClientLogTable td.Elapsed { text-align: right; }

/*Knockout extension classes*/

input.InputInvalid, .ui-input-text input.InputInvalid
{
	color: red;
}

input.InputValid, .ui-input-text input.InputValid
{
	color: black;
}

#TwpProgressPopup .Label 
{
	text-align: center;
}

#TwpProgressPopup .ProgressBar
{
	margin-bottom: 12px;
}
#TwpProgressPopup .CancelButton
{
	text-align: center;	
}
.TwpDialogNoClose .ui-dialog-titlebar-close {display: none }

.NoWrap { white-space: nowrap; }

/* Small screens, mobile */
@media screen and (max-device-width: 480px) /* Most phones max out at 640 pixels (height) after factoring in their pixel ratio (e.g. iPhone 5s height: 568, Samsung G4: 640)*/
{
    .Responsive-Visible-Mobile { display: block;   }
}

/* Larges screens, tablet */
@media screen and (min-width: 480px)
{
    .Responsive-Visible-Mobile { display: none;   }
}

/* Styling of the <wp-link> component */
/* Appear on same line with a bit of space between */
.WpLink.WpComponent
{
	display: inline-block;
	margin-right: 10px;
}
.WpLink.WpComponent a
{
	cursor: pointer;
}
.WpLink.WpComponent .ui-icon
{
	display: inline-block;
}
.WpLink.WpComponent span.NoLink.Disabled
{
	cursor: default;
}

.messagesLogLevelItems {
	margin-top: 0;
	margin-bottom:0
}

.ClickableColumn
{
	cursor: pointer;
}

input.Invalid
{
	color:red;
}

.MaskedPassword {
	-webkit-text-security: disc;
}

.WpTree span
{
	font-weight: bold;
}

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

.read-only > input
{
	pointer-events: none;
	opacity: 1;
}

input[type="color"]
{
	height: 35px;
	width: 64%;
}