html, body {
    height: 100%;
    font-family: Arial;
}
::-ms-clear {
display: none;
}

.k-widget.k-tooltip-validation{ display: table; margin-top: 5px; position: absolute; clear: both; }

/*
## Kendo Active Filter ##
Override the standard Kendo color used for an active grid filter
```
*/
.k-state-active.k-grid-filter {
    background-color: skyblue;
}

/*
## Pane for Groups Controls Inside of a Page ##
Use the pane-standard class by itself to create a box for
grouping related controls inside of a page.
Use pane-standard with page-outer or page-outer-gradiant for the outer most
div tags on a page.
```
    <div class="pane-standard">
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
    </div>
```
*/
.pane-standard
{
     border-radius:10px;
     border:1px solid #e7e7e7;
     background-color: #f5f5f5;
     padding:10px;
     margin-bottom:5px;
}

/*
## Outer Pane With Gradiant ##
The outer most div tag for most pages should have the pane-standard and pane-outer-gradient classes.  
The background will be a gradiant that gets lighter towards the bottom of the page.
This should be the default format for most pages, expects those that contain a grid (see pane-outer class).
```
    <div class="pane-standard pane-outer-gradient">
        Content inside the page<br />
        Content inside the page<br />
        Content inside the page<br />
        <div class="pane-standard">
            Grouped contend<br />
            Grouped contend<br />
            Grouped contend<br />
        </div>
    </div>
```
*/
.pane-outer-gradient
{
    /*background-color:#ffffff;
    background-image:url(/Images/secondary-background-gy-fade.png);
    background-position-x: 20%;
    background-repeat:no-repeat;*/
    border-top-left-radius:0;
    border-top-right-radius:0;
    margin-bottom:0px;
}

/*
## Outer Pane with No Gradiant ##
The outermost div tag for pages that contain a grid control (like /Units or /Owners).
These pages will have a solid background with no gradiant.  
```
    <div class="pane-standard pane-outer">
        Content inside the page<br />
        Content inside the page<br />
        Content inside the page<br />
        <div class="pane-standard">
            Grouped contend<br />
            Grouped contend<br />
            Grouped contend<br />
        </div>
    </div>
```
*/
.pane-outer
{
    border-top-left-radius:0;
    border-top-right-radius:0;
    margin-bottom:0px;
}



/*
## Two Column Page Layout ##
These classes are used to create a page that had two major columns.
the tcolleft and tcolright classes reduce the spacing that would
normally occur between two Bootstrap columns.
```
    <div class="pane-standard pane-outer-gradient" >
        <div class="scrolling" data-id="fieldsContainer">
            <div class="row">
                <div class="col-md-8 tcolleft">
                    <div class="pane-standard">
                        This is the left side conteant
                    </div>
                </div>
                <div class="col-md-4 tcolright">
                    <div class="pane-standard">
                        This is the right side content
                    </div>
                </div>
            </div>
        </div>
    </div>
```
*/
.tcolleft
{
  margin-right:-10px;
  padding-right:0px;
  margin-left:0px;
}
.tcolright
{
  margin-left:0px;
  padding-right:5px;
  margin-right:0px;
}


/*
## Tab Border ##
Used to provide a padding below a tab control
```
    <div class="pane-standard">
        Tab Control Is Here
        <div class="border-top-under-tabs" >
            Tab Conteant is Here
        </div>
    </div>
```
*/
.border-top-under-tabs
{
    padding-top:10px;
}


/* 
## Required Field Indicator ## 
Use on lables of required fields
```
    <label>Required Info<span class="required"></span></label>
```
*/
.required
{
    color: red;
    font-weight: bold;
}
.required:after
{
    content: '*';
}

/* 
## Scrollable Content ## 
Used to create an area with scrollable content.
Note that the height is usually set in Javascript to match the browser height.
This example is using a fixed height for demonstration purposes.
```
<div class="scrolling" style="height:50px;">
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
</div>

<div class="scrolling-all" style="height:50px;width:50px">
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
</div>

```
*/
.scrolling{
    
    overflow-x:hidden;
    overflow-y:auto;
    padding-right:5px;
}

@media print {
    .scrolling {
        overflow-x: visible;
        overflow-y: visible;
    }
}

/* 
## Add a grey background and 3px padding to Scrollable content  ## 
Used to create an area with scrollable content with a grey background and padding
Note that the height is usually set in Javascript to match the browser height.
This example is using a fixed height for demonstration purposes.
```
<div class="scrolling" style="height:50px;">
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
    This is my content<br />
</div>
```
*/



