/* ---- General Style ---- */

/* https://css-tricks.com/box-sizing/ */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.hover {
    cursor: pointer;
}

h2 {
    font-size: 1.3em;
}

h3 {
    display: inline;
    font-size: 1.2em;
}

h4 {
    margin-top: 0;
    margin-bottom: 2%;
}

.bold {
    font-weight: bold;
}

.textLeft {
    text-align: left;
}

.right {
    float:right;
}

.left {
    float:left;
}

.cyberYellow {
    color:#fdd138;
}


/* ---- Buttons ---- */

button, input[type="button"] {
    transition-property: background, font-weight;
    transition-duration: 0.1s;
    transition-timing-function: linear;
}

.button-maintenance-inline {
    transition-duration: 0.2s !important;
}

.button-forward {
    padding-right: 5% !important;
    text-align: center;
    background-image: url(/assets/icon-forward.png);
    background-position: 96%;
    background-size: auto 45%;
    background-repeat: no-repeat;


}

.button-maintenance-forward {
    padding-right: 5% !important;
    text-align: center;
    background-image: url(/assets/icon-maintenance-forward.png);
    background-position: 96%;
    background-size: auto 45%;
    background-repeat: no-repeat;
}

.button-maintenance-forward:hover {
    padding-right: 5%;
    text-align: center;
    background-image: url(/assets/icon-maintenance-forward-white.png);
    background-position: 96%;
    background-size: auto 45%;
    background-repeat: no-repeat;
}

.button-back {
    padding-left: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-back.png);
    background-position: 5%;
    background-size: auto 45%;
    background-repeat: no-repeat;
}

.med-button-grey.button-back:hover, .button-maintenance-inline.button-back:hover {
    background-image: url(/assets/icon-back-white.png);
}

.button-download {
    padding-left: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-download.png);
    background-position: 5%;
    background-size: auto 45%;
    background-repeat: no-repeat;

}

.button-upload {
    padding-left: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-upload.png);
    background-position: 5%;
    background-size: auto 35%;
    background-repeat: no-repeat;

}

.button-import {
    /*
    padding-right: 5% !important;
    padding-left: 5% !important;
    text-align: center;
    background-image: url(/assets/icon-import.png);
    background-position: 97.5%;
    background-size: auto 45%;
    background-repeat: no-repeat;
    */
    padding-left: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-upload.png);
    background-position: 5%;
    background-size: auto 45%;
    background-repeat: no-repeat;
}

.med-button-red.button-import {
    background-image: url(/assets/icon-import-white.png);
}

.button-print {
    padding-left: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-print.png);
    background-position: 5%;
    background-size: auto 45%;
    background-repeat: no-repeat;

}

.med-button-grey.button-print:hover {
    background-image: url(/assets/icon-print-white.png);
}

.button-process {
    padding-right: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-process.png);
    background-position: 95%;
    background-size: auto 45%;
    background-repeat: no-repeat;

}

.button-annotate {
    text-align: center;
    background-image: url(/assets/icon-annotate.png);
    background-position: 95%;
    background-size: auto 50%;
    background-repeat: no-repeat;
}

.button-GEO {
	padding-right: 25% !important;
	text-align: center;
    background-image: url(/assets/icon-GEO.png);
    background-position: 95%;
    background-size: auto 45%;
    background-repeat: no-repeat;
}

.button-edit {
    padding-right: 25% !important;
    text-align: center;
    background-image: url(/assets/icon-edit.png);
    background-position: 95%;
    background-size: auto 30%;
    background-repeat: no-repeat;

}

.med-button-red.button-edit {
    background-image: url(/assets/icon-edit-white.png);
    padding-right: 10% !important;
    padding-left: 10% !important;
}

.button-maintenance-inline.button-edit:hover {
    background-image: url(/assets/icon-edit-white.png);
}

.button-swap {
    text-align: center;
    background-image: url(/assets/icon-swap.png);
    background-position: 95%;
    background-size: auto 50%;
    background-repeat: no-repeat;

}

.med-button-red.button-swap {
    background-image: url(/assets/icon-swap-white.png);
}

.button-cancel {
    text-align: center;
    background-image: url(/assets/icon-cancel-white.png);
    background-position: 95%;
    background-size: auto 35%;
    background-repeat: no-repeat;
    background-color: #d35154 !important;
    border-color: #d43f3a !important;
    color:white;
}

.button-cancel:disabled {
    color:#cfd1d4;
}

.button-cancel:hover, .med-button-red:hover {
    background-color:#d43f3a !important;
}

.button-confirm {
    text-align: center;
    background-image: url(/assets/icon-confirm-white.png);
    background-position: 95%;
    background-size: auto 45%;
    background-repeat: no-repeat;
    background-color: #57b563 !important;
    border-color: #4cae4c !important;
    color:white;
}

.button-confirm:disabled, .button-save:disabled {
    color:#cfd1d4;
}

.button-confirm:hover, .button-save:hover {
    background-color:#4cae4c !important;
}

.button-save {
    text-align: center;
    background-image: url(/assets/icon-save-white.png);
    background-position: 95%;
    background-size: auto 60%;
    background-repeat: no-repeat;
    background-color: #57b563 !important;
    border-color: #4cae4c !important;
    color:white;
}

.button-add {
    text-align: center;
    background-image: url(/assets/icon-add.png);
    background-position: 90%;
    background-size: auto 30%;
    background-repeat: no-repeat;
}

.med-button-dark-inline.button-add, .med-button-green.button-add {
    background-image: url(/assets/icon-add-white.png);
}

