@charset "UTF-8";
/*
 *     https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
 *
 * The @charset CSS at-rule specifies the character encoding used in the style sheet.
 * It must be the first element in the style sheet and not be preceded by any character;
 *  as it is not a nested statement, it cannot be used inside conditional group at-rules
 *
 * and
 *     https://www.w3.org/International/questions/qa-css-charset
 *
 *  Only one @charset byte sequence may appear in an external style sheet and it must appear at the very start of the document.
 *  It must not be preceded by any characters, not even comments.
 */

/**
 * @file      dash-base.csst
 *
 * @brief     css for basic non-control-centre-related stuff in the dash branch.
 *
 * @copyright Copyright Dexdyne Ltd. 2012-2020. All Rights Reserved.
 *
 * @author    DGC
 */

html, body
{
    height:                 100%;
}
body
{
    background:             WhiteSmoke;                     /* #F5F5F5 was #f8f8f8; */
    font-family:            arial, helvetica, sans-serif;
    margin:                 0px;
}

.utcTime_Class
{
    color:                  white;
    font-weight:            bold;
    left:                   345px;
    position:               relative;
    text-align:             center;
    top:                    -22px;
    width:                  500px;
}

.fsHeading
{
    background:                       white;
    border:                 solid 1px Silver;               /* #C0C0C0 was #ababab; */
    border-bottom:          solid 2px DarkGray;             /* #A9A9A9 was #a5a5a5; */
    border-right:           solid 2px DarkGray;             /* #A9A9A9 was #a5a5a5; */
}

.fsHeading h4
{
    background:             WhiteSmoke;                     /* #F5F5F5 was #f8f8f8; */                                                                 /* used by old browsers */

    /* In the following:
     *     WhiteSmoke;       #F5F5F5 was #f8f8f8
     *     Gainsboro;        #DCDCDC was #e5e5e5
     */

    background:             -moz-linear-gradient(top,                                      WhiteSmoke 0%,                Gainsboro 100%);              /* firefox */
    background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%, WhiteSmoke), color-stop(100%, Gainsboro));                  /* webkit */
    filter:                 progid:DXImageTransform.Microsoft.gradient(     startColorstr='WhiteSmoke',     endColorstr='Gainsboro',GradientType=0 );  /* ie */

    border-bottom:          1px black solid;
    margin:                 0px 0px 0px 0px;
    padding:                2px 2px 2px 8px;
        text-align:             center;
}

/* fsContent appears inside fsHeading
 *  - but if we set 'width = 100%', it uses 100% of that 'width' - PLUS the padding and border.
 *    so if the heading is 1015, 100% is interpreted as 1031 and it doesn't nest.
 *    our 'width setting here must be frigged a bit below 100% to make up for that.
 *    I jsst did it by eye and knocked off 2%.
 */
.fsContent
{
    overflow:               auto;
    padding:                8px;
    width:                  98%;
}

.success
{
    background-color:       MediumSeaGreen;       /* #3CB371 was #55b05a; */
    color:                  white;
    font-weight:            bold;
    padding:                2px;
    text-align:             center;
}

.failure
{
    background-color:       IndianRed;            /* #CD5C5C was #E87171; */
    color:                  white;
    font-weight:            bold;
    padding:                2px;
    text-align:             center;
}

/* ATTTOW fullWidthWarningClass class is only used in control centre. */
.fullWidthWarningClass
{
    width:                  90%;
    color:                  brown;
    background-color:       white;
    padding:                2px;
    text-align:             center;
    font-weight:            bold;
}

.hidden_Class
{
    display:                none !important;
}

a img
{
    border:                 0px;
}

.langFlags
{
    float:                  right;
    padding:                5px 5px 1px 5px;
    text-align:             right;
}

.langFlags a
{
    text-decoration:        none;
}


.langFlags img
{
    border:                 1px solid black;
}