.scrolling-all{
    
    overflow-x:auto;
    overflow-y:auto;
    padding-right:5px;
}

/* 
## Hidden Content ## 
Used to hide content.  This style is usefull to use with the jQuery .removeClass() function.
Removing this class from an element will cause it to appear.

```
<div class="hidden">You can't see me</div>
```
*/
.hidden {
    display:none;
}

/* 
## Offscreen Content ## 
Used to hide content by moving it off of the visible screen.
This is used with content that contains Kendo grids, because the grids
have rendering issues if they are contained in a tag that is not visible.
This works around that issue because the tag is visible, just outside of
the viewable area.

```
<div class="offscreen">You can't see me</div>
```
*/
.offscreen {
    position: absolute;
    top: -999999px;
    left: -999999px;
}

/* 
## Content Percentage Sizing ## 
Used to force a tag to be a certain percentage of its parent.
```
<div style="width:200px;border:solid black 1px;">
    <div class="fullwidth" style="background-color:blue;">I am full width</div>
    <div class="halfwidth" style="background-color:green;">I am half width</div>
</div>
```
*/
.fullwidth
{
    width: 100%;
}

.halfwidth
{
    width: 50%;
}


/* 
## Export icon ## 
An export icon in the kendo style, since kendo does not have one.
```
<span class="k-icon k-i-export" title="Export"></span>
```
*/
.k-i-export
{
    background-image: url("/Images/Export-kendo-icon.png")
}

/*
## Highlight Text ##
These are general purpose styles for setting the background color of static text.<br />
They are usually used in grids or lists to highlight certain rows or cells.
```
    <div class="highlight-attention">Attention</div>
    <div class="highlight-attention-minor">Attention Minor</div>
    <div class="highlight-warning">Warning</div>
    <div class="highlight-warning-minor">Warning Minor</div>
    <div class="highlight-error">Error</div>
    <div class="highlight-success">Success</div>
    <div class="highlight-success-minor">Success Minor</div>
```
*/




.highlight-attention
{
    background-color: #00C646;
}

.highlight-attention-minor
{
    background-color: Lime;
}

.highlight-warning
{
    background-color: #FF4400;
}
.highlight-warning-minor
{
    background-color: Yellow;
}

.highlight-error
{
    background-color: #FF0000;
}

.highlight-success
{
    background-color: #00C646;
}

.highlight-success-minor
{
    background-color: #C3FFB5;
}

/*
## Secondary Text ##
Use this class for text that is secondary or should have less emphesis
```
    <div class="secondary-text">Secondary Text</div>
```
*/
.secondary-text
{
    color:darkgray;
}


/*
## Buttons Container for Bottom of Page
Creates a container for buttons at the bottom of the page.
```
    <div class="action-buttons">
            <button type="button" class="btn btn-primary">Save</button>
            <button type="button" class="btn btn-default">Add</button>
    </div>
```
*/
.action-buttons
{
    margin-top: 0px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: right;
    border-top:1px solid #e7e7e7;
    padding-top:9px;
}


/*
## Sub Headers ##
Used to create secondary headers on a page
```
    <div class="subheader">Section 1</div>
    <div>Some content</div>
    <div class="subheader">Section 2</div>
    <div>Some content</div>
```
*/
.subheader
{
	font-size:14px;
    font-weight:bold;
    color:#52789f;
    border-bottom: 1px solid #52789f;
    margin-bottom:20px;
}

.subheader h2 {
    font: inherit;
    margin: 0;
}

.looks-like-h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.1;
    margin-top: 10px;
    margin-bottom: 10px;
}

.ada-label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.42857143;
    margin-top: 0px;
    margin-bottom: 5px;
}
/*
## Primary Panel Header Formatting ##
Improve the formatting of standard bootstrap elements when
used inside of a panel-primary header.
```
    <div class="panel panel-primary">
        <div class="panel-heading">
            <a href="#">this is a formatted link</a>
            <div class="badge">my badge</div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
```
*/
.panel-primary .panel-heading a
{
    color:white;
}

.panel-primary .panel-heading h2 {
    font: inherit;
    margin: 0;
}

.panel-primary .panel-heading .badge
{
    background-color: black;
}

/*
## badges ##
Change the color of the standard Bootstrap badge component
```
    <div class="badge badge-alert">alert</div>
    <div class="badge badge-warning">warning</div>
```
*/
.badge-alert
{
    background-color: red;
}