.button-subtract {
    text-align: center;
    background-image: url(/assets/icon-subtract.png);
    background-position: 90%;
    background-size: auto 30%;
    background-repeat: no-repeat;
}

.med-button-dark-inline.button-subtract {
    background-image: url(/assets/icon-subtract-white.png);
}

.button-timer {
    text-align: center;
    background-image: url(/assets/icon-timer.png);
    background-position: 92%;
    background-size: auto 40%;
    background-repeat: no-repeat;
}

.button-tag {
    text-align: center;
    background-image: url(/assets/icon-tagging.png);
    background-position: 94%;
    background-size: auto 40%;
    background-repeat: no-repeat;
}

.button-duplicate {
    text-align: center;
    background-image: url(/assets/icon-duplicate.png);
    background-position: 94%;
    background-size: auto 40%;
    background-repeat: no-repeat;
}

.button-crop {
    text-align: center;
    background-image: url(/assets/icon-crop.png);
    background-position: 94%;
    background-size: auto 50%;
    background-repeat: no-repeat;
}

.button-rotate {
    text-align: center;
    background-image: url(/assets/icon-rotate.png);
    background-position: 94%;
    background-size: auto 50%;
    background-repeat: no-repeat;
}

.button-edit-image {
    text-align: center;
    background-image: url(/assets/icon-edit-image.png);
    background-position: 94%;
    background-size: auto 50%;
    background-repeat: no-repeat;
}

.button-user {
    text-align: center;
    background-image: url(/assets/icon-user.png);
    background-position: 94%;
    background-size: auto 50%;
    background-repeat: no-repeat;
}

.button-annotations {
    text-align: center;
    background-image: url(/assets/icon-tagging.png);
    background-position: 94%;
    background-size: auto 40%;
    background-repeat: no-repeat;
}


