html { overflow: auto; font: 1em Arial,sans-serif; font-size: 10px; background-color: #6F7377; height: 100%; }

body { color: #999999; margin: 0px; position: relative; height: auto; z-index: -100; overflow-x: hidden; background-color: #003B7C; }
body.popup { width: 100%; height: 100%; }
div { position: relative; box-sizing: border-box; }
table { position: relative; }
#breadCrumbTrail { position: absolute; left: 2px; top: 2px; }
div.pane { display: inline-block; overflow: hidden; height: 100%; vertical-align:top; }
div.pane > div { display: inline-block; overflow: hidden; width: 100%; }
div.about { background-size: cover; background-repeat: no-repeat; background-image: url(images/Splash.jpg); width: 1000px; }
body.splash { background-image: url(images/splash.jpg); background-repeat: no-repeat; }

.fading-right-border { 
    border-right: 1px solid #1C60A8;
    border-left-width: 0;
    border-image: linear-gradient(to bottom, transparent 0%, transparent 5px, #1C60A8 10%, #1C60A8 90%, transparent 99.5%, transparent 100%);
    border-image-slice: 1;
}

.fading-bottom-border {  
    border-bottom: 1px solid #1C60A8;
    border-top-width: 0px;
    border-image: linear-gradient(to right, transparent 0%, transparent 10%, #1C60A8 25%, #1C60A8 75%, transparent 90%, transparent 100%);
    border-image-slice: 1;
}

/*.cool-font {font-family: "Gotham SSm A","Gotham SSm B",Helvetica,Arial,sans-serif; text-transform: none;}
.cool-font {font-family: "Cinzel","Times New Roman",Times,Georgia,serif; text-transform: none;}*/
.cool-font {text-decoration: underline; }
.cool-font.white { color: white; }
.business-title { font-size: 14px; color: white; }
.header { font-size: 16px; position: relative; }
label.cool-font.header { position: relative; }
label.dimension-label { margin-bottom: 10px; }

div.header-wrapper { text-align: center; margin-top: 25px; margin-bottom: 5px; }
div.header-wrapper.left { text-align: left; }
div.header-tool-bar { height: 40px; text-align: right; }
div.template { display: none !important; }
#selectedElement { height: 910px; width: 1650px; }
#selectedElement > div.pane { width: 100%; }
#rightPaneFrame { width: 1100px; height: 800px; }
/*
.vertical {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}
*/
.k-dropdown-wrap { border-radius: 4px; }
.k-button.k-button-icontext.k-grid-add { position: absolute; right: 3px; padding-right: 2px; z-index: 25; }
div.k-header.k-grid-toolbar { }

div.node-edit-textbox { position: absolute; top: 0px; border-radius: 4px; }
div.node-edit-textbox > input { border-radius: 4px; }
div.node-edit-textbox > span.k-icon { top: -2px; }
div.node-edit-textbox > span.k-icon:hover { cursor: pointer; }

span.icon { 
    height: 16px; width: 16px; margin: 2px; opacity: 0.1; display: inline-block;
    border-color: transparent; background-repeat: no-repeat; background-color: transparent 
}

/* Tree List */
div.k-treelist { border: none; }
div.k-treelist span.k-in.k-state-hover { background-color: transparent; }
div.k-treelist span.k-in > img.k-image, div.k-treelist span.k-in > div.node_text { vertical-align: top; }
div.k-treelist span.k-in > img.k-image { max-width: 16px; max-height: 16px; }
div.k-treelist, div.k-treelist .k-grid-content, div.k-treelist tr { color: white !important; background-color: transparent !important; }
div.k-treelist td { border: none !important; }
div.k-treelist .k-grid-content { overflow: hidden !important; }
div.k-treelist .k-grid-header { display: none !important; }

span.icon:hover { opacity: 1.0 !important; }

span.icon.garbage_16 { background-image: url("images/garbage_16.png"); }

span.icon.edit_16 { background-image: url("images/edit_16.png"); }

li.k-item > div > span.icon { position: relative; top: 2px; margin: 0 0 0 20px; opacity: 0.05; background-color: transparent; }
li.k-item > div:hover  span.icon { opacity: 1.0; }

div.menuIcons { position: absolute; right: 15px; top: 0px; }/**/ /* this works, but I don't really like it.*/
div.menuIcons > span.icon { margin-left: 5px; }

span.k-in:hover > span.icon.edit_16 { opacity: 1.0; }

/*div.k-mid { border-bottom: 1px solid red; }*/

li.k-item > div { min-height: 20px; }
div.nodeEditDiv { position: absolute; left: 0px; top: 0px; width: 400px; height: 300px; background-color: black;}

.centered { text-align: center !important; }

.new-row-button { position: absolute; top: 1px; right: 20px; }

.photoLink  { }

.imageDateLabel { position: relative; left: 5px; }

.deleteLinkButton { position: absolute; right: 0px; top: 3px; height: 24px; width: 24px; }

.microPhotoDiv { float: left; margin-top: 5px; margin-right: 5px; }

.microPhotoDiv > a > img
{ width: 60px; height: 40px; border-width: 1px; border-style: solid; border-color: #aaaaaa; border-radius: 3px; padding: 3px; }

tr.owner > td, tr.contractor > td { border-left-width: 1px !important; border-top-width: 0px; border-bottom-width: 1px; border-right-width: 0px;
    border-color: #444444 !important; vertical-align: top; }

.top-bezel-div { position: absolute; left: 25px; top: 15px; width: 720px; }

.region-body-div { position: absolute; left: 27px; top: 47px; height: 539px; }

.bottom-bezel-div { position: absolute; left: 25px; top: 642px; height: 30px; width: 720px; }
        
tr.owner > td, .owner { background-color: #657688; }
        
tr.contractor > td, .contractor { background-color: #6D8764; }  /*#7B3A3E*/

.k-grid-delete, .k-grid-edit, .k-grid-change, .k-grid-update, .k-grid-cancel { padding: 0px; min-width: 16px !important; }

table.k-selectable > tbody > tr > td > .k-button { min-width: 16px; }

/*  
    commented this out because it messed with the checklist presentation 
    I'll need to find the elements that this was created for and work around
    .k-button, span.k-dropdown{ border-bottom-color: #555555 !important; border-width: 1px; }
*/

.large-label { font-size: 12px; }

.large-label-bold { font-size: 12px; font-weight: bold; }

.label-bold { font-weight: bold; }

td.has-no-references { background-color: #B27C69; /*background-image: linear-gradient(180deg, #B27C69, #704D41 40%);*/ }

a.k-grid-update > .k-update, a.k-grid-cancel > .k-cancel { margin: 0px; border-radius: 2px; }

a.k-grid-edit > .k-edit, a.k-grid-change > span { margin: 0px; border-radius: 2px; background-position: -32px 0px }

a.k-grid-delete > .k-delete { margin: 0px; border-radius: 2px; background-image: url("images/garbage_16.png") !important; opacity: 0.7; background-position: 0 0 !important; }
a.k-grid-delete > .k-delete:hover { opacity: 1.0; background-image: url("images/garbage_16.png") !important; background-position: 0 0 !important; } 
        
/* general grid presentation */
tr.k-master-row , div.k-grid-content > table > tbody > tr, div.k-grid-content-locked > table > tbody > tr { background-color: #525252; }
        
tr.k-master-row > td 
, div.k-grid-content > table > tbody > tr > td, div.k-grid-content > table > tbody > tr.k-alt > td 
, div.k-grid-content-locked > table > tbody > tr > td, div.k-grid-content-locked > table > tbody > tr.k-alt > td 
{ border-width: 0px 0px 1px 0px; border-bottom-color: #4177A0; border-bottom-width: 1px ; /* !important */ }
        
div.k-grid-content > table > tbody > tr.k-alt
, div.k-grid-content-locked > table > tbody > tr.k-alt { background-color: #3d3d3d; }

div.k-grid-content > table > tbody > tr.k-alt:hover
, div.k-grid-content-locked > table > tbody > tr.k-alt:hover { background-color: #666; }

div.k-grid-content > table.k-selectable > tbody > tr.k-state-selected 
div.k-grid-content-locked > table.k-selectable > tbody > tr.k-state-selected  {
    /*background-color: #cccccc; 
    color: #0f0f0f;*/
    background-color: #3d3d3d; 
    background-image: none;
    border-bottom-color: #5EAFED;
    border-bottom-width: 1px !important;
}

.selected, tr.k-state-selected { background-color: #657688 !important; }

ul.k-pager-numbers span.k-state-selected { background-color: #dddddd; color: #0a0a0a; box-shadow: none; border-color: #06c; }
ul.k-pager-numbers > li > span, ul.k-pager-numbers > li > a { width: 30px !important; }

.blackDiv { color: White !important; border: none; background-color: transparent;}
.blackDiv td { color: White !important; }
.blackDiv .k-grid-header { background-color: inherit; background-image: none; border-color: #2b2b2b; }
.blackDiv .k-link { color: white; border: none; }
.blackDiv > .k-pager-wrap { 
    padding-top: 5px; border-width: 0px !important; border-color: #2b2b2b; height: 30px; 
    background-image: none; background-color: transparent !important;
    color: white;
}


/* Grid Row Colors */

td[is_okay='1'] { background-color: rgb(74, 95, 83); }
tr.k-alt td[is_okay='1'], tr.k-alt td.can_write { background-color: rgb(56, 71, 49); }
.k-grid-header, .k-grid-header-wrap { border-style: none; background-color: transparent; }

div.k-grid-lockedcolumns div.k-grid-header-wrap th.k-header { text-align: center; }

.k_row_alt_unselected { background-color: #F5F5F5 }

.k-grid-header-wrap { /*border-radius: 8px;*/ }

.k-grid-header { /*border-radius: 8px;*/ }

.k-grid td { padding: 0.2em 0.3em 0.2em 0.3em !important; }




tr.is-included, td.is-included { background-color: #6D8764 !important; }
tr.is-included.k-alt, tr.k-alt > td.is-included { background-color: #397555 !important; }

.regionWrapper { 
    position: absolute; left: 15px; top: 74px; height: 800px; width: 1554px; color: White; 
    background-color: #242527; 
    border-radius: 15px; border-color: #4e4e4f; border-width: 1px; overflow: hidden; z-index: -5; 
}
div.containerDiv, #containerDiv { left: 0; top: 0; height: 2000px; width: 100%; }

.addRemoveLinkButton { position: relative !important; float: right; height: 16px; width: 16px; padding-right: 10px; }
.add, .remove { height: 16px; width: 16px; position: relative; top: 2px; left: 2px; }
        
#locationGrid > .k-pager-wrap, #locationExportGrid > .k-pager-wrap
{ background-image: none; background-color: transparent; border-width: 0px; height: 30px; padding-top: 10px; }
        
#locationGrid > .k-grid-content { border-width: 1px; border-color: #FFFFFF; }
.k-grid-content {  background-color: #4d4d4d; }
.k-grid-content.k-auto-scrollable { overflow: auto !important; }
#locationGrid { border-width: 0px; }

.locationObservationTextArea { position: absolute; left: 8px; top: 2px; height: 15px; width: 800px; border-style: solid; z-index: 10; }

#PeopleDiv td, #PeopleDiv th { border-left-width: 0; }

.location_photos_div > table { width: 3300px; }

/* for the report viewer: until I come up with a better way to manage the command buttons at the top of the report viewer UI */

input.Disabled { display: none; }

.input-text-box {
    border: 0 none; border-radius: 10px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3) inset; outline: 0 none; padding: 4px 8px 4px 8px;
    font: 0.917em Arial,sans-serif; color: Black;
    width: 40px; height: 13px;  max-width: 160px;
    transition: width 0.15s linear 0s;
}

div.k-upload > div.k-dropzone { padding-top: 0px; padding-bottom: 0px; display: inline-block; }
div.k-dropzone > em { display: none; }

div.k-treeview.perfectScrollbar { overflow: hidden; }
div.k-treeview li.branch > div > span.k-checkbox-wrapper { display: none; }

div.invisible-rail > div.k-grid-content > div.ps-scrollbar-y-rail 
, div.invisible-rail > div.ps-scrollbar-y-rail {
    border-width: 0px !important;
    background-color: transparent !important;
}

/*nano-dot problem*/
div.ps-scrollbar-y-rail { border-radius: 0px !important; opacity: 1.0 !important; background-color: #242424; }


/* perfectScrollbar */
.perfectScrollbar, .perfectScrollbar  div.k-grid-content  { overflow: hidden !important; }
div.k-grid .k-grid-header { padding-right: 0px !important; width: 100% !important; }
         
/* to make scrollbars always visible */
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail,
.always-visible.ps-container > .ps-scrollbar-x-rail:hover,
.always-visible.ps-container > .ps-scrollbar-y-rail:hover { opacity: 1.0 !important; display: inline-block; background-color: #242424; }
        
.always-visible.ps-container > .ps-scrollbar-y-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail:hover { height: 100% !important; width: 7px !important; right: 0px !important; border-left: 2px solid #242424; border-right: .75px solid #4E4E4F; }

.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y { width: 7px !important; right: 1px !important; }

.k-window { box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, 0.5) !important; z-index: 1000005 !important; }
.k-window.k-state-focused { box-shadow: 5px 5px 8px 5px rgba(200, 200, 200, 0.5) !important; }
.group-association-grid { position: absolute; left: 15px; width: 150px; height: 250px; }

#checklistWrapperWrapper { box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, 0.5) !important; background-color: white; }

div.columnSelectorCell { display: inline-block; width: 150px; height: 30px; }

ul.k-menu { z-index: 20000; }

input.passwords-dont-match { border: 3px solid red; }
input.passwords-dont-match:hover { border: 2px solid red; }
#pwpbar > div { background-color: #773333; }
#pwpbar.adequate > div { background-color: Orange; }
#pwpbar.good > div { background-color: Green; }

div.k-treelist.present-as-tree { background-color: transparent; }
div.k-treelist.present-as-tree > div, div.k-treelist.present-as-tree tr { background-color: transparent !important; background-image: none; }
div.k-treelist.present-as-tree td { border: none; }

/*  F L O A T Y   W I N D O W S  */
.k-window-content { color: white; }
div:not(.k-editor-widget) > .k-window-content { background-color: #283A4D; } /* this ended up affecting the floatie toolbars above inline rich text editors. Find a way to make it apply only to floaties */

.k-window-content .fading-right-border { 
    border-right: 1px solid #1C60A8;
    border-left-width: 0;
    border-image: linear-gradient(to bottom, transparent 0%, transparent 5px, #495D73 10%, #495D73 90%, transparent 99.5%, transparent 100%);
    border-image-slice: 1;
}

.k-window-content .fading-bottom-border {  
    border-bottom: 1px solid #1C60A8;
    border-top-width: 0px;
    border-image: linear-gradient(to right, transparent 0%, transparent 10%, #495D73 25%, #495D73 75%, transparent 90%, transparent 100%);
    border-image-slice: 1;
}

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}