.badge-warning
{
    background-color: orange;
    color: black;
}


/*
## Image Thumbnails ##
Restrict the size of images for thimbnail purposes
```
    <img src='' class='img-thumbnail-xs' />
    <img src='' class='img-thumbnail-sm' />
    <img src='' class='img-thumbnail-lg' />
    <img src='' class='img-thumbnail-xl' />
    <img src='' class='img-thumbnail-xl img-thumbnail-nomargin' />
```
*/

img.img-thumbnail-xs
{
    max-width: 50px;
    max-height: 50px;
    margin: 5px;
}

img.img-thumbnail-sm
{
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
}

img.img-thumbnail-lg
{
    max-width: 150px;
    max-height: 150px;
    margin: 5px;
}

img.img-thumbnail-xl
{
    max-width: 200px;
    max-height: 200px;
    margin: 5px;
}

img.img-thumbnail-nomargin
{
    margin: 0px;
}

/*
## Textarea Height ##
Used to set the height of textarea field
```
    <textarea class='textarea-height-xs' />
    <textarea class='textarea-height-sm' />
    <textarea class='textarea-height-lg' />
    <textarea class='textarea-height-xl' />
```
*/
textarea.textarea-height-xs{
    height: 50px;
}

textarea.textarea-height-sm{
    height: 100px;
}

textarea.textarea-height-lg{
    height: 150px;
}

textarea.textarea-height-xl{
    height: 200px;
}

/*
## Image Fading ##
Fades an image usimg opacity
```
    <img src='' class='img-faded-light' />
    <img src='' class='img-faded-medium' />
    <img src='' class='img-faded-heavy' />
```
*/
img.img-faded-light
{
    opacity: 0.7;
}

img.img-faded-medium
{
    opacity: 0.5;
}

img.img-faded-heavy
{
    opacity: 0.3;
}

/*
## Maximum column widths ##
Used to set a fixed maximum width for a column and
force content to wrap.
```
    <table>
        <tr>
            <td class="warp-xs">Extra Small</td>
            <td class="warp-sm">Small</td>
            <td class="warp-md">Medium</td>
            <td class="warp-lg">Large</td>
            <td class="warp-xs">Extra Large</td>
        </tr>
    </table>
```
*/
td.wrap-xs
{
    max-width:50px; 
    word-wrap:break-word;
}

td.wrap-sm
{
    max-width:100px; 
    word-wrap:break-word;
}

td.wrap-md
{
    max-width:150px; 
    word-wrap:break-word;
}

td.wrap-lg
{
    max-width:200px; 
    word-wrap:break-word;
}

td.wrap-xl
{
    max-width:250px; 
    word-wrap:break-word;
}


/*
## Panel Divers ##
Used to create a divider line that streches completely across
a panel, and connects with the panels outside porder
```
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="panel-body-divider"></div>
            header
            <div class="panel-body-divider-secondary"></div>
            Some content
            <div class="panel-body-divider-secondary"</div>
            Some content
            <div class="panel-body-divider"></div>
            Header
        </div>
    </div>
```
*/
.panel-body-divider
{
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid;
}

.panel-default .panel-body-divider
{
    border-bottom-color: #dddddd;
}

.panel-primary .panel-body-divider
{
    border-bottom-color: #428bca;
}

.panel-success .panel-body-divider
{
    border-bottom-color: #d6e9c6;
}

.panel-warning .panel-body-divider
{
    border-bottom-color: #faebcc;
}

.panel-danger .panel-body-divider
{
    border-bottom-color: #ebccd1;
}

.panel-info .panel-body-divider
{
    border-bottom-color: #bce8f1;
}

.panel-body-divider-secondary
{
    margin-left: -15px;
    margin-right: -15px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-bottom: 1px solid;
    border-bottom-color: #CCCCCC;
}

/*
## Row Header ##
Used to highlight text in a row, like for a header.
```
    <div class="row row-header">
        <div class="col-xs-12 col-sm-12 col-md-3">My Header
        ...
    </div>
```
*/
.row-header
{
    color: #31708f; 
    font-weight:600;
    margin-bottom: 5px;
}