.in-line-button-med.button-process, .in-line-button-med.button-download, .in-line-button-med.button-back, .med-button-grey.button-back, .in-line-button-med.button-forward, .in-line-button-med.button-print,
.in-line-button-big.button-process, .in-line-button-big.button-download, .in-line-button-big.button-back, .in-line-button-big.button-forward, .in-line-button-big.button-print, .med-button-grey.button-print,
.in-line-button-big.button-upload, .in-line-button-med.button-upload, .button-maintenance-inline.button-edit, .button-maintenance-inline.button-edit, .button-maintenance.button-edit,
.button-maintenance-inline.button-maintenance-forward, .button-maintenance-inline.button-maintenance-show, .in-line-button-med.button-edit, .button-maintenance-inline.button-back,
.med-button.button-edit, .in-line-button-med.button-GEO {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.button-show, .button-maintenance-show {

    padding-right: 5% !important;
    text-align: center;
    background-image: url(/assets/icon-maintenance-show.png);
    background-position: 96%;
    background-size: auto 45%;
    background-repeat: no-repeat;

}

.button-maintenance-show:hover {

    padding-right: 5%;
    text-align: center;
    background-image: url(/assets/icon-maintenance-show-white.png);
    background-position: 96%;
    background-size: auto 45%;
    background-repeat: no-repeat;

}

/* Grey */

.med-button-grey {
    background-color: #c7cace;
    border:solid 1px #9da3a9;
    cursor: pointer;
    font-size: 0.8em;

    width: 100%;
    padding: 1%;
    padding-top: 5%;
    padding-bottom: 5%;

    margin-top: 5%;
}

.med-button-dark-inline {
    background-color: #333;
    color: white;
    font-weight: normal;
    border:none;
    cursor: pointer;
    font-size: 0.8em;

    width: 15%;
    margin-right: 1%;
    padding-top: 1%;
    padding-bottom: 1%;
}

.med-button-dark-inline:hover {

}

.med-button-grey-inline {
    background-color: #c7cace;
    border:none;
    cursor: pointer;
    font-size: 0.8em;

    width: 15%;
    margin-right: 1%;
    padding-top: 1%;
    padding-bottom: 1%;

}

.med-button-grey-inline:hover {
    background-color: #333;
    color: white;
}

.container {
    display: flex;
    justify-content: space-between;
    height: 100px;
}

.image-figure {
    height: 100%;
    margin-top: -30px;
}

.hrs-images {
    height: 100px;
    width: 100px;
}

.hrs {
    height: 45px;
    width: 90%;
}

.item-1 {
    flex-grow: 2;
}

.item-2 {
    flex-grow: 1;

}

.item-3 {
    flex-grow: 1;
    align-self: stretch;
    width: 100px;
}

.med-button-grey:disabled {
    cursor: initial;
    background-color: white !important;
}

.med-button-grey:disabled:hover {
    font-weight: normal;
}

.med-button-grey:hover, .in-line-button-grey-big:hover {

    background-color: #737c84;
    border-color: #9da3a9 !important;
    color: white;
}


/* ----- */
.hidden {
    display: none;
}

.upload-file-button-small {
    width: 80% !important;
    height: 45px !important;
    padding-top: 15px !important;
    font-weight: bold;
    background-color: #fdd138;
    border: 1px solid #e9be2a;
    padding-left: -15% !important;
    text-align: center;
    background-image: url(/assets/icon-upload.png);
    background-position: 5%;
    background-size: auto 40%;
    background-repeat: no-repeat;

}


.med-button, .in-line-button-med, .in-line-button-big {
    background-color: #fdd138;
    cursor: pointer;
    font-size: 0.8em;
    border: 1px solid #e9be2a;
}

.med-button-red {
    background-color: #d35154 !important;
    border: 1px solid #d43f3a !important;
    cursor: pointer;
    font-size: 0.8em;
    color:white;
}

.in-line-button-grey-big {
    background-color: #c7cace;
    border:solid 1px #9da3a9;
    cursor: pointer;
    font-size: 0.8em;
    width: 25%;
}

.med-button-green, .in-line-button-green {
    cursor:pointer;
    background-color: #57b563 !important;
    border:1px solid #4cae4c !important;
    color:white;
}

.med-button-white, .in-line-button-white {
    background-color: white;
    border:none;
    cursor: pointer;
    font-size: 0.8em;
}

.med-button-white:hover, .in-line-button-white:hover {
    background-color: #fdd138;
}

.med-button-white:disabled {
    background-color: #737c84 !important;
    color:black;
}

.med-button:disabled {
    font-weight: normal !important;
    cursor:default !important;
}

.in-line-button-med:disabled {

    color:#737c84;
}

.in-line-button-med:disabled:hover {
    font-weight: normal;
}

.med-button-white:disabled:hover {
    font-weight: normal;
    cursor:not-allowed !important;
}



.med-button:hover, .in-line-button-med:hover , .in-line-button-big:hover {
    /* Add some responsive behaviour */
    background-color: #ffc600;
}

.in-line-button-big:disabled:hover {
    background-color:#fdd138;
    cursor:default !important;
}

.med-button, .med-button-white, .med-button-green, .med-button-red {
    width: 100%;
    padding: 1%;
    padding-top: 5%;
    padding-bottom: 5%;
}

.in-line-button-med, .in-line-button-big, .in-line-button-white, .in-line-button-green, .in-line-button-grey-big {

    padding-top: 1%;
    padding-bottom: 1%;
    margin-right: 1%;
    margin-bottom: 1%;

}

.in-line-button-med, .in-line-button-white, .in-line-button-green {
    width:15%;
}

.in-line-button-big {
    width:20%;
}

.ihawk-button-icon-button3 {
    background: url(/assets/icon-button3.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 30%;
}

/* Pop Over Buttons */

.popover {
    width: 15%;
    padding:1%;
}

.popover select {
    width: 100%;
}

select {
    cursor:pointer;
}

.popover h3 {
    width:80%;
    float:left;
    margin:0;

}

.popover-close {
    width:20%;
    float:right;
    cursor:pointer;
}

.popover-close img {
    width: 50%;
    height:auto;
    float:right;
}

.button-popover {
    width: 100%;
    border:2px solid;
    cursor:pointer;
}

/* Maintenance Buttons */

.button-maintenance {
    background-color: white;
    border:1px solid #9da3a9;
    cursor: pointer;
    font-size: 0.8em;

    width: 100%;
    padding: 1%;
    padding-top: 5%;
    padding-bottom: 5%;

    margin-top: 5%;
}

.button-maintenance-inline {
    background-color: #c7cace;
    border:1px solid #9da3a9;
    cursor: pointer;
    font-size: 0.8em;

    width: 15%;
    margin-right: 1%;
    padding-top: 1%;
    padding-bottom: 1%;


}

.button-maintenance-inline:hover {
    background-color: #737c84;
    border-color:#555;
    color: white;
}

.button-maintenance:disabled {
    cursor:initial;
    background-color: white !important;
}

.button-maintenance:disabled:hover {
    font-weight: normal;
}

.button-maintenance:hover, #downloadgeneric:hover, #print:hover, #landingpage:hover, #wolist:hover {

    background-color: #fdd138;
    border-color:#e9be2a;
}

#downloadgeneric, #print, #landingpage, #wolist {
    background-color: #c7cace;
    text-align: left;
}

#downloadgeneric img, #print img, #landingpage img, #wolist img {
    padding-left: 10%;
    padding-right: 10%;
    float:left;
}



/* ------- */

.arrow-button-holder {
    width:15%;
    font-size: 1.2em;
    margin-right: 1%;
    cursor:pointer;
    height: 25px;
}

.disabled {
    cursor:not-allowed;
}

.disabled-button {
    background-color: #5c6269 !important;
}


.left-side-button {
    float:left;
    line-height: 25px;
}

.right-side-button {
    float:right;
    line-height: 25px;
}

.vmid {
    vertical-align: middle;
}

.arrow-button-text {

    padding-top: 2%;
    margin-left: 5%;
    float: left;
}

.box-button {

    width: 25px;
    height: 25px;
    background-color: #5c6269;
    background-color: black;

}

.box-button:disabled {
    background-color:
}

.box-button-large {

    width: 80%;
    height: 45px;
    background-color: #5c6269;
    background-color: black;
    border-radius: 6px;

}

.box-button-large-px {

    width: 45px;
    height: 45px;
    background-color: #5c6269;
    background-color: black;

}

.up-arrow {

    background-image: url("/assets/icon-up.png");
    background-repeat: no-repeat;
    background-position: 5px;

}

.left-arrow {

    background-image: url("/assets/icon-left-white.png");
    background-repeat: no-repeat;
    background-position: 50%;

}

.right-arrow {

    background-image: url("/assets/icon-right-white.png");
    background-repeat: no-repeat;
    background-position: 50%;

}

#imageBrowserButtons {

    float: left;
    padding: 2.25% 1% 3.5% 1%;
    width: 10%;
    bottom: 0;

    height: 100%;
}

.imageBrowserButtonArea {

    width: 50%;
    height: 100%;
    float:left;
}

