body {
    color: #333;
    margin: 0px;
}

div.telerikComboBox .rcbInputCell INPUT.rcbInput, .rcbItem, .rcbHovered, .rgRow, .rgAltRow, .rgHeader, body, HTML BODY .telerikDatePick .rcInputCell .riTextBox , .GroupSelProd, .GroupSelDate{
    font-size: 13px;
    font-family: Arial;
}

.telerikComboBox .rcbDisabled .rcbInputCell INPUT.rcbInput {
    color: #333;
}
/* class used for disabled text box display. 
    jQuery is used to add the class to the disabled text boxes and then add the read only flag and remove the disabled property */
.textboxDisabled {
    background-color: #eeeeee;
    border: solid 1px #999;
}

/*set the width of the telerik date components.riTextBox*/
.telerikDatePick, .telerikDatePick .rcInputCell {
    width: 110px !important;
    color: #333;
    /*margin-left: 43px;*/
}

image {
    border: 0px solid transparent;
}

form {
    margin: 0px;
}

fieldset {
    padding-left: 5px;
    margin: 0px 15px 5px 0px;
    border:1px solid black;
}


/*Text box definitions */
input[type="text"], input[type="password"] {
    /*width: 325px;*/
    width: 420px;
}

    input[type="text"].PhoneField {
        width: 145px;
    }
    /* undo styles for telerik combo boxes*/
    input[type="text"].rcbInput, input[type="text"].riTextBox {
        margin: 0px;
    }


    input[type="text"].CodeBox {
        width: 120px;
    }

.CodeBox {
    width: 120px !important;
}

/* multi line textboxes*/
textarea {
    /*width: 325px;*/
    /*CL 08/02/17 making text area field wider*/
    width: 475px;
    margin-right: 30px;
    margin-bottom: 4px;
    margin-top: 4px;
}

select, .telerikComboBox, .fieldText, input[type="text"], input[type="password"] {
    /*margin-right: 30px;*/
    margin-right: 10px;
    margin-bottom: 4px;
    margin-top: 4px;
    margin-left: 0px;
}

.telerikDatePick, .telerikTimePick {
   margin-top:4px;
   margin-bottom:4px;
   display:inline-block;
}

.TopLabel {
    padding-bottom: 4px;
    padding-top: 4px;
}

/* tables use 100% of width available to them*/
table {
}

td {
    vertical-align: top;
}
    /* table cells with the .lable class use right alignment and middle vertical alignment*/
    td.label {
        text-align: right;
        vertical-align: middle;
    }

    td.labelLeft {
        vertical-align: middle;
    }

/* the text portion of a checkbox control */
label {
    margin-right: 30px;
    margin-left: 3px;
    margin-bottom: 4px;
    margin-top: 4px;
}

input[type="checkbox"] {
    margin-bottom: 4px;
    margin-top: 4px;
}


/* css classes */
.float-left {
    float: left;
}

.float-right {
    float: right;
}
/* defines the main content area in the master page*/
.content-wrapper {
    margin: 0 auto;
    /*max-width: 960px;*/
    position: relative;
    border: 1px solid black;
    /*height: 640px;*/
    /*change screen size*/
    max-width: 1200px;
    height: 800px;
}

/*page title */
.PageTitle {
    font-size: 24px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    color: #000000;
    margin-bottom: 20px;
    margin-left: 20px;
}

/*labels for input fields*/
.FieldLabel {
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    color: #000000;
    margin-right: 20px;
    vertical-align: middle;
    white-space: nowrap;
    margin-top: 4px;
    margin-bottom: 4px;
}

/*div with a group of buttons*/
.buttonGroup {
    margin-top: 20px;
    margin-bottom: 20px;
    position: absolute;
    /*top: 585px;*/
    /*screen size changed so move buttons down*/
    /*top: 720px;*/
    bottom: 0px;
    /*width: 880px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;*/
}