/*
## Bootstrap Align Text ##
When trying to allign text with form-control's the text
will often be higher then the controls.  This class will
align the text with the controls.
```
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4 col-text-vertical-align">
        <div data-bind="text: Text"></div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-1">
        <div class="form-group" data-bind="visible: ShowBooleanField">
            <div class="checkbox">
                <label><input type="checkbox" data-bind="checked: ResponseBoolean" /></label>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4" data-bind="visible: ShowTextField">
        <div class="form-group">
            <input type="text" 
                class="form-control" 
                placeholder="Answer" 
                maxlength="255"
                data-bind="value: ResponseText" />
        </div>
    </div>
</div>
```
*/
.col-text-vertical-align{
    margin-top: 8px;
}

/*
## Bootstrap Navigation with no link ##
Used to align text with a nav control that is static text (not
an a tag).
```
<ul class="nav nav-pills nav-stacked" data-id="inspectionStatus">
    <li>
        <div class="nav-text">
            My static text
        </div>
    </li>
    <li>
        <a href="#">
            My link text
        </a>
    </li>
</ul>
```
*/

.nav > li > div.nav-text {
    padding-left: 15px;
    padding-top: 5px;
}

.nav > li:first-child > div.nav-text {
    padding-top: 0px;
}

.modal-title-h1 {
    font-size: 18px;
    font-weight: 500;
}

/*
## Autocomplete Custom Templates ##
These styles are used with the autocomplete control when creating a custom item template.
```
    <div class="autocomplete-list-item">
        <div class="autocomplete-list-item-header">Item 1</div>
        Secondary info
    </div>
    <div class="autocomplete-list-item">
        <div class="autocomplete-list-item-header">Item 2</div>
        Secondary info
    </div>
    <div class="autocomplete-list-item">
        <div class="autocomplete-list-item-header">Item 3</div>
        Secondary info
    </div>
```
*/
.autocomplete-list-item
{
    border-bottom:1px solid #CCCCCC;
}

.autocomplete-list-item .autocomplete-list-item-header
{
    font-size:1.2em;
    font-weight:bold;
}

.no-wrap-list {
    display: flex; /* Enables flexbox layout for the container */
    flex-wrap: nowrap; /* Prevents flex items from wrapping to multiple lines */
    list-style: none; /* Removes default bullet points and other list styles */
    padding: 0; /* Removes default browser padding */
    margin: 0; /* Removes default browser margin */
    overflow-x: auto; /* Adds horizontal scrolling if items exceed container width */
}

.no-wrap-list li {
    /* Optional: Add some spacing between items */
    margin-right: 1px;
    /* Optional: Prevents text inside the li from breaking into new lines */
    white-space: nowrap;
}

/* 
## Inspection Chain ## 
Used to create a tree-like view for displaying an entire inspection chain.
Difference graphics are used to represent the status of each inspection.
Nest the ul tags to create the children nodes.
Uses icons from font-awesome
```
<ul class="fa-ul">
    <li>
        <i class="fa-li fa fa-exclamation-circle status-fail"></i>
        Fail
        <ul class="inspection-chain-reinspections">
            <li><i class="fa-li fa fa-check-circle status-passed"></i>Passed</li>
            <li><i class="fa-li fa fa-minus-circle status-inconclusive"></i>Inconclusive</li>
        </ul>
    </li>
    <li><i class="fa-li fa fa-circle-o status-unassigned"></i>Unassigned</li>
    <li><i class="fa-li fa fa-dot-circle-o status-assigned"></i>Assigned</li>
    <li><i class="fa-li fa fa-ban status-canceled"></i>Canceled</li>
    <li><i class="fa-li fa fa-refresh status-rescheduled"></i>Rescheduled</li>
    <li><i class="fa-li fa fa-minus-circle status-missed"></i>Missed</li>
    <li><i class="fa-li fa fa-times-circle status-voided"></i>Voided</li>
</ul>
```
*/
ul.inspection-chain-reinspections
{
    list-style-type: none;
    padding: 0;
    margin: 0em 0em 0em 1.3em;
}

i.status-unassigned
{
    color:#428bca;
}

i.status-assigned
{
    color: #428bca;
}

i.status-inconclusive
{
    color: orange;
}

i.status-passed
{
    color: #05C715;
}

i.status-fail
{
    color: red;
}

i.status-canceled
{
    color: #bd3232;
}

i.status-rescheduled
{
    color: #bd3232;
}

i.status-missed
{
    color: #bd3232;
}

i.status-voided
{
    color: #bd3232;
}