.imageBrowserButtonLine {

    width: 100%;
    height: 50%;
}

.next-prev-button {
    height: 100%;
    width: 100%;
    cursor:pointer;
}

/* -- End of Buttons -- */



/* -- Bootstrap 3 (based) Media Queries -- */

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1800px) {

html {
    font-size: 16px;
}

}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1500px) {

html {
    font-size: 15px;
}

}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

html {
    font-size: 14px;
}

}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1150px) {

html {
    font-size: 12px;
}

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

html {
    font-size: 10px;
}

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

html {
    font-size: 8px;
}

}

@media only screen and (max-width : 600px) {

html {
    font-size: 6px;
}

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

html {
    font-size: 6px;
}

}

@media only screen and (max-width : 400px) {

html {
    font-size: 4px;
}

}

html {
    width: 100%;
    height: 100%;
}

body {
    /*background-image: url("../assets/background.jpg");
    background-position: -50px 0px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    */
    margin:0px;

    width: 100%;
    height:100%;

    position: relative;

    font-family: Helvetica, Arial, sans-serif;
}



/* ---- End of General Style ---- */

/* ---- Header Bar Style ---- */
#header {
    width:100%;
    height: 10%;
}

#cyberhawk-logo {
    width:20%;
    height: 100%;
    padding:1% 1% 0% 1%;
    box-sizing: inherit;
    overflow: hidden;

}

#cyberhawk-logo-opacity {
    opacity: 0.85;
    filter: alpha(opacity=85);
    background-color: black;
    height: 10%; /* same as height of header bar*/
    width: inherit;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: none;
}

#cyberhawk-logo a {
    color:black;
}

#cyberhawk-logo img {
    height:100%;
    width: auto;
    border:none;
}

.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto
}

#header-right {
    width:80%;
    height: 100%;
    float:right;
    background-color:#F3F3F3;
    /*
    opacity: 0.8;
    filter: alpha(opacity=80); */ /*IE8 Compatibility */

    /*
    padding-top: 1%;
    padding-bottom: 1%;
    */

    box-sizing: inherit;

    position: relative;

}

#headerContent {
    width:50%;
    height:100%;
    float:left;
    padding-left:2%;
    /*padding-top: 1%;*/
    font-size:0.9em;

    position: relative;
    /*
    top: 50%;
    transform: translateY(-50%);
    -sand-transform:  translate(0, -50%);
    */
}

#breadcrumbs {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    -sand-transform:  translateY(-10%);
}

#breadcrumbs a {
    color:#333;
    text-decoration: none;
}

#breadcrumbs a:hover {

    text-decoration: underline;
}

#customer-logo {
    width: 10%;
    height:inherit;
    float:left;
    padding-left: 2%;

    position:relative;
}

#customer-logo img {

    width:90%;
    height:auto;
    float:left;
    border:none;

    position:absolute;
    top:50%;
     transform: translateY(-50%);
    -sand-transform:  translateY(-10%);
}

#headerContent p {
    color:#333333;
    margin:0px;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -sand-transform:  translateY(-10%);
}

#headerFunctions{

    width:38%;
    height:100%;
    float:right;
    /*padding-top: 1%;*/
    margin-right: 2%;

    position: relative;
}

#headerFunctionsAlignment {

    width:100%;
    max-height: inherit;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -sand-transform:  translateY(-20%);

}

#headerLinks {
    width:50%;
}

#headerLinksAlignment {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -sand-transform:  translateY(-10%);
}

#headerLinks p {

    font-size:0.8em;
    color:#5c6269;
    margin:0px;
    float:left;
    /*margin-top: 3%;*/
    line-height: 135%;
}

#headerLinks a {
    color:#5c6269;
    text-decoration: none;
}

#headerLinks a:hover{
    text-decoration: underline;
}

#headerSearchBar {

    margin-left: 2%;
    width:48%;
    float:right;

    /* Override Defaults */
    padding-right:0px;
    border:none;

    /*position: absolute;
    right: 0;
    padding-right: 6%;
    top: 50%;
    transform: translateY(-50%);
    -sand-transform:  translateY(-10%);*/
}

#searchBar {

    background-color: #c7cace;
    padding-left:3%;
    padding-top: 5%;
    padding-bottom: 5%;
    float:right;
    width:81%;
    font-size:0.8em;
    margin-top: 0px;

    /* Override Defaults */
    padding-right:0px;
    border:none;
}

.placeholder
{
    color: #5c6269;
}

#headerGoButton {

    background-color: #333333;
    padding-top:5%;
    padding-left:5%;
    padding-right:4%;
    padding-bottom:5%;
    float:right;
    font-size:0.8em;
    font-weight: bold;
    width:19%;
    color:white !important;
    text-decoration: none;
    cursor:pointer;
    border:none;

    background-image: url("/assets/searchIcon.png");
    background-position: 55% 45%;
    background-size: 80%;
    background-repeat: no-repeat;

}

#IE8GO {
    background-image: none !important;

    background-color: #333333;
    padding-top:5%;
    padding-left:4%;
    padding-right:4%;
    padding-bottom:5%;
    float:right;
    font-size:0.8em;
    font-weight: bold;
    width:19%;
    color:white !important;
    text-decoration: none;
    cursor:pointer;
    border:none;
}

/* ---- End of Header Bar Style ---- */

/* ---- Content Below Header Bar Style ---- */
#content {
    height:90%;
    width:100%;
}

#image-browser-content {
    height:75%;
    width:100%;
}

