/*
    branded colors:

    Text        #009999
    Border      #136957       19,   105,    87      taken from the piston icon (83) 6th line from the bottom
    LightBack   #B7F2E7       183,  242,    231     Bordercolor with a Luminace of 200
*/

/***************************/
/*                         */
/* BRAND INDEPENDANT STYLE */
/*                         */
/***************************/
/*       DASHBOARD         */
/***************************/

.removeHyperlinkCss {
    text-decoration: none !important;
}

body, html, .skinBG {
    background-color: rgba(39, 151, 157, 1);
}

.bg-cmc {
    background-color: rgb(32,47,102) !important;
}

.bg-scadar {
    background-color: #11696F !important;
    color: white !important;
}

/* hide AirInsite header
.showAirInsite {
    display: none !important;
} */

#header {
    height: 100px;
    width: 1280px;
    margin: 0 auto 0;
    position: relative;
}

    #header .showSCADAR {
        display: table-row;
    }

    #header #leftImgBox {
        height: 100px;
        display: table-cell;
        vertical-align: middle;
    }

    #header #rightImgBox {
        height: 100px;
        position: absolute;
        right: 0;
    }

        #header #rightImgBox div#top-info {
            display: table-cell;
            vertical-align: middle;
            height: 100px;
        }

@media only screen and (max-width: 1280px) {
    #header {
        width: 1280px;
    }

    .panorama .panorama-sections .panorama-section {
        margin-right: 60px;
    }

    #LogoLinkImg {
        margin-left: 10px;
    }

    #rightImgBox {
        right: 0 !important;
    }
}

@media only screen and (min-width: 1281px) {
    #header {
        width: 1320px;
    }
}

/* LANDINGSPAGE */
div#syncQuotaBox {
    color: white;
    display: inline-block;
    line-height: 34px;
    font-size: 14px;
    margin-left: 92px;
    width: 280px;
}

span#AW_monthlySyncQuota_Txt {
    float: left;
    margin-right: 5px;
}

span#AW_monthlySyncQuota_Amount {
    font-weight: bold;
}

.subscriptionBtn {
    width: 48%;
    background-color: white;
    border: none;
}

    .subscriptionBtn:hover {
        background-color: rgb(32,47,102);
    }

    .subscriptionBtn:focus {
        outline: 0;
    }

    .subscriptionBtn span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .subscriptionBtn span:after {
            content: '»';
            position: absolute;
            opacity: 0;
            top: -8px;
            right: -20px;
            transition: 0.5s;
        }

    .subscriptionBtn:hover span {
        padding-right: 25px;
        color: white !important;
    }

        .subscriptionBtn:hover span:after {
            opacity: 1;
            right: 0;
            color: white !important;
        }

#consultantSubsc label {
    margin-bottom: 3px !important;
}

/*#csStartFreeTrial_Btn {
    background-color: #ddd;
    color: black;
    font-size: 12px;
    padding: 4px;
}*/

div#userMenu {
    background-color: lightgray;
    margin: 1px;
}

    div#userMenu > a {
        text-decoration: none;
        color: white;
    }

    div#userMenu span {
        font-size: 25px;
        padding: 10px 15px;
    }

        div#userMenu span:hover {
            background-color: #555;
        }

        div#userMenu span.active {
            background-color: #555;
        }

td.loginIcon {
    width: 36px;
    float: left;
}

    td.loginIcon span, td.accountIcon span {
        margin-left: 10px;
    }

#LoginTable input[type='text'], #LoginTable input[type='password'], #LoginTable textarea {
    width: 180px !important;
    font-size: 12px !important;
}

#NewUserWizardTable input[type='text'], #NewUserWizardTable input[type='password'], #NewUserWizardTable textarea {
    width: 180px !important;
    font-size: 12px !important;
}

#RecoverPasswordTable input[type='text'], #RecoverPasswordTable input[type='password'], #RecoverPasswordTable textarea {
    width: 175px !important;
    font-size: 12px !important;
}

.bg-skin-tile {
    background-color: #555 !important;
}

span#otherProductsTxt {
    font-family: 'Segoe UI Light_', 'Open Sans Light', 'Verdana', 'Arial';
    color: #fff;
    letter-spacing: 0.00em;
    font-size: 24px;
    line-height: 60px;
    letter-spacing: 0.01em;
    line-height: 2.2rem;
    cursor: default;
    margin-left: 15px;
}

div.productsBox a img {
    height: 60px;
    width: 250px;
}

div.productsBox a:hover {
    background-color: lightgray;
}

div.advertiseBox a {
    text-decoration: none !important;
    text-transform: none;
    text-align: center;
    color: black !important;
    position: relative;
}

    div.advertiseBox a:hover:before {
        content: "Click for more";
        position: absolute;
        left: 0;
        bottom: 0;
        text-align: center;
        width: 100%;
    }

/*  SKINCOLOR + DASHBOARD  */
.panorama-section h4, .panorama-section h4 .win-commandicon {
    color: white !important;
}

.win-commandicon, .win-commandring {
    color: white;
    border-color: white;
}

.skinColor {
    color: #11696F;
}

div#ContentContainer .metro a.tile.wide.publishBlockColor, div#ContentContainer .metro a.tile.square.publishBlockColor,
div#ContentContainer .metro a.tile.widepeek.myStuffBlockColor, .tile.square.imagetext.skinBackground.dimGrayBckgrnd, div#ContentContainer .uniqueBlockColor {
    background-color: white;
    color: #11696F;
}

div#ContentContainer .publishBlockColor .image-wrapper .icon, #databaseBoxHeightFix {
    color: #11696F !important;
}

div#ContentContainer .metro a.tile.wide.skinBackground, div#ContentContainer .metro a.tile.square.skinBackground, .skinBackground, div#ContentContainer .dimGrayBckgrnd {
    background-color: #11696F !important;
}

div#ContentContainer .tile .textover-wrapper {
    background-color: white !important;
    color: #11696F;
}

div#ContentContainer .metro a.tile.wide.infoBlockColor, div#ContentContainer .metro a.tile.square.infoBlockColor, .infoBlockColor {
    background-color: rgb(32,47,102);
}

#footer {
    max-width: 1324px;
    margin: 0 auto;
    margin-top: 30px;
}

/* SCADAR LOGOS */
.scadarLOGO {
    max-width: 300px; /*position: absolute; top: -80px;*/
}

/***************************/
/** HELPERS                */

.text-lowercase {
    text-transform: lowercase;
}

.text-uppercase {
    text-transform: uppercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.text--too-long {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}

/***************************/

@font-face {
    font-family: 'Exo-Thin';
    src: url('fonts/Exo-Thin.otf');
}

@font-face {
    font-family: 'Exo-Medium';
    src: url('fonts/Exo-Medium.otf');
}

@font-face {
    font-family: 'Exo-Bold';
    src: url('fonts/Exo-Bold.otf');
}

html {
    height: 100%;
}

body {
    height: 100%;
    min-width: 1280px;
    font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
    margin: 0;
    padding: 0;
    color: Black;
}

input[type="text"], input[type="password"], textarea {
    font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
}

img {
    border: none;
}

h1 {
    color: #009999;
    font-size: xx-large;
    font-weight: bold;
}

.pointerHover {
    cursor: pointer;
}

/* HEADER DASHBOARD */

a:hover .win-commandring {
    background-color: darkgray;
}

/* release notes */
#seeReleaseNotes:hover {
    font-style: italic;
}

.fakeLinkBtn:hover {
    font-style: italic;
}

/*login popup scadar - new image*/
#ui-dialog-title-homePagePopUp {
    margin-left: 55px;
}

.cursorHover {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

.floatLeft {
    float: left;
}

.iconFixMargin {
    margin-right: 4px;
}

.lowerOpacity {
    opacity: 0.4;
}

span.interactive {
    cursor: pointer;
}

span.pageDisabled {
    cursor: text;
    color: #999;
}

/* jQuery UI overlay fix */
div.ui-widget-overlay.ui-front {
    position: fixed;
}

/* CMC.MESSAGE ELEMENT */

#Toolbar div#messageUser {
    position: absolute;
    top: 0;
    right: 0;
    height: 32px;
    width: 200px;
    border-radius: 5px;
    background-color: #EEE;
    padding-left: 10px;
    line-height: 35px;
    color: #808080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#Toolbar > div#messageUser > span#messageUserTxt {
    font-size: 12px;
    letter-spacing: normal;
}

    #Toolbar > div#messageUser > span#messageUserTxt > img {
        width: 16px;
        height: 16px;
        margin-right: 0.5ex;
        cursor: auto; /* undo toolbar 'button' effect */
    }

#messageUserTxt.info:before, #messageUserTxt.error:before, #messageUserTxt.success:before {
    position: relative;
    top: 0.2em;
    margin-right: 1ex;
}

#messageUserTxt.info:before {
    content: url(../../Public/Images/info.png);
}

#messageUserTxt.error {
    color: #F00;
}

    #messageUserTxt.error:before {
        content: url(../../Public/Images/warning.png);
    }

#messageUserTxt.success {
    color: #008000;
}

    #messageUserTxt.success:before {
        content: url(../../Public/Images/confirm.png);
    }

/* END CMC MSG ELEMENT*/

.aspNetHidden {
    display: none;
}

.aspNetVisible {
    display: inline;
}

.fadedActionIcon {
    opacity: 0.5;
}

    .fadedActionIcon:hover {
        opacity: 1;
    }

.activeIcon {
    opacity: 1;
}

.closeSpanFaked {
    float: right;
    margin: 2px 8px 5px 15px;
    padding: 3px;
}

    .closeSpanFaked:hover {
        background-color: #ccc;
        cursor: pointer;
        border-radius: 5px;
        opacity: 0.7;
    }

.MainNavTable {
    width: 100%;
}

.divChartxxx /*old divchart (before collapsable simboxes) no more used*/ {
    min-width: 940px;
    min-height: 500px;
    margin: 0 auto; /*940 is max before scrollbar appears*/
    position: relative;
    left: -10px; /*removes padding 10px*/
    /*background-color: #EEEEEE;*/
}

/* .toolbaritem {float:left;} */

div.toolbaritem {
    float: left;
}

div.toolbarpanel {
    padding: 4px;
    position: absolute;
    z-index: 10000;
    top: 200px;
    left: 200px;
    background-color: #EEEEEE;
    border: 1px solid black;
}

/* resetting some styles for buttons in ui-dialogs from jQuery */
.ui-dialog /* jQuery popup-container */ {
    padding: 0.2em;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #000000;
    background-color: #EEEEEE;
    /* overwriting some stuff otherwise inherited from jQuery */
    font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
    font-size: 1em;
    background-image: none;
}

    .ui-dialog .ui-dialog-titlebar {
        background-color: transparent;
        background-image: none;
        padding: 0.4em;
    }

        .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
            color: #009999;
            font-weight: bold;
            font-size: large;
        }

        .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
            background-image: url('../../Public/Images/Close.png');
            height: 16px;
            width: 16px;
            display: block;
        }

            .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close span {
                display: none;
            }

/* resetting some styles for buttons in ui-dialogs from jQuery */
.ui-widget, .ui-widget select, .ui-widget input, .ui-widget textarea, .ui-widget button {
    font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
    font-size: 1em;
}

.ui-widget-content {
    background-color: #EEEEEE;
    background-image: none;
    width: 500px;
}
/*.ui-helper-reset {margin: 0; padding: 0; border: 0; outline: 0;  text-decoration: none; font-size: 100%; list-style: none;}*/ /*Multiline Tooltip IE9 Issue when in jquery-ui accordion area*/

.hidden {
    visibility: hidden;
}

.hiddenF {
    display: none !important;
}

.rotate90_CC {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rotate90_CW {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

@keyframes blink {
    50% {
        opacity: 0.0;
    }
}

@-webkit-keyframes blink {
    50% {
        opacity: 0.0;
    }
}

.blink {
    animation: blink 1s step-start 0s infinite;
    -webkit-animation: blink 1s step-start 0s infinite;
}

    .blink.fast {
        animation: blink 0.5s step-start 0s infinite;
        -webkit-animation: blink 0.5s step-start 0s infinite;
    }

    .blink.slow {
        animation: blink 1.5s step-start 0s infinite;
        -webkit-animation: blink 1.5s step-start 0s infinite;
    }

.faded, .disabledActions, .disabledAction, .fadedAction {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.fadedActivePointer {
    opacity: 0.5;
    cursor: default;
}

img[alt]:hover {
    /* commented by pe for testing */
    /*display:none;*/
}

.invalidInput {
    border: 2px solid #FF0000;
}

.invalidInputOrange {
    border: 2px solid #FFC000;
}

.popUpInitClass {
    position: absolute;
    visibility: hidden;
}

input.aspNetDisabled, select.aspNetDisabled {
    background-color: #EEEEEE;
}

input.brandedButton {
    font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
    font-weight: bold;
    padding: 1ex 2ex;
    color: #009999;
    border-color: #136957;
}

/**********************
-----------------------
--- SMART DASHBOARD ---
-----------------------
**********************/
#BodyTable, #BodyTable tbody, #BodyTable tr, #BodyTable td#NavigationPanel {
    border-spacing: 0;
}

#NavigationPanel {
    background-color: rgba(169,169,169, 0.5) !important;
    border-right: 1px solid rgb(169,169,169);
}

div#smartBoard div.smartItem {
    width: 305px;
    height: 44px;
    display: inline-block;
    margin: 0 -1px 0 0;
    float: left;
    background-color: transparent !important;
    padding-right: 1px;
}

    div#smartBoard div.smartItem.active:not(.half) {
        background-color: white !important;
        border-top: 1px solid rgb(169,169,169);
        border-bottom: 1px solid rgb(169,169,169);
    }

    div#smartBoard div.smartItem:hover:not(.active):not(.upperTop) {
        padding-right: 0;
        background-color: darkgray !important;
    }

        div#smartBoard div.smartItem:hover:not(.active):not(.upperTop) * {
            color: white !important;
        }

    div#smartBoard div.smartItem .tile {
        text-decoration: none;
        color: white;
        width: inherit;
        height: inherit;
        display: inline-block;
        text-align: left;
        line-height: 15px;
    }

    div#smartBoard div.smartItem .icon {
        float: left;
        font-size: 30px;
        width: 65px;
        margin: 9px 0 5px 15px;
    }

    div#smartBoard div.smartItem.half {
        width: 145px;
        height: 40px;
        float: left;
        margin: 0 0 0 0;
        font-size: 12px;
        line-height: 20px !important;
    }

        div#smartBoard div.smartItem.half * {
            line-height: 20px !important;
        }

        div#smartBoard div.smartItem.half:hover {
            padding-right: 1px !important;
        }

        div#smartBoard div.smartItem.half.active {
            background-color: #638fae !important;
            color: white !important;
        }

            div#smartBoard div.smartItem.half.active * {
                color: white !important;
            }

        div#smartBoard div.smartItem.half:nth-child(even) {
            float: right;
        }

        div#smartBoard div.smartItem.half:nth-child(odd) {
        }

        div#smartBoard div.smartItem.half .icon {
            float: left;
            font-size: 24px;
            width: 40px;
            margin: 9px 0 20px 20px;
        }

    div#smartBoard div.smartItem:first-child {
        height: 100px;
        margin-bottom: 15px;
    }

div#userNameTxts {
    float: left;
}

    div#userNameTxts > h3, div#userNameTxts > h4 {
        padding: 0;
        margin: 0 0 0 15px;
        text-align: left;
    }

div#userActions {
    float: right;
    margin-top: 10px;
    margin-right: 15px;
}

.win-command {
    text-decoration: none;
}

div#smartBoard .win-commandicon {
    border-style: solid;
    border-width: 2px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-clip: border-box;
    font-size: 25px;
    letter-spacing: 0.02em;
    line-height: 25px !important;
    display: inline-block;
    width: 25px;
    height: 25px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: 16px;
    line-height: 25px !important;
    text-decoration: none;
}

#header .win-commandicon {
    border-style: solid;
    border-width: 2px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-clip: border-box;
    font-size: 25px;
    letter-spacing: 0.02em;
    line-height: 25px !important;
    width: 42px;
    height: 42px;
    display: inline-block;
    min-width: 0;
    min-height: 0;
    padding: 0;
    font-size: 26px;
    line-height: 39px !important;
    text-decoration: none;
    text-align: center;
}

/************************
-------------------------
--- AUDIT WIZARD PAGE ---
-------------------------
************************/

/* air receiver volumne popup*/
div#optionReceiverVolumes {
    width: 460px;
    height: 75px;
    border: 1px solid gray;
}

img.iconReceiverTank {
    float: left;
    margin: 0 10px 0 3px;
    opacity: 0.7;
}

span.volumeReceiverTank {
    position: absolute;
    left: 80px;
}

span.SystemVolumeLits {
    float: right;
}

div#activeReceiverVolumeBox > * {
    float: left;
}

/* open audit */
.iconAuditType {
    width: 20px;
}

.OpenAuditRowBtn {
    height: 22px;
}

.deleteAuditRowBtn {
    width: 18px;
}

/* audit row */
div#AW_loadAuditPopup div#AUDIT_ROWS {
    height: 275px;
    width: 765px;
}

.saveAuditRow {
    margin-bottom: 5px;
    height: 25px;
    font-size: 13px;
    line-height: 26px;
}

    .saveAuditRow span {
        float: left;
    }

        .saveAuditRow span.nameAuditType {
            font-size: 11px;
            line-height: 25px;
            width: 175px;
        }

    .saveAuditRow .imageAuditType {
        float: left;
        margin: 3px 5px 0 0;
    }

    .saveAuditRow span input.nameAuditTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
    }

    .saveAuditRow span .succesImg {
        position: relative;
        top: 5px;
    }

    .saveAuditRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    .saveAuditRow span.auditSavingActions > img {
        height: 20px;
        padding: 0;
        margin: -1px 3px 0 0;
    }

    .saveAuditRow span.auditSavingActions .deleteSimRowBtn {
        height: 18px;
    }

    .saveAuditRow .iconAuditType {
        margin: 3px 0 0 3px;
        width: 17px;
    }

    .saveAuditRow .auditNameLink {
        text-decoration: none;
    }

        .saveAuditRow .auditNameLink:hover {
            color: #1448ba;
            font-weight: bold;
        }

/***********************
--- NEW AUDIT WIZARD ---
************************/
/* LANDINGS PAGE */
div.contentBox {
    width: inherit;
    display: block;
}

    div.contentBox input {
        line-height: 25px;
        font-size: 12px;
    }

    div.contentBox button {
        padding: 6px 7px 7px 7px;
        font-size: 12px;
    }
/* new audit */
div#newAuditBox {
    width: 380px;
    height: 125px;
    margin: 0 10px 15px 0;
    display: inline-block;
    float: left;
}

    div#newAuditBox div#newAuditNameBox {
        margin: 55px 0 0 90px;
    }

        div#newAuditBox div#newAuditNameBox input {
            width: 200px;
            height: 25px;
        }
/* all audits */
div#allAuditsBox {
    width: 545px;
    height: 520px;
    margin: 0 0 0 0;
    display: inline-block;
    float: right;
}

    div#allAuditsBox div#displayedUsers {
        height: 518px;
        width: 543px;
    }

    div#allAuditsBox #pageNavigation {
        display: inline;
        float: right;
        margin-right: 20px;
    }

    div#allAuditsBox #liveSearchAuditBox {
        margin: 1px 0 0 14px;
    }

    div#allAuditsBox dl#liveSearchAuditBox #liveSearchAuditTxt {
        padding: 0;
        text-indent: 10px;
        line-height: 19px;
        margin-top: 3px;
        height: 20px;
    }

    div#allAuditsBox div#pageNavigation {
        margin-top: 0;
    }

    div#allAuditsBox .icon-magnifying-glass {
        font-size: 22px;
        margin-top: 3px;
        float: left;
        color: White;
        margin-top: 3px;
    }
/* last opened */
div#lastOpenenedAudits {
    width: 378px;
    height: 378px;
    border: 1px solid darkGray;
    margin: 0 15px 15px 0;
    display: inline-block;
    float: left;
}

    div#lastOpenenedAudits div#lastOpenedAudit {
        background-color: darkGray;
        width: inherit;
        height: 125px;
    }

    div#lastOpenenedAudits table#lastOpenedAuditsTbl {
        float: left;
        font-size: 12px;
        width: 285px;
        margin-top: 5px;
        line-height: 13px;
        color: #2a2b2b;
    }

        div#lastOpenenedAudits table#lastOpenedAuditsTbl tr {
            background-color: transparent;
        }

        div#lastOpenenedAudits table#lastOpenedAuditsTbl td:first-child {
            font-weight: bold;
            width: 100px;
        }

    div#lastOpenenedAudits .AW_LoggerGridDisplayTable {
        border-spacing: 34px 18px;
    }

    div#lastOpenenedAudits div#bottomInfoRow #openAudit {
        font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", "Arial", "Helvetica", "Verdana", sans-serif;
    }

    div#lastOpenenedAudits div#bottomInfoRow #openIcon {
        color: green;
    }

    div#lastOpenenedAudits table#lastOpenedAuditsTbl tbody tr td:nth-child(1) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    div#lastOpenenedAudits table#lastOpenedAuditsTbl tbody tr td:nth-child(2) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.loggerIconAdd {
    font-size: 40px;
    width: 32px;
    height: 32px;
    margin: -18px 0 0 -4px;
    float: left;
    color: darkGray;
    cursor: not-allowed;
    position: relative;
}

.loggerIconAdd2 {
    font-size: 39px;
    width: 32px;
    height: 32px;
    margin: -18px 0 0 -4px;
    float: left;
    cursor: pointer;
}

.loggerIcon {
    margin: 5px 0 0 4px;
}

.loggerIconToAdd {
    color: darkGray;
}

/*********/
/* STEPS */
/*********/
.auditStep {
    width: inherit;
    display: block;
    position: absolute;
}

/* STEP 1 */
div#auditStep1 input {
    line-height: 18px;
}

div#auditStep1 table {
    margin: 20px 15px;
    font-size: 14px;
}

    div#auditStep1 table tr {
        line-height: 35px;
    }

div#auditLocationBox {
    width: 480px;
    height: 450px;
    margin: 0 10px 15px 0;
    display: inline-block;
    float: left;
}

div#auditContactBox {
    width: 450px;
    height: 400px;
    margin: 0 10px 15px 0;
    display: inline-block;
    float: left;
}

div#auditStep1 table, div#auditStep1 table tr, div#auditStep1 table tr td {
    background-color: transparent;
}

div#auditStep1 .headerContentBox {
    height: 90px;
    width: inherit;
    margin: 10px;
}

div#auditStep1 table tr td:first-child {
    font-weight: bold;
    width: 155px;
    color: rgb(92, 92, 92);
}

div#auditStep1 table#auditLocationTbl {
    width: 440px;
}

div#auditStep1 table#auditContactTbl {
    width: 420px;
}

/* STEP 2 */
div#auditStep2 {
    margin-top: 15px;
}

    div#auditStep2 div#AW_AuditStep2DivLeft {
        margin: 0 10px 15px 0;
    }

    div#auditStep2 div#AW_AuditStep2DivRight {
        width: 640px;
        margin: 0 10px 15px 0;
    }

    div#auditStep2 .AuditStep2DivCss {
        height: 425px;
    }

    div#auditStep2 .icon:not(.skinColor) {
        color: rgb(92,92,92);
    }

input#AW_editBaseStationSN.mandatoryTxt {
    text-align: center;
}

div#auditStep2 div.AW_compDeletionContainer {
    position: relative;
    opacity: 0;
    top: -32px;
    margin-left: 35px;
    width: 32px;
    height: 32px;
    opacity: 0;
}

    div#auditStep2 div.AW_compDeletionContainer img {
        margin: 0;
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
    }

/*div#auditStep2 span.icon:hover > div {*/
div#auditStep2 span.icon:hover .AW_compDeletionContainer {
    border-color: rgba(0, 0, 0, 1);
    opacity: 1;
}

/*div#auditStep2 span.icon > div, div#auditStep2 .AW_compDeletionContainer {*/
div#auditStep2 span.icon .AW_compDeletionContainer, div#auditStep2 .AW_compDeletionContainer {
    opacity: 0;
}

/* basestation feedback - popup so no auditStep can be linked in css tag */
ul#baseStationInfoBox {
    margin: 20px 5px 0 0;
    padding: 0;
    color: Gray;
}

    ul#baseStationInfoBox li:hover {
        cursor: help;
    }

    ul#baseStationInfoBox li {
        list-style-type: none;
        width: 285px;
        float: left;
        font-size: 12px;
        line-height: 14px;
    }

        ul#baseStationInfoBox li .icon {
            font-size: 20px;
            float: left;
            margin: 0 15px 14px 0;
        }

        ul#baseStationInfoBox li span.statusIcon {
            float: right;
            position: relative;
            font-size: 18px;
            right: 0;
        }

            ul#baseStationInfoBox li span.statusIcon:before {
                position: absolute;
                right: 0;
            }

div#liveStatusBS {
    width: 70px;
    display: inline-block;
    float: left;
}

div#selectedBS {
    width: 290px;
    display: inline-block;
    margin-left: 15px;
}

/* logger popup */
td#loggerInformation {
    text-align: left !important;
    padding: 10px 0 0 0;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
    border: 1px solid #ccc;
}

    td#loggerInformation span#loggerIconInfo {
        width: 36px;
        display: inline-block;
        height: 60px;
        float: left;
    }

    td#loggerInformation span#softwareStatusLogger {
        margin-left: 25px;
        width: 338px;
        height: 28px;
        display: inline-block;
    }

    td#loggerInformation span#battStatusLogger {
        margin-left: 25px;
        width: 338px;
        display: inline-block;
    }

    td#loggerInformation .infoLoggerTxt {
        font-size: 12px;
        color: #808080;
    }

    td#loggerInformation .icon-refresh-2, td#loggerInformation .icon-battery-half {
        color: #808080;
    }

    td#loggerInformation .icon-battery-half {
        position: relative;
        top: 3px;
    }

/* STEP 3 */
div#auditStep3 div.topContentBox {
    width: 100%;
    height: 120px;
    float: left;
}

    div#auditStep3 div.topContentBox .topBox {
        width: 240px;
        height: inherit;
        float: left;
        font-size: 14px;
    }

div#auditStep3 div#editFactoryShutDown {
    float: left;
}

div#auditStep3 div#editCO2Factor {
    margin-left: 15px;
}

div#auditStep3 div.topContentBox div#AW_SystemVolume {
    width: 430px;
    margin-left: 15px;
}

div#auditStep3 .topBox span.header, div#auditStep3 div#bottomContentBox span.header {
    color: white;
    font-size: 14px;
    background-color: darkgray;
    width: inherit;
    max-width: 940px;
    height: 32px;
    float: left;
    line-height: 32px;
    margin-bottom: 20px;
    text-indent: 8px;
}

div#auditStep3 .topBox button {
    padding: 0 7px;
    font-size: 12px;
}

div#auditStep3 div#bottomContentBox {
    width: 100%;
    height: 340px;
    float: left;
    margin-top: 25px;
}

div#auditStep3 #saveEnergyTableBtn .icon-disk {
    color: darkgray;
    font-size: 25px;
    margin: 2px 0 0 0;
}

    div#auditStep3 #saveEnergyTableBtn .icon-disk:hover {
        color: #136;
    }

div#auditStep3 div#AW_Schedule {
    font-size: 14px;
}

div#auditStep3 #AW_ScheduleContainer {
    height: 235px;
    margin-top: 75px;
}

div#auditStep3 #AW_Schedule table.schedule tr {
    height: 25px;
}

div#auditStep3 #AW_ScheduleInputPositionWrapper {
    right: -288px;
    top: 0;
    left: auto;
    z-index: 5;
    padding: 75px 50px;
}

div#auditStep3 #AW_ScheduleInputConfirmBtn {
    cursor: pointer;
    padding: 3px 10px;
    margin: 10px 0 0 12px;
}

div#auditStep3 #AW_ScheduleContainer2 {
    left: 656px;
    top: -18px;
    font-size: 12px;
    width: 285px;
}

div#auditStep3 #AW_KeyRate tr {
    margin: 5px;
}

div#auditStep3 #AW_KeyRate .KeyRateValue {
    padding-left: 15px;
}

div#auditStep3 #AW_ScheduleInputUnit {
    color: dimgray;
    font-size: 14px;
}

div#auditStep3 table#ETCalendar .ticks .ticks_IE8, div#auditStep3 table#ETCalendar th {
    color: dimgray;
    font-weight: normal;
    font-size: 12px;
}

div#auditStep3 select#AW_EnergyTableCurrencySelector {
    width: 54px;
    padding: 4px 2px;
    float: left;
    font-size: 12px;
    height: 27px;
}

/* STEP 4 */
div#auditStep4 ul li {
    list-style-type: none;
}

div#auditStep4 div.topContentBox {
    width: 940px;
    height: 115px;
    position: relative;
}

div#auditStep4 div.infoCurrentAudit {
    width: 530px;
    height: 110px;
    display: inline-block;
    margin-right: 10px;
}

div#auditStep4 input {
    line-height: 18px;
}

div#auditStep4 table {
    font-size: 14px;
    background-color: transparent;
}

    div#auditStep4 table tr {
        line-height: 15px;
    }

    /* select audit info - left top corner */
    div#auditStep4 table.infoCurrentAuditTbl {
        float: left;
        font-size: 12px;
        width: 435px;
        margin-top: 5px;
        line-height: 13px;
        color: #eee;
    }

        div#auditStep4 table.infoCurrentAuditTbl tr {
            background-color: transparent;
        }

        div#auditStep4 table.infoCurrentAuditTbl td:first-child {
            font-weight: bold;
            width: 100px;
        }

/* current fase box - right top corner */
div#auditStep4 div#infoCurrentFase {
    background-color: Gray;
    width: 400px;
    height: 110px;
    display: inline-block;
    position: absolute;
}

div#auditStep4 .infoCurrentAudit.hideInlineBox {
    display: none;
}

div#auditStep4 div#importAuditProgress {
    height: 110px;
    width: 615px;
    display: inline;
}

    div#auditStep4 div#importAuditProgress #infoImporting {
        width: 500px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 90px;
        padding: 0;
        margin: 0;
        color: White;
        font-size: 11px;
    }