/* 
## font-awesome styling ## 
Styles used with font-awesome

```
    <div class="nav-pills">
        <i class="fa fa=check"></i>I Have Right Padding
    </div>
```
*/
.nav-pills .fa
{
    padding-right:5px;
}


/* 
## Master Page Styles ## 
These styles are used on the logged in master pages to render the navigation bars.
Note that these syles are overriding some of the standard Bootstrap styles.
```
    (see Template_loggedin.Master for code samples)
```
*/



/* here is the stuff that causes probelms for beta menu*/

.navbar-header
{
    /* Top Navigation Menu */
    width:100%;
    margin-top:0px;
}


.navbar-header .pha-name
{
    padding-top: 18px;
    padding-left:-8px;
}

.navbar-fixed-top
{
    min-height: 86px;
    height: 86px;
    background: #eeeeee url(/Images/CGI_topbar_back3.png);
    background-repeat: repeat-x;
    
}

.navbar-brand
{
    
    padding: 0px 0px 0px 0px;
}
.navbar-brand-s
{
    padding-top:8px;
}

.navbar-header-logo
{
    height:55px;
    padding-top:6px;
    border: 0px solid red;
    width:90px;
    min-width:90px;
    float:left;
}

.nav-bar-links
{
    padding-top:50px;
    margin-left:-26px;
   
   
}

.nav-bar-loggedin-links
{
    padding-top:56px;
    margin-left:-16px;   
   
}
.nav>li>a:hover, .nav>li>a:focus{
    border-radius: 0;
}

.navbar-header-phaname
{
    display:table-cell;
    padding-top:19px;
    vertical-align:middle;
    font-weight: bold;
    color: #777777;
    
}

@media screen and (max-width: 700px)
{
    .navbar-default .navbar-collapse 
    {
         border:0px solid red;
    }

    /* Top Navigation Menu - set background color of small resize nav menu */
    .navbar-nav
    {
        background-color:#eeeeee;
        margin-top:-50px;
        
  
    }
    .nav-pills
    {
        background-color:#eeeeee;
        margin-top:-50px;
    }
    .nav-pills>li {
    /* Over ride float left of nav-pills */
    float: none;
    }

    .navbar-toggle
    {
         margin-top: 13px;
    }

    .logout-holder
    {
        margin-top:9px;
    } 
      
}

.navbar-default .navbar-nav > li > a
{
     color: #428bca;
}

.navbar-inverse
{
    /*over ride background nav bar background radien with black and blue line*/
    background-image:url(/images/TopNavBlackWithBlueLineBackground.png);
    background-repeat:repeat-x;
}


.pha-name
{
  padding-top:10px;
  font-weight: bold;
  border:solid purple 0px;
}

/* 
## TopNav.ascx Styles ## 
These styles are used in the TopNav.ascx control for rendering things like
the logout link, contact us, user name, etc.
```
<div class="logout-holder">
    Joe User | 
    <a href="/Logout.aspx" class="logout-links">Logout</a> |
    <a href="/ContactUs" target="_blank" class="logout-links">Contact Us</a>
</div>
```
*/

.logout-holder
{
    padding-top:12px;
    border:solid 0px red;
}

.logout-links
{
     color:black;
}
  
/* 
## Bread Crumb Styles ## 
Used to create bread crumb style page navigation.  
Used by PageNavBreadCrumbs.ascx, which is used on Page.aspx for displaying user created content.
But could be used by other pages if needed.
```
<div class="navbar navbar-default">
    <ul class="page-nav-bread-crumbs">
        <li><a href="Parent1">Parent 1</a></li>
        <li><a href="Parent2">Parent 2</a></li>
        <li>Current Page</li>
    </ul>
</div>
```
*/
ul.page-nav-bread-crumbs 
{
    /* Breadcrumbs Navigation Menu */
    padding: 12px;
    margin: 0px;
    list-style: none;
    color: #777;
}
ul.page-nav-bread-crumbs  li a
{
    text-decoration: none;
    color: #777;
}
ul.page-nav-bread-crumbs  li
{
    display: inline;
    
}
ul.page-nav-bread-crumbs li a:after
{
    content: ' >> ';
}

