/**
 * @file      dash-additional-cc.csst
 *
 * @brief     extra css for anything specifically-control-centre-related the dash branch.
 *
 * @copyright Copyright Dexdyne Ltd. 2012-2022. All Rights Reserved.
 *
 * @author    Unknown - see PHP
 */

#banner .bannerFailure,
#banner .bannerSuccess
{
    font-size:              130%;
    margin:                 0px;
    padding:                5px;
}

#ccMenu_Id
{
    /* border-top:             1px solid black; */
    float:                  left;
    height:                 100%;
    width:                  191px;
}

#ccMenuContent_Id
{
    padding:                4px 4px 20px;
}

#ccMenuContent_Id  form
{
    display:                flex;
    flex-direction:         column;
    align-items:            center;
    row-gap:                10px;
}

#ccMenuContent_Id  input
{
    width:                  90%;
    min-width:              140px;
    max-width:              180px;
    padding:                2px 0;
    /* font-size:              0.9rem; */
    font-family:            arial, helvetica, sans-serif;
}

#ccMenu_Id  ul  li  a
{
    background:             white;
    color:                  black;
    display:                block;
    padding:                3px 3px 3px 5px;
    text-decoration:        none;
}

#ccMenu_Id  ul  li  a#cc-current,
#ccMenu_Id  ul  li  a:hover
{
    background:             Gold;                  /* #FFD700 was #FFD911; */
    color:                  black;
    text-decoration:        none;
}

#ccMenu_Id  ul  li  a#cc-current
{
    font-weight:            bold;
}

#ccMenu_Id  ul
{
    border-color:           ForestGreen;           /* #228B22 was #556655;  not a great match. */
    border-top:             none;
    font-size:              80%;
    list-style-type:        none;
    margin:                 2px;
    padding:                0px 8px;
}

#ccMenu_Id  ul  li
{
    border-bottom:          1px solid;
    border-color:           ForestGreen;           /* #228B22 was #556655;  not a great match. */
}

#ccMenuContent_Id h4
{
    font-size:              130%;
    margin:                 6px 0 20px;
    text-align:             center;
}

#ccMenuContent_Id h5
{
    font-size:              115%;
    margin:                 24px 0px 6px;
}

/* I have no idea what use a 1-pixel-high 192-pixels wide strip of white might be to us. */
.ccWrapper_Class
{
    background-image:       url("/mft/assets/img/cc-img/slice-192-by-1-white.png");
    background-repeat:      repeat-y;
}

.ccWrapper_Class  #content
{
    float:                  right;
    width:                  79%
}

.fsHeading
{
    font-size:              80%;
    margin:                 4px;
    width:                  1015px;
}

.fsHeading  h4
{
    font-size:              130%;
    padding-left:           4px;
}

/* fsContent exist in on-box branch, but not here in dash branch. */

/* This does not seem to control the right-hand-of-3 "description" column in control centre pages.
.description
{
    float:                  right;
    padding:                5px;
    width:                  300px;
}

.clearBoth
{
    margin:                 0px;
}

.footer_Class
{
    background:             white;
    height:                 23px;
}

/* These exist in on-box branch, but not here in dash branch
 *
 *   clearly
 *      some of these are better supplied elsewhere in this branch, as this is home ONLY to cc-related stuff.
 *      some of these are not needed in the on-box branch
 *
 *     .hidden_Class
 *     a img
 *     .langFlags
 *     .langFlags img
 *     .subDivForRows
 *     .inputDiv
 *     .aRight
 *     .footerPoweredBy_Class
 *     .loggedIn
 *     .headerPoweredBy_Class
 *     .smallText
 *     .greyText
 *     .redText
 *     .amberText
 *     .greenText
 *     #mini1
 *     #mini2
 *     .accountsMenu
 *     table
 *     fieldset
 *     fieldset legend
 *     .listbox
 *     .serialSummary
 *     .serialSummaryOk
 *     .serialSummaryWarning
 *     .serialSummaryError
 */
.blurb
{
    clear:                  both;
}

/* The following settings cover 'all things like this on this form'
 *  so atr linked to form Ids.
 */

#loggingSettingsFormId      label,
#networkSettingsFormId      label,
#serialSettingsFormId       label,

#datapointPropertiesFormId  label,
#datasourcePropertiesFormId label,
#smsPropertiesFormId        label
{
    clear:                  both;
	display:                block;
    float:                  left;
    margin:                 6px;
    margin-top:             9px;
    text-align:             right;
    width:                  20%;
}

#datasourcePropertiesFormId textarea,
#networkSettingsFormId      textarea,
{
    display:                block;
/*  float:                  left; */
    margin:                 4px;
    width:                  30%;
}

#smsPropertiesFormId        textarea
{
    display:                block;
/*  float:                  left; */
    margin:                 4px;
    width:                  99%;
}

/* NB - some screens over-ride these settings for their own purposes. - grep for them. */
.ccFormInputDiv_Class
{
    float:                  left;
    width:                  28%;
}

.ccFormBlurbDiv_Class
{
    float:                  left;
    width:                  99%;
}

/* I'd like to use 'narrow' input on the datapoint form too,
 *  but it didn't work when I tried it,
 *  and I haven't put time into fixing it.
 */

/* Over-ride input column width on specific forms. */
#loggingSettingsFormId  .ccFormInputDiv_Class
{
    width:                  15%;
}

.ipOctet,
.ipDot
{
      float:                  left;
}

/* This setting was present in the dash version - but not the on-box. */
.ccDescription
{
    display:                inline-block;
    float:                  right;
    text-align:             left;
    width:                  45%;
}

/* Over-ride input column width on specific forms. */
#loggingSettingsFormId      .ccDescription
{
    width:                  58%;
}

/* It's a mystery to me why the bottom buttons get a css class, but the top ones,
 *  which appear and behave identically, do not.
 */
.ccFormBottomButtons,
.ccFormSelect
{
    display:                block;
    float:                  left;
    margin:                 8px;
}