div#auditStep4 table#infoImporting tr {
    background-color: transparent;
}

div#auditStep4 .headerTxt {
    font-weight: bold;
    width: 130px;
}

div#auditStep4 tr td.infoTxt {
    color: #eee;
}

/* loggergrid */
div#auditStep4 div#loggerGridChecks {
    width: 940px;
    margin-top: 5px;
    height: 330px;
    background-color: darkgray;
}

div#auditStep4 div#overlayLoggerGrid {
    width: 940px;
    margin-top: 5px;
    height: 410px;
    position: absolute;
    top: 118px;
    z-index: 10;
}

div#auditStep4 div#faseChecks {
    height: 310px;
    width: 70px;
    margin-right: 5px;
    float: left;
    margin: 10px 0 0 0;
}

    div#auditStep4 div#faseChecks ul {
        padding: 0;
        margin: 0;
        position: absolute;
        width: 70px;
    }

        div#auditStep4 div#faseChecks ul li {
            text-decoration: none;
            list-style-type: none;
            background-color: #C9C9C9;
            padding: 0 0;
            margin-bottom: 5px;
            height: 58px;
            margin-left: 10px;
            font-size: 25px;
        }

            div#auditStep4 div#faseChecks ul li span {
                position: relative;
                color: gray;
            }
            /* Cloud to Base */
            div#auditStep4 div#faseChecks ul li#CTB span:nth-child(1) {
                top: 3px;
                left: 3px;
                z-index: 5;
            }

            div#auditStep4 div#faseChecks ul li#CTB span:nth-child(2) {
                top: 25px;
                left: -24px;
                z-index: 4;
            }

            div#auditStep4 div#faseChecks ul li#CTB span:nth-child(3) {
                top: -5px;
                left: 38px;
                z-index: 3;
            }

div#auditStep4 button#downloadConfigBtn, div#auditStep4 button#uploadPackageBtn {
    position: absolute;
    top: 7px;
    right: 7px;
    background-color: darkgray;
    font-size: 10px;
    text-transform: uppercase;
}
/* Base to Loggers */
div#auditStep4 div#faseChecks ul li#BTL span:nth-child(1) {
    top: 3px;
    left: 5px;
    z-index: 5;
}

div#auditStep4 div#faseChecks ul li#BTL span:nth-child(2) {
    top: 27px;
    left: -13px;
    z-index: 4;
}

div#auditStep4 div#faseChecks ul li#BTL span:nth-child(3) {
    top: -5px;
    left: 40px;
    z-index: 3;
}

div#auditStep4 div#faseChecks ul li#BTL span:nth-child(4) {
    top: -5px;
    left: 11px;
    z-index: 2;
    font-size: 20px;
}

div#auditStep4 div#faseChecks ul li#BTL span:nth-child(5) {
    top: -5px;
    left: 11px;
    z-index: 3;
    font-size: 15px;
}
/* Loggers to Base */
div#auditStep4 div#faseChecks ul li#LTB span:nth-child(1) {
    top: 3px;
    left: 10px;
    z-index: 3;
}

div#auditStep4 div#faseChecks ul li#LTB span:nth-child(2) {
    top: 3px;
    left: -18px;
    z-index: 4;
    font-size: 20px;
}

div#auditStep4 div#faseChecks ul li#LTB span:nth-child(3) {
    top: 3px;
    left: -19px;
    z-index: 3;
    font-size: 15px;
}

div#auditStep4 div#faseChecks ul li#LTB span:nth-child(4) {
    top: -4px;
    left: 9px;
    z-index: 2;
}

div#auditStep4 div#faseChecks ul li#LTB span:nth-child(5) {
    top: -5px;
    left: 5px;
    z-index: 2;
}
/* Base to Cloud */
div#auditStep4 div#faseChecks ul li#BTC span:nth-child(1) {
    top: 3px;
    left: 5px;
    z-index: 5;
}

div#auditStep4 div#faseChecks ul li#BTC span:nth-child(2) {
    top: 28px;
    left: -13px;
    z-index: 4;
}

div#auditStep4 div#faseChecks ul li#BTC span:nth-child(3) {
    top: -5px;
    left: 31px;
    z-index: 3;
}
/* (Re-)Import */
div#auditStep4 div#faseChecks ul li#IMP span:nth-child(1) {
    top: 3px;
    left: 5px;
    z-index: 5;
}

div#auditStep4 div#faseChecks ul li#IMP span:nth-child(2) {
    top: 25px;
    left: -23px;
    z-index: 4;
}

div#auditStep4 div#faseChecks ul li#IMP span:nth-child(3) {
    top: -5px;
    left: 32px;
    z-index: 3;
    font-size: 23px;
}

.good {
    color: Green;
}

div#auditStep4 div#faseChecks ul li.good span {
    color: yellowgreen;
}

div#auditStep4 div#faseChecks ul li.half span, .half {
    color: Orange;
}

div#auditStep4 div#faseChecks ul li.bad span, .bad {
    color: #F00;
}

div#auditStep4 div#faseChecks ul li.activeStep {
    background-color: #eee;
}

/* LOGGER GRID VIEW */
div#auditStep4 div#loggerGridOverview {
    height: 310px;
    width: 450px;
    background-color: #eee;
    float: left;
    margin: 10px 10px 0 10px;
}

div#auditStep4 .icon-cross-3.loggerIconAdd2:hover {
    cursor: not-allowed;
}

div#auditStep4 .loggerIconAdd2 {
    font-size: 32px;
    width: 36px;
    height: 36px;
}
/* width and height +4px because of 4px border when select logger*/
div#auditStep4 .selectedLogger, div#auditStep4 .errorLogger, div#auditStep4 .warningLogger {
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    border: 4px solid gray;
    background-color: gray;
    margin-left: -4px;
    margin-top: -4px;
}

div#auditStep4 .errorLogger {
    border: 4px solid red;
    background-color: red;
}

div#auditStep4 .warningLogger {
    border: 4px solid orange;
    background-color: orange;
}

div#auditStep4 .selectedLogger.warningLogger {
    border: 4px solid gray;
    background-color: gray;
}

div#auditStep4 .selectedLogger.errorLogger {
    border: 4px solid gray;
    background-color: gray;
}

/* OPTIONS ON AUDIT */
div#auditStep4 div#auditOptionMenu {
    width: 42px;
    height: 250px;
    float: left;
    position: relative;
    margin: 10px 10px 0 0;
}

    div#auditStep4 div#auditOptionMenu > div {
        background-color: #C9C9C9;
        width: inherit;
        height: 42px;
        margin-bottom: 10px;
        cursor: pointer;
    }

        div#auditStep4 div#auditOptionMenu > div .icon {
            font-size: 40px;
            color: darkgray;
        }

    div#auditStep4 div#auditOptionMenu div.active {
        background-color: #eee;
    }

/* FASE/LOGGER FEEDBACK */
div#auditStep4 div#loggerFeedback {
    height: 250px;
    width: 338px;
    background-color: #eee;
    float: left;
    margin: 10px 0 0 0;
    position: relative;
}

    div#auditStep4 div#loggerFeedback h4 {
        margin: 15px 5px 0 20px;
        color: Gray;
    }

    div#auditStep4 div#loggerFeedback img#selectedLogger {
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%);
        position: absolute;
        top: 9px;
        right: 46px;
        opacity: 0.75;
    }

div#auditstep4 span.loggerAction {
    color: darkgray;
}

    div#auditstep4 span.loggerAction:hover {
        cursor: pointer;
    }

/* logger disable/delete options */
div#loggerOptionsWrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 50px;
}

    div#loggerOptionsWrapper:hover img {
        opacity: 1 !important;
    }

div#auditStep4 div#loggerFeedback span#disableLogger {
    position: absolute;
    top: 9px;
    right: 26px;
    font-size: 14px;
    cursor: pointer;
    color: Gray;
}

    div#auditStep4 div#loggerFeedback span#disableLogger:hover {
        color: black;
    }

    div#auditStep4 div#loggerFeedback span#disableLogger.icon-minus-2:hover, div#auditStep4 div#loggerFeedback span#disableLogger.icon-minus-2.active {
        color: orange;
    }

    div#auditStep4 div#loggerFeedback span#disableLogger.icon-plus-2:hover, div#auditStep4 div#loggerFeedback span#disableLogger.icon-plus-2.active {
        color: yellowgreen;
    }

div#auditStep4 div#loggerFeedback span#deleteLogger {
    position: absolute;
    top: 26px;
    right: 24px;
    font-size: 17px;
    cursor: pointer;
    color: Gray;
}

    div#auditStep4 div#loggerFeedback span#deleteLogger:hover, div#auditStep4 div#loggerFeedback span#deleteLogger.active {
        color: red;
    }

div#auditStep4 div#loggerFeedback div.actionLoggerwrapper {
    position: absolute;
    top: 50px;
    left: 20px;
    width: calc(100% - 20px);
    height: 68px;
    background-color: #eee;
    z-index: 5;
}

div#auditStep4 div#loggerFeedback .actionButtonLogger {
    font-size: 10px;
}

div#auditStep4 div#loggerFeedback ul {
    margin: 20px 5px 0 20px;
    padding: 0;
    color: Gray;
}

    div#auditStep4 div#loggerFeedback ul li:hover {
        cursor: help;
    }

    div#auditStep4 div#loggerFeedback ul li {
        list-style-type: none;
        width: 300px;
        float: left;
        font-size: 12px;
        line-height: 14px;
    }

        div#auditStep4 div#loggerFeedback ul li .icon {
            font-size: 20px;
            float: left;
            margin: 0 15px 14px 0;
        }

        div#auditStep4 div#loggerFeedback ul li span.statusIcon {
            float: initial;
            display: inline-block;
            font-size: 18px;
            margin-right: 0;
        }

            div#auditStep4 div#loggerFeedback ul li span.statusIcon.hidden {
                display: none !important;
            }

div#auditStep4 ul#loggerInfoBox {
    width: 300px;
    height: 64px;
    border-bottom: 1px solid #ccc;
}

span.statusIcon.green {
    color: Green;
}

span.statusIcon.red {
    color: Red;
}

span.statusIcon.orange {
    color: Orange;
}

/* BASESTATION CONNECTION - right bottom box */
div#auditStep4 .statusBox {
    width: 70px;
    height: 50px;
    display: inline-block;
    color: Gray;
    margin: 7px 0 0 5px;
    font-size: 14px;
}

div#auditStep4 div#baseStationFeedback {
    height: 50px;
    width: 190px;
    background-color: #eee;
    float: left;
    margin: 10px 5px 0 0;
    position: relative;
}

div#auditStep4 button#pinBSBtn {
    background-color: darkgray;
    margin: 9px 5px 0 0;
    float: right;
    cursor: pointer;
    font-size: 10px;
}

/* RE-IMPORT - right bottom box */
div#auditStep4 div#importBox {
    height: 50px;
    width: 190px;
    background-color: #eee;
    float: left;
    margin: 10px 0 0 5px;
    color: Gray;
}

div#auditStep4 div#importIcons {
    width: 42px;
    height: 50px;
    position: relative;
    display: inline-block;
    float: left;
}

    div#auditStep4 div#importIcons .icon {
        position: relative;
        font-size: 20px;
    }

div#auditStep4 div#importBox .statusBox {
    margin-left: 0;
    float: left;
}

div#auditStep4 button#reImportBtn {
    background-color: darkgray;
    margin: 9px 5px 0 0;
    float: right;
    cursor: pointer;
    font-size: 10px;
}

div#auditStep4 div#importIcons span:nth-child(1) {
    top: 2px;
    left: 2px;
}

div#auditStep4 div#importIcons span:nth-child(2) {
    top: 20px;
    left: -20px;
    font-size: 14px;
}

div#auditStep4 div#importIcons span:nth-child(3) {
    top: 3px;
    left: 17px;
}

/* PROGRESS BAR STEPS audit wizard general */
div#progressBar {
    width: inherit;
    height: 65px;
    background-color: transparent;
    position: relative;
    top: 460px;
}

div#AuditConfiguration ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    width: 979px;
    font-size: 16px;
    padding-top: 30px;
    white-space: nowrap;
    display: table;
}

    div#AuditConfiguration ol.progtrckr li {
        display: inline-block;
        text-align: center;
        height: 40px;
        padding-top: 10px;
        cursor: pointer;
        border-top-style: solid;
    }

        div#AuditConfiguration ol.progtrckr li span {
            font-size: 11px;
            font-weight: bolder;
        }

ol.progtrckr[data-progtrckr-steps="2"] li {
    width: 49%;
}

ol.progtrckr[data-progtrckr-steps="3"] li {
    width: 33%;
}

ol.progtrckr[data-progtrckr-steps="4"] li {
    width: 24%;
}

ol.progtrckr[data-progtrckr-steps="5"] li {
    width: 19%;
}

ol.progtrckr[data-progtrckr-steps="6"] li {
    width: 16%;
}

ol.progtrckr[data-progtrckr-steps="7"] li {
    width: 14%;
}

ol.progtrckr[data-progtrckr-steps="8"] li {
    width: 12%;
}

ol.progtrckr[data-progtrckr-steps="9"] li {
    width: 11%;
}

div#AuditConfiguration ol.progtrckr li.progtrckr-done {
    color: yellowgreen;
    border-top: 4px solid yellowgreen;
}

div#AuditConfiguration ol.progtrckr li.progtrckr-todo {
    color: silver;
    border-top: 4px solid silver;
}

div#AuditConfiguration ol.progtrckr li.progtrckr-busy {
    color: orange;
    border-top: 4px solid orange;
}

div#AuditConfiguration ol.progtrckr li.progtrckr-goto {
    color: gray;
    border-top: 4px solid gray;
}

div#AuditConfiguration ol.progtrckr li.progtrckr-fail {
    color: red;
    border-top: 4px solid red;
}

ol.progtrckr li:after {
    content: "\00a0\00a0";
}

ol.progtrckr li:before {
    position: relative;
    bottom: 23px;
    float: left;
    left: 50%;
    line-height: 1em;
}

ol.progtrckr li.active {
    border-top-style: dashed !important;
}

/* IE9, IE10 */
@media screen and (min-width:0\0) {
    ol.progtrckr:not(.noHover) li {
        position: relative;
    }

        ol.progtrckr:not(.noHover) li span {
            padding-top: 40px;
        }

        ol.progtrckr:not(.noHover) li:nth-child(1):hover:after {
            margin: -55px 0 0 33px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(2):hover:after {
            margin: -55px 0 0 115px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(3):hover:after {
            margin: -55px 0 0 115px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(4):hover:after {
            margin: -55px 0 0 60px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(5):hover:after {
            margin: -55px 0 0 60px;
            float: left;
            color: silver;
            content: "";
        }

    ol.progtrckr li.createStep_2:not(.noHover):nth-child(2):hover:after {
        margin: -55px 0 0 60px;
        float: left;
        color: silver;
        content: "";
    }
}

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ol.progtrckr:not(.noHover) li {
        position: relative;
    }

        ol.progtrckr:not(.noHover) li span {
            padding-top: 40px;
        }

        ol.progtrckr:not(.noHover) li:nth-child(1):hover:after {
            margin-top: -55px 0 0 33px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(2):hover:after {
            margin: -55px 0 0 115px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(3):hover:after {
            margin: -40px 0 0 115px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(4):hover:after {
            margin: -40px 0 0 60px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(5):hover:after {
            margin: -40px 0 0 60px;
            float: left;
            color: silver;
            content: "";
        }

    ol.progtrckr li.createStep_2:not(.noHover):nth-child(2):hover:after {
        margin: -55px 0 0 60px;
        float: left;
        color: silver;
        content: "";
    }
}

/* Firefox */
@-moz-document url-prefix() {
    ol.progtrckr:not(.noHover) li {
        position: relative;
    }

        ol.progtrckr:not(.noHover) li span {
            padding-top: 40px;
        }

        ol.progtrckr:not(.noHover) li:hover {
            top: 5px;
        }

        ol.progtrckr:not(.noHover) li:nth-child(1):hover:after {
            margin: -62px 0 0 50px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(2):hover:after {
            margin: -62px 0 0 135px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(3):hover:after {
            margin: -40px 0 0 115px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(4):hover:after {
            margin: -40px 0 0 60px;
            float: left;
            color: silver;
            content: "";
        }

        ol.progtrckr:not(.noHover) li:nth-child(5):hover:after {
            margin: -40px 0 0 60px;
            float: left;
            color: silver;
            content: "";
        }

    ol.progtrckr li.createStep_2:not(.noHover):nth-child(2):hover:after {
        margin: -55px 0 0 60px;
        float: left;
        color: silver;
        content: "";
    }
}

ol.progtrckr li.progtrckr-done:before {
    content: "\2713";
    color: white;
    background-color: yellowgreen;
    height: 20px;
    width: 20px;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-todo:before {
    content: "\2713";
    color: white;
    background-color: white;
    bottom: 23px;
    height: 16px;
    width: 16px;
    line-height: 1.2em;
    border: 2px solid silver;
    border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-busy:before {
    content: "\270E";
    color: white;
    background-color: orange;
    height: 20px;
    width: 20px;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-goto:before {
    content: "\2713";
    color: white;
    background-color: gray;
    height: 20px;
    width: 20px;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}

ol.progtrckr li.progtrckr-fail:before {
    content: "\2717";
    color: white;
    background-color: red;
    height: 20px;
    width: 20px;
    line-height: 1.2em;
    border: none;
    border-radius: 1.2em;
}

/* PROGRESS BAR IMPORT audit wizard */
/* http://css-tricks.com/css3-progress-bars/ */
.meter {
    width: 500px;
    height: 11px;
    position: absolute;
    background-color: #eee;
    top: 75px;
    left: 90px;
}

    .meter > span {
        display: block;
        height: 100%;
        background-color: rgb(43,194,83);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
        background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
        -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
        -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
        box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
        -webkit-transition: width 0.4s;
        transition: width 0.4s;
    }

        .meter > span.error {
            background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255, 136, 0)), color-stop(1, rgb(255, 174, 0)) );
            background-image: -moz-linear-gradient( center bottom, rgb(255, 136, 0) 37%, rgb(255, 174, 0) 69% );
        }

    .meter span {
        -webkit-animation: mymove 2.5s infinite; /* Chrome, Safari, Opera */
        animation: mymove 2.5s infinite;
    }

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

@keyframes mymove {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* create pdf - menu tab */
div#AuditPdf div.topContentBox {
    width: 940px;
    height: 115px;
    position: absolute;
    top: 67px;
    left: 10px;
}

div#AuditPdf div.infoCurrentAudit {
    width: 530px;
    height: 110px;
    display: inline-block;
    margin-right: 10px;
}

div#AuditPdf input {
    line-height: 18px;
}

div#AuditPdf table {
    font-size: 14px;
}

    div#AuditPdf table tr {
        line-height: 15px;
    }

div#AuditPdf table {
    background-color: transparent;
}

div#AuditPdf button {
    background-color: darkgray;
    cursor: pointer;
    font-size: 10px;
}

/* select audit info - left top corner */
div#AuditPdf table.infoCurrentAuditTbl {
    float: left;
    font-size: 12px;
    width: 435px;
    margin-top: 5px;
    line-height: 13px;
    color: #eee;
}

    div#AuditPdf table.infoCurrentAuditTbl tr {
        background-color: transparent;
    }

    div#AuditPdf table.infoCurrentAuditTbl td:first-child {
        font-weight: bold;
        width: 100px;
    }

div#AuditPdf div#createPdfBox {
    width: 530px;
    height: 330px;
    background-color: darkgray;
    position: relative;
    margin-top: 55px;
}

    div#AuditPdf div#createPdfBox div#titleTxtBox {
        position: absolute;
        left: 0;
        top: 0;
        color: White;
        font-weight: bold;
    }

    div#AuditPdf div#createPdfBox .icon-file-pdf {
        position: relative;
        left: 0;
        top: 17px;
        font-size: 50px;
        margin: 0 15px 0 18px;
    }

div#AuditPdf div#createPdfBtnBox {
    height: 225px;
    width: 490px;
    background-color: #eee;
    position: relative;
    left: 20px;
    top: 85px;
}

div#AuditPdf div#infoBrowserPopUp {
    background-color: Gray;
    width: 400px;
    height: 110px;
    display: inline-block;
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: White;
    text-decoration: none;
}

div#AuditPdf div.pdfHelperTxt {
    margin-top: 38px;
}

div#auditStep4 table#shareAuditTable {
    height: 75px;
    margin-left: 0;
    width: 360px;
    margin-top: 0;
}

    div#auditStep4 table#shareAuditTable td:first-child {
        width: 100px;
    }

    div#auditStep4 table#shareAuditTable td {
        font-weight: normal;
        font-size: 12px;
    }

div#auditStep4 button#gotoUserAdmin_Audit {
    margin-top: 22px !important;
    cursor: pointer;
}

div#pdfHelperTxt a:hover {
    font-style: italic;
}
/* button design in audit wiz step 4 (mainly)*/
input#fakeCreatePdfBtn, button#createPdfBtn, div#auditStep4 button#gotoUserAdmin_Audit, #doDeleteAuditBtn, #cancelDeleteAuditBtn, #manageAuditdataBtn, .actionButtonLogger {
    background-color: darkgray;
    margin: 9px 5px 0 0;
    cursor: pointer;
    font-size: 10px;
}

div#pdfHelperTxt a {
    text-decoration: none;
    color: darkslategray;
}

/* END NEW AUDIT WIZARD */

/* new compressor popup */
div#addCompParent.ui-dialog-content {
    border: none;
    font-size: 14px;
}

    div#addCompParent.ui-dialog-content div#contentTile {
        width: 565px;
    }

        div#addCompParent.ui-dialog-content div#contentTile h3 {
            margin-top: 10px;
        }

    div#addCompParent.ui-dialog-content div#menuTiles {
        height: 435px;
    }

    div#addCompParent.ui-dialog-content div#currentCompDataBox,
    div#addCompParent.ui-dialog-content div#currentMotorDataBox,
    div#addCompParent.ui-dialog-content div#currentPerformanceDataBox,
    div#addCompParent.ui-dialog-content div#currentCommunityBox,
    div#addCompParent.ui-dialog-content div#currentActionBox {
        margin-left: 50px;
    }

    div#addCompParent.ui-dialog-content div#menuTiles #showActionBox {
        top: 360px;
    }

/*
 * LEAK WIZARD
 */

#MiddlePanel.fullscreen div.leakWizard div#filterActions {
    margin: 15px 0 !important;
    width: 244px;
}

#MiddlePanel.fullscreen div#filterActions.chartering.leakWizard {
    width: 90px !important;
}


/*
 * CHART WIZARD
 */
.chartWizardTable {
    border-collapse: collapse;
    /*white-space: nowrap;*/
}

    .chartWizardTable td {
        border: 1px solid black;
        padding: 2px 5px;
    }

/* Accordions - new CHART wizard style */
div#ContentContainer #accordionCharts .ui-accordion-content {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    width: 938px;
    min-height: 50px;
}

div#accordionCharts .accordion > h3 > a, div#addChartBoxAcc > h3 > a, div#accordionGraphs .graphBox > h3 > a, div#addGraphBox > h3 > a, div#masterArea > h3 > a {
    margin-left: 15px;
}

.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-draggable {
    z-index: 19;
}

.ui-widget-overlay.ui-front {
    z-index: 18;
}

.chartOptionSteps {
    width: 925px;
    margin: -10px 0 5px 5px;
    float: left;
}

    .chartOptionSteps > div {
        float: left;
        border: 1px solid #ccc;
        margin-right: 6px;
    }

    .chartOptionSteps .optionStep1 {
        min-width: 50px;
        padding: 5px 5px 5px 0;
    }

        .chartOptionSteps .optionStep1 img {
            margin-left: 5px;
            float: left;
        }

    .chartOptionSteps .optionStep2 {
        width: 145px;
        min-height: 32px;
        padding: 5px 5px 1px 5px;
    }

        .chartOptionSteps .optionStep2 .optionStep2Loggers img {
            margin-left: 5px;
            float: left;
        }

        .chartOptionSteps .optionStep2 .optionStep2System img {
            float: right;
        }

    .chartOptionSteps .optionStep3 {
        min-width: 259px;
        padding: 5px 5px 5px 0;
    }

        .chartOptionSteps .optionStep3 .optionStep3DataTypes img {
            margin-left: 5px;
            float: left;
        }

    .chartOptionSteps .optionStep4 {
        padding: 5px 5px 5px 0;
        float: right;
        margin-right: 0;
    }

        .chartOptionSteps .optionStep4 img {
            margin-left: 5px;
            float: left;
        }

.chartArea {
    font-size: 12px;
    float: left;
    line-height: 20px;
    margin-left: 6px;
}

.chartNumber {
    text-align: right;
}

.chartNumber_Cntr {
    text-align: center;
}

/*IE9 fix for tooltip via 'line-height'*/

/* save popup charts */
#saveChartRow_template {
    display: none;
}

.saveChartRow {
    margin-bottom: 5px;
    height: 25px;
}

    .saveChartRow span {
        float: left;
    }

        .saveChartRow span.nameChartType {
            font-size: 11px;
            line-height: 25px;
            width: 175px;
        }

    .saveChartRow .imageChartType {
        float: left;
        margin: 3px 5px 0 0;
    }

    .saveChartRow span input.nameChartTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
        overflow: hidden;
    }

    .saveChartRow span .succesImg {
        position: relative;
        top: 5px;
    }

    .saveChartRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    .saveChartRow span.chartSavingActions {
        float: right;
        margin-right: 25px;
    }

        .saveChartRow span.chartSavingActions > img {
            height: 25px;
            padding: 0;
            margin: -1px 3px 0 0;
        }

        .saveChartRow span.chartSavingActions .deleteChartRowBtn {
            height: 22px;
        }

div#saveAllCharts {
    margin-top: 20px;
}

tr.coloRow {
    background-color: #EEE;
}

#AW_Schedule table.schedule {
    margin: 20px;
    border-spacing: 1px;
}

    #AW_Schedule table.schedule tr {
        height: 35px;
    }

        #AW_Schedule table.schedule tr.ticks {
            height: 70px;
        }

#AW_Schedule tr.ticks th {
    vertical-align: bottom;
}

    #AW_Schedule tr.ticks th span {
        display: block;
        -webkit-transform-origin: 20% 100%; /* Safari/Chrome */
        -webkit-transform: rotate(-60deg);
        -moz-transform-origin: 20% 100%; /* Firefox */
        -moz-transform: rotate(-60deg);
        -ms-transform-origin: 20% 100%; /* IE 9+ */
        -ms-transform: rotate(-60deg);
        -o-transform-origin: 20% 100%; /* Opera */
        -o-transform: rotate(-60deg);
        transform-origin: 20% 100%; /* Future */
        transform: rotate(-60deg);
        position: relative;
        left: 12px;
        width: 20px;
        color: Black;
    }

#ETCalendar tr th {
    color: Black;
}

#AW_Schedule td.scheduleUnit {
    background-color: #dddddd;
    border-radius: 0;
}

    #AW_Schedule td.scheduleUnit.selected {
        opacity: 0.35;
    }

#AW_KeyRate td {
    width: 35px;
    height: 10px;
    border-radius: 5px;
}

    #AW_Schedule td.scheduleUnit.c1, #AW_KeyRate td.scheduleUnit.c1 {
        background-color: #ADA59D; /*Pantone 402C*/
    }

    #AW_Schedule td.scheduleUnit.c2, #AW_KeyRate td.scheduleUnit.c2 {
        background-color: #645A50; /*Pantone 405C*/
    }

    #AW_Schedule td.scheduleUnit.c3, #AW_KeyRate td.scheduleUnit.c3 {
        background-color: #000000; /*Black C*/
    }

    #AW_Schedule td.scheduleUnit.c4, #AW_KeyRate td.scheduleUnit.c4 {
        background-color: #9FD98B; /*Pantone 359C*/
    }

    #AW_Schedule td.scheduleUnit.c5, #AW_KeyRate td.scheduleUnit.c5 {
        background-color: #55BE47; /*Pantone 360C*/
    }

    #AW_Schedule td.scheduleUnit.c6, #AW_KeyRate td.scheduleUnit.c6 {
        background-color: #4FA600; /*Pantone 369C*/
    }

    #AW_Schedule td.scheduleUnit.c7, #AW_KeyRate td.scheduleUnit.c7 {
        background-color: #E8B7E5; /*Pantone 243C*/
    }

    #AW_Schedule td.scheduleUnit.c8, #AW_KeyRate td.scheduleUnit.c8 {
        background-color: #DF81D6; /*Pantone 245C*/
    }

    #AW_Schedule td.scheduleUnit.c9, #AW_KeyRate td.scheduleUnit.c9 {
        background-color: #C70BAC; /*Pantone 246C*/
    }

#AW_KeyRate table {
    margin: 20px;
    border-spacing: 0;
    width: 295px;
}

#AW_Schedule td.scheduleUnit {
    padding: 6px;
}

#AW_KeyRate tr {
    height: 20px;
    padding: 0;
    margin: 8px;
    display: block;
}

#AW_KeyRate .KeyRateValue {
    width: 150px;
    padding: 0 0 0 4px;
}

#AW_KeyRate .KeyRatePercent {
    width: 100px;
    padding: 0 0 0 4px;
}

body#AccountApprovalPageBody {
    min-width: 0;
}

    body#AccountApprovalPageBody div#MiddlePanel {
        width: 960px;
        margin: 4px auto;
    }

        body#AccountApprovalPageBody div#MiddlePanel div {
            background-color: #EEEEEE;
            border-radius: 5px;
            margin: 4px auto;
            padding: 5px 10px;
        }

    body#AccountApprovalPageBody div#AccountApprovalTitle {
        height: 120px;
        width: 960px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: #009999;
        font-size: xx-large;
        font-weight: bold;
    }

#SkinList, #CommunityList {
    width: 100%;
}

    #SkinList label, #CommunityList label {
        margin-left: 2ex;
    }

/* index page */
#SplashImg {
    display: block;
    margin: 40px auto;
}