/* 
## Child Page Navigation ## 
Used to create links to children pages.
Used by PageNavSubMenu.ascx, which is used on Page.aspx for displaying user created content.
But could be used by other pages if needed.
```
<div class="navbar navbar-default">
    <ul class="page-nav-sub-menu">
        <li><a href="Child1">Child 1</a></li>
        <li><a href="Child2">Child 2</a></li>
    </ul>
</div>
```
*/
ul.page-nav-sub-menu
{
    /* Page Level Sub Navigation Menu used in PageNavSubMenu.ascx.cs*/
    padding: 12px;
    margin: 0px;
    list-style: none;
    color: #777;
}
ul.page-nav-sub-menu li a
{
    text-decoration: none;
    color: #777;
}
ul.page-nav-sub-menu li
{
    padding: 10px;
}


/* 
## Tab Styles ## 
Used to add extra formatting for tab controls.
Used by tabUtil.html
```
<ul class="nav nav-tabs stabs">
    <li class="active">
        <a href="page1">page 1</a>
    </li>
    <li>
        <a href="page2">page 2</a>
    </li>
</ul>
```
*/
.stabs
{
    /*  tab styles*/
    font-weight :bold;
    border-bottom:1px solid #CCCCCC;
    margin-bottom:0px;
    margin-left:0px;
}

/* 
## Error Page Styles ## 
Used by Error.aspx to create a border
```
<div class="container error-container">
    Error content goes here
</div>
```
*/
.error-container
{
    max-width:1000px;
    margin-top:10px;
    border:0px solid red;
    padding-right:20px;
    padding-left:40px;
    margin-bottom:10px;
}

@media screen and (max-width: 1170px)
{
    .error-container
    {
        max-width:800px;
    }


}




/*
## Standard Dialogs ##
Used by site.ts to create standard dialogs
*/
#ui_errorMessageDialog_Message
{
    height: 200px;
    margin-bottom:10px;
    overflow: auto;
}


#ui_confirmDialog_Message
{
   height: 100px;
   margin-bottom:10px;
}

#ui_confirmDialog_Yes
{
    margin-right:5px;
}
 
   
/*
## Wait Indicator ##
Used to display a spinning wait indicator that overlays any page content
```
    <div class="wait-indicator">
        Some Content<br />
        Some Content<br />
        Some Content<br />
        Some Content<br />
    </div>
```
*/
.wait-indicator
{
    /*rotating circle wait indicator*/
    background-image: url("/Images/LoadingSmallCircle.gif");
    background-position:center;
    background-repeat: no-repeat;
    z-index: 999999;
}


/*
## Template_loggedin.master Styles ##
Styles used on the Template_loggedin.Master page.
*/
#page-wrap
{
    /* Template wrapping to make footer snap to bottom of page */
    min-height: 100%;
}
#page-main
{
    padding-top: 90px;
    overflow: auto;
}
#page-footer
{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear: both;
    padding-top: 20px;
    color: white;
    font-size: 12px;
    background-image: url(/Images/footer_background.png);
    background-repeat: repeat-x;
}
#page-footer a
{
    color: #ffffff;
    text-decoration: underline;
}

#page-footer a:hover
{
    color: #cccccc;
    
}

.loggedIn-footer-holder
{
    width:100%;
    border:0px solid red;
    text-align :center;
    overflow:hidden;
    padding-top:5px;
    
    
}
.loggedIn-footer
{
    margin-top:5px;
    text-align :center;
    font-size:12px;
    color: #666666;
    margin-right:5px;
    margin-left:5px;
    
}

.loggedIn-footer a
{
    color: #666666;
}
     
.loggedIn-footer a:hover
{
    color: #e31937;
}

