/*
History:    
2025-03-13	    updates: version 5.2.0.6
2025-01-07  	initial release
*/
  
/*
Info about colors which need to be changed when going from red to green color scheme:
    #b01f23: standard red color that gets converted to standard green color for green version
    #b01f24: standard red color that gets converted to light green color for green version
    #f4e3b9: standard light peach color that gets converted to grey/brown color for green version
    #353535: standard very dark grey color that gets converted to a dark green color
*/

.maxdefaulttablewidth
{
    width:100%;
}
.partialdefaulttablewidth
{
    width:20%;
}
.chart-width
{
    /* set chart's min/max width to default to 90% of browser width
       as long as this number is no more than twice browser height and no less than
       60% of browser width
       (i.e. we are simulating width to height aspect-ratio which is <= 2 and >= 1)
    */
    min-width:clamp(calc(1px + 60vw),calc(1px + 90vw),calc((1px + 90vh)*2));
    max-width:clamp(calc(1px + 60vw),calc(1px + 90vw),calc((1px + 90vh)*2));

}
.chart-height
{
    /* set chart's min/max height to 58% of browser height (so as to
        (1) leave room for top of webpage, possible html legend below, ...
        (2) never let the window get too small)
       as long as this number is no more than 1.3 times 90% of browser width
       (i.e. we are simulating width to height aspect-ratio which is
        no smaller than 1/1.2)
     */
    min-height:min(calc((1px + 90vw)*1.3),calc(1px + 58vh));
    max-height:min(calc((1px + 90vw)*1.3),calc(1px + 58vh));

}

.chart-width-pie
{
    /* set pie chart's min/max width to default to 1.5 times 58% of browser height
       as long as this number is no more than 90% of browser width
       (i.e. we are simulating width to height aspect-ratio which is 1.5)
    */
    min-width:min(calc((1px + 58vh)*1.5),calc(1px + 90vw));
    max-width:min(calc((1px + 58vh)*1.5),calc(1px + 90vw));


}
.chart-height-pie
{
    /* set chart's min/max height to 58% of browser height (so as to
        (1) leave room for top of webpage, possible html legend below, ...
        (2) never let the window get too small)*/
    min-height:58vh;
    max-height:58vh;
}

.chart-left
{
    display:flex;
    justify-content:left;
}

.chart-center
{
    display:flex;
    justify-content:center;
}