#buttonContainer {
    position: absolute;
    bottom: 30px;
    width: 100%;
    min-width: 1024px;
    text-align: center;
}

    #buttonContainer a {
        margin: 0 20px;
    }

#PopUpHeaderImgURL {
    display: none;
}

.homepageDialog {
    border: 3px solid #D0D0D0;
}

    .homepageDialog div.ui-dialog-titlebar {
        border: none;
        text-align: center;
    }

        .homepageDialog div.ui-dialog-titlebar .ui-dialog-title {
            float: none;
        }

            .homepageDialog div.ui-dialog-titlebar .ui-dialog-title img {
                margin: 10px 0;
            }

        .homepageDialog div.ui-dialog-titlebar .ui-dialog-titlebar-close {
            margin-top: 0;
            top: 0.3em;
        }

#FailureTextCell {
    text-align: center;
}

#FailureText, #ErrorMessage {
    color: #FF0000;
    background-color: #D3D3D3;
}

#ErrorMessage {
    margin-left: 18px;
    max-width: 211px;
    overflow: hidden;
    display: inline-block;
}

#LoginFormButtonCell a {
    margin-right: 16px;
}

#LoginImageButton, #ContactSendButton, #RecoverImageButton, #CreateUserButton {
    float: right;
    /*position: relative;
    left: -10px;*/
}

#NewUserWizardTable img, #ContactFormTable img, #RecoverPasswordTable img {
    width: 32px;
    height: 32px;
}
/*#AckCopyRightsCell, #AckCopyRightsContainer
{
    text-align: center;
}*/
#CopyRightText {
    font-size: 75%;
    text-align: justify;
    width: 550px;
}

#LoginTable, #ContactFormTable, #NewUserWizardTable, #NewUserWizardTableAck, #NewUserWizardTableText {
    margin: 0 auto 1.5em auto;
}
    /*#NewUserWizardTable, #NewUserWizardTableAck, #NewUserWizardTableText
{
    margin: 0 1.5em 0.65em 1.5em;
}*/
    #LoginTable input[type='text'], #LoginTable input[type='password'], #LoginTable textarea {
        width: 250px;
        font-size: 13px;
    }
    /*#RecoverPasswordTable input[type='text'], #RecoverPasswordTable input[type='password'], #RecoverPasswordTable textarea
{
    width:350px;
    font-size: 13px;
}*/
    #ContactFormTable input[type='text'], #ContactFormTable input[type='password'], #ContactFormTable textarea {
        width: 350px;
        font-size: 13px;
    }

    #NewUserWizardTable input[type='text'], #NewUserWizardTable input[type='password'], #NewUserWizardTable textarea {
        width: 250px;
        font-size: 13px;
    }

    #NewUserWizardTable select {
        width: 184px;
        font-size: 12px;
        height: 22px;
        /*padding: 2px;*/
    }

    #ContactFormTable .mailFieldValidator {
        width: 12px;
    }

    #ContactFormTable .tdimgtop {
        vertical-align: top;
    }

    #LoginTable td, #ContactFormTable td, #RecoverPasswordTable td {
        border-spacing: 0;
        padding: 6px;
    }

    #NewUserWizardTable td {
        border-spacing: 0;
        padding: 2px 2px 2px 6px;
    }

        /*#ContactFormTable td:first-child + td, #NewUserWizardTable td:first-child + td
{
    width:32px;
}*/
        /*
#ContactFormTable td:first-child + td
{
    width:350px;
}
*/
        /*
#NewUserWizardTable td:first-child + td
{
    width:250px;
}
*/
        #NewUserWizardTable td:first-child + td + td {
            width: 32px;
        }

#submitdiv {
    margin: 0 1.8em 0.65em;
}
/*
#ContactFormTable td:first-child#ContactFormButtonArea
{
    text-align: left;
}
*/
/*#ContactFormButtonArea
{
    position: relative;
    left: -10px;
    float: right;
}
*/

#header_right {
    float: right;
}

#BodyTable {
    height: 600px;
    /*border-spacing: 4px 2px;*/
    margin: 0 auto;
    /*background-color:#eee ;*/
}

    #BodyTable tr {
        /*background-color: #EEEEEE;*/
        max-width: 230px;
    }

    #BodyTable td#NavigationPanel {
        vertical-align: top;
        text-align: center;
        padding-top: 10px;
        padding-left: 0;
        padding-right: 0;
        background-color: rgba(169,169,169, 0.55) !important;
    }
    /*
#BodyTable td#RightPanel
{
    text-align: center;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}*/

    #BodyTable td#NavigationPanel {
        width: 305px; /*230px;*/
    }

#NavigationTree table {
    border-spacing: 0;
    width: 100%;
}

#BodyTable td#MiddlePanel {
    min-width: 960px;
    position: relative;
    padding: 0;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white;
    /*border-radius: 5px;*/
}

#MiddlePanelContainer_FireFoxFixer {
    position: relative;
    height: 623px; /*600px;*/
    /*border-radius: 5px;*/
}

#MiddlePanelContainer {
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*overflow-y: hidden;*/
}

#ToolBar {
    height: 120px;
    text-align: center;
    border-bottom: solid 2px #FFFFFF;
}

#ToolBarTitleText {
    height: 120px;
    width: 960px;
    display: table-cell;
    vertical-align: middle;
    color: #009999;
    font-size: xx-large;
    font-weight: bold;
}

#ToolBar table {
    border-spacing: 0;
}

#ToolBar td {
    padding: 0;
    height: 40px;
}

    #ToolBar td#feedbackCell, #ToolBar td.feedbackCell {
        background-color: #DDDDDD;
        text-align: left;
        text-indent: 3px;
        min-width: 320px;
        float: left;
        line-height: 40px;
        font-family: "Trebuchet MS", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        color: #696969;
        font-size: 0.80em;
    }

    #ToolBar td#infoCell {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        border-bottom: 2px solid #eeeeee;
    }

#ContentContainer {
    /* show whole pdf, comment next to 2 lines */
    height: 460px;
    overflow: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

    #ContentContainer iframe {
        border: none;
        width: 100%;
        height: 100%;
    }

#RightPanel img, #RightPanel input {
    margin-top: 5px;
    margin-bottom: 5px;
}

#footerseparator_right {
    float: right;
}

#footer div {
    padding: 4px;
}

    #footer div#footerIconContainer {
        display: table-cell;
        vertical-align: middle;
        width: 253px;
        text-align: center;
    }

        #footer div#footerIconContainer img {
            max-height: 81px;
        }

    #footer div#footerText {
        display: table-cell;
        vertical-align: middle;
        font-size: 80%;
        width: 1059px;
        color: white;
        text-align: justify;
    }

        #footer div#footerText p {
            text-align: justify;
        }

#HomeContentSplash {
    width: 100%;
    height: 100%;
    text-align: center;
}

#SIM_Head_Popup, #GRA_Info_Popup, #AW_Info_Popup, #AW_InfoBS_Popup {
    display: none;
    position: fixed;
    z-index: 5;
    padding: 5px 10px;
    background-color: rgba(183, 242, 231, 0.9);
    border-style: solid;
    border-width: 2px;
    border-color: rgb(19, 105, 87);
    border-radius: 5px;
    max-width: 230px;
}

#AW_Table_1, #AW_Table_2, #AW_Table_3 {
    font-size: 0.8em;
    width: 230px;
    max-width: 230px;
    /*width:100%; */
}

    #AW_Table_3 td:nth-child(2) {
        white-space: nowrap;
    }

#AW_IP_Purpose {
    max-width: 230px;
    float: left;
    /*width: 230px;*/
}

#AW_Head_Table, #SIM_Head_Table, #MAUI_Head_Table, #DB_Head_Table, #AUI_Head_Table {
    width: 100%;
    text-align: left;
}

#HeaderSpace_SIM_Head_Table tr td {
    float: left;
}

#AW_newAuditPopup input[type="text"] {
    width: 250px;
    font-size: 13px;
}

/* SIM WIZARD */
.fieldSettings {
    font-size: 15px;
    font-weight: bold;
    font-variant: small-caps;
    color: Gray;
    padding: 0 5px;
}

div#simulationOpenPack dl#liveSearchAudit {
    margin-left: 70px;
}

div.simulationTypeBox {
    width: 277px;
    float: left;
    border: 1px solid #ccc;
    margin: 5px 0 5px 0;
}

    div.simulationTypeBox .indicatorContainer {
        margin-top: 5px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    div.simulationTypeBox .parentIndicatorLeft {
        width: 15px;
        float: left;
        padding: 0 8px 0 0;
    }

    div.simulationTypeBox .parentIndicatorRight {
        width: 30px;
        float: left;
        text-align: center;
        padding: 0 5px;
    }

    div.simulationTypeBox .amountIndicator {
        float: left;
        margin-top: 1px;
        line-height: 17px;
        height: 18px;
        font-size: 18px;
        opacity: 0.5;
        background-color: #ccc;
        padding: 0 5px;
        border-radius: 5px;
        border: 1px solid gray;
    }

        div.simulationTypeBox .amountIndicator:hover {
            font-size: 18px;
            opacity: 1;
            cursor: pointer;
        }

    div.simulationTypeBox .amountValueIndicator {
        float: left;
        width: 30px;
        height: 14px;
        text-align: center;
        margin-top: 1px;
    }

div.leftSimBox {
    margin-right: 10px;
}

div.simulationTypeBox button {
    float: left;
}

ul.simTypeNameTxt {
    font-size: 11px;
    float: left;
    padding-left: 10px;
    list-style: none;
    text-align: left;
}

    ul.simTypeNameTxt li:first-child {
        font-weight: bold;
        font-size: 12px;
    }

#openAuditRow_template, .hideAuditRow, #saveSimRow_template, #saveAuditRow_template, .hideSimRow {
    display: none;
}

/* open popup */
#simulationOpenPack {
    overflow: hidden;
}

/* audit selection */
div#auditSelectionBox {
    width: 565px;
    height: 335px;
    float: left;
    padding: 5px;
}

/* simulation row */
.openAuditRow {
    margin-bottom: 2px;
    height: 25px;
    font-size: 13px;
    line-height: 25px;
}

    .openAuditRow span {
        float: left;
    }

        .openAuditRow span.nameSimType {
            font-size: 11px;
            line-height: 25px;
            width: 175px;
        }

    .openAuditRow .imageSimType {
        float: left;
        margin: 3px 5px 0 0;
    }

    .openAuditRow span input.nameSimTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
    }

    .openAuditRow span .succesImg {
        position: relative;
        top: 5px;
    }

    .openAuditRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    .openAuditRow span.openAuditActions > img {
        height: 21px;
        padding: 0;
        margin: -1px 3px 0 0;
    }

    .openAuditRow span.openAuditActions .deleteAuditRowBtn {
        height: 17px;
    }

    .openAuditRow .iconAuditType {
        margin: 3px 0 0 3px;
        width: 17px;
    }

    .openAuditRow .auditNameLink {
        text-decoration: none;
    }

        .openAuditRow .auditNameLink:hover {
            color: #1448ba;
            font-weight: bold;
        }

/* search audit */
dl#liveSearchAudit {
    width: 500px;
    float: left;
    margin: 0 0 15px 225px;
    font-size: 12px;
}

    dl#liveSearchAudit dt {
        font-weight: bold;
        float: left;
        line-height: 35px;
    }

    dl#liveSearchAudit #liveSearchAuditTxt {
        width: 300px;
        float: left;
        margin-left: 35px;
        padding: 5px;
    }

div#AW_loadAuditPopup #liveSearch {
    width: 220px;
    padding: 3px;
    margin-left: 20px;
}

/* show all audits */
a#showAllAuditLink {
    text-decoration: none;
}

    a#showAllAuditLink:hover {
        font-weight: bold;
    }

div#showAuditsToManage {
    text-align: left;
    margin: 10px 0 10px 0;
    float: left;
    width: 561px;
    height: 378px;
    padding-left: 5px;
}

div#showAllAudits {
    position: absolute;
    margin: 283px 0 0 0;
    font-size: 12px;
    border-top: 1px dashed #ccc;
    float: left;
    background-color: #eee;
    padding: 0 5px;
    margin-left: -5px;
}

div#confirmSelectionBox {
    width: 100%;
    height: 35px;
    text-align: center;
    float: left;
    padding: 5px;
    margin-top: 0;
}

/* sim row */
.saveSimRow {
    margin-bottom: 5px;
    height: 25px;
    font-size: 13px;
    line-height: 26px;
}

    .saveSimRow span {
        float: left;
    }

        .saveSimRow span.nameSimType {
            font-size: 11px;
            line-height: 25px;
            width: 175px;
        }

    .saveSimRow .imageSimType {
        float: left;
        margin: 3px 5px 0 0;
    }

    .saveSimRow span input.nameSimTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
    }

    .saveSimRow span .succesImg {
        position: relative;
        top: 5px;
    }

    .saveSimRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    .saveSimRow span.simSavingActions > img {
        height: 20px;
        padding: 0;
        margin: -1px 3px 0 0;
    }

    .saveSimRow span.simSavingActions .deleteSimRowBtn {
        height: 18px;
    }

    .saveSimRow .iconSimulationType {
        margin: 3px 0 0 3px;
        width: 17px;
    }

    .saveSimRow .simulationNameLink {
        text-decoration: none;
    }

        .saveSimRow .simulationNameLink:hover {
            color: #1448ba;
            font-weight: bold;
        }

/* sim options */
div#tabContents .optionSet {
    border: 1px solid #ccc;
    padding: 5px;
    height: 32px;
    float: left;
    margin: 4px 7px 7px 0;
}

.demandProfileHourIcon {
    float: left;
    margin-left: 3px;
    margin-right: 5px;
}

.demandHoursActions {
    width: 47px;
    float: left;
}

    .demandHoursActions img.demandProfileHoursIconUp, .demandHoursActions img.demandProfileHoursIconDown {
        width: 15px;
    }

    .demandHoursActions img.demandProfileHoursIconLeft, .demandHoursActions img.demandProfileHoursIconRight {
        width: 11px;
        float: left;
    }

    .demandHoursActions .fullWidth {
        width: inherit;
        height: 12px;
        float: left;
    }

    .demandHoursActions .firstRow {
        margin-top: 1px;
    }

    .demandHoursActions .demandProfileHoursIconDown {
        margin-top: 5px;
    }

    .demandHoursActions .demandProfileHoursIconLeft {
        margin-left: 3px;
    }

    .demandHoursActions .arrowCircle {
        margin: 0 2px;
        width: 15px;
        float: left;
    }

/* search sim */
dl#liveSearchSim {
    width: 500px;
    float: left;
    margin: 10px 0 15px 40px;
    font-size: 12px;
}

    dl#liveSearchSim dt {
        font-weight: bold;
        float: left;
        line-height: 35px;
    }

    dl#liveSearchSim #liveSearch {
        width: 300px;
        float: left;
        margin-left: 35px;
        padding: 5px;
    }

dl dt#lastModified {
    font-weight: bold;
    width: 670px;
}

/* show all */
a#showAllLink {
    text-decoration: none;
}

    a#showAllLink:hover {
        font-weight: bold;
    }

div#showSimulationsToManage {
    text-align: left;
    margin: 10px 0 10px 0;
    float: left;
    width: 561px;
    height: 378px;
    padding-left: 5px;
}

div#showAll {
    position: absolute;
    margin: 313px 0 0 0;
    font-size: 12px;
    border-top: 1px dashed #ccc;
    float: left;
    background-color: #eee;
    padding: 0 5px;
    margin-left: -5px;
}

/* delete confirmation */
div#deleteSimConfirmation {
    border-bottom: 1px dashed #ccc;
    width: 500px;
    height: 40px;
    padding-top: 15px;
    left: 48px;
    position: absolute;
    background-color: #eee;
    font-size: 12px;
    text-align: center;
}

/* changed scrollbar only for chrome*/
div#SIM_ROWS {
    overflow-y: scroll;
    height: 280px;
    width: inherit;
}

div#AUDIT_ROWS {
    overflow-y: scroll;
    height: 245px;
    width: 570px;
    float: left;
}

    div#SIM_ROWS::-webkit-scrollbar-track-piece, div#AUDIT_ROWS::-webkit-scrollbar-track-piece {
        background-color: #eee;
        -webkit-border-radius: 0;
    }

    div#SIM_ROWS::-webkit-scrollbar, div#AUDIT_ROWS::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    div#SIM_ROWS::-webkit-scrollbar-thumb, div#AUDIT_ROWS::-webkit-scrollbar-thumb {
        height: 50px;
        background-color: #999;
        -webkit-border-radius: 4px;
        outline: 2px solid #eee;
        outline-offset: -2px;
        border: 2px solid #eee;
    }

        div#SIM_ROWS::-webkit-scrollbar-thumb:hover, div#AUDIT_ROWS::-webkit-scrollbar-thumb:hover {
            height: 50px;
            background-color: #9f9f9f;
            -webkit-border-radius: 4px;
        }

/* SIM TABS */
div#ContentContainer div#simulationTabs {
    width: 952px; /*height: 1215px;*/
    margin-left: -10px;
    z-index: 10;
}

    div#ContentContainer div#simulationTabs .ui-widget-content {
        width: 954px; /*height: 1110px; */
        padding: 0;
        margin: -4px 0 0 -2px;
    }

    div#ContentContainer div#simulationTabs .ui-widget-header {
        border: none;
        background: none;
    }

div#tabNavigation {
    width: 85px;
    margin-top: 8px;
    float: left;
}

    div#tabNavigation .tabNavImg {
        float: left;
        margin-right: 5px;
    }

div#tabMenuParent {
    height: inherit;
    width: 831px;
    overflow: hidden;
    position: absolute;
    margin-left: 119px;
}

ul#tabMenu {
    width: 2000px;
}

    ul#tabMenu li a {
        margin-right: 10px;
    }

div#ContentContainer div#simulationTabs .ui-tabs-nav {
    font-size: 12px;
    margin: -6px 0 0 2px;
    padding-left: 0;
    float: left;
}

div#ContentContainer div#simulationTabs .ui-state-active {
    background: #B0D3CB;
}

div#ContentContainer div#simulationTabs .ui-icon-close {
    position: absolute;
    right: 3px;
}

div#addSimBtn {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #ccc;
    width: 30px;
    height: 27px;
    float: left;
    border-bottom: none;
    margin-top: 2px;
    text-align: center;
}

    div#addSimBtn:hover {
        background-color: White;
        cursor: pointer;
    }

    div#addSimBtn img {
        margin-top: 5px;
    }

div#tabContents {
    margin-top: 34px;
}

    div#tabContents div {
        margin-top: 15px;
    }

    div#tabContents .notAvailable {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: visiblestroke;
    }

/* END SIM TABS */

/* save sim collection */
div#SIM_saveSimCollPopup #saveSimCollRow_template {
    display: none;
}

div#SIM_saveSimCollPopup .saveSimCollRow {
    margin-bottom: 5px;
    height: 30px;
}

    div#SIM_saveSimCollPopup .saveSimCollRow span {
        float: left;
    }

        div#SIM_saveSimCollPopup .saveSimCollRow span.nameSimCollType {
            font-size: 11px;
            line-height: 30px;
            width: 200px;
        }

    div#SIM_saveSimCollPopup .saveSimCollRow .imageSimCollType {
        float: left;
        margin: 3px 5px 0 0;
    }

    div#SIM_saveSimCollPopup .saveSimCollRow span input.nameSimCollTxt, #simNameCollectionTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
        overflow: hidden;
    }

    div#SIM_saveSimCollPopup .saveSimCollRow span .succesImg {
        position: relative;
        top: 5px;
    }

    div#SIM_saveSimCollPopup .saveSimCollRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    div#SIM_saveSimCollPopup .saveSimCollRow span.simCollSavingActions {
        float: right;
        margin-right: 53px;
        line-height: 32px;
    }

        div#SIM_saveSimCollPopup .saveSimCollRow span.simCollSavingActions > img {
            height: 19px;
            padding: 0;
            margin: -1px 3px 0 0;
        }

        div#SIM_saveSimCollPopup .saveSimCollRow span.simCollSavingActions .simulationUnLink {
            height: 17px;
        }

div#SIM_saveSimCollPopup div#saveAllSimColls {
    margin-top: 20px;
}

div#SIM_saveSimCollPopup #simNameCollectionTxt {
    float: left;
    margin-top: 6px;
}

div#SIM_saveSimCollPopup .infoMessageShown {
    padding-left: 25px;
    width: 225px;
}

div#SIM_saveSimCollPopup #simSaveCollectionIcon {
    float: right;
    position: relative;
    top: -24px;
    left: 20px;
}

/* pdf sim collection */
div#SIM_pdfSimCollPopup #pdfSimCollRow_template {
    display: none;
}

div#SIM_pdfSimCollPopup .pdfSimCollRow {
    margin-bottom: 5px;
    height: 25px;
}

    div#SIM_pdfSimCollPopup .pdfSimCollRow span {
        float: left;
    }

        div#SIM_pdfSimCollPopup .pdfSimCollRow span.nameSimCollType {
            font-size: 11px;
            line-height: 30px;
            width: 175px;
        }

    div#SIM_pdfSimCollPopup .pdfSimCollRow .imageSimCollType {
        float: left;
        margin: 3px 10px 0 0;
    }

    div#SIM_pdfSimCollPopup .pdfSimCollRow span input.nameSimCollTxt, #simPdfNameCollectionTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
        overflow: hidden;
    }

    div#SIM_pdfSimCollPopup .pdfSimCollRow span .succesImg {
        position: relative;
        top: 5px;
    }

    div#SIM_pdfSimCollPopup .pdfSimCollRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    div#SIM_pdfSimCollPopup .pdfSimCollRow span.simCollSavingActions {
        float: right;
        margin-right: 53px;
        line-height: 32px;
    }

        div#SIM_pdfSimCollPopup .pdfSimCollRow span.simCollSavingActions > img {
            height: 19px;
            padding: 0;
            margin: -1px 3px 0 0;
        }

        div#SIM_pdfSimCollPopup .pdfSimCollRow span.simCollSavingActions .simulationUnLink {
            height: 17px;
        }

div#SIM_pdfSimCollPopup div#saveAllSimCollsPdfs {
    margin-top: 20px;
}

div#SIM_pdfSimCollPopup #simPdfNameCollectionTxt {
    float: left;
    margin-top: 6px;
}

div#SIM_pdfSimCollPopup .infoMessageShown {
    padding-left: 25px;
    width: 225px;
}

div#SIM_pdfSimCollPopup #simPdfCollectionIcon {
    float: right;
    position: relative;
    top: -20px;
    left: 20px;
}

/* SIM COMMENT */
.infoTextComment {
    float: left;
    margin: 5px 10px;
}

.currentSimCommentTxt p {
    word-wrap: break-word;
    float: left;
    margin: 5px 2px 0 0;
}

#SIM_CompIconList_old {
    display: inline;
}

div.SIM_compContainer, #SIM_copy_old_to_new /*, div.AW_compContainer*/ {
    display: inline-block;
    margin-left: 1ex;
    position: relative;
}

div.SIM_addCompButtonContainer {
    display: inline-block;
    margin-left: 1ex;
    position: relative;
    width: 32px;
    line-height: 32px;
}

    div.SIM_addCompButtonContainer img {
        margin: 4px; /* img = 24px, container = 32px */
        opacity: 0.5;
    }

        div.SIM_addCompButtonContainer img:hover {
            opacity: 1;
        }

div.SIM_compDeletionContainer {
    position: absolute;
    opacity: 0;
    top: 1px;
    right: 2px;
    background-color: rgba(183, 242, 231, 0.25);
}

    div.SIM_compDeletionContainer:hover {
        opacity: 1;
        background-color: rgba(183, 242, 231, 0.75);
    }

    div.SIM_compDeletionContainer img {
        margin: 0;
        border: 1px solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        opacity: 0.75;
    }

        div.SIM_compDeletionContainer img:hover {
            border-color: rgba(0, 0, 0, 1);
            opacity: 1;
        }

#SIM_copy_old_to_new img:hover {
    background-color: rgba(19, 105, 87, 0.5);
}

#AW_newAuditPopup, #AW_loadAuditPopup, #AW_editCostperkwPopup, #SIM_loadAuditPopup, #SIM_openSimPopup, #SIM_editCommentPopup, #SIM_editCostperkwPopup, #SIM_ProServicePopup, #Graph_loadAuditPopup, #Graph_saveGraphPopup, #SIM_saveSimPopup, #SIM_saveGraphPopup, #Graph_userTimePopup, #SIM_editTargetPressDiffPopup {
    text-align: center;
}

    #SIM_editCommentPopup textarea {
        width: 757px; /* 757px; A4page.width-29d in pdf in points*/
        font-family: "Verdana";
        font-size: 13px; /*10points / 0.75 -= 13.3 px */
        resize: none;
    }

    #SIM_editCostperkwPopup input[type="text"] {
        width: 80px;
        text-align: center;
    }

    #SIM_editCostperkwPopup .unitlabel {
        /*width:50px;*/
    }

#AW_CTablePopup td, #SIM_addCompPopup td {
    padding: 0.3ex 1ex;
}

    #AW_CTablePopup td:first-child, #SIM_addCompPopup td:first-child {
        text-align: right;
    }

#AW_loadAuditPopup select, #AW_CTablePopup select, #SIM_addCompPopup select, #SIM_loadAuditPopup select, #SIM_openSimPopup select, #Graph_loadAuditPopup select {
    /*min-*/ width: 25ex;
    /*line-height: 24px;*/
}

#SIM_saveSimPopup input, #SIM_saveGraphPopup input {
    width: 25ex;
}

#SIM_addCompPopupList {
    display: none;
}

#SIM_datafieldsTable {
    border-spacing: 0;
    border-collapse: collapse;
}

    #SIM_datafieldsTable th {
        border: 1px solid #000;
        border-radius: 0;
    }

    #SIM_datafieldsTable td {
        text-align: center;
        width: 150px; /*20ex;*/
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: none;
        border-top: none;
        white-space: nowrap;
        border-radius: 0;
    }

    #SIM_datafieldsTable input[type="text"] {
        text-align: center;
        width: 90px;
        font-size: 1em;
    }

#SIM_tr_result {
    font-weight: bold;
    border: 1px solid #000;
}

#TempCostkW {
    /*float:right;*/
    width: 50px;
    margin: 5px;
    text-align: right;
}
/*#TempComment
{
    width:910px;
    margin: 5px;
    text-align:left;
}*/
#SIM_Buttons {
    float: left;
}

#SIM_DP_Shifter_Buttons {
    float: right;
}

#SIM_PD_Step {
    width: 30px;
    position: relative;
    top: -10px;
}

#SIM_addCompSelectedCompInfo {
    margin: 1ex;
    padding: 0.3em 0.5em;
    border: 1px solid #000000;
    border-radius: 0.3em;
    background-color: rgba(0, 0, 0, 0.1);
    min-height: 3em;
}

#AW_CTablePopupDiv1, #AW_CTablePopupDiv2, #AW_CTablePopupDiv3 {
    margin: 0; /*10px 10px 0 0;*/
    padding: 0.5em;
    border: 1px solid #000000;
    border-radius: 0.3em;
    background-color: rgba(0, 0, 0, 0.1);
    float: left;
}

    #AW_CTablePopupDiv1 th, #AW_CTablePopupDiv2 th {
        text-align: left;
        line-height: 14px;
    }

    #AW_CTablePopupDiv1 td:first-child, #AW_CTablePopupDiv2 td:first-child {
        text-align: right;
        width: 250px;
    }

    #AW_CTablePopupDiv1 tr, #AW_CTablePopupDiv2 tr {
        height: 30px;
    }

    #AW_CTablePopupDiv1 select, #AW_CTablePopupDiv2 select /*.AWCTCChoiceDrop*/ {
        width: 184px;
    }

    #AW_CTablePopupDiv1 input /*.AWCTCNumeric*/ {
        width: 180px;
    }

    #AW_CTablePopupDiv2 input /*.AWCTCNumeric*/ {
        width: 80px;
    }

.AWCTCNumeric {
    width: 8ex;
}

#AW_CTCConfirmButtonDiv {
    position: relative;
    left: 540px;
    top: 10px;
    margin: 0;
    width: 200px;
    height: 40px;
}

#SIM_addCompConfirmButtonContainer {
    text-align: center;
}

#AW_loadAuditPopupOverlay, #AW_editCostperkwPopupOverlay, #SIM_addCompPopupOverlay, #SIM_loadAuditPopupOverlay, #SIM_openSimPopupOverlay, #SIM_editCommentPopupOverlay, #SIM_editCostperkwPopupOverlay, #SIM_ProServicePopupOverlay, #Graph_HeaderOverlay, #Graph_loadAuditPopupOverlay, #Graph_saveGraphPopupOverlay, #AW_editLoggerPopupOverlay, #AW_CTableCreatePopupOverlay, #SIM_saveGraphPopupOverlay, #SIM_saveSimPopupOverlay, #AW_editBaseStationPopupOverlay {
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.grayscaleLoggerIcon {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    opacity: 0.4;
}

/* Graph Wizard */

/* FIREFOX FIX graph plotted always on the left */
.graphArea {
    float: left;
}

#Graph_HeaderOverlay {
    top: 0;
    display: none;
}

#Graph_ActionToolbar_1 {
    width: 320px;
}

#Graph_HeaderOverlay.show {
    display: block;
}

#Graph_HeaderOverlay #ProgressPct {
    position: absolute;
    /*display:block;*/
    top: 52%;
    /*left:47%;*/
    width: 97%;
    text-align: center;
    font-size: smaller;
    font-weight: normal;
}

/* Time frame */
div#setZoomTime {
    position: absolute;
    z-index: 2;
    width: 152px;
    height: 130px;
    float: left;
    padding: 25px 7px 20px 0;
    margin: -20px 5px 0 0;
    border-right: 1px solid #CCC;
    overflow: hidden;
}

    div#setZoomTime .zoomDate {
        width: 110px;
        margin-left: 5px;
        margin-bottom: 10px;
        font-size: 13px;
    }

    div#setZoomTime button {
        margin-top: 10px;
        padding: 0;
    }

    div#setZoomTime #resetDateZoom {
        margin-left: 5px;
        width: 57px;
    }

    div#setZoomTime #setDateZoom {
        width: 84px;
    }