.hide508 {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ahreftobutton
{
  color:  #337ab7;
  outline: none;
  background-color: transparent;
  border:none;
}

    .ahreftobutton:hover {
        color: #2e6da4;
    }

    .ahreftobutton:focus-visible {
        color: #2e6da4;
        outline: 1px solid #2e6da4;
    }

.notesarrowbutton {
    color: #333;
    outline: none;
    background-color: transparent;
    border: none;
    padding-left:0px;
    padding-right:0px;
}

    .notesarrowbutton:hover {
        color: #2e6da4;
    }

    .notesarrowbutton:focus-visible {
        color: #2e6da4;
        outline: 1px solid #2e6da4;
    }

/*
## Kendo border-box fix ##
Change content inside of the splitter control to use
the border-box model which works better with Bootstrap.
*/
.k-splitter .k-pane * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
## Kendo scheduler fix for current date ##
Make the background color for the current date white.
By default it will be a grey color.
*/

.k-scheduler .k-today {
  background: white;
}

/*
## Kendo scheduler fix for non-work hours ##
Make the background color white for non-work hours
By default it will be a grey color.
*/

.k-scheduler .k-nonwork-hour {
  background: white;
}

/*
## Global Style Changes ##
Changes that apply to all instances of a tag type.
*/
a:focus {
    /* css for better slide out drawer menu2 */
    outline: none;
}

img {
    border:none;
}


/*
## Drawer Control ##
Styles for the drawer control that is rendered on the appHost.aspx page.
See AppHost.aspx for code example.
*/
.app-drawer-panel
{
    position: relative;
    background:#ffffff;
    border: 1px solid #111111;
    width: 300px;
    max-width: 300px;
    padding: 5px 5px 5px 5px;
   /*scrollbar-track-color:#000000;*/
   
    background-image: url(/Images/drop-down-menu-drawer-background.jpg);
    background-position-y: 0%;
    background-repeat: no-repeat;
    /*-pie-box-shadow: 6px 6px 9px #B2B2B2;
    -moz-box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 6px 6px 9px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.3);*/
  /* border-radius */
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;
/* box-shadow */
 -webkit-box-shadow: rgba(0,0,0,0.8) 0px 0 10px;
 -moz-box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;

}

.app-drawer-holder
{
    position: relative;
    display:block;
    background-color:transparent ;
    border:0px solid red;
    margin:6px;
    overflow: auto;
}

 .app-drawer-holder::-webkit-scrollbar {
    width: 12px;
   
}
 
 .app-drawer-holder::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 20px;
}
 
.app-drawer-holder::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}


.dropdown-toggle
{
   padding-right:5px;
}

button.dropdown-toggle {
    background-color: transparent;
    color: #337ab7;
    border: none;
}

    button.dropdown-toggle:focus {
        color: #52789f;
        outline: 1px solid #52789f;
    }

    button.dropdown-toggle.actionbtn {
        background-color: #337ab7;
        color: #ffffff;
    }

        button.dropdown-toggle.actionbtn:focus {
            background-color: #2d6ca2;           
            color: #eeeeee;
        }

        button.dropdown-toggle.actionbtn:hover {
            background-color: #2d6ca2;
            color: #eeeeee;
        }

.app-drawer-dropdown {
    border: none;
    background-color: none;
    padding: 0px;
    margin-left: 10px;
    /* border-radius */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.apphost-drop-title
{
    font-weight:bold;
}
.apphost-drop-subtitle
{
    font-weight:normal;
}

/* 508 Skip to main content */
a.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    scroll-behavior: auto;
}

    a.skip-link:focus {
        position: relative;
        width: auto;
        height: auto;
        top: 20px;
        left: 10px;
        color: #20399D;
        font-weight: 600;
    }

  
@media print {
    [data-id="AppRouter_Header"] {
        visibility: hidden;
    }
}

/*
## AppHost.aspx Styles ##
Styles the header area of the AppHost.aspx page.
See AppHost.aspx for code example.
*/
.top-info
{
    /* top panel with history dropdown that will be on top of all single page stuff*/
    background-color:transparent ;
    border-color: none;
    padding-top:5px;
    padding-right:0px;
    padding-left:0px;
    padding-bottom:5px;
    margin:0px;
    min-height:30px;
    border:0px solid red;
    margin-right:0px;
}

.top-info-icon
{
     max-width:30px;
     padding-right:0px;
     margin-left:0px;
    border:0px solid red;
}

.top-tab {
    margin: 0;
    height: 14px;
    line-height: 14px
}

.top-tab-title {
    /*title next to tabs*/
    font-size: 16px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #e31937;
    font-weight: 900;
    padding-bottom: 5px;
}

.top-tab-subtitle 
{
     /* subtitle next to title*/
    font-size: 16px;
    font-family: verdana, helvetica, arial, sans-serif;
    color: #e31937;
    font-weight:  200;    
    margin-left:5px;
}

    
/*Color Coding for Pages---Owners, Tenants, Units */
glyphicon-th-list /*This makes the dropdown glyphicon white*/
{
    color:#ffffff;
}

/*Owners,tenants,Units,etc Color Coding*/
.top-info-nocolor
    
{
     background-image: none;

     margin-bottom:5px;    
     margin-left:0px;
     margin-right:0px;
     padding-top:0px;
     border-radius:10px;
     color: #ffffff;
     font-size: 16px;
     font-family: verdana, helvetica, arial, sans-serif;
     font-weight: 900;
     padding-top:2px;
     padding-bottom:2px;
    
}