.propertybuttonGroup{
   /*align the property button bar*/
    text-align: center!important;
}
/* use on all buttons*/
.button {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 0px;
    margin-right: 5px;
    height: 26px;
}

.banner {
    display: block;
    clear: both;
    margin-top: 7px;
    margin-bottom: 7px;
}

.valign-middle {
    vertical-align: middle;
}

.maincontent {
    clear: both;
    /*CL 24/01/17 adding spacing below menu*/
    margin-top:75px;
}

.telerikMenuStyle {
    margin-bottom: 10px;
}

.FormMessage {
    color: red;
    margin-right: 30px;
    

}

.messageclose {
    color: black;
    position: absolute;
    width: 100%;
    text-align: right;
    margin-left: -15px;
    margin-top: -10px;
}

.MessageBox {
    position: absolute;  
    background-color: white;
    border: black 1px solid;
    margin-left: 10px;
    padding: 12px;
    z-index:1000;
    box-shadow: 5px 5px 20px gray;
}

.GridCommandColumn {
    /* CB 25/03/13 changing from 20px */
    width: 10px;
}


.NotesField {
    width: 400px;
    margin-left: 40px;
}

.OSIField {
}

.CodeBoxAndName {
    width: 215px;
}

/* ----- START Telerik Rad Combo Boxes - for multi column display ----- */
.rcbHeader ul, .rcbFooter ul, .rcbItem ul, .rcbHovered ul, .rcbDisabled ul {
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.SSRadComboMultiColumn1, .SSRadComboMultiColumn2 {
    float: left;
    margin: 0;
    padding: 0 5px 0 0;
    line-height: 14px;
}

.SSRadComboMultiColumn1 {
    width: 40px;
}

.SSRadComboMultiColumn2 {
    width: 180px;
}
/* ----- END Telerik Rad Combo Boxes - for multi column display ----- */


/* ******************** Start Dashboard Report Styles ******************** */
/*For all report field layout*/
.divReportViewer {
    width: 850px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    /*min-height: 455px;*/
    min-height: 0px; /*RA 19/03/2013 - Changed min height to 0 as this takes up vertical space causing vertical scrollbar on report pages even when report is not shown*/
    /*max-height: 1550px;	*/
    overflow: visible;

}

.divReportViewerLandscape {
    width: 1150px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    /*min-height: 455px;*/
    min-height: 0px; /*RA 19/03/2013 - Changed min height to 0 as this takes up vertical space causing vertical scrollbar on report pages even when report is not shown*/
    max-height: 1550px;
    overflow: visible;
}

.divReportViewerLandscape .rptViewer {
/*margin-left:-150px;*/
}

.divReportViewer .rptViewer {
margin-left:-150px;
}

/*For all report labels*/
.ReportLabel {
    /*labels right aligned*/
    display: inline-block;
    width: 130px;
    text-align: left;
    color: black;
    padding-right: 10px;
    font-weight: bold;
}

/*For all report fields*/
.ReportField {
    display: inline-block !important;
    width: 250px;
    font-size: 10pt;
    margin-left: 0px;
}

.ReportError {
    color: Red;
}
/* ******************** End Dashboard Report Styles ******************** */

/*Client details classes*/

.Client .PAXNumber {
    width: 30px;
    margin-right: 5px;
}

.Client .CCField {
    width: 196px;
}

.Client label {
    margin-right: 5px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    text-align: right;
    color: #000000;
}

.ClientLeftColText {
    /*width: 375px !important;*/
    width: 420px !important;
    /*margin-right: 5px !important;*/
}

.Client .ClientStatus {
    margin-right: 5px;
    width: 80px !important;
}

.Client .telerikDatePick {
    margin-left: 0px;
   }

.Client .telerikComboBox {
    margin-right: 10px;
}

.ClientEmail {
    width: 250px !important;
}

.ClientCountry {
    width: 200px !important;
}

.Client .PhoneField {
    margin-right: 5px;
    width: 110px !important;
}

.Client .CodeBox {
    /*width: 110px !important;*/
    margin-right: 5px;
}

.Client .FieldLabel {
    margin-right: 10px;
}

.Client .CustRef {
    width: 85px;
}

#PageNumber {
    float: right;
    margin-top: -100px;
}