.numberIndicator {
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: yellowgreen !important;
}
.numberIndicatorSideBar {
    width: 16px;
    height: 16px;
    position: absolute;
    background-color: yellowgreen !important;
}
.nummer1 {
    background: url('https://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-1-icon.png') no-repeat;
}

.nummer2 {
    background: url('https://icons.iconarchive.com/icons/icons8/windows-8/16/Numbers-2-icon.png') no-repeat;
}

/* Accordions - new sim wizard style */
div#ContentContainer #accordionGraphs .ui-accordion-content {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    width: 938px;
    min-height: 390px;
}

.optionSteps {
    width: 925px;
    margin: -10px 0 5px 5px;
    float: left;
}

    .optionSteps > div {
        float: left; /*padding: 5px 0 0 0 ;*/
        border: 1px solid #ccc;
        margin-right: 6px;
    }

    .optionSteps .optionStep1 {
        min-width: 50px; /*min-height: 36px; margin-right: 6px;*/
        padding: 5px 5px 5px 0;
    }

        .optionSteps .optionStep1 img {
            margin-left: 5px;
            float: left;
        }

    .optionSteps .optionStep2 {
        width: 408px;
        min-height: 32px; /*margin-right: 6px;*/
        padding: 5px 5px 5px 0;
    }

        .optionSteps .optionStep2 .optionStep2Loggers img {
            margin-left: 5px;
            float: left;
        }

        .optionSteps .optionStep2 .optionStep2System img { /*margin-right: 5px;*/
            float: right;
        }

    .optionSteps .optionStep3 {
        min-width: 297px; /*min-height: 36px; margin-right: 6px;*/
        padding: 5px 5px 5px 0;
    }

        .optionSteps .optionStep3 .optionStep3DataTypes img {
            margin-left: 5px;
            float: left;
        }

    .optionSteps .optionStep4 { /*width: 264px;*/ /*min-height: 36px; margin-right: 6px;*/
        padding: 5px 5px 5px 0;
        float: right;
        margin-right: 0;
    }

        .optionSteps .optionStep4 img {
            margin-left: 5px;
            float: left;
        }

.simArea {
    width: 925px;
    height: 340px; /*margin: 5px 0 5px 5px; border: 1px solid #ccc;*/
    float: left;
    line-height: 20px;
}
/*IE9 fix for tooltip via 'line-height'*/

/* save popup sim */
#saveGraphRow_template {
    display: none;
}

.saveGraphRow {
    margin-bottom: 5px;
    height: 25px;
}

    .saveGraphRow span {
        float: left;
    }

        .saveGraphRow span.nameGraphType {
            font-size: 11px;
            line-height: 25px;
            width: 175px;
        }

    .saveGraphRow .imageGraphType {
        float: left;
        margin: 3px 5px 0 0;
    }

    .saveGraphRow span input.nameGraphTxt {
        font-size: 11px;
        width: 250px;
        margin-right: 5px;
    }

    .saveGraphRow span .succesImg {
        position: relative;
        top: 5px;
    }

    .saveGraphRow span input.infoMessageShown {
        padding-left: 25px;
        width: 225px;
    }

    .saveGraphRow span.graphSavingActions {
        float: right;
        margin-right: 25px;
    }

        .saveGraphRow span.graphSavingActions > img {
            height: 25px;
            padding: 0;
            margin: -1px 3px 0 0;
        }

        .saveGraphRow span.graphSavingActions .deleteGraphRowBtn {
            height: 22px;
        }

div#saveAllGraphs {
    margin-top: 20px;
}

.hideInfo {
    visibility: hidden;
}

.showInfo {
    width: 225px;
    padding-left: 25px;
}

#SIM_addCompPopupOverlay img, #SIM_loadAuditPopupOverlay img, #SIM_openSimPopupOverlay img, #SIM_commentEditPopupOverlay img, #Graph_HeaderOverlay img, #Graph_loadAuditPopupOverlay img, #AW_editLoggerPopupOverlay img, #AW_CTablePopupOverlay img, #AW_loadAuditPopupOverlay img, #AW_CTableCreatePopupOverlay img, #SIM_saveGraphPopupOverlay img, #SIM_saveSimPopupOverlay img, #AW_editBaseStationPopupOverlay img {
    position: absolute;
    top: 40%;
    left: 47.5%;
}

#Graph_savingFeedback {
    position: absolute;
    top: 53px; /*28%;*/
    width: 100%;
}

#Graph_Header {
    position: relative;
}

#Graph_ActionToolbar_1, /*#Graph_ActionToolbar_2,*/ #Graph_FunctionToolbar_1, #Graph_FunctionToolbar_2, #Graph_FunctionToolbar_3 {
    text-align: left;
}

/*#Graph_ActionToolbar_1 img, #Graph_ActionToolbar_2 img
{
    margin-right: 8px;
    width: 32px;
    height: 32px;
}*/

#AW_FunctionToolbar_2, #Graph_FunctionToolbar_1 {
    width: 640px;
}

#AW_progressIndicator img {
    position: relative;
    margin-right: -3px;
}

#AW_progressStep_1 {
    z-index: 4;
}

#AW_progressStep_2 {
    z-index: 3;
}

#AW_progressStep_3 {
    z-index: 2;
}

#AW_progressStep_4 {
    z-index: 1;
}

.AW_progressStepTitleClass {
    /*font-size: large;*/
    /*font-weight: bold;*/
    position: relative;
    left: 6px;
    top: -4px;
}

#Graph_FunctionToolbar_1 img, #Graph_FunctionToolbar_2 img, #Graph_FunctionToolbar_3 img {
    margin-left: 8px;
    width: 32px;
    height: 32px;
}

#LoggerList_1_16, #LoggerList_17_20, #SystemGraphButtonContainer, #GraphTypes {
    display: inline-block;
}

#LoggerList_17_20 {
    width: 160px;
    margin-right: 40px;
}

#SystemGraphButtonContainer {
    width: 40px;
    margin-right: 40px;
}

#PredefinedGraphs {
    float: right;
}

#GraphDataTypes {
    float: left;
}

#ContentPlaceHolder1_AW_WizardCtl {
    margin: 0 auto;
}

#AW_editBaseStationSN, #LoggerSN, #AW_LoggerSensorMin, #AW_LoggerSensorMax {
    width: 6.5ex;
    /*margin-right: 2ex;*/
}

#maximumIcon {
    margin-left: 56px;
}

#AW_Diameters {
    float: right;
}

#AW_editBaseStationSelector, #LoggerSelector, #AW_LoggerSensorUnitSelector {
    width: 10ex;
    float: right;
    display: inline;
    margin-right: 6px;
    height: 24px; /*28px - 2*2px border)*/
}
/* .loggerTypeImgTd
{
    border: 1px solid #000000;
    border-radius: 0.3em;
    width:24px;
}
*/
/*#AW_LoggerSensorUnitSelector
{
    text-align:right;
}*/
#AW_LoggerPurposeInput {
    width: 220px;
    vertical-align: middle;
}

#AW_BSGridDisplay {
    top: 44px;
    float: left;
    position: relative;
    width: 126px;
}

#AW_BsGridLabel {
    position: relative;
    top: 28px;
    color: #888;
}

#AW_BSTitle {
    position: relative;
}

.AW_LoggerGridDisplayTable {
    border-spacing: 56px 32px;
}

#AW_LoggerGridDisplayTitle {
    padding: 0 0 0 56px;
}

#AW_editLoggerPopup {
    /*line-height: 3em;*/
}

    #AW_editLoggerPopup h4 {
        line-height: 1.2em;
        margin: 0;
        /*padding:0;*/
        color: #888;
        width: 400px;
        text-align: left;
    }

    #AW_editLoggerPopup img {
        vertical-align: middle;
    }
    /*#AW_editLoggerPopup table
{
    margin:10px 0 0 0;
    line-height: 18px;
    background-color: #ccbb88;
}
*/
    #AW_editLoggerPopup table tr {
        height: 2em; /*32px*/
    }

    #AW_editLoggerPopup table td:first-child {
        width: 32px;
        text-align: right;
    }
/*
#AW_editLoggerPopup table td+td
{
    text-align:center;
}
#AW_editLoggerPopup table td+td+td
{
    text-align:right;
}
*/
#AW_LoggerCompressorSelection {
    margin: 0;
    padding: 0;
    display: none;
}

#AW_LoggerSelectionContainer1, #AW_LoggerSelectionContainer2, #AW_LoggerSelectionContainer3 {
    margin: 0 0 10px 0; /*1ex;*/
    padding: 0.3em 0.5em;
    border: 1px solid #888;
    border-radius: 0.3em;
    /*background-color: rgba(0, 0, 0, 0.1);*/
    /*min-height: 3em;*/
}

#containerSearchDeletedAudits, #containerSearchResultDeletedAudits {
    display: inline-block;
    margin-bottom: 5px;
}

#containerSearchResultDeletedAudits {
    border: 1px solid #888;
    float: right;
}

#AW_LoggerCompressorSelection input[type="text"], #AW_LoggerSelectionContainer1 input[type="text"] /*AW_LoggerCName*/ {
    /*width:156px;*/
    /*float:left;*/
    height: 18px;
    border-width: 2px;
    padding: 1px;
    margin: 0 5px 0 0;
}

#AW_LoggerCompressorSelection input[type="radio"] {
    margin: 0 0 0 22px;
}

#AW_LoggerPurposeInputLabel {
    width: 150px;
}

#AW_VoltsLabel {
    font-size: small;
}

#AW_LoggerCompressorSelection label img {
    vertical-align: middle;
}

#AW_LoggerCName, #AW_LoggerCSN, #AW_LoggerCTable {
    width: 220px;
}

#AW_PowerFactorLoaded, #AW_PowerFactorNotLoaded, #AW_PowerSupply {
    width: 80px;
}

#AW_editLoggerCTableBtn, #AW_viewLoggerCTableBtn, #AW_deleteLoggerCTableBtn, #AW_CTableCreateNewButton, #AW_searchLoggerCTableBtn {
    cursor: pointer;
    margin-left: 6px;
}

#AW_CTCPITable th {
    font-weight: normal;
}

.buttonclickable {
    cursor: pointer;
}

#AW_EditLoggerConfirmButton, #AW_editBaseStationConfirmButton, #AW_resyncStatusBS {
    display: block;
    margin: 5px auto;
    line-height: 1em;
}

#AW_CTCPIList .AW_CTC_PI {
    text-decoration: underline;
}

    #AW_CTCPIList .AW_CTC_PI:hover {
        cursor: pointer;
    }

#AW_ScheduleContainer .displaynone, .displayNone {
    display: none !important;
}

#AW_ScheduleContainer .displayblock {
    display: block;
}

#AW_ScheduleContainer {
    position: relative;
    width: 900px;
    height: 360px;
}

#AW_ScheduleContainer1 {
    width: 650px;
    position: absolute;
}

#AW_ScheduleContainer2 {
    width: 200px;
    position: absolute;
    left: 600px;
    top: 70px;
}

#AW_ScheduleInputDiv {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#AW_ScheduleInputPositionWrapper {
    position: absolute;
    top: 125px;
    left: 200px;
    padding: 10px 20px;
    line-height: 2.5em;
    background-color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    border-radius: 5px;
}

    #AW_ScheduleInputPositionWrapper button {
        line-height: 1.75em;
    }

#AW_CloudToBase, #AW_BaseToCloud {
    width: 910px;
    overflow-x: hidden;
}

    #AW_CloudToBase table, #AW_BaseToCloud table {
        border-spacing: 2px 25px;
    }

    #AW_CloudToBase td, #AW_BaseToCloud td {
        font-size: 72px;
        text-align: center;
        position: relative;
    }

#AW_importProgress_Step5 {
    font-size: 18px;
    position: absolute;
    top: 54px;
    right: 68px;
}

#AW_importProgress_Step2 {
    position: absolute;
    top: 43%;
    right: 47%;
}

#AW_CompleteStepNavDiv {
    text-align: right;
}

#AW_CurrencySelectorImg {
    position: relative;
    top: 10px;
    width: 32px;
    height: 32px;
}

#SIM_simContainer {
    position: relative;
    height: 480px;
    width: 926px;
    margin: 0 auto;
}

#AW_AuditInfoTable /*, #AW_AuditStep2Table*/ {
    margin-top: 10px;
}

div.AW_compContainer {
    display: inline-block;
    /*margin-left: 1ex;*/
    position: relative;
}

#AW_AuditStep2Table {
    margin-top: 10px;
    padding: 0;
    border-collapse: collapse;
}

#AW_AuditStep2Div {
    width: 900px;
}

.AuditStep2DivCss {
    float: left;
    height: 360px;
    padding: 30px 0 0 0;
}

#AW_AuditStep2DivLeft {
    width: 288px;
}

#AW_AuditStep2DivMiddle {
    width: 1px;
    background-color: #aaa;
    padding: 0;
}

#AW_AuditStep2DivRight {
    width: 500px;
}

.AW_AuditStep2TitleImg {
    margin-left: 56px;
}

#UserInfoTable tr, #AW_AuditInfoTable tr, #AW_AuditStep2Table tr {
    height: 28px;
}

#UserInfoTable td /*, #AW_AuditStep2Table td */ {
    width: 200px;
}

#AW_AuditInfoTable td, #AW_AuditInfoTable td + td + td + td {
    width: 150px;
    text-align: right;
    padding: 0 6px 0 0;
}

    #AW_AuditInfoTable td + td, #AW_AuditInfoTable td + td + td + td + td {
        width: 300px;
        text-align: left;
    }

        #AW_AuditInfoTable td + td + td {
            width: 30px;
        }

.vlinestep2 {
    border-right: 1px solid #aaa;
    width: 56px;
}

#AW_AuditStep2Table td + td + td {
    /*background-color: #AAA;*/
}

#UserInfoTable select, #AW_AuditInfoTable select {
    height: 24px;
    width: 120px;
}

#UserInfoTable .CssCountryList, #AW_AuditInfoTable .CssCountryList {
    width: 284px;
}

#UserInfoTable input[type="text"], #UserInfoTable input[type="password"], #AW_AuditInfoTable input {
    width: 280px;
}

#UserInfoTable .CssPostalCode, #AW_AuditInfoTable .CssPostalCode {
    width: 120px;
}

#EditDecimalSeparator {
    font-size: 1.1em;
}
/*#AW_AuditInfoTable .CssTdSpacer
{
    width:10px;
}*/

#DT_CompressorTable {
    border-spacing: 0;
    border-collapse: collapse;
    border: 2px solid #000000;
}

    /* database user management */
    /* Classes for showing/hiding userRows on paging */
    #DT_CompressorTable .showTableRow {
        display: table-row;
    }

    #DT_CompressorTable .hideTableRow {
        display: none;
    }

#filderTableCell #liveSearch {
    width: 200px;
}

#DT_CompressorTable input[type=image], #DT_CompressorTable input[type=text], #DT_CompressorTable select {
    margin: 0 2px;
    border: 0;
}

#DT_CompressorTable tr.alternateRow td {
    background-color: #CCC;
}

/* active row id */
#DT_CompressorTable tr.activeComRow td {
    background-color: #18715d;
}

#DT_CompressorTable th {
    font-weight: bold;
    border-spacing: 0;
    border-collapse: collapse;
    border: 2px solid #555555;
}

#DT_CompressorTable td {
    border-left: 1px solid #AAAAAA;
    border-radius: 0;
    padding: 1px 2px;
}

/*
 * Database page - compressor tables
 */

table.tablesorter tbody tr.odd td {
    background-color: #CCC;
}

/*
 * Database page - Language translations
 */

/* jQuery tablesorter*/
#DT_CompressorTable thead tr .header {
    background-image: url(../../Public/Images/bg.gif);
    background-repeat: no-repeat;
    background-position: left;
    cursor: pointer;
    padding: 0 15px;
}

#DT_CompressorTable thead tr .headerSortUp {
    background-image: url(../../Public/Images/asc.gif);
}

#DT_CompressorTable thead tr .headerSortDown {
    background-image: url(../../Public/Images/desc.gif);
}

#ContentContainer .userAdminTable td {
    border: 0;
    border-left: 1px solid #AAAAAA;
}

.centraliseBox {
    text-align: center;
}

/* fix accordion styles */
div#ContentContainer div#accordion {
    width: 940px;
    margin-top: 9px;
}

    div#ContentContainer div#accordion h3 {
        cursor: pointer;
    }

    div#ContentContainer div#accordion span.headerTxt {
        margin: 4px 0 0 30px;
        line-height: 32px;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
    }

div#ContentContainer .ui-accordion-content {
    width: 868px;
}

div#ContentContainer .ui-widget-content {
    border: 1px solid #AAA;
}

div#ContentContainer .ui-accordion-header {
    height: 30px;
}

/* download excel sheet - language file */

table#brandsUser tr {
    float: left;
    width: 165px;
}

    table#brandsUser tr * {
        cursor: pointer;
    }

#brandSelection {
    height: 75px;
}

    #brandSelection ul {
        width: 900px;
        margin: 0 0 0 -5px;
        padding-left: 0;
    }

        #brandSelection ul li {
            float: left;
            list-style-type: none;
            width: 165px;
        }

            #brandSelection ul li#titleBrandSelection {
                margin-right: 15px;
            }

div#languageSelection {
    height: 150px;
    margin-left: -4px;
}

    div#languageSelection #SelectLanguageTxt {
        width: 182px;
        float: left;
    }

    div#languageSelection #languageSelectionDrop {
        width: 275px;
        float: left;
    }

    div#languageSelection span#selectedLanguagesTxt {
        margin-left: 57px;
    }

    div#languageSelection ul#selectedLanguages {
        overflow-y: scroll;
        width: 285px;
        height: 130px;
        border: 1px solid black;
        float: left;
        margin: 20px 0 0 57px;
        padding-left: 10px;
    }

        div#languageSelection ul#selectedLanguages li {
            list-style-type: none;
            margin: 2px 0 2px 0;
        }

            div#languageSelection ul#selectedLanguages li:hover {
                cursor: pointer;
                background-color: #cccccc;
            }

        div#languageSelection ul#selectedLanguages .languageDeleteImg {
            margin: 3px 5px 0 0;
            width: 15px;
            float: left;
        }

div#ContentContainer .brandColor {
    color: #17705c;
    font-weight: bold;
}

div#downLoadFile {
    text-align: center;
    margin-top: 40px;
}

    div#downLoadFile input:hover {
        cursor: pointer;
    }

/* upload excel sheet - language file */
div#uploadLanguageFile, div#termsOfAgreementTxt {
    height: 297px;
}

    div#uploadLanguageFile #FileUploadControl {
        width: 550px;
        margin-right: 10px;
    }

/************************/
/*   NEW PUBISH WIZARD  */
/************************/

/* menu update */
@-moz-document url-prefix() {
    #menuAdminNav.newMenuStyle > a.active:after {
        margin: 9px 0 0 10px;
        float: right;
    }
}
/* FF HACK */
#menuAdminNav.newMenuStyle > a.active:after {
    margin /**/: 9px 0 0 10px;
    float /**/: right;
}
/* IE 6+ hack */
/* chrome hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #menuAdminNav.newMenuStyle > a.active:after {
        margin: 10px 0 0 10px;
        float: right;
    }
}

#menuAdminNav.newMenuStyle .icon {
    font-size: 30px;
    line-height: 30px;
}

/*****************/
/* LANDINGS PAGE */
/*****************/

/* TEMPLATE PICKER */
div#templatePicker {
    width: 940px;
    height: 160px;
}

    div#templatePicker .template {
        background: dimgray;
        cursor: pointer;
        width: 135px;
        height: 140px;
        float: left;
        margin: 0 26px 0 0;
        position: relative;
        top: 0;
        left: 0;
    }

        div#templatePicker .template:last-child {
            margin: 0 0 0 0;
        }

        div#templatePicker .template .icon {
            color: #eee;
            position: absolute;
            font-size: 75px;
            text-align: center;
            width: 100%;
            top: 10px;
        }

        div#templatePicker .template:not(#blankTemplate):hover, div#templatePicker .template:not(#blankTemplate).active {
            height: 160px;
            /*transition: height 0.4s, transform 0.4s;
            -webkit-transition-property: height, width;
            -webkit-transition-duration: 0.4s;*/
        }
        /*div#templatePicker .template:hover, div#templatePicker .template.active {background: dimgray !important; cursor: pointer;}*/
        div#templatePicker .template:hover .editTemplate, div#templatePicker .template.active .editTemplate {
            display: inline;
        }

        div#templatePicker .template .indicatorNr {
            position: absolute;
            top: 35px;
            left: 55px;
            color: #eee;
            font-size: 40px;
        }

    div#templatePicker .nameTemplate, div#templatePicker .editTemplate {
        width: inherit;
        height: 30px;
        background-color: darkgray;
        position: absolute;
        bottom: 0;
        left: 0;
    }

        div#templatePicker .nameTemplate span, div#templatePicker .editTemplate span {
            line-height: 30px;
            text-align: center;
            width: 100%;
            position: absolute;
            font-size: 13px;
            color: White;
        }

    div#templatePicker .editTemplate {
        bottom: 30px;
        display: none;
    }

    div#templatePicker .template:not(#blankTemplate) .nameTemplate:hover {
        padding-top: 30px;
        z-index: 5;
    }

    div#templatePicker div#startNew {
        width: 30px;
        height: 120px;
        padding: 10px 0 10px 0;
        float: left;
        position: relative;
        background-color: gray;
        font-size: 10px;
        text-align: center;
        margin-right: 25px;
        line-height: 12px;
    }

/* sub title box - title of main box (open document, select linkage audit, ..) */
.titleBoxOfSubBox {
    background-color: darkgray;
    color: #eee;
    float: left;
    width: 100%;
    height: 40px;
    padding-bottom: 20px;
}

    .titleBoxOfSubBox .icon {
        font-size: 35px;
        float: left;
        margin: 0 15px 0 10px;
    }

    .titleBoxOfSubBox span {
        float: left;
        line-height: 50px;
        font-size: 16px;
    }

div#templatePicker div#startNew {
    color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 30px;
    height: 120px;
    padding: 10px 0 10px 0;
    float: left;
    position: relative;
    background-color: Gray;
    font-size: 10px;
    text-align: center;
    margin-right: 25px;
}

/* TEMPLATE PICKER - ADMIN */
div#templatePicker #toggleTemplateTypeBtn {
    width: 76px;
    margin-right: 20px;
    float: left;
    background-color: lightgray !important;
}

    div#templatePicker #toggleTemplateTypeBtn .icon {
        font-size: 60px;
        top: 17px;
    }

div#templatePicker .template.smaller {
    width: 124px;
    margin: 0 20px 0 0;
}

    div#templatePicker .template.smaller:last-child {
        margin: 0 0 0 0;
    }

/* parent container for the flippers */
.flipper {
    float: left;
    width: 135px;
    height: 140px;
    z-index: 1;
    perspective: 1000px;
    margin-right: 26px;
}
    /* showDummy will adapt the design so room is created for the swapper tile on the left side*/
    .flipper.showDummy {
        float: left;
        width: 124px;
        height: 140px;
        z-index: 1;
        perspective: 1000px;
        margin-right: 20px;
    }

    .flipper:last-child {
        margin-right: 0;
    }

.flipCard .face {
    position: absolute !important;
    z-index: 5;
    transform: rotateY(0deg) !important;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform 1s linear;
    transition: transform 1s linear;
}

.flipCard.flip .face {
    transform: rotateY(180deg) !important;
}

.flipCard .back {
    position: absolute !important;
    transform: rotateY(180deg) !important;
    z-index: 10;
    background-color: dimgray !important;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform 1s linear;
    transition: transform 1s linear;
}

.flipCard.flip .back {
    transform: rotateY(0deg) !important;
}

#toggleTemplateTypeBtn .rotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#toggleTemplateTypeBtn:hover .rotate {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

/* AUDIT PICKER */
div#auditPicker {
    border: 1px solid gray;
    width: 938px;
    height: 404px;
    background-color: #eee;
    float: left;
    margin: 10px 8px 0 0;
}
    /* all audits */
    div#auditPicker div#displayedAudits {
        background-color: #eee;
        width: 638px;
        height: 404px;
        position: absolute;
    }

    div#auditPicker div.pagingSystem #liveSearchAuditTxt {
        width: 270px;
        float: left;
        margin-left: 10px;
        background-color: #F8F8F8;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
    }

    div#auditPicker .pageNavigation {
        display: inline;
        float: right;
        margin-right: 20px;
    }

.pageNavigation img {
    opacity: 0.5;
}

    .pageNavigation img:hover {
        opacity: 1;
    }

div#auditPicker .liveSearchAuditBox {
    margin: 1px 0 0 14px;
}

div#auditPicker dl.liveSearchAuditBox #liveSearchAuditTxt {
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

div.pageNavigation {
    margin: 1px 0 0 5px;
}

    div.pageNavigation img {
        margin-top: 7px;
        float: left;
    }

        div.pageNavigation img.faded {
            opacity: 0.2;
        }

    div.pageNavigation input {
        float: left;
        text-align: center;
        width: 30px;
        margin-top: 5px;
    }

/* DATE PICKER */
div#auditPicker div#optionAuditPicker {
    float: right;
    display: inline-block;
    width: 300px;
    height: 404px;
    background-color: White;
}

div#auditPicker div#contentActions {
    width: 100%;
    height: 312px;
    float: left;
    border-left: 1px solid dimgray;
}

    div#auditPicker div#contentActions button {
        margin-right: 10px;
    }

    div#auditPicker div#contentActions #selectedAuditSettings {
        width: 100%;
        height: 100%;
        font-size: 12px;
        margin-top: 20px;
    }
/*div#auditPicker div#contentActions */ .ui-datepicker-trigger {
    width: 25px;
    float: right;
    opacity: 0.55;
    margin-top: -1px;
}

div#auditPicker div#contentActions #selectedAuditSettings .icon-wand {
    -moz-transform: rotate(-270deg);
    -webkit-transform: rotate(-270deg);
    transform: rotate(-270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    float: left;
}

div#auditPicker div#contentActions #selectedAuditSettings tr {
    background-color: transparent;
}

    div#auditPicker div#contentActions #selectedAuditSettings tr td {
        width: 210px;
    }

        div#auditPicker div#contentActions #selectedAuditSettings tr td:first-child {
            width: 40px;
            float: left;
            text-align: center;
            margin-left: 25px;
            margin-top: 5px;
        }

    div#auditPicker div#contentActions #selectedAuditSettings tr.lowerHeight {
        height: 25px;
    }

    div#auditPicker div#contentActions #selectedAuditSettings tr.mediumHeight {
        height: 25px;
    }

        div#auditPicker div#contentActions #selectedAuditSettings tr.mediumHeight input {
            height: 18px;
            line-height: 18px;
            padding: 2px 5px;
            width: 140px;
        }

    div#auditPicker div#contentActions #selectedAuditSettings tr.buttonHeight {
        height: 50px;
    }

div#auditPicker div#contentActions #selectedAuditSettings .icon {
    font-size: 20px;
    color: dimgray;
}

div#auditPicker div#contentActions #selectedAuditSettings button:hover .icon {
    color: black;
}

/* REPORT PICKER */
div#reportPicker {
    border: 1px solid darkgray;
    width: 938px;
    height: 404px;
    background-color: gray;
    float: left;
    margin: 10px 0 0 0;
}
/* all reports */
div#displayedDocuments div#tableDisplayedReports {
    height: 404px;
    width: 640px;
    background-color: #eee;
    position: relative;
}

div#allReportsBox .pageNavigation {
    display: inline;
    float: right;
    margin-right: 20px;
}

div#allReportsBox .liveSearchAuditBox {
    margin: 1px 0 0 14px;
}

div#allReportsBox dl.liveSearchAuditBox #liveSearchCompanyTxt {
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

div#allReportsBox .icon-magnifying-glass {
    font-size: 22px;
    margin-top: 3px;
    float: left;
    color: White;
    margin-top: 3px;
}

div#displayedDocuments {
    background-color: #eee;
    width: 638px;
    height: 404px;
    margin-bottom: 15px;
    position: absolute;
}

div#allReportsBox div.pagingSystem #liveSearchDocTxt {
    width: 270px;
    float: left;
    margin-left: 10px;
    background-color: #F8F8F8;
    padding-left: 10px;
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

div#reportPicker div#optionDocPicker {
    float: right;
    display: inline-block;
    width: 300px;
    height: 404px;
    background-color: White;
}
/* actions report  */
div#reportPicker div#optionDocPicker {
    float: right;
    display: inline-block;
    width: 300px;
    height: 404px;
    background-color: White;
}

    div#reportPicker div#optionDocPicker button {
        margin-right: 10px;
    }

div#reportPicker div#contentActions2 {
    width: 100%;
    height: 312px;
    float: left;
    padding-left: 20px;
    border-left: 1px solid darkgray;
}

    div#reportPicker div#contentActions2 #selectedReportSettings {
        width: 100%;
        height: 100%;
        font-size: 12px;
        margin-top: 20px;
    }

        div#reportPicker div#contentActions2 #selectedReportSettings tr {
            background-color: transparent;
        }

            div#reportPicker div#contentActions2 #selectedReportSettings tr td {
                width: 210px;
            }

                div#reportPicker div#contentActions2 #selectedReportSettings tr td:first-child {
                    width: 40px;
                    text-align: center;
                    margin-left: 25px;
                    padding-right: 15px;
                    margin-top: 5px;
                }

            div#reportPicker div#contentActions2 #selectedReportSettings tr.lowerHeight {
                height: 25px;
            }

            div#reportPicker div#contentActions2 #selectedReportSettings tr.mediumHeight {
                height: 25px;
            }

                div#reportPicker div#contentActions2 #selectedReportSettings tr.mediumHeight input {
                    height: 18px;
                    line-height: 18px;
                    padding: 2px 5px;
                    width: 140px;
                }

            div#reportPicker div#contentActions2 #selectedReportSettings tr.buttonHeight {
                height: 50px;
            }

        div#reportPicker div#contentActions2 #selectedReportSettings .icon {
            font-size: 20px;
            color: darkgray;
        }

        div#reportPicker div#contentActions2 #selectedReportSettings button .icon {
            color: dimgray;
        }

        div#reportPicker div#contentActions2 #selectedReportSettings button:hover .icon {
            color: black;
        }