.top-info-owners
{
     /*background-image:linear-gradient(
      45deg, 
     #24B73D, #f5f5f5
    );*/
  
}

.top-info-unit
    {
     color: #ffffff;
}
.units, .unit
{
     /*background-image:linear-gradient(
      45deg, 
     #6f5786, #f5f5f5
    );*/
    
    
}

    
.top-info-tenants
{
     /*background-image:linear-gradient(
      45deg, 
     #618657, #f5f5f5
    );*/
    
    
}


.top-info-users
{
     /*background-image:linear-gradient(
      45deg, 
     #7e7f37, #f5f5f5
    );*/
    
}
.top-info-scheduler
{
     /*background-image:linear-gradient(
      45deg, 
     #208199, #f5f5f5
    );*/
  }
.tenants .dropdown-toggle {
    color: #ffffff;
    font-size: 16px;
    font-family: verdana, helvetica, arial, sans-serif;
    font-weight: 900;
    padding-top: 2px;
    padding-bottom: 2px;
}
    
.holidays /*top info - reports color */
{
     /*background-image:linear-gradient(
      45deg, 
     #208199, #f5f5f5
    );*/
}

 .holidays .dropdown-toggle
    {
         color: #ffffff;
    }
.configadmin  /*top info - config/admin color */
{
     /*background-image:linear-gradient(
      45deg, 
     #208199, #f5f5f5
    );*/
  }
.pane-outer .owners
{
    /*padding:5px;
      background-image:linear-gradient(
      45deg, 
     #24B73D, #f5f5f5
    );*/
}

/* 
## htmll editor custom styling ## 
Styles used with editor toobar

```
    <div class="letter-tremplate-page">
        
    </div>
```
*/
.letter-template-page .k-insertHtml  {
    width:350px;

     
}


/* 
## Kendo Editor Custo Toolbar ## 
Add icons to custom toolbar items in kendo editor

```
```
*/
.k-editor .k-i-undocustom
{
    background: 50% 50% no-repeat url(/images/prev.gif);
}

.k-editor .k-i-redocustom
{
    background: 50% 50% no-repeat url(/images/next.gif);
}


.step-progress-container {
    text-align: center;
    border: solid 0px red;
    padding-top: 25px;
    margin-bottom:10px;
    padding-bottom:10px;
}

    .step-progress-container > .step-line {
        margin: 0 auto;
        width:  100%;
    }

/* circle background for step number*/
.step-number {
    padding-left: 10px;
    padding-right: 10px;
    padding: 5px;
    border-bottom-width: thin;
    background-color: lightgrey;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.step {
    border-bottom: solid 6px #cccccc;
    background-color: #ffffff;
    color: #999999;
    height: 50px;
    padding: 10px;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 13px;
    text-align: center;
}


.step-current {
    font-weight: bold;
    border-bottom-color: blue;
    color: #161616;
}

.step-completed {
    font-weight: normal;
    
}

.step-line {
    height: 60px;
    border: solid 0px yellow;
    text-align: center;
}

.step-divider {
    float: left;
    background-color: #ffffff;
    border-bottom: solid 6px #999999;
    height: 50px;
    max-width: 6px;
    width: 6px;
}

.step-divider-completed {
    float: left;
    background-color: #ffffff;
    height: 50px;
    width: 40px;
}

button[id="topNavInspectionSearchButton"].k-icon.k-i-search {
    right: 3px;
    left: initial;
    border: none;
    background-color: transparent;
}

.gridFilterUIWidget .k-icon.k-i-search {
    right: 3px;
    left: initial;
    border: none;
    background-color: transparent;
}


.list-search-filter .k-icon.k-i-search {
    right: 3px;
    left: initial;
    border: none;
    background-color: transparent;
}


/*media querys*/
@media (max-width: 860px) {
    .step {
        border-bottom: solid 4px #cccccc;
        background-color: #ffffff;
        color: #999999;
        height: 50px;
        padding: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 13px;
        text-align: center;
    }
    .step-current {
    font-weight: bold;
    border-bottom-color: blue;
    color: #161616;
}
}


@media (max-width: 750px) {

    
.step {
    border-bottom: solid 2px #cccccc;
    background-color: #ffffff;
    color: #999999;
    height: 50px;
    padding: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 13px;
    text-align: center;
}

.step-current {
    font-weight: bold;
    border-bottom-color: blue;
    color: #161616;
}
    
}


@media (min-width: 1200px) {
   
}
/* --end-- */