.outerWrapper_Class
{
    background:             white;
    border-color:           DarkSlateGray;     /* #2F4F4F was #222222; */
    border-style:           solid;
    border-width:           0px 1px;
    height:                 auto !important;
    height:                 100%;
    margin:                 0 auto -24px; /* the bottom margin is the negative value of the footer's height */
    min-height:             100%;
    width:                  1328px;
}

/* .push is a 'special class' to do with grids. */
.footer_Class,
.push
{
    border-top:             1px solid  DarkSlateGray;     /* #2F4F4F was #222222; */
    height:                 20px;                         /* .push must be the same height as .footer_Class */
    margin-left:            auto;
    margin-right:           auto;
    width:                  1328px;
}

.footerPoweredBy_Class
{
    color:                  DarkSlateGray;          /* #2F4F4F was #333333;       not sure if this needs to differ from .push */
    font-size:              70%;
    margin:                 0;
    padding:                4px 0 0;
    text-align:             center;
    opacity:                0;                      /* May not be right - copied from 2g.css */
}

/* The dash-tabs box is empty on the on-box screen
 *  but at the moment it provides the dividing line across the bottom of the header.
 *
 * Done properly we would create that dividing line as a separate screen element
 *  and completely hide the dash-tabs div on the control centre screen.
 */
