/* Layout Specific css */

html {
    background: no-repeat fixed center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    margin: 0;
}

body.width {
    margin: 0 auto;
    width: 1000px;
    background-color: transparent;
    font-size: 12px;
}

/*
    When the bootstrap modal window opens it sets an inline padding right for some reason? Might be to do with the scroll bar... not sure. Either way
    it totally breaks the flow of pages so never let it kick in.
*/
body {
    padding-right: 0 !important;
}

html,
body,
form {
   padding:0;
   height:100%;
}

table.rgCommandTable caption {
    padding: 0;
}

/* 
    Bootstrap changes the font size and weight for radio button lists. The following targets only asp.net generated 
    radio button lists and sets them to their defaults pre bootstrap.
*/
td label[for] {
    font-size: 12px;
    font-weight: inherit;
}

/* 
    Bootstrap changes the box sizing which seems to impact the tab strip when scrolling. If the task list, for example
    needed to scroll, the last item would wrap underneath. Changing to content-box resolves this issue
*/
.RadTabStrip div ul.rtsUL.rtsScroll {
    box-sizing: content-box !important;
}

/* Effectively remove the margin-top from the first row of images */
.rgMasterTable .galleryCollection .fileCollection {
    margin-top: -10px;
}

.formfieldControl .label,
.formfield .label {
    color: #323a45;
    font-weight: 400;
    text-align: left;
    font-size: 100%;
}

.formfieldclient label.control-label {
    text-align: left;
}

.formfieldclient .control-content {
    padding-top: 7px;
}

/* So that when a drop down tree is in a rad window it's not hidden behind the modal overlay */
div.rddtSlide {
    z-index: 7004;
}

/* Masterpage Related */

img#bg{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

#container {
   overflow: visible;
   min-height:100%;
}

#content {
  padding-bottom: 80px;
  position:relative;
  z-index:1;
}

div.RadMenu_CjServices {
    z-index: 5000;
}

.rcbSearch {
    margin: 12px 0 0 -8px !important;
}

div.pageContent {
    margin-bottom: 25px;
}

.rcbSearch ul {
    list-style-type: none;
    list-style-position:inside;
    margin:0;
    padding:0;
}

.rcbSearch ul li {
    padding: 6px 0;
}

.itemTemplateGraphic {
    float: left;
    width: 32px;
    margin-right: 10px;
    font-size: 24px;
}

.itemTemplateDetails {
    float: left;    
}

.itemTemplateDetails,
.itDescription {
    width: 215px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.RadGrid td {
    vertical-align: top;
}

.ie8BackgroudImage {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:-1;
}

/* Info Box  */
div.ErrorBox span, 
div.InfoBox span, 
div.SuccessBox span {
    margin-left: 6px;
    margin-top: 6px;
    display: block;
}

div.InfoBox span.title, 
div.ErrorBox span.title, 
div.SuccessBox span.title {
    margin-top: 0;
}

/* Header Specific */
div.header {
    margin-bottom: 0;
}

div.header .headerLogo {
    width: 170px;
    margin-top: 5px;
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
}

div.header .headerLogout {
    border-radius: 4px;
    border-radius: 4px;
    width: 90px;
    padding: 6px 0;
    margin: 0 auto;
    margin-top: 10px;
}

div.header .headerNameLogout {
    line-height: 1;
    width: 150px;
    float: right;
    margin: 10px 10px 0 0;
    text-align: center;
}

div.header .mainMenu {
    float: left;
    width: 640px;
}

div.header .subMenu {
    background-color: #ffffff;
    border-radius: 8px;
    border: solid 1px #b1b1b1;
}

div.header .subMenuLayout {
    display: table;
    margin: 0 auto;
}

div.headerNameLogout .nameLabel {
    display: block;
    width: 100px;
}

/* Page Content */

.pageHeading {
    height: 97px;
    width: auto;
    line-height: 87px;
    float: left;
}

.pageHeading.noImage {
    padding-left: 0;
    height: auto;
    line-height: normal;
    margin-bottom: 10px;
}

.pageSectionNoHeading .heading {
    display: none;
}

.pageSectionBottomMargin {
    margin-bottom: 10px;
}

/* Search */

.searchHeaderTemplateType {
    float: left;
    width: 42px;
}

.searchHeaderTemplateResult {
    width: 170px;
}

.searchFooter {
    width: 225px;
    margin: 0 auto;
}

/* Footer */

/*Opera Sticky Footer Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

.footer {
    position: relative;
	margin-top: -80px; /* negative value of footer height */
	height: 80px;
	clear:both;
}