/* ---- Sidebar Style ---- */
#sidebar {
    height:100%;
    width:20%;
    padding:1% 2% 4% 2%;
    font-size:1.0em;
}

#sidebarOpacity {
    background-color:black;
    opacity: 0.85;
    filter: alpha(opacity=85);
    height: 100%;
    width: 20%;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#sidebarSubstation {
    height:100%;
    width:25%;
    padding:1% 2% 1% 2%;
    font-size:1.0em;
    float:right;
    /*background-color: grey;*/
}

#sidebarOpacitySubstation {
    background-color:black;
    opacity: 0.85;
    filter: alpha(opacity=85);
    height: 100%;
    width: 25%;
    position: absolute;
    z-index: -1;
    top: 10%;
    bottom: 0;
    right: 0;
}

#sidebarOpacityWind{
    background-color:black;
    opacity: 0.85;
    filter: alpha(opacity=85);
    height: 100%;
    width: 30%;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#windSideBar {
    height:100%;
    width:30%;
    padding:2%;
    font-size:0.9em;
}

#sidebarContent {
    height:100%;
    width:100%;
    color:white;
    overflow-y: auto;
    position: relative;
}

.sidebarContentWind {
    overflow: hidden !important;
}

#sidebarContentSubstation {
    height:100%;
    width:100%;
    position:relative;
}

#sidebarContent ul li {
    list-style: none;
    word-wrap: break-word;
}

#sidebarContent ul {
    margin:0;
    padding-left: 0;
}

#sidebarContent li {
    margin-bottom:2%;
}

#sidebarContent ul li:hover{
    background-color: rgb(255, 209, 15);
    cursor: pointer;
    color:black !important;
    /*font-weight: bold;*/
}

#sidebarContent a {
    color:white;
}

#sidebarContent a:hover {
    color:white;
}

#sidebarWindFooter {
    position: relative;
    left: 0;
    bottom: 0;
    padding-left: 2%;
    padding-top: 2%;
    padding-bottom: 1%;
}

#sidebarFooter {
    position: relative;
    left: 0;
    bottom: 0;
    padding-left: 2%;
    padding-top: 8%;
    padding-bottom: 1%;
}

#sidebarFooter p, #sidebarWindFooter p {
    font-size: 0.8em;
    line-height: 120%;
    color:#999;
    padding:0;
    margin:0;
}

#sidebarFooter p a, #sidebarWindFooter p a {
    color: #c7cace;
    text-decoration: none;

}

.hierarchy-item {

}

.hierarchy-parent {
    font-weight: bold;
    margin-top: 4%;
}

.hierarchy-child {
    margin-left: 4%;
    margin-top: 2%;
    margin-bottom: 0 !important; /* Override Default */
}

#maintenanceline {
    margin: 0 auto;
    margin-bottom: 5%;
    text-align: center;
    color: white;
}

#maintenanceline a:visited {
    color: white;
}
#maintenanceline a:hover {
    color: #737c84;
}

#admin-holder a:hover, ul li:hover {
    color:black !important;
}

#sidebarHierarchy {
    padding-bottom: 5%;
    border-bottom: 1px solid #4d4d4d;
}

.hierarchy-nav {
    padding-top:1.5%;
    padding-left: 5%;
    cursor:pointer;
    font-weight: bold;
    text-decoration: none;
}

.hierarchy-nav:first-child {
    padding-left: 0;
}

.hierarchy-nav a {
    text-decoration: none;
}

.level_1 {
    font-size: 1.0em;
}

.level_2 {
    font-size: 0.9em;
    color: #ccc !important;
}

.level_3 {
    font-size: 0.8em;
    color: #bbb !important;
}

.level_4 {
    font-size: 0.7em;
    color: #ccc !important;
}

.level_5 {
    font-size: 0.6em;
    color: #737c84 !important;
}

#substationHierarchy {
    margin-bottom: 5%;
}

/* ---- End of Sidebar Style ---- */

/* ---- Main Content Style ---- */

#mainContent {

    height:100%;
    width:80%;
    background-color: #F3F3F3;
    filter: alpha(opacity=95); /*IE8 Compatibility */
    float: right;

}

#mainContent-inner, #mainContentPadding {
    width:100%;
    height:100%;
    padding-left: 2%;
    padding-right: 2%;
    overflow: auto;
}

#mainContent-full {
    width:100%;
    min-height:100%;
    padding-left: 2%;
    padding-right: 2%;

    background-color: #F3F3F3;
}

#map-canvas {
    width:96%;
    height:100%;
    float:right;
    position: relative;

    margin-right: 2%;
}

#work-orders-canvas {
    width: 98%;
    padding-right: 2%;
    float:right;
    height: 100%;
}

#maintenance-canvas {
    width:98%;
    height:96%;
    float:right;
    overflow-y: scroll;
}

#maptoggle {
    position: absolute;
    z-index: 8;
    background-color: white;
    font-size : 0.7em;
    border:1px solid black;

    right:2%;

    top : 11% !important;
    width:9%;
}

#markersclick {
    padding: 10%;
    font-size: 1.0em;
    background-color: #333;
    font-weight: bold;
    color: #bbb;
    background-image: url("/assets/button-arrow-down.png");
    background-repeat: no-repeat;
    background-position: 90% 50%;
}

#markerstoggle {
    display: none;
    padding:3%;
}

#mapRightClickMenu {
    width:140px;
    z-index:1001;
    position:fixed;
    background-color:white;
    border:1px solid lightgrey;
    padding:2px 0 2px 0;
    font-size: 0.9em;
}