.maxwidth
{
    min-width:100%;
    max-width:100%;
}
.hidden_usenospace
{
    visibility:hidden;
    display:none;
}
.hidden_usespace
{
    visibility:hidden;
}
.font
{
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
.div_padding_outderdiv
{
    padding-top:20px;
    padding-bottom:25px;
    padding-left:15px;
    padding-right:15px;
}
.div_padding_innerdiv
{
    padding-top:10px;
    padding-bottom:20px;
    padding-left:10px;
    padding-right:30px;
}
.div_arrange
{
    vertical-align:top;
    display:inline-table;
}
.div_arrangeflex
{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}
.div_arrangeflex_nowrap
{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
}
.div_arrangeflex_center
{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    /* --------------------- */
    /* This is a trick of the flex display to make the items 
        centered in remaining part of screen  */
    /* --------------------- */
    margin-left: auto;
    margin-right: auto;
    /* --------------------- */
}
.div_arrangeflex_center_nowrap
{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    /* --------------------- */
    /* This is a trick of the flex display to make the items
        centered in remaining part of screen  */
    /* --------------------- */
    margin-left: auto;
    margin-right: auto;
    /* --------------------- */
}
.div_arrangeflex_right
{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    /*
    %%% - Note: this is a trick of the flex display that makes the items aligned to right side of screen.
        The reason why it works can be understood if you compare the "margin-left:auto" to
        a set of bookends with a powerful spring pushing them apart placed to the left of the div contents
        (it will push all the objects to the right).
        Note: if you were to also put a "margin-right:auto" then this would be like
            putting another set of spring loaded bookends to the right of all objects which would exert
            an equal pressure to push objects to the left which would cause the objects to be centred inside
            the remaining space.
    */
    margin-left: auto;
}
.div_arrangeflex_right_nowrap
{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    /*
    %%% - Note: this is a trick of the flex display that makes the items aligned to right side of screen.
        The reason why it works can be understood if you compare the "margin-left:auto" to
        a set of bookends with a powerful spring pushing them apart placed to the left of the div contents
        (it will push all the objects to the right).
        Note: if you were to also put a "margin-right:auto" then this would be like
            putting another set of spring loaded bookends to the right of all objects which would exert
            an equal pressure to push objects to the left which would cause the objects to be centred inside
            the remaining space.
    */
    margin-left: auto;
}
.div_border
{
    border-color:#808080; /* lighter grey */
    border-width:2px;
    border-style:solid;
}
.div_userinput
{
    background-color:#353535; /* very dark grey */
    color:#ffffff;
    border-color:#b01f24;
    border-width:2px;
    border-style:solid;
    padding-top:0px;
    padding-bottom:8px;
    padding-left:6px;
    padding-right:6px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
}
/*this selector is similar to div_userinput
except has extra padding at top for inputs that are
on single line which for some reason have
less padding on top in that case
 */
.div_userinput_oneline
{
    background-color:#353535; /* very dark grey */
    color:#ffffff;
    border-color:#b01f24;
    border-width:2px;
    border-style:solid;
    padding-top:10px;
    padding-bottom:8px;
    padding-left:6px;
    padding-right:6px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
}
.span_userinput_text
{
    padding-left: 3px;
    /*This option is used to separate the html select's label from the actual html select*/
    line-height:2.0;
}
.div_margin
{
    margin-top:10px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
}
.width-lessthanhalf
{
    width:140px;
    min-width:140px;
    max-width:140px;
}
.width-half
{
    width:160px;
    min-width:160px;
    max-width:160px;
}
.width-medium
{
    width:200px;
    min-width:200px;
    max-width:200px;
}
.width-large
{
    width:320px;
    min-width:320px;
    max-width:320px;
}
.defaultheight
{
    height:200px;
}
.centertext
{
    text-align:center;
}
.lefttext
{
    text-align:left;
}
.righttext
{
    text-align:right;
}
.smalllineheight
{
    line-height:0.25;
}
.mediumlineheight
{
    line-height:1.0;
}
.normalfontsize
{
    font-weight:normal;
    font-size:14px;
}
.mediumlargefontsize
{
    font-weight:normal;
    font-size:16px;
}
.smallfontsize
{
    font-size:small;
}
.reporttable
{
    border-color:#b01f23;
    /*
    Note: must use this border-collapse option or else using the color
    above does not look nice because it will be interspersed with
    another black border color
     */
    border-collapse: collapse;
}
.headerrowcolor
{
    background-color:#b01f23; /* dark red */
    /* Put dark border color (instead of #b01f23 or else cannot differentiate between
        header row's background color and cell border color)*/
    border-color:#000000;
}
.oddrowcolor
{
    background-color:#FFFFFF;
}
.evenrowcolor
{
    background-color:#f4e3b9;
}
.monthrowcolor
{
    background-color:#FFFFFF;
}
.quarterrowcolor
{
    background-color:#f4e3b9;
}
.monthtextcolor
{
    color:#000000;
}
.quartertextcolor
{
    color:#000000;
}
.regulartextcolor
{
    color:#000000;
}
.forvaluetextcolor
{
    color:#6600ff; /*dark blue*/
}
.totalvaluetextcolorrow
{
    color:#000000;
}
.rowfont
{
  /*font-family:'Times New Roman', serif;*/
    font-family: Arial, Helvetica, sans-serif;

}
.rowsmallfont
{
    font-size:small;
}
.reporttitletext,.grapherrortext
{
    font-family:Arial, sans-serif;
    font-weight:bold;
    font-size:medium;
    color:#000000;
}
.reportdatetimetext
{
    font-family:Arial, sans-serif;
    font-weight:bold;
    font-size:small;
    color:#c0c0c0;
}

/*
This is for showing report column header url sorting links
in appropriate white text color even when a link have been already visited, ...
note: order of these lines is important
    (i.e. use mnemonic: LoVe Fears HAte)
*/
.lighturltext           {color:#FFFFFF;}
.lighturltext:link      {color:#FFFFFF;}
.lighturltext:visited   {color:#FFFFFF;}
.lighturltext:focus     {color:#FFFFFF;}
/* when hover make url link's text light orange */
.lighturltext:hover     {color:#edd18b;}
.lighturltext:active    {color:#FFFFFF;}

/*
This is for showing webpage report type and log out links
where the link has no underline but becomes red when hovered over
and is in apporpriate white text color even when a link have been already visited, ...
note: order of these lines is important
    (i.e. use mnemonic: LoVe Fears HAte)
*/
.lighturltext_nourlunderline
    {
    color:#FFFFFF;
    /* This removes underline from text of url links */
    text-decoration: none;
    }
.lighturltext_nourlunderline:link      {color:#FFFFFF;}
.lighturltext_nourlunderline:visited   {color:#FFFFFF;}
.lighturltext_nourlunderline:focus     {color:#FFFFFF;}
/* when hover make url link's text light orange */
.lighturltext_nourlunderline:hover     {color: #edd18b;}
.lighturltext_nourlunderline:active    {color:#FFFFFF;}

.app_title_settings
{
    /*%%% - Note: it's important to use this variable font so
        on iPhone portrait mode we have room to show WebEasy title and
        for the logout avatar the follows it*/
    font-size:calc(10px + 0.45vw);
    font-weight:normal;
    text-align:right;
    text-wrap:nowrap;
}

.reportheaderfont
{
  /*font-family:Arial, sans-serif;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size:small;
}

.LoginBox,.ChangePwdBox
{
    margin: auto;
    position: relative;
    width: 350px;
    height: auto;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 24px;
    text-decoration: none;
    padding: 10px;
    border: 1px solid #b01f24;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    background: #FFFFFF;
}

.login_title,.changepwd_title
    {
    color: #b01f23;
    font-size: 15px;
    font-family: Verdana, Arial, sans-serif;
    }

.loginmessagetext,.changepwdmessagetext
    {
    font-size: 14px;
    font-family: Verdana, Arial, sans-serif;
    font-weight:bold;
    }

.login_label
    {
    width: 100px;
    text-align: left;
    padding-left: 68px;
    color: #000000;
    font-family: Verdana, Arial, sans-serif;
    float: left;
    }

.changepwd_label
    {
    width: 140px;
    text-align: left;
    padding-left: 40px;
    color: #000000;
    font-family: Verdana, Arial, sans-serif;
    float: left;
    }

.login_userdata,.changepwd_userdata
    {
    width: 145px;
    display: block;
    border: 1px solid #b01f24;
    height: 27px;
    padding: 5px;
    border-radius: 1px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    }

.div_copyright
{
    width: 100%;
    font-size:12px;
    text-align:center;
}

.nowraptext
{
    white-space: nowrap;
}

.boldtext
{
    font-weight:bold;
}

/* ************************************************************
Three special css selectors (outer/middle/inner) to center everything
within them both vertically and horizontally for the remaning
space on webpage.  They must be applied
as three consecutive enclosing div's. For example:
<DIV class="outer">
  <DIV class="middle">
    <DIV class="inner">
        <span>Sample text to center<span>
    </DIV>
  </DIV>
</DIV>
There is also another set ([outer_hovererror_dark/outer_hovererror_light]/middle_hovererror/inner_hovererror) which is similar
except that it is used to show error messages and so it is is different in that:
    - it hovers over the entire webpage and its html elements
    - it greys out all the html elements behind it (either very darkly for outer_hovererror_dark or else lightly for outer_hovererror_light)
behind it.
************************************************************ */
/*regular set for centering something from current page in document*/
.outer {
  display: table;
  top: 0;
  left: 0;
  /* use 90% (as opposed to 100%) to leave a bit of room for the
  web pages main "Futurion" header at the top
  Note: to make this smart and not hardcoded to a 90% value
    (i.e. to handle taller or smaller headers) would require using
     the "flex" css display option, however, the Futurion header
     at the top would then also need to be converted to use flex 
    (or else it will not work -I tried it) and that's too much work for now.    
   */
  height: 90%;
  width: 100%;
  /* This makes it centered over remaining area of webpage */
  position: static;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  margin-left: auto;
  margin-right: auto;
}
/*special hover set for centering something over entire webpage to show an error message*/
.outer_hovererror_light {
  display: table;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* This makes it: (1) centered over entire webpage (2) not take up any space so that it hovers over entire webpages's html elements*/
  position: absolute;
  /* This makes it hover on top of all other elements of webpage */
  z-index:1000;
  /* This makes all other elements behind it slightly greyed out */
  background-color: rgba(0, 0, 0, 0.3);
}
.outer_hovererror_dark {
  display: table;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  /* This makes it: (1) centered over entire webpage (2) not take up any space so that it hovers over entire webpages's html elements*/
  position: absolute;
  /* This makes it hover on top of all other elements of webpage */
  z-index:1000;
  /* This makes all other elements behind it very darkly greyed out */
  background-color: rgba(0, 0, 0, 0.8);
}
.middle_hovererror {
  display: table-cell;
  vertical-align: middle;
}
.inner_hovererror {
  margin-left: auto;
  margin-right: auto;
}
/* ************************************************************ */

.ErrorMessageBox {
    margin-left: auto;
    margin-right: auto;
    /* set error message box's max width to default to 600 pixels wide
       as long as this number is no more than 80% of browser width
       and is at least 100px's wide
       (i.e. we want the error message to not take up the entire browser's
        horizontal space - or else we will not see the box that surrounds it)
    */
    max-width:clamp(100px,600px,calc(1px + 80vw));
    min-height: 100px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #b10f24;
    text-decoration: none;
    padding-top:    30px;
    padding-bottom: 30px;
    padding-left:   20px;
    padding-right:  20px;
    border: 1px solid #b01f24;
    background: #FFFFFF;
}

.LoginMessageBox,.ChangePwdMessageBox
{
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    min-height: 200px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    font-size: 14px;
    line-height: 24px;
    color: #b10f24;
    text-decoration: none;
    padding: 10px;
    border: 1px solid #b01f24;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    background: #FFFFFF;
}

.mainerror
{
	font-size:14px;
	font-family: Verdana, Arial, sans-serif;
	font-weight: bold;
	color: #b01f24;
}




.dropdown {
  position: relative;
  display: inline-block;
}

/* change text color of menu option anchor to light orange when user hovers over it */
.dropdown a:hover {
  color: #edd18b;
}

.dropbtn {
  color:#FFFFFF;
  background-color:#353535; /* very dark grey */
  font-size: 16px;
  border: none;
  /* this is important so cursor looks like a hand when on the main menu button */
  cursor: pointer;
  /* this make the avatar image have nice slightly rounded corners when user selects it */
  border-radius:0.3em;
  /* also put padding so the avatar image has nice highlighted area around it when user selects it (especially for iOS where if not it uses too much horizontal padding) */
  padding-top:3px;
  padding-bottom:3px;
  padding-left:6px;
  padding-right:6px;

}

/* change text color of menu dropdown avatar to red when user
    hovers over it or it has the focus (i.e. user clicked on it) */
.dropbtn:hover, .dropbtn:focus {
  background-color: #b01f24;
}

.dropdown-content {
  color:#FFFFFF;
  background-color: #353535; /* very dark grey */
  display: none;
  position: absolute;
  /* Note: %%% had to put this as a safety because older Safari browsers do not support "text-wrap:nowrap;" */
  min-width:125px;
  text-align:left;
  overflow: auto;
  /* my guess is that makes sure it covers othjer elements in page */
  z-index: 1;
  /*make menu option end at right of page */
  right:0px;
  /* this make the signout menu option have nice rounded corners */
  border-radius:0.4em;
  /* this is important so cursor looks like a hand when on the menu options (wehter they use a url or not) */
  cursor: pointer;
}

.dropdown-content a {
  color:#FFFFFF;
  padding-top:6px;
  padding-bottom:6px;
  padding-left:16px;
  padding-right:20px;
  /* This removes underline from text of url links */
  text-decoration: none;
  text-wrap:nowrap;
  display: block;
}

.showdropdown
{
  display: block;
}

.disabledimage_nourl           {opacity:0.2;}

/*
This is the trick that makes the image fully visible (i.e. not opaque)
only if it has an href  link (else this CSS selector will be skipped and
the partially opaque selector above will be used instead
*/
.disabledimage_nourl:link      {opacity:1.0;}

/* padd the equivalent of certain number of &nbsp;'s (based on current elements font size) to either left or right of object */
.leftpadding0
{
    padding-left:0;
}
.rightpadding0
{
    padding-right:0;
}
.leftpadding1
{
    /*Note: is approx equal to 5 &nbsp;   (where 1ch supposedly equals width of "0" character)*/
    padding-left:0.5ch;
}
.rightpadding1
{
    /*Note: is approx equal to 1 &nbsp;   (where 1ch supposedly equals width of "0" character)*/
    padding-right:0.5ch;
}
.leftpadding2
{
    /*Note: is approx equal to 2 &nbsp;'s (where 1ch supposedly equals width of "0" character)*/
    padding-left:1ch;
}
.rightpadding2
{
    /*Note: is approx equal to 2 &nbsp;'s (where 1ch supposedly equals width of "0" character)*/
    padding-right:1ch;
}
.rightpadding3
{
    /*Note: is approx equal to 3 &nbsp;'s (where 1ch supposedly equals width of "0" character)*/
    padding-right:2ch;
}
.leftpadding5
{
    /*Note: is approx equal to 5 &nbsp;'s (where 1ch supposedly equals width of "0" character)*/
    padding-left:2.5ch;
}

.leftpadding10
{
    /*Note: is approx equal to 10 &nbsp;'s (where 1ch supposedly equals width of "0" character)*/
    padding-left:5ch;
}