div.footer .footerContainer {
    width: inherit; /* Inherit width of 100% from above */
    margin-top: 14px;
}

div.footer .linksLeft {
    float: left;
    padding: 10px;
}

div.footer .imageRight {
    float: right;
    margin: 4px 10px 0 0;

}

div.footer img {
    vertical-align: middle;
    margin-right: 10px;
}

/* Commonly used attributes */
.clickable {
    cursor: pointer;
}

.left {
    float: left;
}

.right {
    float: right;
}

.center {
    text-align: center;
}
    
.smallText {
    font-size: 10px;
}

.hide {
    display: none;
}

div.InfoBox.spacerBottom {
    margin-bottom: 16px;
}

.paddedTextPanel {
    text-align: center;
    margin-bottom: 10px;        	
}
                
div.paddedTextPanel fieldset div span.section {
    margin-right: 20px;
}

/* Chart Loader Bar  */
div.chart .portalLoader {
    width:60px; 
    margin:0 auto;
}

/* Clearfix for modern browsers */
#content div.clearfix {
    display: inherit;
}

#content .clearfix:before,
#content .clearfix:after {
    content: "";
    display: table; 
}

#content .clearfix:after {
    clear: both;
}

/* Clearfix for IE 6/7 (trigger hasLayout) */
#content .clearfix {
    zoom: 1;
}

/**************************
* RadGrid Command templates
**************************/

.gridImgButtonCustom {
    margin: 3px;
    display: inline-block;
}

.gridImgButtonCustom label:hover {
    font-weight: bold;
    cursor: pointer;
}

.gridImgButtonCustom img {
    margin-right: 3px;
}

.gridImgButtonCustom .marginTop {
    margin-top: 5px;
}

.csvImportGridCommandBar {
    width: 998px;
}