.mapRightClickMenuItem {
    padding: 5px 0 5px 0;
}
.mapRightClickMenuItem > span {
    padding: 0 10px 0 10px;
}

.mapRightClickMenuItem:hover {
    background-color: lightgrey;
    cursor:pointer;
}

#image-canvas {
    width:80%;
    height: 100%;
    float:right;
    background-color: #F3F3F3;
}

#image-canvas-holder-substation {
    width:80%;
    height: 100%;
    float:right;
}

#image-canvas-substation {
    width:75%;
    height: 100%;
    float:left;
    background-color: #F3F3F3;

}

#image-canvas-inner {
    width: 100%;
    height: inherit;
    padding-left: 3%;
    padding-right: 1%;
}


#image-canvas-wind {
    width:80%;
    height: 100%;
    float:right;
    background-color: #F3F3F3;
}

#image-canvas-inner-wind {
    width: 100%;
    height: 80%;
    padding-left: 2%;
    padding-right: 2%;
}

#image-canvas-inner-substation {
    width: 100%;
    height: 92%;
    padding-left: 2%;
    padding-right: 2%;
}

#help-canvas {
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-left: 2%;

    font-size: 0.8em;
}

#help-canvas p img {
    display: block;
    margin: 0 auto;
}

#zoom_Holder {
    position: absolute;
    right: 1.5%;
    top: 10%;
    height: 8%;
    z-index: 4;
    border: none;
}

#zoomImage {
    height: 100%;
    width: auto;
    cursor: pointer;
    float: right;
}

.zoom-icon img , .zoom-icon-blade img {
    border: 1px solid black;
    width:auto;
    height:8%; /* 64px */
    margin-top: 1%;
    position: absolute;
    right: 1%;
    top: 10%;
    margin-right: 0.5%;
}

.zoom-icon-in img {
    border: 1px solid black;
    width:auto;
    height:8%; /* 64px */
    margin-top: 1%;
    position: absolute;
    right: 1%;
    top: 10%;
    margin-right: 0.5%;
    padding:0.5%;
    cursor:pointer;
}

.zoom-icon-in-sidebar img {
    width:50%;
    padding:0.5%;
    cursor:pointer;
    float: right;
}

.zoom-icon-out-sidebar img {
    width:50%;
    padding:0.5%;
    cursor:pointer;
    float: right;
}

#zoom-icon-in-line {
    width:auto;
    height:100%; /* 64px */
/*    margin-top: 1%;
    margin-right: 0.5%;*/
    padding:0.5%;
    margin-right: 2%;
    cursor:pointer;
    float: right;
}

.sxy-zoom-container {
    /*margin:15px;*/
}

#swinzoom {
    height:100%;

    width: 75%;
    float: left;
}

#swinzoomFull {
    height:100%;
    width: 100%;
    float: left;
}

#swin1 {
    height:100%;
}

.swinxyzoomFull {
    width:100%;
    height:100%;
}

.swinxyzoomFull img {
    margin: 0 auto;
    display: block;
}

.swinxyzoom img {
    height : 100%;
    width:auto;
    border:none;
    max-width: 100%;
}

.swinxyzoomFull img {
    margin:1px;
    bottom: 0;
    position: absolute;
    z-index: 1;
    cursor:pointer;
}

.swinxyzoom {
    position: relative;
    display: block;
}

#zoom-text {
    position : absolute;
    left : 25%;
    top : 50%;
    text-transform : uppercase;
    color : blue;
    font-size : 2em;
    font-weight:bold;
}

.condition-text {
    background-color: white;
    border: 2px solid #cfd1d4;
    bottom: 15%;
    position: absolute;
    right: 1.5%;
    max-width: 20%;
    padding: 1%;
    z-index: 4;
}

#image-browser {
    height:130px;
    background-color: #F3F3F3;
    position: relative;
}

#next-prev-holder {
    width:15%;
    height:100%;
    float:left;
    padding: 1%;
}

#thumb-name-container {
    width:85%;
    height:18%;
    float: left;
    margin-left: 1%;
    vertical-align: middle;
    font-size: 1.0em;

    padding-top: 5px;
}

#thumb-image-container {
    height:80%;
    overflow-x: scroll;

    float: left;
    width: 88.5%;
}

.thumb-holder {
    float: left;

    /* Make Dynamic */
    height:55px;
    width:55px;
    padding: 5px;
    margin-right: 5px;
}

.thumb-holder img {
    height: 100%;
    width: 100%;
}

.current-thumb {
    background-color: rgb(255, 209, 15);
}

.thumb-code {
    position: relative;
    bottom: 0;
    background-color: white;
    text-align: center;
}

#tab-holder {
    margin-left: 1%;
}

/* Line Info Panel Above map */
table {
    border-collapse: collapse;
}

td {
    border: 1px solid black;
    text-align: center;
}

#line-info {
    margin-left: 2%;
    margin-right: 2%;
    width:96%;
    height:4%;
    font-size: 1.1em;
}


#line-info td, #line-info th {
    text-align: center;
    padding: 1px 2px;
    font-size: 0.8em;
}

.linecircuits td {
    padding: 1px 8px;
}

/* Admin Main Content */
#usersList {
    padding:2%;
    height:inherit;
    overflow-y:scroll;
}

#usersedit {
    padding:0 2% 2% 2%;
    height:inherit;
    overflow-y:scroll;
}

/* ---- End of Main Content Style ---- */