.Client .ClientType {
    width: 100px !important;
}

/*KAM 20/03/13*/
.Client .ClientAgentCode {
    width: 100px !important;
}
/*KAM 20/03/13*/
.Client .ClientAgentName {
    width: 230px !important;
}
/*KAM 20/03/13*/
.Client .ClientPropertyName {
    width: 240px !important;
    vertical-align: middle;
}



/* Client details classes*/
.Client .BeddingTypeTextBox {
    width: 200px;
    margin-right: 5px;
}

.ClientSearch .buttonGroup {
    position: inherit;
    /*margin-left: auto;
    margin-right: auto;
   text-align: center;*/
}

.Client .ClientStatus {
    margin-right: 13px;
    width: 80px !important;
}

.NewClient .ClientStatus {
    margin-right: 26px;
}

/* Booking Details styles*/
.Booking .BeddingTypeTextBox {
    width: 345px;
    margin-right: 5px;
}

.NormalLabel label {
    font-weight:normal;
}

/*Booking wait message div*/
.WaitMessage {
    width: 350px;
    padding:30px;
    position:static;
    margin-left:auto;
    margin-right:auto;
    margin-top:200px;
    margin-bottom:auto;
    text-align:center;
    vertical-align:middle;
    background-color:white;
    display:block;
    border: 1px solid black;
    box-shadow:5px 5px 20px gray;
}

.PropImage {
    width: 850px;
    padding:30px;
    position:static;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:auto;
    text-align:center;
    vertical-align:middle;
    background-color:white;
    display:block;
    border: 1px solid black;
    min-height:460px;
}
.MessageContainer {
    position: absolute;
    width: 960px;
   
    text-align:center;
    vertical-align:middle;
     z-index:999;
     
}


.Details2 .OSIField {
    /*width: 375px;*/
     /*CL 08/02/17 making text area field wider*/
    width: 475px;
}

.Hidden {
    display:none;
}

.grpFunction {
    width:150px;
}


.MaintField {
    width: 600px;
}

.Admin .FieldLabel {
    margin-right: 10px;
}

.required {
color:red;
margin-left:-25px;
margin-right:5px;
}

.main_landing_div {
    background:url('../images/rural_bg.png');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
    .main_landing_div .group {
        padding: 0px;
        width:auto;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -webkit-transform:translate(-50%, -50%);
    }

.group a {
    width:160px;
    height:160px;
    
}
.group a .Tile {
    margin-bottom:0px;
}
.group a .Tile span{
    font-family:Lato;
    text-transform:uppercase;
    font-size:20px;
    letter-spacing:0.05em;
    text-shadow: 0px 2px 0.98px rgba(0, 0, 0, 0.2);
    padding-left:10px;
    
}
.group a .Tile span:before {
    content:'';
    width:7px;
    height:7px;
    border-top:1px solid #fff;
    border-right:1px solid #fff;
    position:absolute;
    transform:translateY(-50%) rotate(45deg);
    -o-transform:translateY(-50%) rotate(45deg);
    -moz-transform:translateY(-50%) rotate(45deg);
    -webkit-transform:translateY(-50%) rotate(45deg);
    top:50%;
    right:-20px;
}

.group a #Agents:before  {
    background:rgba(255,236,74,0.1);
    
}
.group a #Properties:before  {
    background:rgba(88,242,139,0.1);
    
}
.group a #Clients:before  {
    background:rgba(88,222,242,0.6);
    
}
.group a .Tile {
    background:rgba(0,0,0,0.5);
    border:2px solid #fff;
}
.group a .Tile:before {
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
.group a:last-child .Tile {
    margin-right:0px;
}