.textTruncated {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.hoverBox {
    position: absolute;
    padding: 3px 5px 3px 5px;
    background: #FFF;
    color: #333;
    display: block;
    width: auto;
    z-index: 9999;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.buttonContainer {
    padding: 0 10px 10px 10px;
    margin: 0 auto;
    text-align: center;
}

.mrgTopBottom10 {
    margin: 10px 0;
}

.successGreen {
    color: rgb(67, 150, 28);
}

.errorRed {
    color: rgb(201, 12, 25);
}

.fa.gridIcon {
    font-size: 1.33em;
    line-height: 0.75em;
    vertical-align: -15%;
}

/* 
    For when we have some text that is clickable. 
    Needs to be important, as bootstrap identifies there is no href (javascript clickable link) so removes the visible link attributes (line and pointer).
*/
.link {
    cursor: pointer !important;
    text-decoration: underline !important;
}

.fontAwesomeButtonText {
    margin: 2px 5px;
}

/*
    Client portal is currently on BS3, where as some of the controls are coded to BS4... So this is so that the BS floats work as expected until we've moved over fully.    
*/
.float-right {
    float: right;
}

/*
    Client portal is currently on BS3, where as some of the controls are coded to BS4... So this is so that the BS floats work as expected until we've moved over fully.    
*/
.float-left {
    float: left;
}

/*
    As part of a Chrome update, when you click on the menu or into an input box, you get this horrible black outline that is apparently for accessibility. Anyways its horrible.
    The below fixes it. Google suggests against a blanket "* outline: none" approach which is fine. With a bit more spare time this can be improved to make certain elements a
    lot more visually appealing (stackoverflow search box with a blue glow for example) but for now remove it.    
*/
div.RadMenu,
input[type="text"] {
    outline: none;
}

/*
    We've not migrated to bootstrap but some of the shared controls are expecting some of the classes such as this. Can be removed once we've migrated.    
*/
.w-100 {
    width: 100% !important;
}

/*
    The caption at the top of the RadGrid is left aligned. Center and remove the padding and margin.
*/
.rgCaption {
    text-align: center;
    margin: 0;
    padding: 0;
}

/*
    When you use "container" it is all flush. Container fluid indents by a gutter, but we want the container to be flush with the edges of our small
    screen size so override here.
*/
.clientSpecific .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/*
    The rad window that popped up looked vey cramped so the below spaces it out and removes the scroll thats introduced due to the row negative padding.
*/
.clientSpecific .newReportOptions {
    overflow: hidden;
    padding: 10px;
}

/*  
    The buttons / drop down in the new report options were too wide so this brings them inline with the form field controls.
*/
    .clientSpecific .newReportOptions > .form-horizontal > .form-group:not(.formfieldclient ) {
        margin-left: 0;
        margin-right: 0;
    }

/*
    As we've got some bootstrap controls, without the client portal specifically supporting bootstrap...  class to match here.
*/
.ml-3 {
    margin-left: 15px;
}

.rgEditForm .filterEditForm {
    padding: 10px;
}

/*
    When you hover over attribute history, the grid was floating outside the tooltip which was given a height of 9px? Has to be made important as the 9px height is in the element.
*/
.RadToolTip.RadToolTip_Metro {
    height: initial !important;
}

.RadButton.RadButton_Metro span.rbSplitIcon:before {
    vertical-align: initial;
}

/* 
    As part of the migration from classic render mode to lightweight, this button wasn't displaying correctly (icon outside the button which was tiny). Put this in for now.
*/
.RadButton.options {
    width: 28px !important;
    height: 26px;
}

/*
    As part of the migration from classic render mode to lightweight, the edit button wasn't centered correctly. This class was being applied to the delete icon, which was. Apply to all buttons.
*/
.RadTreeList td > button.rtlActionButton {
    margin: 0 0 0 -0.5em;
}

/*
    The button drops under the multi select combobox. Make the container divs (that sit directly under the parent / outer panel) and make them flex.
*/
.multiSelectComboBox > div {
    display: flex;
}

/*
    Some of our controls are designed for bootstrap, so handle this class to behave as it would do with bootstrap included.
*/
.d-none {
    display: none !important;
}

/*
    When buttons are icon only the spacing wasn't correct (too much margin one side) - even it up so it's central.
*/
.iconOnly span.fas {
    margin: 0 3px 0 3px;
}

/*
    Improve the default styling for the "no records" text of a rad grid... A bit of padding, centered and weighted to make it a bit more noticable.
*/
.RadGrid .rgNoRecords div {
    margin: 10px;
    text-align: center;
    font-weight: 600;
}

/*
    A temp fix was put in place to force the button height site wide. This, in this instance, reverts the button back to normal so it breaks when the text is wrapped.
*/
.addressSearch button {
    height: inherit !important;
}

/*
    When in compact mode ensure the form fields are full width so are stacked correctly.
*/
.addressSearch.compact .formfieldclient > label,
.addressSearch.compact .formfieldclient > div {
    width: 100%;
}

/*
    Site doesn't have bootstrap so we need to set this so we get similar behaviour from the bootstrap orientated controls.
*/
.input-group {
    display: flex !important; /* Some bootstrap files are pulled in and they conflict with this, so force flex. */
    align-items: stretch;
    width: 100%;
}

/*
    Site doesn't have bootstrap so we need to set this so we get similar behaviour from the bootstrap orientated controls.
*/
.input-group-prepend,
.input-group-append {
    display: flex;
}

/*
    Site doesn't have bootstrap so we need to set this so we get similar behaviour from the bootstrap orientated controls.
*/
.flex-grow-1 {
    flex-grow: 1;
}

/*
    Force the width of the country to the smallest acceptable size.
*/
.addressSearch .input-group-prepend {
    width: 120px !important;
}

/*
    An image was previously being used to set the background colour.
*/
.RadButton span.fas.rbIcon::before {
    font-family: "Font Awesome 6 Pro" !important;
}

.clientSpecific div.login div.buttonSubmit .RadButton,
.clientSpecific div.login div.buttonSubmit .RadButton span {
    background-color: #3a9dd6 !important;
}

/*
    Force the size of the search icon on the main menu
*/
.headerNameLogout .fa-search {
    padding-top: 10px;
    font-size: 32px;
    font-weight: bold;
}

/*
    In the footer of a radgrid, make the text vertically align rather than push up to the top.
*/
tr.rgFooter td {
    vertical-align: middle;
}