/* ---- Bottom Container Style ---- */

#bottom-container {
    padding-bottom: 2%;
    padding-left: 0.5%;
    padding-right: 0.5%;
    padding-top: 2%;
    background-color: #F3F3F3;
}

#line-exec-summary-holder {
    width: 98%;
    border:1px solid #9da3a9;
    background-color: white;
    padding:1.5%;
    margin-right: 2%;
    margin-top:1%;
    margin-left:1%;
}

/* ---- Matrix Style ---- */

#line-information-matrix{
    clear: both;
    padding: 1% 0 1% 1%;
    font-size: 0.8em;
    width: 98.75%;
    overflow-x: auto;
    margin-right: 1%;
}

#line-information-matrix > table {
    width:100%;
}

#line-information-matrix>table>tbody>tr:hover {
    cursor:pointer;
}

.matrix-clickable-maintenance {
    cursor:pointer;
}

#workOrderList {
    height: 90%;
    overflow-y:visible;
    width:100%;
    font-size: 1.0em;
}

#table-wrapper {
    height: 100%;
    overflow-y:auto;
    position: relative;
}

.wo-table {
    display:table;
    width:100%;
}

.wo-row {
    display : table-row;
}

table
{
border-collapse:collapse;
}
table, td
{
border: 1px solid black;
}
tr
{
background-color:white;
}
#line-information-matrix td.catU{
    background-color: orange;
    color:white;
}
#line-information-matrix td.catq{
    background-color: red;
    color:white;
}
#line-information-matrix td.cat4{
    background-color: red;
    color:white;
}
#line-information-matrix td.cat3{
    background-color: yellow;
}
#line-information-matrix td.cat2{
    background-color: greenyellow;
}
#line-information-matrix td.cat1{
    background-color: green;
    color:white;
}

.matrix-clickable{
    cursor: pointer;
}
td.matrix-clickable:hover{
    background-color: purple!important;
    color:white;
}

tr:hover .matrix-clickable-line {
    cursor: pointer;
    background-color : #cfd1d4;
}

#matrixlegend {
    font-size: 0.8em;
    margin-top: 2%;
    padding: 1.5%;
    display: inline-block;
    background-color: white;
    border: 1px solid #9da3a9;
    margin-left: 1%;
    float:left;
}

.esqcvalues {
    margin-left: 1%;
    margin-bottom: 1%;
}

.column {
    width:inherit;
    display: table-row;
}

.details {
    width: 25%;
    display: table-cell;
}

.details.largeD {
    width: 75%;
}

#matrixlegend table {
    border:none;
}

.legendTitle {
    font-weight: bold;
    text-align: left;
    padding-left: 2%;
}

.legendKey {
    width: 25%;
    float: left;
    font-weight: bold;
    text-align: left;
    padding-left: 2%;
}

.legendValue {
    width: 75%;
    float: right;
    text-align: left;
}

#line-exec-summary-description {
    font-size: 0.8em;
}

#bottomContainerFooter {
    width:99%;
    border-top: 1px solid #999;
    margin-top: 1%;
}
#bottomContainerFooterText {
    width:100%;
    text-align: center;
}

/* ---- End of Matrix Style ----- */

/* Tower / Maintenance (Image Browser) */


.parts-holder {
  color: #fdd138 !important;
}

#schematic-holder {
  width:100%;
}

#schematic {
  width:inherit;
  position:relative;
}

.tower-schematic {
  width:inherit;
  height:auto;
}

.tower-schematic-clickable {
    position: absolute;
    border: 1px solid peru;
}

.tower-schematic-clickable:hover {
    position: absolute;
    border: 1px solid black;
    background-color:#fdd138;
    opacity: 0.65;
    filter: alpha(opacity=65); /*IE8 Compatibility */
}


#archiveClick {

    position: relative;
    bottom: 0;
    height: 10%;
    width: 70%;
    float: left;
    margin-left: 3%;
    padding-top: 1%;
    font-size: 1.1em;

}

.archiveClick-button {
    width: 50%;
    height: 100%;
    float: left;
}

.archiveClick-clickable {
    cursor:pointer;
}

.archiveClick-clickable-disabled {
    cursor:not-allowed !important;
}

.archiveButtonLabelDisabled {
    background-color: #c7cace !important;
    cursor:not-allowed !important;
}
.archiveButtonDisabled {
    color:#9da3a9 !important;
    cursor:not-allowed !important;
}

.arch-prev-button:disabled {
    cursor:default !important;
}

/* Table Style */

table {
    font-size: 0.8em;
}

tr {
    display:table-row;
    /*background-color: ##e8e9eb;*/
    width:100%;
}

td {
    display: table-cell;
    padding: 5px;
    border: 1px solid #cfd1d4;
}

.mq-table {
    display:table;
    width: 100%;
}

.mq-row {
    display:table-row;
    background-color: white;
    width:100%;
}

.mq-row-head {
    display:table-header-group;
}

.mq-row:nth-child(even) {
    background-color: #e8e9eb;
}

.mq-head {
    background-color: #fdd138;
    color: #333;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid #e9be2a !important;
    border-right: 1px solid #e9be2a !important;
    border-left: 1px solid #e9be2a !important;
    border-top: 1px solid #e9be2a !important;
    display:table-header-group;
}

.mq-col {
    display: table-cell;
    padding: 5px;
    border: 1px solid #cfd1d4;
}

.mq-col a {
    color:#333;
}

.filtericon {
    display: inline;
    float: right;
    padding-left: 4px;
    cursor: pointer;
}