/**************/
/*  PUBLISHER */
/**************/

/* template editor */
div#Publisher img.toEditBox {
    background-position: 10%, center;
    background-repeat: no-repeat;
}

div#Publisher .headerContainer {
    cursor: pointer;
}

div#Publisher div#documentWrapper {
    width: 710px;
    margin: 0 10px 0 0;
    border-top: none;
    background-color: lightgray;
}

div#Publisher div#top {
    width: 710px;
    float: left;
    border-bottom: 1px solid darkgray;
}

/* CK editor */
div#Publisher .availableSpaceContainer {
    outline: 0;
}

div#Publisher .cke {
    border-bottom: none;
}

div#Publisher .cke_button_icon {
    opacity: 0.6;
}

div#Publisher .cke_top {
    border-bottom: 0;
    background-image: none;
    background-color: White;
    -webkit-box-shadow: 0;
    box-shadow: 0;
}

div#Publisher .cke_toolgroup, div#Publisher .cke_combo_button {
    border-radius: 0;
    border: 1px solid lightgray;
    -webkit-box-shadow: 0;
    box-shadow: 0;
    background-image: none;
    background-color: White;
}

div#Publisher .cke_button_on:hover, div#Publisher .cke_button_off:hover {
    cursor: pointer;
}

div#Publisher .cke_combo_text {
    font-family: "verdana";
    font-size: 10px;
    width: 46px;
}

div#Publisher .cke_chrome {
    box-shadow: 0 0 0 rgba(0,0,0,0.15);
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.15);
}

/* placeholder CKE */
p.placeholder.editPlaceholder {
    background-color: yellow;
}

.placeholderSelector select {
    border: 1px solid dimgray;
    padding: 5px;
    cursor: pointer;
}

    .placeholderSelector select option {
        padding: 2px;
    }

.cke_placeholder.energytable {
    width: 600px;
    height: 400px;
    background-color: rgb(170, 170, 170);
    display: inline-block;
}

/* LOGGER BOXES */

.loggerTable {
    float: left;
    width: calc(50% - 10px);
    border: 1px solid dimgray;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
    border-collapse: collapse;
    font-size: 12px;
    line-height: 13px;
}

    .loggerTable td {
        word-break: break-all;
        font-size: 12px;
        line-height: 13px;
        vertical-align: top;
    }

.logger__header td {
    padding: 10px;
    height: 30px;
}

.logger__detail td {
    padding: 0 10px;
}

.loggerTable__image {
    background-color: dimgray;
}

.loggerTable__label {
    font-weight: bold;
}

.loggerTable__serialnumber {
    font-weight: bold;
    text-align: right;
    font-size: 0.9em;
}

.loggerTable__graph {
    padding-top: 20px;
    max-height: 270px;
}

.loggerTable--detailed {
    float: none;
    width: calc(100% - 10px);
}
    /* detailed logger tables have 3 columns*/
    .loggerTable--detailed .logger__header td {
    }

.loggerTable__details {
    border-left: 1px solid dimgray;
}

/* logger boxes in audit wiz pdf */
#page_2_container[loggerboxes] > div:nth-child(odd) {
    margin-right: 15px;
}

.flowBoxLeft {
    float: left !important;
    margin-right: 15px;
}

.flowBoxRight {
    float: right !important;
    margin-right: 0;
}

/* FULLSCREEN */
#overlayer {
    width: 100%;
    height: calc(100% - 55px);
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    top: 55px;
    left: 0;
    z-index: 99999;
    background-image: url('../../public/images/spinner.gif');
    background-repeat: no-repeat;
    background-position: center;
}

    #overlayer.fullscreen {
        position: fixed;
        top: 0;
        height: 100%;
    }

body.setWhiteBg {
    background-color: white !important;
    background: none;
}

#MiddlePanel.fullscreen {
    position: absolute !important;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    margin: 0;
}

    #MiddlePanel.fullscreen nav#menuAdminNav {
        display: none;
    }

    #MiddlePanel.fullscreen div#top {
        position: fixed;
        top: 5px;
        left: 5px;
        z-index: 9999;
    }

    #MiddlePanel.fullscreen div#reportStructure {
        position: fixed;
        left: 5px;
        right: 0;
        bottom: 0;
        top: 55px;
    }

    #MiddlePanel.fullscreen div#documentWrapper {
        position: fixed;
        top: 81px;
        right: 215px;
        left: 5px;
        bottom: 5px;
    }

    #MiddlePanel.fullscreen div#subMenuRight {
        float: right;
        margin-right: 10px;
        position: fixed;
        top: 40px;
        right: 0;
        z-index: 9999;
        background-color: white;
    }

    #MiddlePanel.fullscreen div#documentContent {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: inherit;
    }

    #MiddlePanel.fullscreen div#userToolBar:not(.notFixed) {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background-color: white;
    }

    #MiddlePanel.fullscreen div#pageThumbsDoc {
        height: calc(100% - 50px);
    }

    #MiddlePanel.fullscreen div#rulerPageBox {
        z-index: 10;
    }

    #MiddlePanel.fullscreen div#messageUser {
        top: 5px;
    }

    #MiddlePanel.fullscreen div#pageSlider {
        position: relative;
        right: 0;
    }

    #MiddlePanel.fullscreen div#zoomContainer {
        margin: 18px 0 0 18px;
    }

@media (min-width: 1260px) {
}

@media (min-width: 1590px) {
    #MiddlePanel.fullscreen div#documentWrapper {
        top: 48px;
    }

    #MiddlePanel.fullscreen div#subMenuRight {
        top: 46px;
    }
}

/* PAGE FORMATS */
div#Publisher div.pageContent {
    margin: 0;
    display: block;
}
/* A4 */
div#Publisher .pageContent.paperA4:not(ul), div#Publisher .paperA4.portrait:not(ul) {
    width: 793px;
    height: 1122px;
}

div#Publisher .pageContent.paperA4.landscape:not(ul) {
    width: 1122px;
    height: 793px;
}
/* US */
div#Publisher .pageContent.paperUS:not(ul), div#Publisher .paperUS.portrait:not(ul) {
    width: 815px;
    height: 1055px;
}

div#Publisher .pageContent.paperUS.landscape:not(ul) {
    width: 1055px;
    height: 815px;
}

.availableSpaceContainer.cke_editable_inline p {
    line-height: 1; /*font-size: 12px;*/
}

/* RULER / PAGE BOX */

div#rulerPageBox {
    width: 708px;
    background-color: lightgray;
    position: absolute;
    z-index: 10;
    text-align: left;
}

ul#horRuler {
    background-color: lightgrey;
    position: relative;
    z-index: 2;
}

ul#verRuler {
    padding-right: 37mm; /* will cover the overlay between the horizontal ruler*/
    background-color: lightgrey;
    z-index: 9999;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: top left;
    transform: rotate(-90deg);
    transform-origin: top left;
    position: absolute;
    top: 746px;
    left: 0;
}

.ruler, .ruler li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
    /* IE6-7 Fix */
    .ruler, .ruler li {
        *display: inline;
    }

.ruler {
    color: dimgray;
    margin: 0;
    height: 18px;
    padding-right: 1cm;
    white-space: nowrap;
}

    .ruler li {
        width: 2em;
        margin: .64em -1em -.64em;
        text-align: center;
        position: absolute;
        font-size: 10px;
    }

ul#horRuler.paperA4.portrait {
    width: 793px;
}

ul#horRuler.paperA4.landscape {
    width: 1122px;
}

ul#horRuler.paperUS.portrait {
    width: 815px;
}

ul#horRuler.paperUS.landscape {
    width: 1055px;
}

ul#verRuler.paperA4.portrait {
    width: 1122px;
}

ul#verRuler.paperA4.landscape {
    width: 793px;
}

ul#verRuler.paperUS.portrait {
    width: 1055px;
}

ul#verRuler.paperUS.landscape {
    width: 815px;
}

.ruler li:after {
    content: '';
    position: absolute;
    border-left: 1px solid dimgray;
    height: .64em;
    top: -.64em;
    right: 1em;
}

.ruler li:nth-child(even):after {
    height: .32em;
}

ul#verRuler li:after {
    height: .32em;
}

ul#verRuler li:nth-child(even):after {
    height: .64em;
}

/* will be used for hover over ruler, so line ruler is shown over the whole page*/
.ruler li {
    min-width: 12px;
    min-height: 16px;
}

    .ruler li:hover, .ruler li.active {
        color: white;
        background-color: dimgray;
    }

        ul#verRuler li:hover:after, ul#verRuler li.active:after, .ruler li:hover:after, .ruler li.active:after {
            height: 1122px;
            border-color: dimgray;
            z-index: -1;
        }

/* page box */
div#Publisher div#pageNumberInd {
    position: absolute;
    top: -1px;
    right: 0;
    width: 79px;
    height: 19px;
    font-size: 12px;
    color: dimgray;
    line-height: 12px;
    background-color: white;
    border-left: 1px solid darkgray;
    z-index: 11;
}

    div#Publisher div#pageNumberInd input {
        font-size: 12px;
        width: 25px;
        height: 10px;
        float: left;
        margin: 2px 0 0 10px;
        line-height: 12px;
        text-align: center;
        outline: 0;
    }

/* PAGE SLIDER */
div#Publisher div#documentWrapper, div#Publisher div#documentWrapper div#pageSlider {
    border-radius: 0;
}

div#Publisher div#pageSlider {
    width: 80px;
    height: calc(100% - 18px);
    overflow: hidden;
    margin-top: 18px;
}

    div#Publisher div#pageSlider .scrollArrow {
        margin: 3px 0 0 22px;
    }

    div#Publisher div#pageSlider .sliderPart {
        display: inherit;
    }

    div#Publisher div#pageSlider .scrollBtn, div#Publisher div#pageSlider div#pageThumbsDoc {
        width: 80px;
    }

    div#Publisher div#pageSlider #goUp, div#Publisher div#pageSlider #goDown {
        border-radius: 0;
    }

/* OPTIONS MENU - right */
.gradientAcc2 {
    background-color: White;
}

div#Publisher div#subMenuRight {
    float: right;
}

    div#Publisher div#subMenuRight .accordion a {
        font-size: 10px;
        color: dimgray;
        outline: none;
        margin-top: 2px;
    }

    div#Publisher div#subMenuRight .ui-icon {
        opacity: 0.8;
    }

    div#Publisher div#subMenuRight .ui-corner-top, div#Publisher div#subMenuRight .ui-corner-all, div#Publisher div#subMenuRight .ui-corner-bottom {
        border-radius: 0;
    }

    div#Publisher div#subMenuRight .toolbaritem, #pageFullScreenbtn {
        font-size: 20px;
        margin-right: 5px;
        color: darkgray;
        position: relative;
    }

        div#Publisher div#subMenuRight .toolbaritem .icon:hover, div#Publisher div#subMenuRight div#orientationConfig .icon:hover, #pageFullScreenbtn:hover {
            color: black;
            cursor: pointer;
        }

    div#Publisher div#subMenuRight div#pageOptions .toolbaritem:hover .innerIcon.green {
        color: Green;
    }

    div#Publisher div#subMenuRight div#pageOptions .toolbaritem:hover .innerIcon.red {
        color: Red;
    }

    div#Publisher div#subMenuRight .innerIcon {
        position: absolute;
        top: 5px;
        left: 4px;
        font-size: 12px;
    }

    div#Publisher div#subMenuRight button {
        background-color: lightgray;
        cursor: pointer;
        width: 30px;
        height: 22px;
        line-height: 25px;
        color: darkgray;
        padding: 0;
        margin: 0;
    }

        div#Publisher div#subMenuRight button:hover {
            color: black;
        }

    div#Publisher div#subMenuRight .legendStyle legend {
        margin-left: 0;
    }

    div#Publisher div#subMenuRight div#pageFormatBox {
        margin-top: 5px;
    }

    div#Publisher div#subMenuRight div#marginConfig {
        margin-top: 13px;
    }

        div#Publisher div#subMenuRight div#marginConfig legend {
            margin: 0 0 0 0;
        }

    div#Publisher div#subMenuRight div#orientationConfig {
        margin-top: 13px;
    }

        div#Publisher div#subMenuRight div#orientationConfig .icon {
            font-size: 20px;
            color: darkgray;
        }

        div#Publisher div#subMenuRight div#orientationConfig legend {
            margin: 0 0 3px 0;
        }

    div#Publisher div#subMenuRight div#orientationBox {
        width: 65px;
    }

        div#Publisher div#subMenuRight div#orientationBox > .icon:hover .innerIcon.green {
            color: Green;
        }

        div#Publisher div#subMenuRight div#orientationBox > .icon:hover .innerIcon.red {
            color: Red;
        }

        div#Publisher div#subMenuRight div#orientationBox .icon {
            font-size: 20px;
            float: left;
            color: darkgray;
            padding: 1px 0;
            margin-left: 2px;
        }

            div#Publisher div#subMenuRight div#orientationBox .icon:not(:first-child) {
                margin-left: 10px;
            }

    div#Publisher div#subMenuRight div#orientationConfig .icon.icon-arrow-right-8:hover {
        cursor: default;
        color: darkgray;
    }
    /* zooming */
    div#Publisher div#subMenuRight div#gridbox #rate {
        padding: 0 2px;
        height: 25px;
    }

    div#Publisher div#subMenuRight div#gridbox {
        margin-left: 3px;
    }

    div#Publisher div#subMenuRight div#zoomPredefined {
        width: 105px;
        float: left;
        margin-top: 10px;
        height: 56px;
    }

        div#Publisher div#subMenuRight div#zoomPredefined legend {
            margin-left: 0;
        }

        div#Publisher div#subMenuRight div#zoomPredefined .icon:hover {
            color: Black;
            cursor: pointer;
        }

        div#Publisher div#subMenuRight div#zoomPredefined #zoom100 {
            margin-left: 4px;
        }

        div#Publisher div#subMenuRight div#zoomPredefined #zoom1Page, div#Publisher div#subMenuRight #zoomPredefined #zoom2Pages {
            margin-left: 8px;
        }

    div#Publisher div#subMenuRight div#fullScreenBox {
        float: right;
        margin-top: 10px;
    }

div#Publisher div#zoomContainer div.pageZoomWrapper {
    position: relative;
    display: inline-block; /*overflow: hidden;*/
    margin: 8px;
}

.pageZoomWrapper.activePage {
    -moz-box-shadow: 3px 3px 2px #888;
    -webkit-box-shadow: 3px 3px 2px #888;
    box-shadow: 3px 3px 2px #888;
}
/*  report information */
div#Publisher div#infoDesignDiv {
    min-height: 200px;
    overflow: hidden;
}

    div#Publisher div#infoDesignDiv > div {
        margin-top: 5px;
    }

    div#Publisher div#infoDesignDiv .infoValue {
        color: dimgray;
        text-align: left;
        width: 155px;
        line-height: 15px;
        position: relative;
        top: -3px;
    }

/* document itself */
div#Publisher div#documentWrapper {
    position: relative;
}

div#Publisher div#zoomContainer {
    background-color: lightgray;
    margin: 18px 0 0 18px;
}

div#Publisher div#documentContent {
    background-color: lightgray;
    padding-right: 18px;
}

div#Publisher div.pageContent:focus {
    outline: none;
}

/* ATTACHMENTS ACC */
div#attachmentDiv {
    height: 107px;
}

    div#attachmentDiv table#attachmentTable {
        width: 192px;
        height: 52px;
        overflow-y: scroll;
        margin-top: -5px;
        font-size: 10px;
        display: inline-block;
    }

        div#attachmentDiv table#attachmentTable tr td:first-child {
            width: 170px;
            color: dimgray;
            cursor: help;
        }

    div#attachmentDiv span.statusAttIcon:hover {
        cursor: pointer;
    }

    div#attachmentDiv span.statusAttIcon.green:hover {
        color: Green !important;
    }

    div#attachmentDiv span.statusAttIcon.red {
        font-size: 14px;
        color: #a9a9a9;
    }

        div#attachmentDiv span.statusAttIcon.red:hover {
            color: Red !important;
        }

/* POPUPS */

/* SAVE */
div#saveNewReport {
    width: 400px;
}
/* PDF */
div#createPDF {
    width: 360px;
}

/*************************/
/* PUBLISH WIZARD (old)  */
/*************************/

td.toolbaritem {
    cursor: pointer;
}

.controlBar td.toolbaritem {
    float: none;
}

.publishWizard .toolbaritem {
    margin: 0 2px;
}

.publishWizard .fadedAction {
    pointer-events: none;
    opacity: 0.33;
}

div#reportStructure {
    min-height: 720px;
}

/* TOOLBAR */

/* DOCUMENT */
div#documentWrapper {
    width: 700px;
    height: 862px;
    border: 1px solid #aaa;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin: 0 5px 0 5px;
    float: left;
}

/* DOCUMENT STRUCTURE */

div#documentContent, div#documentContentTpl {
    position: absolute;
    width: 620px; /* 690 - 2px border - 50px pageSlider -10px margin-left*/
    height: 860px;
    float: left;
    background-color: #ccc;
    overflow: scroll;
    text-align: center;
}

div.pageContent {
    background-color: White;
    /* width: 590px;  /*600 max*/
    /* min-height: 650px; /* 678 max*/
    -moz-box-shadow: 3px 3px 2px #888;
    -webkit-box-shadow: 3px 3px 2px #888;
    box-shadow: 3px 3px 2px #888;
    margin: 8px;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    position: relative;
}

    /* reset for inline text document */
    div.pageContent p {
        margin: 0;
    }

    div.pageContent > div.availableSpaceContainer {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

.paperA4:not(ul), .paperA4.portrait:not(ul) {
    width: 1024px;
    height: 1449px;
}

    .paperA4:not(ul).landscape {
        width: 1449px;
        height: 1024px;
    }

.paperUS:not(ul), .paperUS:not(ul).portrait {
    width: 1024px;
    height: 1350px;
}

    .paperUS:not(ul).landscape {
        width: 1350px;
        height: 1024px;
    }

.activePage:not(.pageZoomWrapper) {
    border: 1px solid #797979;
    box-sizing: border-box;
}

.activePage:focus, .activePage:active {
    /*outline-color: #3a6afc;*/
    outline: none;
}

/* page margins */
div#marginHorizontalLines {
    bottom: 6px;
    top: 6px;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 0;
    border-top: 1px dashed darkgray;
    border-bottom: 1px dashed darkgray;
}

div#marginVerticalLines {
    left: 13px;
    right: 13px;
    bottom: 0;
    top: 0;
    position: absolute;
    z-index: 0;
    border-left: 1px dashed darkgray;
    border-right: 1px dashed darkgray;
}

.setBorderBoxMargin {
    border: 1px solid #9C9C9C;
    box-sizing: border-box;
}

div#pageSlider, div#pageSliderTpl {
    width: 78px;
    height: 860px; /*same height as reportStructure */
    background-color: #ededed;
    float: right;
    border-left: 1px solid #aaa;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
}

    div#pageSlider .borderThumb {
        border: 1px solid #797979;
    }

    div#pageSlider .pageThumb {
        background-color: White;
        width: 50px;
        height: 70px;
        margin: 6px auto;
        cursor: pointer;
        text-align: center;
        background-image: url('../../Public/Images/loading.gif');
        background-position: center;
        background-repeat: no-repeat;
    }

    div#pageSlider .sliderPart {
        display: none;
    }

    div#pageSlider .scrollBtn {
        background-color: #388372;
        height: 25px;
        width: 77px;
    }

        div#pageSlider .scrollBtn img {
            height: 18px;
            width: 37px;
            opacity: 0.5;
        }

    div#pageSlider #goUp {
        border-top-right-radius: 3px;
    }

    div#pageSlider #goDown {
        border-bottom-right-radius: 3px;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    div#pageSlider .scrollArrow {
        margin: 3px 0 0 21px;
    }

    div#pageSlider img.activeScrollBtn {
        opacity: 1;
        cursor: pointer;
    }

    div#pageSlider #pageThumbsDoc {
        height: 795px;
        width: 77px;
        overflow: hidden;
        background-color: #C2DACD;
    }

        div#pageSlider #pageThumbsDoc .portrait {
            width: 50px;
            height: 70px;
        }

        div#pageSlider #pageThumbsDoc .landscape {
            width: 70px;
            height: 50px;
        }

/* SUB MENU RIGHT */
div#subMenuRight {
    width: 220px;
    height: 810px;
    margin-top: -1px;
    float: left;
    font-size: 12px;
}

    div#subMenuRight tr {
        background-color: transparent;
    }

    /* jQuery UI fixes !!! */
    div#subMenuRight .ui-widget-content {
        background-color: White;
        font-family: Verdana;
    }

    div#subMenuRight fieldset {
        border: none;
    }

    div#subMenuRight .ui-accordion-content {
        width: 214px;
    }

table#optionsElement, table#optionsPage {
    margin: 5px;
}

/* ACCORDION - jQuery UI*/
.gradientAcc {
    background-image: linear-gradient(bottom, rgb(193,218,205) 22%, rgb(255,255,255) 57%);
    background-image: -o-linear-gradient(bottom, rgb(193,218,205) 22%, rgb(255,255,255) 57%);
    background-image: -moz-linear-gradient(bottom, rgb(193,218,205) 22%, rgb(255,255,255) 57%);
    background-image: -webkit-linear-gradient(bottom, rgb(193,218,205) 22%, rgb(255,255,255) 57%);
    background-image: -ms-linear-gradient(bottom, rgb(193,218,205) 22%, rgb(255,255,255) 57%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.22, rgb(193,218,205)), color-stop(0.57, rgb(255,255,255)) );
}

/* TEXT / IMAGE ACTIONS */
div#editor #textButtons {
    position: absolute;
    top: 300px;
    left: 400px;
}

.textElement, .imageElement {
    position: absolute;
    cursor: pointer;
}

.activeElement {
    border: 1px solid gray;
    box-sizing: border-box;
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

.unZoom {
    /* zoom: 0.57;
    -moz-transform: scale(0.57);
    -moz-transform-origin: 0 0;*/
}

/* DRAG AND DROP */

#zoomContainer .draggable {
    width: 90px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 0 10px 10px 0;
}

#zoomContainer #draggable, #draggable2 {
    margin-bottom: 20px;
}

#zoomContainer #draggable {
    cursor: n-resize;
}

#zoomContainer #draggable2 {
    cursor: e-resize;
}

#zoomContainer #containment-wrapper {
    width: 95%;
    height: 150px;
    border: 2px solid #ccc;
    padding: 10px;
}

/* Fullscreen */
#ContentContainer.fullscreen {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    margin: 0;
}

    #ContentContainer.fullscreen div#reportStructure {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 40px;
    }

    #ContentContainer.fullscreen div#documentWrapper {
        position: fixed;
        top: 40px;
        right: 215px;
        left: 0;
        bottom: 0;
    }

    #ContentContainer.fullscreen div#subMenuRight {
        float: right;
    }

    #ContentContainer.fullscreen div#documentContent {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: inherit;
    }

/* Audit properties */
p#pickAudit {
    margin: 10px 0 0 9px;
    float: left;
}

dl#infoDesignList {
    line-height: 20px;
    float: left;
    margin: 10px 0 0 5px;
}

    dl#infoDesignList dt {
        font-weight: bold;
        width: 100px;
        float: left;
        margin-left: 7px;
    }

    dl#infoDesignList dd {
        margin: 0 0 0 0;
        float: left;
    }

        dl#infoDesignList dd#linkedAuditOptions {
            margin: 10px 0 0 0;
            padding-bottom: 5px;
            height: 31px;
        }

.grayScale {
    opacity: 0.6;
    filter: alpha(opacity=60);
    zoom: 1;
    -moz-transform: scale(1);
}

/* report properties */
img#selectDesignImg {
    width: 32px;
    margin: 0 15px 10px 0;
    float: left;
}

p#pickDesign {
    margin: 3px 0 0 7px;
    width: 200px;
    float: left;
}

button#linkDesignBtn {
    margin: 5px 55px 0 0;
    float: right;
}

#linkedDesignTxt {
    display: inline;
    float: left;
    width: 145px;
}

#pageFormat {
    padding-top: 10px;
}

img#pageFormatImg {
    float: left;
    width: 32px;
    margin: 0 0 0 10px;
}

select#dropDownFormat {
    margin: 0 0 0 15px;
    padding: 5px;
    width: 139px;
    cursor: pointer;
}

div#marginConfig {
    margin: 18px 0 0 0;
}

    div#marginConfig legend {
        margin: 0 0 7px 0;
    }

div.marginBox {
    width: 85px;
    float: left;
}

div#orientationConfig {
    margin: 15px 0 0 0;
}

    div#orientationConfig legend {
        margin: 0 0 7px 7px;
    }

div#orientationBox {
    width: 104px;
    float: left;
}

    div#orientationBox img {
        margin: 0 0 0 8px;
        cursor: pointer;
    }

#setAllPagesBtn {
    margin-right: 7px;
}

/* zoom properties */
#fixedZoom {
    margin: 5px 0 0 0;
}

#zoomPercentages tr {
    float: left;
    margin: 0 0 0 6px;
    background-color: transparent;
}

    #zoomPercentages tr input {
        margin: 0 2px 0 0;
    }

div#zoomSlider {
    margin: 15px 0 0 0;
}

    div#zoomSlider fieldset {
        margin: -10px 0 0 0;
    }

div#gridbox {
    margin: 10px 0 0 7px;
    float: left;
}

    div#gridbox #rate {
        width: 45px;
        float: left;
        margin: -6px 10px 0 0;
        padding: 3px;
    }

div#sliderBox2 {
    width: 100px;
    float: left;
}

#zoomPredefined fieldset {
    margin: 0 0 0 0;
}

#zoomPredefined {
    margin: 15px 0 0 0;
}

    #zoomPredefined img {
        margin: 0 0 0 10px;
    }

    #zoomPredefined #zoom1Page, #zoomPredefined #zoom2Pages {
        margin: 0 0 0 25px;
    }

img.iconAcc {
    width: 25px;
    margin-top: -5px;
    float: right;
}

div#subMenuRight .ui-accordion .ui-accordion-content {
    padding: 2px;
    position: relative;
    margin-top: -2px;
    border-top: 0;
}

div#subMenuRight .ui-accordion .ui-accordion-header {
    font-weight: bold;
    font-size: 12px;
    font-family: Verdana;
}

    div#subMenuRight .ui-accordion .ui-accordion-header a {
        padding: .7em .5em .7em .7em;
        margin-left: 20px;
    }

/* POPUP styles */

.popUpInitClass {
    position: absolute;
    visibility: hidden;
}

button, input[type="button"], input[type="submit"] {
    padding: 5px 10px;
}

/* OPEN DOC POPUP */
div#openDocsPopUp {
    text-align: left;
}

dl#liveSearchDoc {
    width: 720px;
    float: left;
    margin: 25px 0 25px 210px;
}

    dl#liveSearchDoc dt {
        font-weight: bold;
        float: left;
        line-height: 35px;
    }

    dl#liveSearchDoc #liveSearch {
        width: 300px;
        float: left;
        margin-left: 35px;
        padding: 5px;
    }

dl dt#lastModified {
    font-weight: bold;
    width: 670px;
}

dl#documentList {
    height: 335px;
    width: 870px;
    overflow-y: scroll;
}

    dl#documentList dd {
        width: 850px;
        float: left;
        margin: 0 0;
        line-height: 33px;
    }

        dl#documentList dd a {
            font-weight: bold;
        }

            dl#documentList dd a:hover {
                color: Blue;
            }

.docName {
    width: 270px;
    float: left;
}

.docCreated {
    width: 180px;
    float: left;
    margin-right: 30px;
}

.docAuditName {
    width: 250px;
    float: left;
}

.actionDocImg input {
    width: 20px;
    height: 20px;
    float: left;
    padding: 5px 10px;
}

#seeMoreDocs {
    margin-top: 10px;
    text-decoration: none;
    float: left;
}

#confirmationReport #messageDeleteConfirm {
    color: Black;
}

#confirmationReport legend {
    color: Red;
    font-weight: bold;
}

#confirmationReport fieldset {
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}

#deleteReportOKbtn {
    margin-left: 50px;
}

#deleteConfirmation input {
    float: none;
    margin-top: 11px;
}

/* LINK DESIGN POPUP */
table#designsTable {
    text-align: left;
    width: 600px;
}

    table#designsTable th#designName {
        width: 270px;
    }

    table#designsTable th#creationDate {
        width: 350px;
    }

    table#designsTable th#actions {
        width: 100px;
    }

    table#designsTable th {
        color: Gray;
        font-variant: small-caps;
        font-size: 14px;
        margin: 10px 0 -5px 0;
        font-weight: normal;
        text-transform: lowercase;
    }

    table#designsTable tr td a {
        font-weight: bold;
        text-decoration: none;
    }

        table#designsTable tr td a:hover {
            color: Blue;
        }

dl#liveSearchDesigns {
    width: 370px;
    float: left;
    margin: 0 0 25px 90px;
}

    dl#liveSearchDesigns dt {
        font-weight: bold;
        float: left;
        line-height: 35px;
    }

    dl#liveSearchDesigns #liveSearchDesign {
        width: 200px;
        float: left;
        margin-left: 35px;
        padding: 5px;
    }

table#designsTable .actionDocImg input {
    padding: 5px 10px 5px 0;
    width: 22px;
    height: 22px;
}

/* IMAGE PROPERTIES POPUP */
#optionsImage input, #optionsImage select {
    float: left;
    padding: 5px;
    margin-top: 3px;
}

#optionsImage .fixedWidth {
    width: 150px;
    float: left;
}

    #optionsImage .fixedWidth img {
        float: left;
        margin: 0 10px 0 6px;
    }

span#aspectRatioSpan input {
    margin: 11px 10px 0 0;
}

span#aspectRatioSpan label {
    line-height: 34px;
}

#layerOptions .fixedWidth {
    width: 160px;
    float: left;
}

.fixedWidth p {
    float: right;
    margin-right: 19px;
    margin-top: 8px;
    color: #ccc;
}