.dashTabs_Class
{
    background:             DimGray;               /* #696969 was #4c4c4c; */                                                  /* Used by old browsers */

    /*
     * This weird wave-shape of greys is used only in mozilla and firefox
     * In fact the dimmests grey in the standard colours is #696969 - so almost all of these will just be shades of black,
     * I have looked, and you can just make out a shade from dark down to black, and back to dark,
     *  as you go vertically down the dash tab buttons.
     *  ( which I can't see how you get from this list, but hey-ho. )
     * Not sure it's worth the effort.
     *
     * In the following:
     *                             #4c4c4c    0%
     *                             #595959   12%
     *         DimGray   #696969   #666666   25%
     *                             #474747   39%
     *                             #2c2c2c   50%
     *         black     #000000   51%
     *                             #111111   60%
     *                             #2b2b2b   76%
     *                             #1c1c1c   91%
     *                             #131313  100%
     */

    /** @FIXME DGC 17-Jun-2019
     *            If it is legal to split these long lines, we should do so.
     */

    background:             -moz-linear-gradient(top,                                      #4c4c4c 0%,                 #595959 12%,                 #666666 25%,                 #474747 39%,                 #2c2c2c 50%,                 #000000 51%,                 #111111 60%,                 #2b2b2b 76%,                 #1c1c1c 91%,                  #131313 100%);              /* firefox           */
    background:             -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c4c4c),   color-stop(12%, #595959),    color-stop(25%, #666666),    color-stop(39%, #474747),    color-stop(50%, #2c2c2c),    color-stop(51%, #000000),    color-stop(60%, #111111),    color-stop(76%, #2b2b2b),    color-stop(91%, #1c1c1c),    color-stop(100%, #131313));                  /* webkit ( chrome ) */
    filter:                 progid:DXImageTransform.Microsoft.gradient(     startColorstr='#4c4c4c',                                                                                                                                                                                                                                               endColorstr='#131313',GradientType=0 );  /* ie                */

    border-color:           black;              /* That makes a 2-pixels wide divider - a 1-pixel one would possibly be slicker. */
    border-style:           solid;
    border-width:           1px;
    color:                  white;
    margin:                 0px;
    padding:                0px 0px 0px 0px;    /* was 0px 2px 2px 2px; */
    text-align:             center;
    white-space:            nowrap;
}

.dashTabs_Class  li
{
    border:                 none;
    border-left:            1px white solid;
    border-right:           1px white solid;
    display:                inline;
    font-size:              80%;
    list-style-type:        none;
    margin:                 0px -1px 0px 0px;
    padding:                3px 0px 3px 0;
}

.dashTabs_Class  li  a
{
    color:                  white;
    font-weight:            bold;
    padding:                3px 6px 2px 6px; /*LEFT/RIGHT padding here determines tab spacing*/
    text-decoration:        none;
}

/* Colour for the 'hovered-over' tab. */
/* This setting will normally be over-ridden by any custom csst file that exists for the dashboard. */
.dashTabs_Class  li  a:hover
{
    background:             Goldenrod;            /* #DAA520 was #d8bc12; */
    color:                  white;
}

/* Colour for the 'currently selected' tab. */
/* This setting will normally be over-ridden by any custom csst file that exists for the dashboard. */
#dashTabCurrent_Id
{
    background:             Gold;                 /* #FFD700 was #FFD911; */
    color:                  black;
}

.loggedIn
{
    clear:                  both;
    color:                  DimGray;               /* #696969 was #555555; */
    font-size:              85%;
    margin:                 0px 0px 0px 5px;
    padding:                5px;
    text-align:             right;
}

.commitSha
{
    clear:                  right;
    color:                  whitesmoke;           /* Invisible on-screen unless highlighted in the browser. */
    font-size:              85%;
    font-style:             italic;
    font-weight:            bold;
    margin:                 0px 0px 0px 5px;
    padding:                0px 5px 5px 5px;
    text-align:             right;
    opacity:                0;                      /* May not be right - copied from 2g.css */
}

.headerPoweredBy_Class
{
    clear:                  right;
    color:                  white;
    font-size:              85%;
    font-style:             italic;
    font-weight:            bold;
    margin:                 0px 0px 0px 5px;
    padding:                0px 5px 5px 5px;
    text-align:             right;
    opacity:                0;                      /* May not be right - copied from 2g.css */
}

.smallText
{
    font-size:              80%;
}

.greyText
{
    color:                  DarkGray;              /* #A9A9A9 was #aaaaaa; */
}
.redText
{
    color:                  Red;
}

.amberText
{
    color:                  YellowGreen;          /* #9ACD32 was #C6BC4F;   not a good match */
}

.greenText
{
    color:                  ForestGreen;          /* #228B22 was #208E2B; */
}

.clearBoth
{
    clear:                  both;
    color:                  WhiteSmoke;            /* #F5F5F5 was #eeeeee; */
}

#mini1
{
    float:                  left;
    width:                  256px;
}
#mini2
{
    float:                  right;
    width:                  256px;
}

.accountsMenu
{
    font-size:              85%;
}

table
{
    border-collapse:        collapse;
}

fieldset
{
    border:                 1px inset black;
    background:             white;
}

fieldset legend
{
    border-top:             1px solid black;
    border-bottom:          1px solid black;
    background:                       Gold;                 /* #FFD700 was #FFD911; */
    font-weight:            bold;
    padding:                5px;
}

.listbox
{
    border:                 1px inset black;
    background:             white;
}

div.pageOverlay
{
    height:                 100%;
    left:                   0;
    margin:                 0;
    padding:                0;
    position:               fixed;
    top:                    0;
    width:                  100%;
}

div.pageOverlay div
{
    margin:                 25px auto;
}

div.pageOverlay div div
{
    margin:                 0;
}

.bannerFailureDisplay
{
    background:             red;
    color:                  white;
    font-size:              200%;
    padding:                3px;
    text-align:             center;
}

.bannerSuccessDisplay
{
    background:             green;
    color:                  white;
    font-size:              200%;
    padding:                3px;
    text-align:             center;
}

.moduleManagerMessageContainer
{
    left:                   0;
    position:               fixed;
    top:                    0;
    width:                  100%;
}

.moduleManagerMessageOverlay
{
    left:                   0;
    height:                 100%;
    padding:                25px;
    position:               fixed;
    top:                    0;
    width:                  100%;
}

.moduleManagerMessageOverlay form
{
    background:             white;
    border:                 1px solid black;
    margin:                 auto;
    padding:                0px 10px 10px 10px;
    width:                  500px;
}

.moduleManagerMessageOverlay div
{
    background:             white;
    border:                 1px solid black;
    margin:                 auto;
    padding:                10px;
    width:                  220px;
}

.moduleManagerArrowButton
{
    cursor:                 pointer;
    margin-top:             3px;
}

.moduleManagerFieldSet div.fsContent
{
    padding:                0;
}

/**
 * @FIXME DGC 28-Jly-2015
 *           See similar below
 */
#banner
{
    left:                   0px;
    position:               fixed;
    top:                    0px;
    width:                  100%;
    z-index:                10;
}

#banner .error
{
    background:             red;
    color:                  white;
    font-size:              200%;
    padding:                3px;
    text-align:             center;
}

#banner .success
{
    background:             green;
    color:                  white;
    font-size:              200%;
    padding:                3px;
    text-align:             center;
}

/**
 * @FIXME DGC 28-Jly-2015
 *           See similar above
 */
#banner
{
    left:                   0;
    position:               fixed;
    top:                    0;
    width:                  100%;
}

/* This setting will normally be over-ridden by any custom csst file that exists for the dashboard.
 *  and any 'special css' for smaller screen usage.
 */
#header
{
    background:             url(/aurora/assets/img/dexdyne-logo-334-by-73px.png) left no-repeat white;
    height:                 100px;
}

#content
{
    padding:                8px;
    width:                  98%;
}

/* WARNING - after changing this section you sometimes have to CTRL-refresh many times,
 *  and/or wait some minutes to see the effect.
 */

 /* @FIXME DGC - I don't know which of the following class selections is doing the job !! */
.ui-tooltip, .qtip
{
    border-color:           DimGray;            /* #696969 was #666666 */
    font-size:              15px;               /* 17px;  */
    line-height:            19px;               /* 19px;  */
    /* I tried using 'auto !important' and 'auto' in the next line, but it didn't work. */
    max-width:              901px;              /* 280px; */
    min-width:              50px;
    /* I don't know what sets the text-alignment in the tool-tip,
     *  but this doesn't affect it as far as I can see.
     * Nor does the equivalent setting in
     *     .ui-tooltip-content
     */
    text-align:             center;
}

/* This setting will normally be over-ridden by any custom csst file that exists for the dashboard. */
th
{
    background-color:       WhiteSmoke;            /* #F5F5F5 was #f8f8f8 */
    color:                  black;
}

th
{
    padding:                5px 8px 5px 8px;
    border-top:             1px solid DarkGray;    /* #A9A9A9 was #ababab */
    border-bottom:          1px solid DarkGray;    /* #A9A9A9 was #ababab */
}

td
{
    padding:                5px 8px 5px 8px;
	border-bottom:          1px solid DarkGray;          /* #A9A9A9 was #bbb */
}

table
{
    margin-left:            auto;
    margin-right:           auto;
    margin-bottom:          15px;
}

fieldset
{
    padding-top:            15px;
}

a:hover
{
    text-decoration:        underline;
}

.ipaddress
{
    padding-left:           30px;
    padding-right:          20px;
}

.errorText
{
    color:                  red;
    margin-left:            -30%;
}

/* Moved login-related stuff here as it wasn't being picked up. Needs a better home */
#loginFormId            input,
#loginFormId            label,
#loginFormId            div,
#loginFormId            ul
{
    display:                block;
    float:                  left;
    margin:                 4px;
    list-style:             none;
}

#loginFormId            label
{
    clear:                  both;
    text-align:             right;
    width:                  40%;
}

/* This datapointLink class is used in control centre
 *  - but randomly it is also picked up in the datapoint picker,
 *    so if that's real, it must be define somewhere common to both.
 */

.datapointLink_class a
{
    text-decoration:        none;
}

.datapointLink_class a:hover
{
    text-decoration:        underline;
}

/* The datasource stuff was 'missing css' - so I have added it in for completeness - not sure that's useful. */'
.datasourceLink_class a
{
    text-decoration:        none;
}

.datasourceLink_class a:hover
{
    text-decoration:        underline;
}

/* The sms stuff is not used, but just added it in for completeness - not sure that's useful. */'
.smsLink_class a
{
    text-decoration:        none;
}

.smsLink_class a:hover
{
    text-decoration:        underline;
}