/* Other */

.label {
    float:left;
    margin-right: 1%;
    width:10%;
}

.towercat1 {

    background-color: #00b050 !important;
    color: white !important;
}
.towercat2 {
    background-color: #92d050 !important;
    color: white !important;

}

.towercat3 {

    background-color: #ffff00 !important;
}
.towercat4 {
    background-color: #ff0000 !important;
    color: white !important;
}
.towercat5 {
    background-color: #DC143C !important;
    color: white !important;
}


/* Maintenance / Work Order List / Substation */

#matrixOutput {
  /*
  margin-left: 90%;
  width: 10%;
  float: right;
  padding-right:1%;
  */
  width: 100%;
  display:inline-block;
}

#matrixOutput button {
  float:right;
}

.checkboxImage {
    height: 36%;
}
.checkboxImage {
    height: 36%;
    width: auto;
    cursor: pointer;
}

.headsort {
    cursor: pointer;
    background-image: url("/static_images/icons/Icon_ordering.png");
    background-repeat: no-repeat;
    background-size: auto, 50%;
    background-position: 5% 50%;
    padding-left: 1.5%;
    padding-right: 1.5%;
}

#thenotestextarea {
    width:100%;
}


#thefilter {
    border: 2px solid #9da3a9;
    background-color: white;
    display: none;
    position: absolute;
    padding: 10px;
    z-index: 1004; /* z index of sticky table header and scroll 1000-1003 */
}

#thepriority, #thedeadline, #theuser, #thenotes {
    border: 2px solid #9da3a9;
    background-color: white;
    display: none;
    position: absolute;

    z-index: 1004; /* Floating Table Header has z-index of 1003 */
}

#thepriority input, #thedeadline input, #theuser input, #thenotes input {
    border:2px solid #cfd1d4;
    padding: 2%;
    width: 100%;
}

#thepriority select, #thedeadline select, #theuser select, #thenotes select, #thefilter select {
    background-color: white;
}


#dialog-confirm {
    display: none;
    height: 100px !important;
    text-align: center;
}

.gps-green {
    /*
    background-image: url("/assets/disc-icon-on.png");
    background-repeat: no-repeat;
    background-position: 10px;
    */
    display: list-item !important;
    list-style-image: url("/assets/disc-icon-on.png");
    list-style-position: inside;

    height: 33px;
    width: auto;
}

.gps-red {

    display: list-item  !important;
    list-style-image: url("/assets/disc-icon-off.png");
    list-style-position: inside;
    /*
    background-image: url("/assets/disc-icon-off.png");
    background-repeat: no-repeat;
    background-position: 10px;
    */
    height: 33px;
    width: auto;
}

.esqcvalues {
    font-size: 0.8em;
}


/*INTERNET EXPLORER EDGE STYLESHEET (Can be included by all as there is check to make sure browser is edge)
     - No Check exists like IF EDGE */

@supports (-ms-accelerator:true) {
    .selector {
        color: red;
    }
    body {
        background-color: blue !important;
    }

    .checkboxImage {
        height: 35px !important;
    }

    .styled-col {
        word-wrap:normal !important;
        max-width: 75px !important;
    }
}

/* IE 11 */
*::-ms-backdrop, .styled-col {
    word-wrap:normal !important;
    max-width: 75px !important;
}

*::-ms-backdrop, .checkboxImage {
    height: 35px !important;
    width: auto !important;
}


.exportFormPopOverMenu {
    position:relative;
}

.exportFormPopOverMenu > ul.list {
    display:none;
    position:absolute; left:30px; top:-30px; z-index:999;
    width:75%;
    margin:0;
    padding:10px 5px !important;
    list-style:none;
    background:#fff; color:#333;
    -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
    -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.exportFormPopOverMenu > ul.list > li > a {
    color:#333 !important;
    text-decoration: none;
    display: block;
    width: 100%;
}

.exportFormPopOverMenu > ul.list li {
    padding:10px !important;
    border-bottom: solid 1px #ccc;
}

.exportFormPopOverMenu > ul.list li:hover {
    background:#EC6603; color:#fff;
}

.exportFormPopOverMenu > ul.list li:last-child {
    border:none
}

.center-brand {
	display: block;
	margin: 0 auto;
	padding-top: 10px;
}

#annotationsContainer {
    display: none;
    margin-bottom: 15px;
}

.inspect-annotation {
    position: absolute;
    border: 10px #fdd138 solid;
    cursor: pointer;
}

.inspect-annotation.active-annotation {
    border: 10px #fd3838 solid;
    pointer-events: none;
}

.inspect-annotation .annotation-label {
    /* display: none; */
    position: absolute;
    top: 0;
    left: 0;
    background: #fdd138;
    padding: 10px;
    color: black;
    pointer-events: all;
}

.inspect-annotation .annotation-label div {
    font-size: inherit;
}

.inspect-annotation .annotation-label .annotation-actions {
    /* display: none; */
    font-size: inherit;
    white-space: nowrap;
    padding: 10px;
    pointer-events: all;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.inspect-annotation .annotation-label .annotation-actions .annotation-feedback.inactive {
    opacity: 0.3;
}

.inspect-annotation .annotation-label .annotation-actions i {
    font-size: inherit;
    padding: 3px;
}

.inspect-annotation.active-annotation div {
    background: #fd3838;
    color: white;
}

#annotationScoreFilter {
    display: none;
    margin-bottom: 15px;
}

#annotationScoreFilter > span > span {
    float: right;
}