#layerOptions input, #layerOptions select {
    float: left;
    margin-right: 10px;
}

#imagePropPopUp legend {
    margin-left: 10px;
    padding: 5px;
}

#imagePropPopUp fieldset {
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #CCC;
}

/* CENTRALIZE POPUP */
#notificationNotSaved, #saveNewReport, #linkDesignPopUp, #openDocsPopUp, #createPDF {
    float: left;
    text-align: center;
}

/* STANDARD styles */
.legendStyle fieldset {
    width: inherit;
}

.legendStyle legend {
    font-size: 11px;
    font-weight: bold;
    color: #727274;
    margin-left: 7px;
}

/* PUBLISH WIZARD end */

/********************/
/* dhtmlx SLIDER    */
/********************/
.dhtmlxSlider_arrowgreen { /* Arrow green skin */
    position: relative;
    height: 21px;
    float: left;
    margin-right: 10px;
}

    .dhtmlxSlider_arrowgreen .selector {
        position: absolute;
        overflow: hidden;
        height: 16px;
        width: 15px;
        left: 0;
    }

    .dhtmlxSlider_arrowgreen .leftSide {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
    }

    .dhtmlxSlider_arrowgreen .leftZone {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }

    .dhtmlxSlider_arrowgreen .rightSide {
        position: absolute;
        right: 0;
        top: 0;
        width: 0;
        height: 100%;
    }

    .dhtmlxSlider_arrowgreen .rightZone {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
    }

#gridbox label {
    margin-right: 10px;
}

/* SLIDER end */

/*****************
------------------
--- USER ADMIN ---
------------------
******************/

/*#region GENERAL */

#menuAdminNav {
    font-variant: small-caps;
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 1.5em;
    height: 39px;
    margin-top: 10px;
}

    #menuAdminNav a {
        text-decoration: none;
        color: #666;
        margin-right: 5px;
        padding: 3px 10px 0 10px;
        height: 34px;
        cursor: pointer; /* 40px height toolbar - 3px padding -2px border */
        float: left;
    }

    #menuAdminNav > a.active {
        border: 1px solid darkGray;
        border-bottom: none;
        background-color: white;
        padding-top: 4px !important; /*border-radius: 5px 5px 0 0;*/
    }

        #menuAdminNav > a.active:after {
            content: attr(title);
            margin-right: 0.5ex;
            margin-left: 1ex;
        }

    #menuAdminNav a img {
        vertical-align: middle;
    }

    #menuAdminNav a.active img {
        padding-top: 0 !important;
    }

/*INFO MESSAGE */
div#messageUser {
    position: absolute;
    top: 7px;
    right: 10px;
    height: 32px;
    width: 200px;
    /*border-radius: 5px;*/
    background-color: #fff;
    padding-left: 5px;
    line-height: 35px;
    color: #808080;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid darkgray;
}

    div#messageUser > span#messageUserTxt {
        font-size: 12px;
        letter-spacing: normal;
    }

        div#messageUser > span#messageUserTxt > img {
            width: 16px;
            height: 16px;
            margin-right: 0.5ex;
            cursor: auto; /* undo toolbar 'button' effect */
        }

/* boxes */
.infoBox {
    background-color: #eee;
    text-align: left;
    border: 1px solid #a9a9a9;
    padding: 0 10px;
}

#deletedAuditsBox .infoBox {
    width: 47%;
}

#containerSearchDeletedAudits input, #containerSearchResultDeletedAudits input {
    width: 329px !important;
}

.headerBox {
    background-color: darkGray;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    font-variant: small-caps;
    padding: 0 0 0 10px;
    margin-bottom: 15px;
    margin: 0 -10px 10px -10px;
    font-size: 11px;
    text-transform: uppercase;
}

.designBox {
    position: relative;
}

/*#endregion GENERAL */

/*#region USER INFO */

/*-----------*/
/* USER INFO */
/*-----------*/

div#userIdentity {
    width: 400px;
    height: 240px;
    display: inline-block;
    margin-bottom: 9px;
    float: left;
    margin-right: 9px;
}

div#userInfo {
    width: 487px;
    height: 665px;
    display: inline-block;
    margin-bottom: 8px;
    float: right;
}

    div#userInfo div#actionsUser img {
        margin-right: 8px;
    }

div#userPassword, div#userSubscription {
    width: 400px;
    display: inline-block;
    margin-bottom: 8px;
    float: left;
    margin-right: 9px;
}

table#userIdentityTxt {
    float: left;
    margin-top: 5px;
    font-size: 13px;
    line-height: 25px;
}

    table#userIdentityTxt td:first-child {
        font-weight: bold;
        width: 110px;
    }

img#userIdentityImg {
    float: right;
    margin-top: 65px;
    position: absolute;
    left: 300px;
}

table#userPasswordTxt, table#userSubscriptionTxt {
    float: left;
    margin-top: 5px;
    font-size: 13px;
    line-height: 25px;
    margin-bottom: 5px;
    width: 100%;
}

    table#userPasswordTxt td:first-child, table#userSubscriptionTxt td:first-child {
        font-weight: bold;
        width: 175px;
    }

    table#userPasswordTxt select, table#userPasswordTxt input {
        margin: 0;
    }

#lblVATNumberCountryPrefix {
    text-transform: uppercase;
}

/*#endregion USER INFO */

/*#region USERS MANAGEMENT */

/*------------------*/
/* USERS MANAGEMENT */
/*------------------*/

img.smallToolbarIcons {
    width: 25px;
}

/* filters user */
div#filterUsers, div#filterActions {
    height: 40px;
    margin: -19px 0 15px 0;
    border: 1px solid darkgray;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*border-radius: 5px;*/
    background-color: white;
    z-index: -10;
    color: Gray;
    font-size: 13px;
    margin-bottom: 1.5em;
}

    div#filterUsers img, div#filterActions img {
        vertical-align: middle;
    }

dl#liveSearchUser {
    width: 400px;
    margin: 7px 0 0 16px;
}

    dl#liveSearchUser dt {
        font-weight: bold;
        float: left;
    }

    dl#liveSearchUser #liveSearchUserTxt {
        width: 220px;
        float: left;
        margin-left: 10px;
        padding: 3px;
        margin-top: 0;
        background-color: #F8F8F8;
    }

div#filterUsers div#AccountTypes {
    height: 53px;
    margin: 3px 0 0 20px;
    float: left;
}

div#filterActions div#actionTypes {
    margin: 6px 0 0 20px;
}

div#AccountTypes .accountType {
    min-width: 75px;
    margin-right: 10px;
    float: left;
    cursor: pointer;
}

div#AccountTypes .accountTypes {
    margin-right: 5px;
    font-size: 11px;
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div#AccountTypes .compTypes {
    margin-right: 5px;
    font-size: 11px;
    /*width: 110px;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


div#AccountTypes .accountType:hover {
    opacity: 1;
}

div#AccountTypes div.accountType.activeBtn, div.accountType.activeBtn {
    background-color: #eee;
    border-radius: 0px;
    border: 1px solid #ccc;
    padding: 1px 5px 1px 1px;
    margin: -2px 10px 0 -2px;
}

/* users list display */
div#displayedUsers {
    border: 1px solid darkgray;
    background-color: #eee;
    width: 418px; /*420px - 2 px border width */
    height: 625px;
    margin-bottom: 15px;
    position: absolute;
}

#displayedDeletedAudits {
    border: 1px solid darkgray;
    background-color: #eee;
    width: 940px; /* 420px - 2 px border width */
    height: 484px;
    margin-bottom: 15px;
    position: absolute;
}

#tableDisplayedUsers tbody tr {
    background-color: #eee;
}

    #tableDisplayedUsers tbody tr td:nth-child(2) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #tableDisplayedUsers tbody tr td:nth-child(3) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #tableDisplayedUsers tbody tr td:nth-child(4) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#tableDisplayedCompTables tbody tr td:nth-child(2) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableDisplayedCompTables tbody tr td:nth-child(3) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableDisplayedCompTables tbody tr td:nth-child(4) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableDisplayedCompTables tbody tr td:nth-child(5) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div#displayedUsers table#tableDisplayedUsers, #tableDisplayedCompTables, #tableDisplayedAudits, #tableDisplayedReports, #tableDisplayedSimulations {
    width: inherit;
    line-height: 26px;
    max-height: 436px;
    border-spacing: 0;
    font-size: 12px;
}

#deletedAuditsFound {
    max-height: 458px;
    width: inherit;
    line-height: 26px;
    border-spacing: 0;
    font-size: 12px;
}

    div#displayedUsers table#tableDisplayedUsers thead tr, table#tableDisplayedUsers, #tableDisplayedCompTables thead tr, #tableDisplayedAudits thead tr, #tableDisplayedReports thead tr, #tableDisplayedSimulations thead tr, #deletedAuditsFound thead tr {
        background-color: darkgray;
    }

    div#displayedUsers table#tableDisplayedUsers thead, #tableDisplayedCompTables thead, #tableDisplayedAudits thead, #tableDisplayedReports thead, #tableDisplayedSimulations thead, #deletedAuditsFound thead {
        background-color: darkgray;
        line-height: 30px;
        font-size: 14px;
        font-weight: bold;
        font-variant: small-caps;
    }

    div#displayedUsers table#tableDisplayedUsers tbody tr:hover, #tableDisplayedCompTables tbody tr:hover, #tableDisplayedAudits tbody tr:hover, #tableDisplayedReports tbody tr:hover, #tableDisplayedSimulations tbody tr:hover, #deletedAuditsFound tbody tr:hover {
        background-color: #fff;
        cursor: pointer;
    }

    #tableDisplayedAudits tbody tr td:nth-child(2) div img, #deletedAuditsFound tbody tr td:nth-child(2) div img {
        margin-left: 5px;
    }

    #tableDisplayedAudits tbody tr td:nth-child(2) div, #tableDisplayedSimulations tbody tr td:nth-child(2) div, #deletedAuditsFound tbody tr td:nth-child(2) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #tableDisplayedAudits tbody tr td:nth-child(3) div, #tableDisplayedSimulations tbody tr td:nth-child(3) div, #deletedAuditsFound tbody tr td:nth-child(3) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #tableDisplayedAudits tbody tr td:nth-child(4) div, #tableDisplayedSimulations tbody tr td:nth-child(4) div, #deletedAuditsFound tbody tr td:nth-child(4) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

.grayedRow {
    background-color: darkgray;
    height: 32px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

#tableDisplayedAudits tbody tr.activeRow, #tableDisplayedReports tbody tr.activeRow, #tableDisplayedSimulations tbody tr.activeRow, #deletedAuditsFound tbody tr.activeRow {
    background-color: white;
}

/*page navigation */
div#pageNavigation {
    margin: 1px 0 0 5px;
}

    div#pageNavigation img {
        margin-top: 7px;
        float: left;
    }

    div#pageNavigation input {
        float: left;
        text-align: center;
        width: 30px;
        margin-top: 5px;
    }

div#legend {
    margin: 3px 0 0 10px;
    float: left;
}

    div#legend > span {
        height: 25px;
        float: left;
        line-height: 25px;
        margin-right: 8px;
        padding: 0 3px;
        font-size: 13px;
    }

/*#tableDisplayedUsers .adminLegend {
    background-color: #deffc4;
}

#tableDisplayedUsers .guestLegend {
    background-color: #ffefc1;
}

#tableDisplayedUsers .deletedLegend {
    background-color: #F58686;
}*/

.guestUser span {
    background-color: #ffefc1;
    width: 10px;
    height: 10px;
    float: left;
    margin: 8px 5px 0 0;
}

.normalUser span {
    background-color: #eee;
    width: 10px;
    height: 10px;
    float: left;
    margin: 8px 5px 0 0;
}

.adminUser span {
    background-color: #deffc4;
    width: 10px;
    height: 10px;
    float: left;
    margin: 8px 5px 0 0;
}

/* specific info user */
div#infoUser, div#infoAudit, #infoComp {
    width: 507px;
    min-height: 625px;
    margin-bottom: 15px;
    position: absolute;
    right: 0;
    border: 1px solid darkgray;
}

    div#infoUser div#actionsUser, div#infoAudit div#actionsUser, #infoComp div#actionsUser {
        height: 30px;
        background-color: darkGray;
        padding: 2px 0 0 5px;
    }

        div#infoUser div#actionsUser img, div#infoAudit div#actionUser img, #infoComp div#actionUser {
            margin-right: 8px;
        }

table#userData, table#compData, table#auditData, table#shareAuditTable, table#mailModule, table#exportAuditTable, table#compDataCommunity {
    width: 485px;
    height: 624px;
    font-size: 13px;
    margin-left: 10px;
    margin-top: 5px;
}

table#auditData {
    height: 425px;
}

table#shareAuditTable {
    height: 110px;
}

table#mailModule {
    height: 350px;
}

table#compData {
    height: 410px;
}

table#compDataCommunity {
    height: 77px;
    margin-left: 0;
}

table#exportAuditTable {
    height: auto;
    min-height: 160px;
}

table#userData tr, table#compData tr, table#auditData tr, table#compDataCommunity tr { /* width: 175px; float: left; font-weight: bold;*/
}

table#userData td, table#compData td, table#auditData td, table#shareAuditTable td, table#mailModule td, table#exportAuditTable td, table#compDataCommunity td {
    display: inline-cell;
}

    table#userData td input, table#userData td select, table#compData td input, table#compData select, table#auditData input, table#auditData select,
    table#shareAuditTable select, table#shareAuditTable input, table#exportAuditTable select, table#exportAuditTable input {
        padding: 0;
        margin: 0;
    }

    table#userData td:first-child {
        font-weight: bold;
        width: 175px; /*width: 270px; height: 23px; float: left; margin-left: 0;*/
    }

    table#compData td:first-child, table#compDataCommunity td:first-child {
        font-weight: bold;
        width: 250px;
    }

    table#auditData td:first-child {
        font-weight: bold;
        width: 175px;
    }

    table#exportAuditTable td:first-child {
        font-weight: bold;
        width: 150px;
    }

    table#shareAuditTable td:first-child, table#mailModule td:first-child {
        font-weight: bold;
        width: 150px;
    }

.hidden {
    display: none;
}

.hiddenFiltered {
    display: none;
}

.activeFilter {
    opacity: 1;
}

div#deleteNotification, div#unDeleteNotification, div#upgradeUserNotification, div#resetPasswordNotification, div#upgradeToAdminNotification, div#lockUserNotification {
    margin-top: 70px;
    text-align: center;
    width: 100%;
}

    div#deleteNotification span, div#unDeleteNotification span, div#resetPasswordNotification span, div#upgradeToAdminNotification span, div#lockUserNotification span {
        font-weight: bold;
        color: Red;
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }

        div#deleteNotification span img, div#unDeleteNotification span img, div#resetPasswordNotification span img, div#upgradeToAdminNotification span img, div#lockUserNotification span img {
            margin-right: 10px;
        }

    div#upgradeUserNotification .upgradeContainer {
        margin-bottom: 5px;
    }

div#copyNotification {
    margin: 0px 0 0 10px;
    font-size: 12px;
}

    div#copyNotification p {
        font-weight: bold;
        width: 100%;
        float: left;
        margin-bottom: 5px;
    }

span.emailContainer {
    padding: 3px;
    margin-right: 3px;
    background-color: lightgray;
    margin-bottom: 3px;
    display: inline-block;
}

.widthDivider25 {
    width: 25%;
}

.widthDivider33 {
    width: 35%;
}

.widthDivider50 {
    width: 50%;
}

.widthDivider75 {
    width: 75%;
}

.widthDivider90 {
    width: 90%;
}

.widthDivider100 {
    width: 100%;
}

.widthDivider98 {
    width: 98%;
}

/* skin/community access user */
div#skinAccess {
    font-size: 12px;
    margin: 5px 0 0 10px;
}

div#communityUserBox {
    font-size: 12px;
    margin: 30px 20px 20px 20px;
}

table#skinsToAccess, table#communitiesToAccess {
    margin-top: 15px;
}

span#selectedUser, span#selectedUserC {
    font-style: italic;
    font-weight: bold;
}

button#editSkinUserBtn, button#editCommunitiesUserBtn {
    margin-top: 40px;
}

#consultantFiltersBox {
    text-align: center;
}

.filterBoxCenterWrapper {
    margin: auto;
    width: 350px;
}

.consultantFilterElement {
    float: left;
    font-size: 13px;
    margin: 0 auto;
}

.filterDivider {
    margin-left: 7px;
    margin-right: 7px;
}

/*#endregion USERS MANAGEMENT */

/*#region COMP MANAGEMENT */

/*-----------------*/
/* COMP MANAGEMENT */
/*-----------------*/

dl#liveSearchComp {
    width: 350px;
    margin: 5px 0 0 14px;
}

    dl#liveSearchComp dt {
        font-weight: bold;
        float: left;
    }

    dl#liveSearchComp #liveSearchCompTxt {
        width: 250px;
        float: left;
        margin-left: 10px;
        padding: 3px;
        margin-top: 0;
        background-color: #F8F8F8;
    }

button#showCompOutput {
    margin: 20px 0 0 10px;
}

div#compOutput {
    border: 1px solid darkGray;
    width: 486px;
    min-height: 400px;
    margin: 10px;
}

div#graphBox {
    width: 320px;
    height: 200px;
    max-height: 400px;
    background-color: Yellow;
    display: inline-block;
}

div#outputBox {
    width: 180px;
    height: 200px;
    max-height: 400px;
    background-color: Green;
    display: inline-block;
}

div#profileGraph {
    float: left;
    margin: 10px 0 0 10px;
}

div#editPerformanceData {
    float: right;
}

    div#editPerformanceData table#AW_CTCPITable {
        font-size: 11px;
        margin: 0;
        padding: 0;
    }

        div#editPerformanceData table#AW_CTCPITable tr td {
            width: 60px;
            text-align: center;
        }

            div#editPerformanceData table#AW_CTCPITable tr td:first-child, div#editPerformanceData table#AW_CTCPITable tr th {
                width: 90px;
            }

        div#editPerformanceData table#AW_CTCPITable select, div#editPerformanceData table#AW_CTCPITable input {
            margin: 0;
            padding: 0;
        }

.showExtraPerfData {
    zoom: 0.62;
    -moz-transform: scale(0.63);
}

@-moz-document url-prefix() {
    .showExtraPerfData {
        width: 2px;
        height: 2px;
    }
}

/* add comp */
div#addCompParent {
    width: 100%;
    height: 650px;
    float: left;
    border: 1px solid darkGray;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div#menuTiles {
    width: 100px;
    height: inherit;
    float: left;
    background-color: darkGray;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

div#contentTile {
    width: 780px;
    height: inherit;
    float: right;
}

div#addCompParent .tileBox {
    width: inherit;
    height: 70px;
    font-size: 45px;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
}

div#addCompParent div#menuTiles #showActionBox {
    position: absolute;
    top: 570px;
}

div#addCompParent .tileBox.active {
    background-color: #eee;
}

div#addCompParent .tileBox:hover {
    background-color: #eee;
}

div#addCompParent .tileBox .icon {
    float: left;
    padding: 15px 28px 10px 27px;
}

span#allOKBtn {
    color: Red;
}

/* brand management */
div#addBrandBox, div#downloadBulkUploadBox, div#bulkUploadCompTablesBox {
    border: 1px solid darkgray;
    background-color: #eee;
    width: 50%; /*420px - 2 px border width */
}

    div#addBrandBox table, div#downloadBulkUploadBox table, div#bulkUploadCompTablesBox table {
        padding: 15px;
    }

/*#endregion COMP MANAGEMENT */

/*#region MAIL MANAGEMENT */

/*-----------------*/
/* MAIL MANAGEMENT */
/*-----------------*/

table#mailSetup {
    padding: 10px 10px 0 10px;
}

    table#mailSetup tbody tr td:first-child {
        font-weight: bold;
        font-size: 13px;
        width: 150px;
        max-width: 150px;
    }

#floaterToLeft {
    float: left;
}

table#mailSetup tbody tr td:nth-child(2) input {
    width: 320px;
}

table#mailSetup input#mailBodyTxt {
    width: 475px;
    height: 465px;
    margin-top: 10px;
}

button#sendEmail {
    position: absolute;
    right: 12px;
    top: 2px;
    cursor: pointer;
}

#subjectMailTxt {
    font-size: 12px;
}

textarea#receiversBox {
    resize: none;
    width: 318px;
    font-size: 12px;
}

/*#endregion MAIL MANAGEMENT */

/*#region AUDIT MANAGEMENT */

/*------------------*/
/* AUDIT MANAGEMENT */
/*------------------*/
dl#liveSearchAuditBox {
    width: 350px;
    margin: 5px 0 0 14px;
}

    dl#liveSearchAuditBox dt {
        font-weight: bold;
        float: left;
    }

    dl#liveSearchAuditBox #liveSearchAuditTxt {
        width: 250px;
        float: left;
        margin-left: 10px;
        padding: 3px;
        margin-top: 0;
        background-color: #F8F8F8;
    }

div.emailRecipientBox {
    display: inline-block;
}

span.jsIndicator {
    background-color: darkgray;
    float: left;
    color: white;
    width: 25px;
    height: 25px;
    line-height: 23px;
    text-align: center;
    font-size: 22px;
}

input.jsRecipient {
    padding: 3px !important;
    margin-bottom: 5px !important;
    float: left;
    width: 250px;
}

/* Checkboxes for selecting workbook data types */
.checkboxgroup {
    overflow: auto;
}

    .checkboxgroup p {
        width: 7em;
        text-align: right;
    }

    .checkboxgroup label {
        width: 100%;
        float: right;
        cursor: pointer;
        font-weight: normal;
        line-height: 10px;
    }

    .checkboxgroup input {
        cursor: pointer;
        margin-right: 5px !important;
    }

/*#endregion AUDIT MANAGEMENT */

/*#region CMS MANAGEMENT */

div#generalContentBox {
    width: 940px;
    height: 600px;
    margin-bottom: 20px;
}

/* left side */
div#leftcontainerLogos {
    width: 360px;
    float: left;
}

/* logo stuff */
div#landingsImgContainer {
    width: 365px;
    height: 130px;
    float: left;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

    div#landingsImgContainer span.helper {
        display: inline-block;
        height: 100px;
        position: relative;
        width: 305px;
        margin-right: 55px;
    }

        div#landingsImgContainer span.helper img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

    div#landingsImgContainer span.titleTxt {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 30px;
        height: 30px;
        background-color: darkgray;
        color: white;
        font-size: 13px;
    }

    div#landingsImgContainer img {
        max-width: 300px;
        max-height: 90px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-top: 5px;
    }

/* header img */
div#headerImgContainer {
    width: 365px;
    height: 130px;
    float: left;
    margin-bottom: 15px;
    text-align: center;
    position: relative;
}

    div#headerImgContainer span.helper {
        display: inline-block;
        height: 100px;
        position: relative;
        width: 305px;
        margin-right: 55px;
    }

        div#headerImgContainer span.helper img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

    div#headerImgContainer span.titleTxt {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 30px;
        height: 30px;
        background-color: darkgray;
        color: white;
        font-size: 13px;
    }

    div#headerImgContainer img {
        max-width: 300px;
        max-height: 64px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-top: 5px;
    }

/* footer img */
div#footerImgContainer {
    width: 365px;
    height: 190px;
    float: left;
    text-align: center;
    position: relative;
}

    div#footerImgContainer span.helper {
        display: inline-block;
        height: 160px;
        position: relative;
        width: 305px;
        margin-right: 55px;
    }

        div#footerImgContainer span.helper img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

    div#footerImgContainer span.titleTxt {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 30px;
        height: 30px;
        background-color: darkgray;
        color: white;
        font-size: 13px;
    }

    div#footerImgContainer img {
        max-width: 300px;
        max-height: 150px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        margin-top: 5px;
    }

/* file uploads */
.fileUpload {
    position: absolute;
    cursor: pointer;
    right: 0;
    overflow: hidden;
    z-index: 100;
    padding: 5px;
    margin-right: 5px;
    font-size: 30px;
    color: white;
}

    .fileUpload:hover {
        background-color: dimgray;
        cursor: pointer;
    }

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        width: 100px;
        height: 100px;
    }

    .fileUpload input:hover, .fileUpload .icon {
        cursor: pointer;
    }

div#landingsImgContainer .fileUpload {
    top: 30px;
}

div#headerImgContainer .fileUpload {
    top: 30px;
}

div#footerImgContainer .fileUpload {
    top: 60px;
}

/* contact and Support stuff */
div#rightcontainerEmails {
    width: 565px;
    height: 180px;
    margin-left: 10px;
    background-color: dimgray;
    float: right;
    position: relative;
}

    div#rightcontainerEmails input {
        width: 100%;
    }

    div#rightcontainerEmails table#emailContainer {
        width: 545px;
        padding: 10px;
        font-size: 13px;
    }

        div#rightcontainerEmails table#emailContainer tr {
            height: 30px;
        }

        div#rightcontainerEmails table#emailContainer td:first-child {
            color: white;
        }

    div#rightcontainerEmails span {
        color: white;
    }

        div#rightcontainerEmails span.titleTxt {
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            line-height: 30px;
            height: 30px;
            background-color: darkgray;
            color: white;
            font-size: 13px;
            padding: 2px 10px;
        }

/* footer text manage box */
div#footerContentBox {
    width: 565px;
    height: 440px;
    background-color: dimgray;
    display: inline-block;
    margin: 15px 0 0 15px;
    position: relative;
}

    div#footerContentBox div#editor > span {
        border: none;
    }

    div#footerContentBox span.titleTxt {
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 30px;
        height: 30px;
        background-color: darkgray;
        color: white;
        font-size: 13px;
        padding: 2px 10px;
    }

/* LANDINGSPAGE CMS */

div#showLandingsPageBox {
    width: 940px;
    height: 700px;
    margin-bottom: 20px;
}

.smallTitleTxt {
    font-family: 'Open Sans Light' !important;
    color: #fff;
    font-size: 24px;
    line-height: 60px;
    letter-spacing: 0.01em;
    line-height: 60px;
    margin-left: 15px;
}

.bigTitleTxt {
    padding: 0 10px 0 10px;
    font-family: 'Segoe UI Light_', 'Open Sans Light', 'Verdana', 'Arial';
    letter-spacing: 0.01em;
    color: white;
    font-size: 2.2rem;
    line-height: 50px;
}

/* mix of elements */
div#leftTopTplBox {
    width: 765px;
    height: 580px;
    margin: 0 5px 0 0;
    position: relative;
    top: 0;
    left: 0;
}

div#sliderTplBox {
    background-color: darkgray;
    width: 510px;
    height: 320px;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

/* products */
div#productsTplBox {
    width: 250px;
    height: 320px;
    position: absolute;
    top: 0;
    right: 0;
}

div#productsTitleTplBox {
    width: 240px;
    height: 60px;
    margin-bottom: 5px;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 10px;
}

div#productsContentTplBox {
    width: 250px;
    height: 255px;
    background-color: lightgray;
    position: absolute;
    top: 65px;
    left: 0;
}

    div#productsContentTplBox img {
        max-width: 250px;
        max-height: 60px;
    }

div.productImgTpl {
    width: 250px;
    height: 60px;
    margin-bottom: 5px;
}

    div.productImgTpl img:hover {
        background-color: white;
        cursor: pointer;
    }

    div.productImgTpl:last-child {
        margin-bottom: 0;
    }

/* news */
div#newsTplBox {
    width: 380px;
    height: 250px;
    background-color: white;
    position: absolute;
    top: 325px;
    left: 0;
}

div.newsProductTitle {
    width: 380px;
    height: 55px;
    color: white;
}

div.newsProductImage {
    width: 140px;
    margin-right: 10px;
    height: 195px;
    display: table-cell;
    vertical-align: middle;
}

    div.newsProductImage img {
        max-width: 140px;
        max-height: 195px;
    }

div.newsProductTxt {
    width: 220px;
    height: 185px;
    position: absolute;
    top: 65px;
    right: 10px;
}

/* product box */
div#productTplBox {
    width: 380px;
    height: 250px;
    position: absolute;
    top: 325px;
    right: 0;
}

/* login */
div#rightTopTplBox {
    background-color: dimgray;
    width: 170px;
    height: 575px;
    margin-bottom: 5px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
}

/* adds */
div#bottomTplBox {
    width: 940px;
    height: 120px;
    position: absolute;
    bottom: 0;
    left: 0;
}

div.addTplBox {
    width: 230px;
    height: 120px;
    float: left;
    margin-right: 6px;
}

    div.addTplBox:last-child {
        margin-right: 0;
        margin-left: 1px;
    }

    div.addTplBox:first-child {
        margin-right: 7px;
    }

/* general classes for popups */
.linkImagePopUpTable {
    width: 500px;
}

    .linkImagePopUpTable .icon-spell-check {
        font-size: 30px;
        line-height: 30px;
        padding: 5px;
        color: gray;
    }

    .linkImagePopUpTable .fileUpload {
        position: relative;
        margin-left: 10px;
        background-color: gray;
        padding: 5px 14px;
    }

        .linkImagePopUpTable .fileUpload:hover {
            background-color: black;
            cursor: pointer;
            color: white;
        }

            .linkImagePopUpTable .fileUpload:hover .icon {
                cursor: pointer !important;
                background-color: black;
            }

    .linkImagePopUpTable td:first-child {
        width: 150px;
        display: inline-block;
    }

    .linkImagePopUpTable td:nth-child(2) input {
        width: 350px;
    }

    .linkImagePopUpTable tr:last-child span.icon, .titleButtonsBox .icon {
        color: white;
        background-color: gray;
        padding: 5px 14px;
        cursor: pointer;
        font-size: 24px;
    }

        .linkImagePopUpTable tr:last-child span.icon:hover {
            background-color: black;
        }

    .linkImagePopUpTable td.middleRowTD {
        height: 150px;
        vertical-align: middle;
        display: table-cell;
    }

    .linkImagePopUpTable tr:first-child td:last-child {
        margin-left: 10px;
        display: inline-block;
    }

    .linkImagePopUpTable img#linkImage {
        max-width: 250px;
        max-height: 140px;
    }

div.linkImageController {
    width: 500px;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
}

/*------*/
/* SITE */
/*------*/

/* WORLD MAP */

div#worldInfoBox {
    display: inline-block;
    width: 938px;
    height: 40px;
    border: 1px solid darkgray;
}

    div#worldInfoBox > div {
        display: block;
        float: left;
        height: inherit;
    }

    div#worldInfoBox div#worldOnlineUsersBox {
        margin: 0 15px 0 15px;
        font-size: 12px;
    }

        div#worldInfoBox div#worldOnlineUsersBox p {
            float: left;
            margin: 0 5px 0 0;
            line-height: 40px;
            padding: 0;
        }

    div#worldInfoBox div#selectCountryBox {
        width: 400px;
        margin-top: 5px;
    }

.highcharts-container path[blink] {
    -webkit-animation: blinking 2s linear infinite;
    -moz-animation: blinking 2s linear infinite;
    -ms-animation: blinking 2s linear infinite;
    -o-animation: blinking 2s linear infinite;
    animation: blinking 2s linear infinite;
}

/* animation for stroke border on countries where users are online */
@-webkit-keyframes blinking /* Safari and Chrome */ {
    from {
        stroke-width: 2px;
        stroke: lime;
    }

    to {
        stroke-width: 1px;
    }
}

@keyframes blinking {
    from {
        stroke-width: 2px;
        stroke: lime;
    }

    to {
        stroke-width: 1px;
    }
}

div#onlineUsersBox {
    border: 1px solid darkgray;
    height: 333px;
    margin-top: 15px;
}

    div#onlineUsersBox table#onlineUsersInfoBox {
        width: 100%;
        border-spacing: 0;
        border: 1px solid darkgay;
        max-height: 320px;
        border-spacing: 0;
        font-size: 12px;
        line-height: 25px;
    }

        div#onlineUsersBox table#onlineUsersInfoBox thead {
            line-height: 30px;
            background-color: darkgray;
            font-size: 14px;
            font-weight: bold;
            font-variant: small-caps;
        }

        div#onlineUsersBox table#onlineUsersInfoBox tbody tr {
            background-color: #eee;
        }

            div#onlineUsersBox table#onlineUsersInfoBox tbody tr:hover {
                background-color: white;
                cursor: pointer;
            }

    div#onlineUsersBox #onlineUsersInfoBox tbody tr td:nth-child(2) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    div#onlineUsersBox #onlineUsersInfoBox tbody tr td:nth-child(3) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    div#onlineUsersBox #onlineUsersInfoBox tbody tr td:nth-child(4) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    div#onlineUsersBox #onlineUsersInfoBox tbody tr td:nth-child(5) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    div#onlineUsersBox #onlineUsersInfoBox tbody tr td:nth-child(6) div {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

#tableUserCountries tbody tr td:nth-child(2) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserCountries tbody tr td:nth-child(3) div {
    text-align: center;
}

#tableUserCountries tbody tr td:nth-child(4) div {
    text-align: center;
}

#tableUserCountries tbody tr td:nth-child(5) div {
    text-align: center;
}

/* USER ACTIVITY */
div#showUsersPageBox > div {
    display: inline-block;
    border: 1px solid darkgray;
    position: relative;
}

div#showUsersPageBox div#countryBox {
    width: 465px;
    height: 280px;
    margin-right: 10px;
    float: left;
    background-color: #eee;
}

div#showUsersPageBox div#visualBox {
    width: 460px;
    height: 280px;
    float: right;
    background-color: #eee;
}

    div#showUsersPageBox div#visualBox .ui-datepicker-trigger {
        width: 22px;
        float: right;
        opacity: 0.55;
        margin-top: -2px;
    }

div#showUsersPageBox div#userBox {
    width: 938px;
    height: 604px;
    margin-top: 10px;
}

div#showUsersPageBox div#countryBox table#tableUserCountries {
    width: 465px;
    border-spacing: 0;
    max-height: 320px;
    font-size: 12px;
    line-height: 25px;
}

    div#showUsersPageBox div#countryBox table#tableUserCountries thead {
        line-height: 30px;
        background-color: darkgray;
        font-size: 14px;
        font-weight: bold;
        font-variant: small-caps;
    }

    div#showUsersPageBox div#countryBox table#tableUserCountries tbody tr {
        background-color: #eee;
    }

        div#showUsersPageBox div#countryBox table#tableUserCountries tbody tr:hover {
            background-color: white;
            cursor: pointer;
        }

        div#showUsersPageBox div#countryBox table#tableUserCountries tbody tr.activeRow {
            background-color: white !important;
        }

div#showUsersPageBox div#countryBox .grayedRow {
    width: 464px;
}

div#showUsersPageBox div#countryBox .pageNavigation {
    display: inline;
    float: right;
    margin-right: 40px;
}

div#showUsersPageBox div#countryBox .liveSearchAuditBox {
    margin: 1px 0 0 14px;
}

div#showUsersPageBox div#countryBox dl.liveSearchAuditBox #liveSearchCompanyTxt {
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

div#showUsersPageBox div#countryBox .icon-magnifying-glass {
    font-size: 22px;
    margin-top: 3px;
    float: left;
    color: White;
    margin-top: 3px;
}

div#showUsersPageBox div#countryBox div.pagingSystem #liveSearchCountryTxt {
    width: 180px;
    float: left;
    margin-left: 10px;
    background-color: #F8F8F8;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
}

div#showUsersPageBox div#countryBox div.pagingSystem #liveSearchCountryTxt {
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

div#worldSelectionBox {
    border: 1px solid dimgray;
    padding: 6px;
}

    div#worldSelectionBox:hover {
        background-color: lightgray;
    }

div#showUsersPageBox .icon {
    color: dimgray;
}

div#showUsersPageBox div#worldSelectionBox {
    position: absolute;
    top: 10px;
    right: 10px;
}

    div#showUsersPageBox div#worldSelectionBox span:not(.icon) {
        line-height: 40px;
        float: left;
        margin-right: 10px;
        text-transform: uppercase;
        font-size: 12px;
        max-width: 200px;
        word-wrap: break-word;
    }

    div#showUsersPageBox div#worldSelectionBox span:not(.icon) {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 200px;
    }

div#showUsersPageBox table.infoTable {
    margin: 30px 0 0 10px;
    font-size: 12px;
}

    div#showUsersPageBox table.infoTable tr td:nth-child(1) {
        font-weight: bold;
        width: 50px;
    }

    div#showUsersPageBox table.infoTable tr:not(:first-child) td:nth-child(1) {
        font-weight: bold;
        width: 80px;
    }

div#showUsersPageBox table#tableUserInformation {
    width: 100%;
    border-spacing: 0;
    max-height: 572px;
    font-size: 12px;
}

    div#showUsersPageBox table#tableUserInformation thead {
        line-height: 30px;
        background-color: darkgray;
        font-size: 14px;
        font-weight: bold;
        font-variant: small-caps;
    }

    div#showUsersPageBox table#tableUserInformation tbody tr {
        background-color: #eee;
        line-height: 25px;
    }

        div#showUsersPageBox table#tableUserInformation tbody tr:hover {
            background-color: white;
            cursor: pointer;
        }

#tableUserInformation tbody tr td:nth-child(2) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserInformation tbody tr td:nth-child(3) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserInformation tbody tr td:nth-child(4) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserInformation tbody tr td:nth-child(5) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserInformation tbody tr td:nth-child(6) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserInformation tbody tr td:nth-child(7) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#tableUserInformation tbody tr td:nth-child(8) div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

div#showUsersPageBox div#userBox .grayedRow {
    width: 938px;
}

div#showUsersPageBox div#userBox .pageNavigation {
    display: inline;
    float: right;
    margin-right: 380px;
}

div#showUsersPageBox div#userBox .liveSearchAuditBox {
    margin: 1px 0 0 14px;
}

div#showUsersPageBox div#userBox dl.liveSearchAuditBox #liveSearchCompanyTxt {
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

div#showUsersPageBox div#userBox .icon-magnifying-glass {
    font-size: 22px;
    margin-top: 3px;
    float: left;
    color: White;
    margin-top: 3px;
}

div#showUsersPageBox div#userBox div.pagingSystem #liveSearchUsersTxt {
    width: 300px;
    float: left;
    margin-left: 10px;
    background-color: #F8F8F8;
    height: 20px;
    line-height: 20px;
    padding-left: 10px;
}

div#showUsersPageBox div#userBox div.pagingSystem #liveSearchUsersTxt {
    padding: 0;
    text-indent: 10px;
    line-height: 19px;
    margin-top: 3px;
    height: 20px;
}

/*#endregion CMS MANAGEMENT */

/**************************/
/* NEW GRAPH/CHART WIZARD */
/*      LANDINGSPAGE      */
/**************************/

/* stylesheet box  */
div#LandingPage.graphChart div#topRowBox {
    position: relative;
    width: 940px;
    height: 215px;
}

div#LandingPage.graphChart div#auditPicker {
    position: relative;
    width: 938px;
    height: 404px;
    margin-top: 15px;
    border: 1px solid darkgray;
}

div#LandingPage.graphChart div#topRowBox div#templatePickerContainerLP {
    display: inline-block;
    width: 940px;
    height: 165px;
}

div#LandingPage.graphChart div#topRowBox div#templatePicker {
    width: inherit;
}

    div#LandingPage.graphChart div#topRowBox div#templatePicker .template {
        position: relative !important;
    }

    div#LandingPage.graphChart div#topRowBox div#templatePicker div#wizardIconBox {
        display: inline-block;
        height: 160px;
        width: 100px;
        position: relative;
    }

/* custom wrapper box */
div#LandingPage.graphChart div#topRowBox div.customsBox {
    display: inline-block;
    /*width: 614px;*/
    width: 305px;
    height: 38px;
    background-color: darkgray;
}

    div#LandingPage.graphChart div#topRowBox div.customsBox.demandSide {
        width: 195px;
    }

    div#LandingPage.graphChart div#topRowBox div.customsBox .scrollBtn {
        width: 25px;
        height: 100%;
        display: inline-block;
        background-color: dimgray;
    }

        div#LandingPage.graphChart div#topRowBox div.customsBox .scrollBtn .icon {
            line-height: 38px;
            cursor: pointer;
        }

        div#LandingPage.graphChart div#topRowBox div.customsBox .scrollBtn:hover {
            background-color: #a9a9a9;
        }

    div#LandingPage.graphChart div#topRowBox div.customsBox .goLeft {
        float: left;
    }

        div#LandingPage.graphChart div#topRowBox div.customsBox .goLeft .icon {
            margin-left: -3px;
        }

    div#LandingPage.graphChart div#topRowBox div.customsBox .goRight {
        float: right;
    }

        div#LandingPage.graphChart div#topRowBox div.customsBox .goRight .icon {
            margin-left: -1px;
        }

#LandingPage.graphChart #topRowBox .customsBox .customIconWrapper div#lpCustoms > div {
    display: inline-table;
    height: 38px;
}

#LandingPage.graphChart #topRowBox .customsBox .customIconWrapper {
    /*width: 554px;*/
    width: 255px;
    height: 36px;
    display: inline-block;
}

#LandingPage.graphChart #topRowBox .customsBox.demandSide .customIconWrapper {
    width: 145px;
}

#LandingPage.graphChart #topRowBox .customsBox .customIconWrapper .customs {
    margin: 0 0;
    display: table;
    /*width: 555px;*/
    width: 255px;
    height: 38px;
    padding: 0 0;
}

#LandingPage.graphChart #topRowBox .customsBox.demandSide .customIconWrapper .customs {
    width: 145px;
}

#LandingPage.graphChart #topRowBox .customsBox .customIconWrapper .customs span.customBoxImage {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 40px;
    height: 34px;
    padding: 2px;
}

    #LandingPage.graphChart #topRowBox .customsBox .customIconWrapper .customs span.customBoxImage:hover {
        cursor: pointer;
    }

/* audit table */
div#LandingPage.graphChart div#topRowBox div#selectedAuditLoggerGrid {
    position: absolute;
    top: 0;
    right: 0;
    width: 299px;
    height: 201px;
    border: 1px solid darkgray;
    background-color: #eee;
}

/**************************/
/* NEW SIMULATION WIZARD  */
/*      LANDINGSPAGE      */
/**************************/

div#LandingPage.simulation div#auditPicker {
    margin-top: 10px;
    margin-right: 0;
}

div#LandingPage.simulation div#topRowBox {
    width: inherit;
}

/* MASTER GRAPHCHART */

/* chart/graph box */
div#configWizard.graphChart .ui-accordion-header {
    border-radius: 0 !important;
    background-color: transparent;
    z-index: 9;
}

div#configWizard.graphChart .ui-accordion-content {
    border-radius: 0 !important;
    background-color: transparent;
}

div#configWizard.graphChart #masterAreaContainer {
    border-radius: 0 !important;
    position: relative;
    top: -28px;
    max-height: 100px;
}

div#masterArea .ui-accordion-header-icon.ui-icon {
    left: 425px !important;
}

/* Time frame */
div#configWizard.graphChart div#setZoomTime {
    position: absolute;
    z-index: 9;
    width: 158px;
    height: 110px;
    float: left;
    padding: 7px 7px 20px 0;
    margin: -17px 5px 0 0;
    border-right: 0 solid #CCC;
    overflow: hidden;
}

    div#configWizard.graphChart div#setZoomTime img.ui-datepicker-trigger {
        width: 25px;
        float: right;
        opacity: 0.55;
        margin-top: -1px;
        cursor: pointer;
    }

    div#configWizard.graphChart div#setZoomTime .zoomDate {
        width: 110px;
        height: 20px;
        padding: 0;
        margin-left: 5px;
        margin-bottom: 10px;
        font-size: 11px;
        line-height: 20px;
        text-align: center;
    }

div#configWizard.graphChart .resetDateZoom {
    line-height: 33px;
    margin-left: 0 !important;
    height: 32px;
    font-size: 26px;
    color: dimgray;
    width: 46px !important;
    float: left;
    background-color: #ebebe4;
    border: 1px solid rgb(173,173,173);
    border-left: none;
    border-right: none;
}

div#configWizard.graphChart div#setZoomTime #setDateZoom {
    opacity: 0.55;
    line-height: 33px;
    height: 33px;
    font-size: 38px;
    color: white;
    width: 32px;
    margin-left: 6px;
    background-color: transparent;
    border: 0;
    margin-top: -5px !important;
}

div#configWizard.graphChart .resetDateZoom:hover {
    background-color: rgb(173,173,173);
}

div#configWizard.graphChart .ui-datepicker-trigger {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

div#configWizard.graphChart div#setZoomTime #setDateZoom:hover {
    opacity: 1 !important;
}

div#configWizard.graphChart .zoomBackBtn:hover, div#configWizard.graphChart .zoomForwardBtn:hover {
    background-color: rgb(173,173,173) !important;
}

div#configWizard.graphChart button.zoomBackBtn {
    font-size: 18px;
    color: dimgray;
    background-color: #ebebe4;
    border: 1px solid rgb(173,173,173);
    float: left;
    margin-left: 5px;
    height: 32px;
    width: 33px;
}

div#configWizard.graphChart button.zoomForwardBtn {
    color: dimgray;
    font-size: 18px;
    background-color: #ebebe4;
    border: 1px solid rgb(173,173,173);
    float: left;
    height: 32px;
    width: 33px;
}

/* sub menu chart/graph */
/* filters actions */
div#configWizard.graphChart div#filterActions {
    height: 40px;
    line-height: 54px;
    margin: -19px 0 15px 0;
    border: 1px solid darkgray;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background-color: white;
    z-index: -10;
    color: Gray;
    font-size: 13px;
    margin-bottom: 1.5em;
}

    div#configWizard.graphChart div#filterActions > span:not(.separator) {
        margin: 0 5px;
    }

    div#configWizard.graphChart div#filterActions > span:first-child {
        margin-left: 10px;
    }

    div#configWizard.graphChart div#filterActions .separator {
        height: 20px;
        width: 1px;
        margin-top: 4px;
        display: inline-block;
        line-height: 32px;
        border-left: 1px solid darkgray;
    }

    div#configWizard.graphChart div#filterActions span {
        color: darkgray;
        position: relative;
    }

        div#configWizard.graphChart div#filterActions span:hover {
            color: #666;
            cursor: pointer;
        }

        div#configWizard.graphChart div#filterActions span.icon:hover {
            color: #666666 !important;
            cursor: pointer;
        }

.optionGraphBox .resetDateZoom, .optionGraphBox .zoomBackBtn, .optionGraphBox .zoomForwardBtn {
    height: 26px !important;
    margin-top: 1px;
}

    .optionGraphBox .zoomBackBtn span, .optionGraphBox .zoomForwardBtn span {
        line-height: 12px;
    }

    .optionGraphBox .resetDateZoom span {
        line-height: 12px;
        font-size: 24px;
    }

#MiddlePanel.fullscreen div#configWizard.graphChart div#filterActions {
    margin: 15px 0 !important;
    width: 244px;
}

    #MiddlePanel.fullscreen div#configWizard.graphChart div#filterActions.chartering {
        width: 165px;
    }

#MiddlePanel.fullscreen div#messageUser.notFixed {
    top: 15px;
    height: 38px;
    line-height: 38px;
}
/* master chart */
div#configwizard.graphChart .ui-accordion-header * {
    background-color: transparent !important;
}

div#masterAreaContainer div#setZoomTime button {
    margin-top: 0 !important;
}
/* Firefox  - css fix master chart */
/*@-moz-document url-prefix() {
    #MiddlePanel:not(.fullscreen) div#configWizard.graphChart div#master-container {
        width: 780px !important;
        height: 92px !important;
        overflow: hidden !important;
}
}*/

div#configWizard.graphChart .ui-widget-content {
    background-color: white !important;
    border-top: 0 !important;
}

/* GRAPH BOX */
div#configWizard div.graphOptionSteps {
    width: 925px;
    float: left;
    margin: -10px 0 5px 5px;
    overflow: hidden;
}

    div#configWizard div.graphOptionSteps div.graphTypeBox {
        width: 170px;
        height: 170px;
        float: left;
        margin: 10px 20px 0 0;
        color: red;
        font-size: 12px;
        background-color: gray;
    }

        div#configWizard div.graphOptionSteps div.graphTypeBox:first-child {
            margin-left: 100px;
        }

div#configWizard #accordionCharts .ui-accordion-content.ui-accordion-content-active {
    display: inline-table !important;
}

div#configWizard #accordionCharts .ui-accordion-content {
    display: none !important;
    min-height: 250px;
}

div#configWizard #accordionCharts .graphOptionSteps .progressBar {
    position: absolute;
    top: 15px;
}

div#configWizard #accordionCharts #graph_boxer_0 .steps {
    margin-top: 70px;
}

div#configWizard .graphOptionSteps #customWizardBox {
    margin-top: 30px !important;
}

div#configWizard #accordionCharts .chartBox:first-child {
    margin-top: 40px;
}

div#configWizard #accordionCharts .headerTxt, div#configWizard #accordionCharts .subheaderTxt {
    color: dimgray;
    text-transform: uppercase;
    float: left;
}

div#configWizard #accordionCharts .subheaderTxt {
    margin-left: 5px;
}

/* chart wizard specific */
div#configWizard table.chartWizardTable {
    font-size: 12px;
    margin: 0 auto 0;
    margin-bottom: 20px;
    max-width: calc(100% - 1px);
}

div#configWizard div#graphPicker {
    width: inherit;
}

    div#configWizard div#graphPicker .template {
        position: relative !important;
    }

/* GRAPH PICKER */
div#configWizard div#graphPicker {
    width: 920px;
    height: 85px;
    margin-top: 10px;
}

    div#configWizard div#graphPicker .template {
        cursor: pointer;
        width: 144px;
        height: 80px;
        float: left;
        margin: 0 0 0 38px;
        position: relative;
        top: 0;
        left: 0;
        background-color: darkgrey;
    }

        div#configWizard div#graphPicker .template:last-child {
            margin-right: 0;
        }

        div#configWizard div#graphPicker .template .icon {
            color: #eee;
            position: absolute;
            font-size: 75px;
            text-align: center;
            width: 100%;
            top: 10px;
        }

        div#configWizard div#graphPicker .template.thereCanBeOnlyOne.disabled:after {
            font-weight: bold;
            cursor: not-allowed;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            font-size: 70px;
            color: rgb(136, 136, 136);
            line-height: 70px;
            text-align: center;
            content: '\20e0';
            background-color: rgba(255,255,255,0.8);
        }

div#configWizard .detailOptionBox.disabled:after {
    font-weight: bold;
    cursor: not-allowed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 50px;
    color: rgb(136, 136, 136);
    line-height: 95px;
    text-align: center;
    content: '\20e0';
    background-color: rgba(255,255,255,0.8);
}

div#configWizard div#graphPicker .template:not(.thereCanBeOnlyOne):hover, div#configWizard div#graphPicker .template:not(.thereCanBeOnlyOne).active {
    background: dimgray;
    cursor: pointer;
}

div#configWizard div#graphPicker .template:hover .editTemplate, div#configWizard div#graphPicker .template.active .editTemplate {
    display: inline;
}

div#configWizard div#graphPicker .template .indicatorNr {
    position: absolute;
    top: 35px;
    left: 55px;
    color: #eee;
    font-size: 40px;
}

div#configWizard div#graphPicker .nameTemplate, div#configWizard div#graphPicker .editTemplate {
    width: inherit;
    height: 60px;
    background-color: darkgray;
    position: absolute;
    bottom: -20px;
    left: 0;
}

    div#configWizard div#graphPicker .nameTemplate span, div#configWizard div#graphPicker .editTemplate span {
        line-height: 30px;
        text-align: center;
        width: 100%;
        position: absolute;
        font-size: 13px;
        color: White;
    }

div#configWizard div#graphPicker .editTemplate {
    bottom: 30px;
    display: none;
}

div#configWizard div#graphPicker .template:not(#blankTemplate) .nameTemplate {
    padding-top: 0;
    z-index: 5;
}

div#configWizard div#graphPicker div#startNew {
    width: 30px;
    height: 120px;
    padding: 10px 0 10px 0;
    float: left;
    position: relative;
    background-color: gray;
    font-size: 10px;
    text-align: center;
    margin-right: 25px;
    line-height: 12px;
}

/* custom wrapper box */
#configWizard.graphChart div#customWizardBox {
    /*margin: 20px 0 15px 25px;*/
    margin: 0px !important;
}

#configWizard.graphChart div.customsBox {
    display: inline-block;
    /*width: 874px;*/
    width: 390px;
    height: 38px;
    background-color: darkgray;
}

    #configWizard.graphChart div.customsBox .scrollBtn {
        width: 30px;
        height: 100%;
        display: inline-block;
        background-color: dimgray;
    }

        #configWizard.graphChart div.customsBox .scrollBtn .icon {
            line-height: 38px;
            cursor: pointer;
        }

    #configWizard.graphChart div.customsBox .goLeft {
        float: left;
    }

        #configWizard.graphChart div.customsBox .goLeft .icon {
            margin-left: -1px;
        }

    #configWizard.graphChart div.customsBox .goRight {
        float: right;
    }

        #configWizard.graphChart div.customsBox .goRight .icon {
            margin-left: 2px;
        }

#configWizard.graphChart .customsBox .customIconWrapper .customs > div {
    display: inline-table;
    height: 34px;
}

#configWizard.graphChart .customsBox .customIconWrapper {
    /*width: 554px;*/
    width: 320px;
    height: 36px;
    display: inline-block;
}

    #configWizard.graphChart .customsBox .customIconWrapper .customs {
        margin: 0 0;
        display: table;
        /*width: 814px;*/
        width: 330px;
        height: 38px;
        padding: 0 0;
    }

        #configWizard.graphChart .customsBox .customIconWrapper .customs span.customBoxImage {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 40px;
            height: 34px;
            padding: 2px;
        }

            #configWizard.graphChart .customsBox .customIconWrapper .customs span.customBoxImage:hover {
                cursor: pointer;
            }

/* NEW GRAPH BOX - STEP 1 */
div#configWizard div.graphTypePicker .template.thereCanBeOnlyOne {
    background-color: dimgray;
    cursor: pointer;
}

div#configWizard .graphTypePicker .customBoxImage img:hover * {
    background-color: dimgray !important;
}

/* GRAPH BOX - PROGRESS BAR */
.graphOptionSteps .progressBar {
    width: 875px;
    height: 50px;
    background-color: white;
    margin-left: 25px;
}

#MiddlePanel.fullscreen div#configWizard.graphChart .graphOptionSteps .progressBar {
    width: 94% !important;
}

#MiddlePanel.fullscreen .meter.fullScreen {
    top: -8px !important;
}

div#configWizard ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    width: 100%;
    font-size: 16px;
    padding-top: 20px;
    white-space: nowrap;
    display: table;
}

    div#configWizard ol.progtrckr li {
        cursor: pointer;
        border-top-style: solid;
        display: inline-block;
        text-align: center;
        height: 40px;
        padding-top: 10px;
    }

        div#configWizard ol.progtrckr li span {
            font-size: 11px;
            font-weight: bolder;
            position: relative;
            top: -50px;
        }

        div#configWizard ol.progtrckr li.progtrckr-done {
            color: yellowgreen;
            border-top: 2px solid yellowgreen;
        }

        div#configWizard ol.progtrckr li.progtrckr-todo {
            color: silver;
            border-top: 2px solid silver;
        }

        div#configWizard ol.progtrckr li.progtrckr-busy {
            color: orange;
            border-top: 2px solid orange;
        }

        div#configWizard ol.progtrckr li.progtrckr-goto {
            color: gray;
            border-top: 2px solid gray;
        }

        div#configWizard ol.progtrckr li.progtrckr-fail {
            color: red;
            border-top: 2px solid red;
        }

        div#configWizard ol.progtrckr li.progtrckr-empty {
            color: gray;
            border-top: 2px solid gray;
        }

        div#configWizard ol.progtrckr li.progtrckr-done:before {
            content: "\2713";
            color: white;
            background-color: yellowgreen;
            height: 20px;
            width: 20px;
            line-height: 1.2em;
            border: none;
            border-radius: 1.2em;
        }

        div#configWizard ol.progtrckr li.progtrckr-empty:before {
            content: "\ ";
            color: transparent;
            background-color: transparent;
            height: 20px;
            width: 20px;
            line-height: 1.2em;
            border: none;
            border-radius: 1.2em;
        }

        div#configWizard ol.progtrckr li.progtrckr-busy:before {
            content: "\270E";
            color: white;
            background-color: orange;
            height: 20px;
            width: 20px;
            line-height: 1.2em;
            border: none;
            border-radius: 1.2em;
        }

        div#configWizard ol.progtrckr li.progtrckr-goto:before {
            content: "\270E";
            color: white;
            background-color: gray;
            height: 20px;
            width: 20px;
            line-height: 1.2em;
            border: none;
            border-radius: 1.2em;
        }

        div#configWizard ol.progtrckr li.progtrckr-fail:before {
            content: "\2717";
            color: white;
            background-color: red;
            height: 20px;
            width: 20px;
            line-height: 1.2em;
            border: none;
            border-radius: 1.2em;
        }

/* GRAPH TEMPLATE BOXES */
.steps .boxBS {
    width: 120px;
    height: 180px;
    margin-right: 5px;
    display: inline-block;
    margin-left: 20px;
}

.steps .boxLoggers {
    width: 480px;
    height: 180px;
    margin-right: 5px;
    display: inline-block;
}

    .steps .boxLoggers .AW_LoggerGridDisplayTable {
        border-spacing: 28px 28px !important;
        margin-top: -5px;
    }

        .steps .boxLoggers .AW_LoggerGridDisplayTable .loggerIconAdd {
            border: 2px solid transparent;
            width: 34px !important;
            height: 34px !important;
            font-size: 38px !important;
        }

            .steps .boxLoggers .AW_LoggerGridDisplayTable .loggerIconAdd:before {
                margin: 6px 0 0 -2px !important;
                position: relative;
                top: -3px;
            }

            .steps .boxLoggers .AW_LoggerGridDisplayTable .loggerIconAdd.active {
                border: 2px dashed;
            }

            .steps .boxLoggers .AW_LoggerGridDisplayTable .loggerIconAdd .loggerIcon {
                margin: 2px !important;
                width: 30px !important;
            }

/* IE fixes */
#MiddlePanel:not(.fullscreen) .steps .boxLoggers * > .AW_LoggerGridDisplayTable {
    margin-left: 80px;
}

* > #MiddlePanel:not(.fullscreen) #master-container .highcharts-container {
    width: 780px !important;
    height: 90px !important;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #MiddlePanel:not(.fullscreen) #master-container .highcharts-container {
        width: initial !important;
    }
}

* > #MiddlePanel:not(.fullscreen) #menuAdminNav a.active {
    border-bottom: 1px solid white;
    height: 33px;
    margin-bottom: -1px;
}

* > #MiddlePanel:not(.fullscreen) #barContainer .meter {
    position: absolute !important;
    top: 25px !important;
    left: 20px !important;
}

* > #MiddlePanel:not(.fullscreen) #graphSaver {
    position: absolute !important;
    top: 50px !important;
    left: 20px !important;
}

/* FF fix graph wizard */
@-moz-document url-prefix() {
    .steps .boxLoggers .AW_LoggerGridDisplayTable {
        margin-left: 80px;
    }

    #MiddlePanel:not(.fullscreen) #master-container .highcharts-container {
        width: 780px !important;
        height: 90px !important;
    }

    #menuAdminNav > a.active {
        border-bottom: 1px solid white;
        height: 33px;
        margin-bottom: -1px;
    }

    .FF_bar {
        margin-left: 18px !important;
    }

    .FF_bar_right {
        margin-left: 75px !important;
    }

    .FF_air_left {
        margin-left: -40px !important;
    }

    .FF_air {
        margin-left: -20px !important;
    }
}

.steps .boxLoggers .disabled {
    background-color: dimgray;
    cursor: not-allowed;
}

.steps .boxInfo {
    width: 240px;
    height: 185px;
    float: right;
    padding-left: 15px;
    margin-top: 6px;
    display: inline-block;
    border-left: 2px solid #a9a9a9;
    position: relative;
}

    .steps .boxInfo:after {
        content: "";
        position: absolute;
        top: 38%;
        left: -21px;
        border-top: 20px solid transparent;
        border-right: 20px solid #a9a9a9;
        border-bottom: 20px solid transparent;
    }

    .steps .boxInfo table {
        font-size: 11px;
        line-height: 13px;
        margin-left: 10px;
    }

    .steps .boxInfo .titleTxt {
        font-size: 12px;
        line-height: 12px;
        font-weight: bold;
    }

/* Graph detail box step */
.steps .detailOptionBox {
    width: 108px;
    height: 90px;
    background-color: darkgray;
    display: inline-block;
    margin-right: 5px;
    padding: 5px 5px;
    text-align: center;
    cursor: pointer;
    position: relative;
}

    .steps .detailOptionBox.small {
        width: 95px;
    }

    .steps .detailOptionBox.optionPower:not(.small) {
        width: 145px;
    }

    .steps .detailOptionBox:last-child {
        margin-right: 0;
    }

    .steps .detailOptionBox .optionBg {
        margin: 10px 0 0 0;
    }

    .steps .detailOptionBox .optionTitle {
        color: white;
        text-transform: uppercase;
        font-size: 11px;
        width: 100%;
        height: 32px;
        line-height: 32px;
        display: inline-block;
    }

    .steps .detailOptionBox .optionImg {
        width: 30px;
        padding: 1px;
        margin-top: 10px;
    }

        .steps .detailOptionBox .optionImg.active {
            background-color: #11696f;
        }

    .steps .detailOptionBox.active {
        background-color: #11696f;
    }

/* OPTION GRAPH BOX */

/*div#configWizard.graphChart .ui-accordion .ui-accordion-header .ui-icon {left: 34px !important;}*/
div#configWizard.graphChart .iconRemoveBox {
    float: right;
    font-size: 20px;
    margin-top: 1px;
    margin-right: 4px;
    line-height: 16px;
    color: dimgray;
    opacity: 0.5;
}

    div#configWizard.graphChart .iconRemoveBox:hover {
        opacity: 1;
    }

div#configWizard.graphChart .iconAverageBox {
    float: right;
    font-size: 20px;
    margin: 1px 3px 0 3px;
    line-height: 16px;
    color: dimgray;
    opacity: 0.5;
    padding: 5px 2px;
}

    div#configWizard.graphChart .iconAverageBox:hover {
        opacity: 1;
    }

    div#configWizard.graphChart .iconAverageBox.active {
        opacity: 1;
        font-weight: bold;
    }

div#configWizard.graphChart .iconMaxBox {
    float: right;
    font-size: 22px;
    margin-right: 2px;
    margin-top: 2px;
    line-height: 16px;
    color: dimgray;
    opacity: 0.5;
    padding: 5px 0px;
}

    div#configWizard.graphChart .iconMaxBox:hover {
        opacity: 1;
    }

    div#configWizard.graphChart .iconMaxBox.active {
        opacity: 1;
        font-weight: bold;
    }

div#configWizard.graphChart .iconAllBox {
    float: right;
    font-size: 16px;
    margin-right: 2px;
    margin-left: 3px;
    margin-top: 2px;
    line-height: 16px;
    color: dimgray;
    opacity: 0.5;
    padding: 5px 0px;
}

    div#configWizard.graphChart .iconAllBox:hover {
        opacity: 1;
    }

    div#configWizard.graphChart .iconAllBox.active {
        opacity: 1;
        font-weight: bold;
    }

div#configWizard.graphChart .iconAbsoluteBox {
    float: right;
    font-size: 20px;
    margin-right: 2px;
    margin-top: 1px;
    line-height: 16px;
    color: dimgray;
    opacity: 0.5;
    padding: 5px 2px;
}

    div#configWizard.graphChart .iconAbsoluteBox:hover {
        opacity: 1;
    }

    div#configWizard.graphChart .iconAbsoluteBox.active {
        opacity: 1;
        font-weight: bold;
    }

div#configWizard.graphChart .iconMinBox {
    float: right;
    font-size: 22px;
    margin-right: 2px;
    margin-top: 2px;
    line-height: 16px;
    color: dimgray;
    opacity: 0.5;
    padding: 5px 0px;
}

    div#configWizard.graphChart .iconMinBox:hover {
        opacity: 1;
    }

    div#configWizard.graphChart .iconMinBox.active {
        opacity: 1;
        font-weight: bold;
    }

div#configWizard.graphChart .optionBox {
    box-sizing: border-box;
    top: -25px;
    right: -25px;
    margin: 25px 50px 25px 25px;
    position: absolute;
    width: 500px;
    height: 30px;
    display: none;
    background-color: white;
    border: 1px solid;
    border-right: 1px solid white;
}

div#configWizard.graphChart .stepIcon {
    font-size: 22px;
    display: inline-block;
    width: 25px;
    margin: 3px 5px 0 5px;
    float: left;
}

div#configWizard.graphChart .cancelBtn {
    float: right;
    position: absolute;
    right: -21px;
    font-size: 15px;
    top: 7px;
}

div#configWizard .optionGraphBox .buttonHover {
    color: dimgray;
    border: 1px solid rgb(173,173,173);
    background-color: #ebebe4;
    height: 26px;
    width: 45px;
}

    div#configWizard .optionGraphBox .buttonHover:hover, .cancelChangeBtn:hover {
        background-color: rgb(173,173,173) !important;
    }

div#configWizard .optionGraphBox .graphNameOfBoxTxt {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 300px;
    height: 22px;
    margin-top: 1px;
    line-height: 27px;
}

div#configWizard .optionGraphBox .streamLoggerIcon {
    width: 28px;
    margin: 2px;
}

#saveAllGraphsPopUp .buttonHover {
    color: dimgray;
    border: 1px solid rgb(173,173,173);
    background-color: #ebebe4;
    height: 26px;
    width: 45px;
}

    #saveAllGraphsPopUp .buttonHover:hover {
        background-color: rgb(173,173,173) !important;
    }

#saveAllGraphsPopUp {
    background-color: white !important;
}

    #saveAllGraphsPopUp > div {
        font-size: 12px;
        text-align: center;
    }

/**************************/
/* NEW SIMULATION WIZARD  */
/*      LANDINGSPAGE      */
/**************************/

div#LandingPage.simulation div#topRowBox div#templatePickerContainerLP {
    width: 635px;
}

    div#LandingPage.simulation div#topRowBox div#templatePickerContainerLP .simulationTypeBox {
        width: 240px;
        background-color: dimgray;
        color: white;
        margin-bottom: 7px;
        height: 75px;
    }

div#LandingPage.simulation div#topRowBox div.customsBox {
    width: 494px;
    height: 27px;
    margin-top: 11px;
    display: table;
    cursor: not-allowed;
}

    div#LandingPage.simulation div#topRowBox div.customsBox .scrollArrow {
        display: inherit;
        margin: 5px auto 0;
    }

div#LandingPage.simulation #topRowBox .customsBox .customIconWrapper {
    width: 432px;
}

div#LandingPage.simulation #topRowBox .amountValueIndicator {
    line-height: 12px;
}

div#LandingPage.simulation ul.simTypeNameTxt {
    margin-top: 18px;
}

    div#LandingPage.simulation ul.simTypeNameTxt li:first-child {
        font-size: 11px;
    }
/* FF fix sim  wizard */
@-moz-document url-prefix() {
    div#LandingPage.simulation ul.simTypeNameTxt li:first-child {
        font-size: 10px;
    }
    /* font size is bigger in FF */
}

/* new sim option boxes*/
div#LandingPage.simulation #topRowBox div#createNewSimBox {
    height: 203px;
    width: 494px;
    z-index: 9;
    position: absolute;
}

div#LandingPage.simulation #topRowBox div#newSimNameBox {
    margin: 55px 0 0 93px;
}

    div#LandingPage.simulation #topRowBox div#newSimNameBox input {
        width: 277px;
        height: 25px;
        width: 381px;
    }

div#LandingPage.simulation #topRowBox div#simOptionMenu {
    width: 390px;
    height: 80px;
    display: inline-block;
}

    div#LandingPage.simulation #topRowBox div#simOptionMenu div.simOptionBox {
        position: relative;
        cursor: pointer;
        width: 65px;
        height: 70px;
        float: left;
        margin: 8px 18px 0 10px;
        padding: 0 5px;
        background-color: dimgray;
    }

        div#LandingPage.simulation #topRowBox div#simOptionMenu div.simOptionBox .icon {
            position: absolute;
        }

            div#LandingPage.simulation #topRowBox div#simOptionMenu div.simOptionBox .icon:first-child {
                top: 7px;
                left: 7px;
            }

            div#LandingPage.simulation #topRowBox div#simOptionMenu div.simOptionBox .icon:nth-child(2) {
                bottom: 5px;
                right: 5px;
            }

#showAddSimToCollection button {
    color: rgb(105,105,105);
}

    #showAddSimToCollection button:hover {
        color: black;
    }

/* set sim without audit options */
div#LandingPage.simulation #topRowBox #noAuditOptions {
    position: absolute;
    top: 126px;
    left: 510px;
    height: 77px;
    width: 113px;
}

    div#LandingPage.simulation #topRowBox #noAuditOptions .icon {
        font-size: 20px;
        color: dimgray;
    }

    div#LandingPage.simulation #topRowBox #noAuditOptions button:not(#toggleDisplayTypeBtn):hover .icon {
        color: black;
    }

    div#LandingPage.simulation #topRowBox #noAuditOptions button#toggleDisplayTypeBtn {
        z-index: 9;
        width: 113px;
        height: 27px;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-top: 2px;
    }

/* flipper for swap between opening sim and creating new ones - interface will change */
div#LandingPage.simulation #topRowBox #toggleDisplayTypeBtn #flip {
    transform-origin: right center;
    display: inline-block;
}

div#LandingPage.simulation #topRowBox #toggleDisplayTypeBtn:hover #flip {
    transform: translateX( -60% );
}

div#LandingPage.simulation #topRowBox #toggleDisplayTypeBtn .icon.active {
    color: green;
}

div#LandingPage.simulation #topRowBox #toggleDisplayTypeBtn:hover .icon {
    color: dimgray;
}

    div#LandingPage.simulation #topRowBox #toggleDisplayTypeBtn:hover .icon:not(.active):not(#flip) {
        color: green;
    }

/**************************/
/* NEW SIMULATION WIZARD  */
/*      SIMULATOR         */
/**************************/

/* TAB SYSTEM  */
div#configWizard.simulation div#filterActions {
    margin-bottom: 3.5em;
}

div#configWizard.simulation div#simulationTabs {
    width: 938px; /*height: 1250px;*/
    margin: 0;
    padding: 0;
    z-index: 10;
    margin-bottom: 20px;
    border: 1px solid #aaa;
}

    div#configWizard.simulation div#simulationTabs .ui-widget-content {
        width: 938px; /*height: 1057px;*/
        padding: 0;
        margin: 0;
        border: none;
    }

    div#configWizard.simulation div#simulationTabs .ui-widget-header {
        border: none;
        background: none;
    }

div#configWizard.simulation div#tabNavigation {
    width: 95px;
    margin: 0 0 0 -1px;
    float: left;
    border: 1px solid #aaa;
    background-color: dimgray;
    padding: 7px 2px 3px 2px;
}

    div#configWizard.simulation div#tabNavigation span {
        color: #a9a9a9;
        font-size: 16px;
        margin-left: 3px;
    }

        div#configWizard.simulation div#tabNavigation span:hover {
            color: white;
            cursor: pointer;
        }

div#configWizard.simulation .addNewSimBtn span:hover {
    color: white !important;
    cursor: pointer;
}

div#configWizard.simulation div#tabMenuParent {
    height: inherit;
    width: 786px;
    overflow: hidden;
    position: relative;
    margin-left: 7px;
    border-right: 1px dashed #d3d3d3;
    float: left;
}

div#configWizard.simulation ul#tabMenu {
    width: 3000px;
    margin-left: 1px;
}

    div#configWizard.simulation ul#tabMenu li {
        padding: 0 6px 0 0;
    }

        div#configWizard.simulation ul#tabMenu li .closeButton {
            font-size: 7px;
        }

    div#configWizard.simulation ul#tabMenu .subtab_container {
        margin-right: 15px;
        font-size: 21px;
        float: left;
        margin-top: 4px;
        display: none;
    }

    div#configWizard.simulation ul#tabMenu .ui-state-active .subtab_container {
        display: block;
    }

    div#configWizard.simulation ul#tabMenu .subtab_container span {
        padding: 2px;
    }

    div#configWizard.simulation ul#tabMenu .subtab_container .active {
        border: 1px solid #ccc;
        border-bottom: 0;
        border-top: 0;
        background-color: #e0e0e0;
    }

    div#configWizard.simulation ul#tabMenu .ui-state-active .subtab_container span {
    }

div#configWizard.simulation div#simulationTabs .ui-tabs-nav {
    margin-top: -2px;
}

div#configWizard.simulation div#simulationTabs .ui-state-default {
    background: white;
    height: 29px;
}

div#configWizard.simulation div#simulationTabs .ui-state-active {
    background: #eee;
    padding-top: 1px;
}

div#configWizard.simulation div#ContentContainer div#simulationTabs .ui-tabs-nav {
    font-size: 12px;
    margin: -6px 0 0 2px;
    padding-left: 0;
    float: left;
}

div#configWizard.simulation .ui-tabs .ui-tabs-nav li {
    top: 0 !important;
    border-radius: 0;
}

div#configWizard.simulation div#ContentContainer div#simulationTabs .ui-state-active {
    background: #B0D3CB;
}

div#configWizard.simulation div#ContentContainer div#simulationTabs .ui-icon-close {
    position: absolute;
    right: 3px;
}

div#configWizard.simulation .ui-corner-all {
    border-radius: 0 !important;
}

div#configWizard.simulation div#addSimBtn {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border: 1px solid #ccc;
    width: 30px;
    height: 27px;
    float: left;
    border-bottom: none;
    margin-top: 2px;
    text-align: center;
}

    div#configWizard.simulation div#addSimBtn:hover {
        background-color: White;
        cursor: pointer;
    }

    div#configWizard.simulation div#addSimBtn img {
        margin-top: 5px;
    }

div#configWizard.simulation div#tabContents {
    width: 938px;
    margin-top: 34px;
    min-height: 880px;
    border: none;
    border-top: 1px solid #aaa;
}

    div#configWizard.simulation div#tabContents div {
        margin-top: 0;
    }

    div#configWizard.simulation div#tabContents .notAvailable {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: visiblestroke;
    }

/* CS LOGGERS (blue/red line) */
div#configWizard.simulation .SW_compressorBox {
    border-bottom: 1px solid #aaa;
    background-color: #eee;
    padding-top: 9px;
    overflow-y: hidden;
    width: inherit;
    max-height: 75px;
    display: inline-block;
}

div#configWizard.simulation table.gridCS .loggerIconAdd {
    font-size: 27px;
    width: 26px;
    color: #ccc;
}

    div#configWizard.simulation table.gridCS .loggerIconAdd.icon-cross-3 {
        padding-top: 5px;
    }

    div#configWizard.simulation table.gridCS .loggerIconAdd img {
        width: 24px !important;
    }

    div#configWizard.simulation table.gridCS .loggerIconAdd .compDisabledStatusBg {
        background-color: #a9a9a9;
    }

    div#configWizard.simulation table.gridCS .loggerIconAdd img:before {
        width: 30px;
        height: 12px;
        border-bottom: 2px solid red;
        -webkit-transform: translateY(-23px) translateX(5px) rotate(45deg);
        position: absolute;
    }

.compDisabled {
    color: red !important;
}

/* CS COMP LIST red/blue comp table */
.copyRedCompsBtn:hover .copyIcons .locky:before {
    content: "\e039";
}

.copyRedCompsBtn:hover .clearBlueIcons .locky:before {
    content: "\e038";
}

.AW_LoggerGridDisplayTable .redLine.activeComp td:not(.notSortable) .loggerIconAdd .activeCompImg {
    margin-top: 13px;
    background-color: red !important;
}

.AW_LoggerGridDisplayTable .blueLine.activeComp td:not(.notSortable) .loggerIconAdd .activeCompImg {
    margin-top: 13px;
    background-color: blue !important;
}

/* comp in list animation */
.activeCompRed {
    animation: activeCompRed 1s;
    -moz-animation: activeCompRed 1s infinite;
    -webkit-animation: activeCompRed 1s infinite;
}

.activeCompBlue {
    animation: activeCompBlue 1s;
    -moz-animation: activeCompBlue 1s infinite;
    -webkit-animation: activeCompBlue 1s infinite;
}

    .activeCompRed:before, .activeCompBlue:before {
        content: "\e124" !important;
    }

@-moz-keyframes activeCompRed {
    0% {
        top: -50px;
    }

    100% {
        top: -43px;
    }
}
/* FIREFOX */
@-webkit-keyframes activeCompRed {
    0% {
        top: -50px;
    }

    100% {
        top: -43px;
    }
}
/* CHROME */

@-moz-keyframes activeCompBlue {
    0% {
        top: -50px;
    }

    100% {
        top: -43px;
    }
}
/* FIREFOX */
@-webkit-keyframes activeCompBlue {
    0% {
        top: -50px;
    }

    100% {
        top: -43px;
    }
}
/* CHROME */

div#configWizard.simulation table.gridCS {
    display: table;
    height: 43px;
    margin-top: 5px;
}

    div#configWizard.simulation table.gridCS tr.lines {
        height: 38px;
        display: table-row;
    }

div#configWizard.simulation .copyRedCompsBtn > span {
    background-color: #ccc;
    box-sizing: border-box;
}

    div#configWizard.simulation .copyRedCompsBtn > span:hover, div#configWizard.simulation .setMaestroBtn:hover {
        background-color: dimgray !important;
        cursor: pointer !important;
    }

div#configWizard.simulation .setMaestroBtn.active {
    background-color: dimgray !important;
}

/* indicator when drag n drop of comps */
.placeholder {
    width: 23px;
    position: absolute;
    color: dimgray;
    font-size: 24px;
    margin-left: -1px;
}

.blueLine .placeholder {
    color: blue;
    height: 30px;
    top: 31px;
}

.blueLine .loggerIcon {
    margin-top: 3px;
}

.redLine .placeholder {
    color: red;
    height: 45px;
    top: 30px;
}

div#configWizard.simulation table.gridCS .ui-sortable-helper { /*display: none !important;*/
    margin-top: 10px;
}

/* show info comp popup */
div#configWizard.simulation table.gridCS #showCompInfoPopUp {
    border-color: red;
    display: none;
    position: fixed;
    z-index: 5;
    margin-top: 10px !important;
    padding: 5px 10px;
    background-color: white;
    border-style: solid;
    border-width: 2px;
    min-width: 180px;
    font-size: 12px;
}

div#configWizard.simulation table.gridCS .blueLine #showCompInfoPopUp {
    border-color: blue;
}

div#configWizard.simulation table.gridCS .redLine .indicator {
    color: red;
}

div#configWizard.simulation table.gridCS .blueLine .indicator {
    color: blue;
}

/* save image of graph or table */
div#configWizard.simulation .optionBox {
    box-sizing: border-box;
    top: 0;
    right: -23px;
    margin: -2px 50px 25px 25px !important;
    position: absolute;
    width: 500px;
    height: 30px;
    display: none;
    background-color: white;
    border: 1px solid;
    border-right: 1px solid white;
}

div#configWizard.simulation .buttonHover {
    color: dimgray;
    border: 1px solid rgb(173,173,173);
    background-color: #ebebe4;
    height: 24px;
    width: 45px;
}

    div#configWizard.simulation .buttonHover:hover, .cancelChangeBtn:hover {
        background-color: rgb(173,173,173) !important;
    }

div#configWizard.simulation #tableNameOfBoxTxt, div#configWizard.simulation #graphNameOfBoxTxt, div#configWizard.simulation #timespanNameOfBoxTxt, div#configWizard.simulation #timespanTableNameOfBoxTxt {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 300px;
    height: 22px;
    margin-top: 1px;
    line-height: 27px;
}

/* SIM WIZ GRAPH */
div#configWizard.simulation div#tabContents .SW_graphingBox, div#configWizard.simulation div#tabContents .SW_timespanBox {
    width: 938px;
    height: 400px;
    border-bottom: 1px solid #aaa;
    margin-top: 20px;
}

/* SIM WIZ SAVINGS TABLE */ div#configWizard.simulation ul#tabMenu .ui-state-active .subtab_container span div#configWizard.simulation div#tabContents .SW_savingsTableBox {
    width: 938px; /*height: 387px;*/
    border-bottom: 1px solid #aaa;
    padding: 0 0 10px 0;
    background-color: #eee;
}

div#configWizard.simulation div#tabContents table.savingsTable {
    background-color: white;
}

    div#configWizard.simulation div#tabContents table.savingsTable thead tr {
        height: 40px;
    }

    div#configWizard.simulation div#tabContents table.savingsTable tbody {
        background-color: white;
    }

        div#configWizard.simulation div#tabContents table.savingsTable tbody tr:hover {
            background-color: #eee;
            cursor: pointer;
            font-weight: bold;
        }

        div#configWizard.simulation div#tabContents table.savingsTable tbody tr.active {
            background-color: #eee;
        }

        div#configWizard.simulation div#tabContents table.savingsTable tbody tr.pos {
            background-color: rgba(204,232,185, 0.5);
        }

        div#configWizard.simulation div#tabContents table.savingsTable tbody tr.neg {
            background-color: rgba(255, 0, 0, 0.2);
        }

div#configWizard.simulation div#tabContents table.savingsTable {
    border-collapse: collapse;
    border-spacing: 0;
    color: black;
}

    div#configWizard.simulation div#tabContents table.savingsTable th {
        background-color: #EEEEEE;
        border-left: none;
        text-align: center;
        color: black;
        font-weight: normal;
    }

        div#configWizard.simulation div#tabContents table.savingsTable th:nth-child(1) {
            border-left: none !important;
        }

        div#configWizard.simulation div#tabContents table.savingsTable th:nth-child(7) {
            border-right: none !important;
        }

    div#configWizard.simulation div#tabContents table.savingsTable .Tr2 th {
        border: none;
    }

    div#configWizard.simulation div#tabContents table.savingsTable .Tr3 th {
        border: none;
    }

    div#configWizard.simulation div#tabContents table.savingsTable .Tr4 th {
        border: none;
    }

    div#configWizard.simulation div#tabContents table.savingsTable td {
        padding: 5px 10px;
        vertical-align: top;
        color: black;
    }

        div#configWizard.simulation div#tabContents table.savingsTable td input {
            border: none;
        }

            div#configWizard.simulation div#tabContents table.savingsTable td input.invalidInput {
                border: 1px solid red;
                margin-top: 3px !important;
                margin-bottom: 3px !important;
            }

/* savings result row/td */
.resultPos {
    animation: posSavings 5s;
    -moz-animation: posSavings 5s infinite;
    -webkit-animation: posSavings 5s infinite;
}

.resultNeg {
    animation: negSavings 5s;
    -moz-animation: negSavings 5s infinite;
    -webkit-animation: negSavings 5s infinite;
}

.resultFlikker {
    animation: neggSavings 7s;
    -moz-animation: neggSavings 7s infinite;
    -webkit-animation: neggSavings 7s infinite;
    padding: 0px 5px;
}

@-moz-keyframes posSavings {
    0% {
        background: #808080;
    }

    100% {
        background: #cce8b9;
    }
}
/* FIREFOX */
@-webkit-keyframes posSavings {
    0% {
        background: #808080;
    }

    100% {
        background: #cce8b9;
    }
}
/* CHROME */

@-moz-keyframes negSavings {
    0% {
        background: #808080;
    }

    100% {
        background: rgba(255, 0, 0, 0.2);
    }
}
/* FIREFOX */
@-webkit-keyframes negSavings {
    0% {
        background: #808080;
    }

    100% {
        background: rgba(255, 0, 0, 0.2);
    }
}
/* CHROME */

@-moz-keyframes neggSavings {
    0% {
        background-color: #808080;
    }

    100% {
        background-color: rgba(255, 0, 0, 0.8);
        color: white;
    }
}
/* FIREFOX */
@-webkit-keyframes neggSavings {
    0% {
        background-color: #808080;
    }

    100% {
        background-color: rgba(255, 0, 0, 0.8);
        color: white;
    }
}
/* CHROME */

/* SIM WIZ COMMENT BOX*/
div#configWizard.simulation div#tabContents .SW_commentBox {
    width: 938px; /*height: 136px;*/
    border-bottom: 1px solid #aaa;
}

    div#configWizard.simulation div#tabContents .SW_commentBox .cke {
        border: none !important;
    }

div#configWizard.simulation div#tabContents .cke_top {
    background: white !important;
    background-color: #white !important;
    border-bottom: 0;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

div#configWizard.simulation div#tabContents .cke_bottom {
    display: none;
}

/* ADD COMP TO SYSTEM POPUP */

#searchCompTable {
    font-size: 0.8rem;
}

    #searchCompTable .asidePanel {
        width: 30%;
        overflow-y: auto;
        max-height: 600px;
        display: inline-block;
        box-sizing: border-box;
    }

        #searchCompTable .asidePanel div {
            padding-bottom: 10px;
        }

        #searchCompTable .asidePanel span {
            font-weight: bold;
        }

    #searchCompTable .contentPanel {
        width: 70%;
        display: inline-block;
        float: right;
        background-color: #fff;
        height: 600px;
        box-sizing: border-box;
        padding: 0 10px;
    }

    #searchCompTable .activeFilter {
        padding: 3px 6px;
        cursor: pointer;
        background-color: lightgray;
        margin-right: 5px;
        margin-bottom: 6px;
        white-space: nowrap;
        float: left;
    }

    #searchCompTable .activeFiltersContainer {
        overflow: auto;
    }

    #searchCompTable .resultsTableWrapper {
        overflow-y: auto;
        max-height: 500px;
    }

    #searchCompTable .resultTable {
        border-spacing: 0;
        width: 100%;
    }

        #searchCompTable .resultTable thead {
            font-weight: bold;
            background-color: #bbb;
        }

        #searchCompTable .resultTable td {
            padding: 3px 0;
        }

        #searchCompTable .resultTable tbody tr:nth-child(even) {
            background-color: #eee;
        }

        #searchCompTable .resultTable tbody tr:hover {
            background-color: #ccc;
        }

        #searchCompTable .resultTable .icon {
            opacity: 0.6;
            font-size: 1.1rem;
            padding: 0 5px;
        }

/* adapt the overlay of jQuery */
.ui-widget-overlay {
    background: white !important;
    opacity: 0.5 !important;
}

/* END SIM TABS */

/* datetime picker css fixes - bootsmetro */
.ui-datepicker-calendar th {
    color: Black;
}

div#ui-datepicker-div {
    width: 300px;
}

div.ui-timepicker-div {
    height: 80px;
}

    div.ui-timepicker-div dl dt {
        float: left;
    }

dd.ui_tpicker_hour div.ui-widget-content, dd.ui_tpicker_minute div.ui-widget-content {
    border-width: 1px;
}

.ui-datepicker-buttonpane.ui-widget-content {
    border-width: 1px;
}

/* css for timepicker */
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

    .ui-timepicker-div dl dt {
        height: 25px;
        margin-bottom: -25px;
    }

    .ui-timepicker-div dl dd {
        margin: 15px 10px 10px 95px;
    }

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-widget-content {
    width: auto;
}

.ui-datepicker-close.ui-state-default, .ui-datepicker-header.ui-corner-all, .ui-slider-handle.ui-state-default {
    border-radius: 0;
}

#ui-datepicker-div .ui-widget-content, #ui-datepicker-div {
    border-width: 1px;
    border-color: dimgray;
    border-radius: 0;
}

    #ui-datepicker-div .ui-slider-handle {
        border-width: 1px;
        border-color: darkgray;
    }

    #ui-datepicker-div .ui-slider .ui-slider-handle {
        width: 10px;
    }

#ui_tpicker_hour_startPointCvt, #ui_tpicker_minute_startPointCvt {
    margin-top: 5px;
}

#ui_tpicker_time_startPointCvt {
    margin-left: 56px;
}

.ui-datepicker-trigger {
    width: 27px;
    float: right;
}

    .ui-datepicker-trigger:hover {
        opacity: 1 !important;
        cursor: pointer;
    }

/* update style of popup - new style */
.ui-dialog input {
    outline: 0;
}

.ui-dialog.ui-widget.ui-widget-content {
    border-radius: 0;
    border: 2px solid dimgray;
    padding: 0;
    outline: none;
}

.ui-dialog-titlebar.ui-widget-header.ui-corner-all {
    border: none;
    border-radius: 0;
    background-color: dimgray;
    margin: 0;
    color: White;
    padding: 0.2em 0.4em;
}

    .ui-dialog-titlebar.ui-widget-header.ui-corner-all .ui-dialog-title {
        color: White;
        font-size: 16px;
    }

.ui-dialog.ui-widget.ui-widget-content .ui-dialog-titlebar-close {
    background-color: transparent;
    background-image: url('../../Public/Images/close-icon.png');
    float: right;
    padding: 0;
    border: none;
    border-radius: 7px;
}

    .ui-dialog.ui-widget.ui-widget-content .ui-dialog-titlebar-close.ui-state-hover {
        border: 1px solid white;
    }

#topper {
    position: fixed;
    bottom: 60px;
    right: 30px;
    z-index: 20;
    display: none;
}

    #topper a {
        transition: .2s linear all;
    }

        #topper a:hover i,
        #topper a:focus i,
        #topper a:active i {
            background: rgba(169,169,169, 0.9);
        }

        #topper a i {
            display: inline-block;
            background: rgba(169,169,169, 0.55);
            color: #ffffff;
            border-radius: 2px;
            font-size: 25px;
            padding: 4px 3px;
            transition: .2s linear all;
        }

#subscriptionDetailsTable {
    text-align: left;
}

    #subscriptionDetailsTable td:first-child {
        text-align: left;
        font-weight: bold;
        width: 270px;
    }

    #subscriptionDetailsTable td:nth-child(2) select {
        width: 254px;
    }

    #subscriptionDetailsTable input[type=text] {
        width: 250px;
    }