/* ----- Style Sheet for PolarSPARC ----- */
/* ----- Version:       2.4         ----- */
/* ----- Author:        Bhaskar S   ----- */
/* ----- Date:          01/01/2023  ----- */
/* ----- Last Modified: 08/01/2025  ----- */

/* ============================================================================================== */

/* ----- Common ----- */

/* ----- Global Variables Block ----- */
:root
{
    --tech_blue_0: #003399;
    --tech_blue_1: #0077E6;
    --tech_blue_2: #177EE0;
    --tech_blue_3: #CCE6FF;

    --math_green_0: #2B7A78;
    --math_green_1: #3AAFA9;
    --math_green_2: #DEF2F1;

    --gen_color_0: #0049B7;
    --gen_color_1: #F2D53C;
    --gen_color_2: #B73225;
    --gen_color_3: #FCEED1;

    --tips_color_0: #682BD5;
    --tips_color_1: #A37CF0;
    --tips_color_2: #6C6C6C;
}

/* ----- Paragraph Block ----- */
#para-div
{
    background: #FFFFFF;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: justify;
}
#para-div span.note
{
    background: var(--tech_blue_0);
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}
#para-div span.caution
{
    background: #990000;
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: bold;
    font-style: italic;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

/* ----- Attention Block ----- */
#attn-div
{
    background: #F2CBCB;
    border: 2px solid #8C0000;
    box-shadow: 2px 2px 1px grey;
    color: #8C0000;
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 70%;
}
#attn-div h4
{
    background: #8C0000;
    box-shadow: 2px 2px 1px grey;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: -3px;
    padding: 1px 1px 1px 5px;
    text-align: center;
    width: 15%;
}
#attn-div p
{
    font-weight: bold;
    margin: 5px;
    margin-top: 10px;
}

/* ----- Command Block ----- */
#cmd-div
{
    background: var(--tech_blue_3);
    border: 2px solid var(--tech_blue_1);
    border-left: 20px solid var(--tech_blue_1);
    border-radius: 5px;
    color: var(--tech_blue_1);
    font-family: "Courier New", Courier, Fixed;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    padding-left: 10px;
    width: 68%;
}
#cmd-div p, pre
{
    color: #992600;
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    font-weight: bold;
}

/* ----- Source Code Block ----- */
#src-outer-div-1
{
    background: #FEF9C7;
    border: 2px solid #585858;
    border-radius: 10px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
.src-cap-1
{
    border-radius: 5px;
    background: #474B4F;
    color: #FEF9C7;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: -10px;
    margin-left: 5%;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: max-content;
}
.src-body-1
{
    font-family: Consolas, Monaco, "Courier New", Monospace;
    font-size: 12px;
    font-weight: normal;
    margin: 5px;
    overflow: auto;
    padding: 5px;
}
.src-body-1 pre
{
    color: #585858;
    font-weight: bold;
    margin: 5px;
    padding: 5px;
}

/* ----- Output Block ----- */
#out-div
{
    background: #E8E8E8;
    border: 2px solid #585858;
    border-radius: 10px;
    color: #000000;
    font-family: "Courier New", Courier, Fixed;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 70%;
}
#out-div h4
{
    background: #585858;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: 5px;
    padding: 1px 1px 1px 5px;
    text-align: left;
}
#out-div p
{
    font-weight: normal;
}
#out-div pre
{
    color: #000000;
    margin: 5px;
    font-weight: normal;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* ----- Code Style ----- */
#code-div
{
    background: var(--tech_blue_3);
    border: 1px solid var(--tech_blue_1);
    border-left: 10px solid var(--tech_blue_0);
    border-radius: 10px;
    color: #000000;
    font-family: "Courier New", Courier, Fixed;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    padding-left: 11px;
    padding-right: 11px;
    width: 70%;
}
#code-div pre
{
    font-weight: bold;
}

/* ----- Info Block ----- */
#info-div
{
    background: #A3D7F0;
    border: 2px solid var(--tech_blue_2);
    border-radius: 10px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 70%;
}
#info-div h4
{
    background: var(--tech_blue_2);
    border-radius: 5px;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: 3px;
    padding: 5px 5px 5px 10px;
    text-align: left;
}
#info-div p
{
    font-weight: bold;
}
#info-div pre
{
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* ----- Warning Block ----- */
#warn-div
{
    background: #F6D190;
    border: 2px solid #F9A820;
    border-radius: 10px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 70%;
}
#warn-div h4
{
    background: #F9A820;
    border-radius: 5px;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: 3px;
    padding: 5px 5px 5px 10px;
    text-align: left;
}
#warn-div p
{
    font-weight: bold;
}
#warn-div pre
{
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* ----- Error Block ----- */
#error-div
{
    background: #F7D3D0;
    border: 2px solid #B72C20;
    border-radius: 10px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    width: 70%;
}
#error-div h4
{
    background: #B72C20;
    border-radius: 5px;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: 3px;
    padding: 5px 5px 5px 10px;
    text-align: left;
}
#error-div p
{
    font-weight: bold;
}
#error-div pre
{
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* ----- Text Style ----- */
.bold
{
    font-weight: bold;
}

.underbold
{
    font-weight: bold;
    text-decoration: underline #B72C20;
    text-decoration-style: double;
}

.error
{
    color: #CC0000;
    font-style: italic;
    font-weight: bold;
}

.hi-yellow
{
    background: #FFFF99;
    border-color: #FFCC00;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-orange
{
    background: #FFCC99;
    border-color: #FF9933;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-pink
{
    background: #FFCCFF;
    border-color: #FF4DFF;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-blue
{
    background: #B3FFFF;
    border-color: #00CCCC;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-green
{
    background: #B3FFCC;
    border-color: #00CC44;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-red
{
    background: #FFCCCC;
    border-color: #FF4D4D;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-vanila
{
    background: #FFF7E6;
    border-color: #FFDD99;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-purple
{
    background: #E6CCFF;
    border-color: #9933FF;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

.hi-grey
{
    background:  #E5E5E5;
    border-color: #7C7C7C;
    border-radius: 3px;
    border-style: solid;
    border-width: 2px;
    font-family: Courier, Monospace;
    font-size: 11px;
    font-weight: bold;
    margin-left: 2px;
    padding-left: 2px;
    margin-right: 3px;
    padding-right: 3px;
    padding-top: 2px;
}

/* ----- Unicode Symbol Style ----- */
#symbol-24
{
    font-size: 24px;
}

/* ============================================================================================== */

/* ----- Blue Color (Technology) ----- */

/* ----- Header Block(s) ----- */
#ps-header {
    display: inline-block;
    width: 100%;
}
#ps-header img {
    border: 3px solid var(--tech_blue_1);
    border-radius: 10px;
    height: 25vw;
    width: 100%;
}

/* ----- Home Block(s) ----- */
#ps-home {
  font-size: 38px;
  color: transparent;
  user-select: none;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow: visible;
  vertical-align: top;
  font-style: normal;
  height: 1em;
  width: 1em;
  mix-blend-mode: multiply;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 12.5%, transparent 12.5%, transparent 87.5%, #ffffff 87.5%),
              linear-gradient(0deg, transparent 0%, transparent 50%, var(--tech_blue_3) 50%, var(--tech_blue_3) 62.5%, transparent 62.5%),
              linear-gradient(90deg, transparent 0%, transparent 43.75%, #ffffff 43.75%, #ffffff 56.25%, transparent 56.25%),
              linear-gradient(0deg, #ffffff 0%, #ffffff 12.5%, var(--tech_blue_1) 12.5%, var(--tech_blue_1) 62.5%, transparent 62.5%);
}
#ps-home:before {
  background-color: #ffffff;
  border-color: transparent transparent var(--tech_blue_1) transparent;
  border-style: solid;
  border-width: 0 0.5em 0.375em 0.5em;
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute;
  top: 0.05em;
}
#home-a
{
    color: var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-weight: bold;
    margin: 5px;
    text-align: center;
    text-decoration: none;
}

/* ----- Footer Block(s) ----- */
#footer-a
{
    color: var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

/* ----- Title Block(s) ----- */
#title-div
{
    background: var(--tech_blue_3);
    border: 5px solid var(--tech_blue_1);
    border-radius: 5px;
    border-style: double double;
    color: var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#title-div p
{
    margin: 5px;
}

/* ----- Author and Date Block ----- */
#ad-table
{
    background: #FFFFFF;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    width: 100%
}
#ad-table .author-td
{
    text-align: left;
}
#ad-table .date-td
{
    text-align: right;
}

/* ----- Horizontal Line ----- */
.line-hr
{
    color: var(--tech_blue_1);
    border: 2px solid var(--tech_blue_1);
}

/* ----- Section Title Block ----- */
#section-div
{
    background: #FFEB99;
    border-left: 30px solid #585858;
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    display: inline-table;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    margin: 10px;
    text-align: center;
}
#section-div p
{
    font-weight: bold;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- Step Block ----- */
#step-div
{
    background: var(--tech_blue_3);
    border-left: 15px solid var(--tech_blue_1);
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    display: table;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 20px;
    text-align: center;
}
#step-div p
{
    font-weight: bold;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- Step Table ----- */
#step-table
{
    background: #FFFFFF;
    border-spacing: 0;
    color: var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    margin: 25px;
}
#step-table .text-td
{
    background: #FFEB99;
    border: 2px solid var(--tech_blue_1);
    border-radius: 3px;
    display: table;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}
#step-table .pointer-td
{
    width: 0;
    height: 0;
    border-radius: 3px;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-left: 13px solid var(--tech_blue_1);
}

/* ----- Unordered List (Blue Square) ----- */
#blue-sqr-ul
{
    color: var(--tech_blue_1);
    line-height: 2;
    list-style-type: square;
    margin: 5px;
}
#blue-sqr-ul p
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: normal;
}
#blue-sqr-ul #cmd-div p, pre
{
    color: #992600;
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    font-weight: bold;
}
#blue-sqr-ul #out-div pre
{
    color: #000000;
    margin: 5px;
    font-weight: normal;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

/* ----- Unordered Sub List (Blue Disc) ----- */
#blue-disc-ul
{
    color: var(--tech_blue_1);
    line-height: 2;
    list-style-type: disc;
    margin: 10px;
}
#blue-disc-ul p
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
}

/* ----- Ordered List (Blue Numbers) ----- */
#blue-ol
{
    color: var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 2;
    margin: 5px;
}
#blue-ol p
{
    color: #000000;
    font-weight: normal;
}

/* ----- 2-Column Table ----- */
#col2-table
{
    background: #FFFFFF;
    border: 2px solid var(--tech_blue_1);
    border-radius: 5px;
    color: var(--tech_blue_0);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 70%
}
#col2-table th
{
    background: var(--tech_blue_3);
    border-bottom: 1px solid var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    padding-left: 5px;
}
#col2-table td
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    font-weight: normal;
    padding-left: 5px;
}
#col2-table .col2-c1-even
{
    background: var(--tech_blue_3);
    width: 20%
}
#col2-table .col2-c1-odd
{
    width: 20%
}
#col2-table .col2-c2-even
{
    background: var(--tech_blue_3);
    width: 80%
}
#col2-table .col2-c2-odd
{
    width: 80%
}

/* ----- 3-Column Table ----- */
#col3-table
{
    background: #FFFFFF;
    border: 2px solid var(--tech_blue_1);
    border-radius: 5px;
    color: var(--tech_blue_0);
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 70%
}
#col3-table th
{
    background: var(--tech_blue_3);
    border-bottom: 1px solid var(--tech_blue_1);
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    padding-left: 5px;
}
#col3-table td
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    font-weight: normal;
    padding-left: 5px;
}
#col3-table .col3-c1-even
{
    background: var(--tech_blue_3);
    width: 20%
}
#col3-table .col3-c1-odd
{
    width: 20%
}
#col3-table .col3-c2-even
{
    background: var(--tech_blue_3);
    width: 20%
}
#col3-table .col3-c2-odd
{
    width: 20%
}
#col3-table .col3-c3-even
{
    background: var(--tech_blue_3);
    width: 60%
}
#col3-table .col3-c3-odd
{
    width: 60%
}

/* ----- Image Block ----- */
#img-outer-div
{
}
.img-cls
{
    border: 2px solid var(--tech_blue_1);
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
.img-cap
{
    background: var(--tech_blue_3);
    border-bottom: 1px solid var(--tech_blue_1);
    border-left: 1px solid var(--tech_blue_1);
    border-right: 1px solid var(--tech_blue_1);
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 10%;
}

/* ============================================================================================== */

/* ----- Purple Color (Tips) ----- */

/* ----- Tips Home Block(s) ----- */
#tips-home {
  font-size: 38px;
  color: transparent;
  user-select: none;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow: visible;
  vertical-align: top;
  font-style: normal;
  height: 1em;
  width: 1em;
  mix-blend-mode: multiply;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 12.5%, transparent 12.5%, transparent 87.5%, #ffffff 87.5%),
              linear-gradient(0deg, transparent 0%, transparent 50%, var(--tips_color_1) 50%, var(--tips_color_1) 62.5%, transparent 62.5%),
              linear-gradient(90deg, transparent 0%, transparent 43.75%, #ffffff 43.75%, #ffffff 56.25%, transparent 56.25%),
              linear-gradient(0deg, #ffffff 0%, #ffffff 12.5%, var(--tips_color_0) 12.5%, var(--tips_color_0) 62.5%, transparent 62.5%);
}
#tips-home:before {
  background-color: #ffffff;
  border-color: transparent transparent var(--tips_color_0) transparent;
  border-style: solid;
  border-width: 0 0.5em 0.375em 0.5em;
  box-sizing: border-box;
  content: '';
  display: block;
  position: absolute;
  top: 0.05em;
}
#tips-home-a
{
    color: var(--tips_color_0);
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-weight: bold;
    margin: 5px;
    text-align: center;
    text-decoration: none;
}
#tips-home-a a
{
    color: var(--tips_color_0);
}

/* ----- Tips Author and Date Block ----- */
#tips-ad-table
{
    background: #FFFFFF;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    width: 100%
}
#tips-ad-table .author-td
{
    text-align: left;
}
#tips-ad-table .date-td
{
    text-align: right;
}
#tips-ad-table p
{
    color: var(--tips_color_2);
}

/* ----- Tips Horizontal Line ----- */
.tips-line-hr
{
    color: var(--tips_color_0);
    border: 2px solid var(--tips_color_0);
}

/* ----- Tips Paragraph Block ----- */
#tips-para-div
{
    background: #FFFFFF;
    color: var(--tips_color_2);
    font-family: "Times New Roman", Times, serif;
    font-size: 20px;
    padding-left: 25px;
    padding-right: 25px;
    text-align: justify;
}

/* ----- Tips Line with Rounded Rectangle ----- */
#tips-line {
    background-color: var(--tips_color_0);
    height: 4px;
    margin: 10px auto;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    width: 100%;
}
.tips-cap
{
    align-items: center;
    background: var(--tips_color_0);
    border-radius: 15px;
    box-shadow: 2px 2px 1px grey;
    color: #ffffff;
    display: flex;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
}

/* ============================================================================================== */

/* ----- Brown Color (Leadership) ----- */

/* ----- Title Block(s) ----- */
#title-div-2
{
    background: #FFFFFF;
    border: 2px solid #660000;
    border-radius: 5px;
    border-left: 20px solid #660000;
    border-right: 20px solid #660000;
    color: #660000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
#title-div-2 p
{
    margin: 5px;
}

/* ----- Author and Date Block ----- */
#ad-table-2
{
    background: #FFFFFF;
    color: #660000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    width: 100%
}
#ad-table-2 .author-td
{
    text-align: left;
}
#ad-table-2 .date-td
{
    text-align: right;
}

/* ----- Horizontal Line ----- */
.line-hr-2
{
    color: #660000;
    border: 1px solid #660000;
}

/* ----- Section Title Block ----- */
#section-div-2
{
    background: #F9A820;
    border-left: 30px solid #585858;
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    display: inline-table;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    margin: 10px;
    text-align: center;
}
#section-div-2 p
{
    font-weight: bold;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- Unordered List (Brown Square) ----- */
#brown-sqr-ul
{
    color: #660000;
    line-height: 2;
    list-style-type: square;
    margin: 5px;
}
#brown-sqr-ul p
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: normal;
}

/* ----- Image Block ----- */
#img-outer-div-2
{
}
.img-cls-2
{
    border: 2px solid #660000;
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
.img-cap-2
{
    background: #660000;
    box-shadow: 2px 2px 1px grey;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 10%;
}

/* ============================================================================================== */

/* ----- Green Color (Math) ----- */

/* ----- Header Block(s) ----- */
#ps-header-3 img {
    border: 3px solid var(--math_green_0);
    border-radius: 10px;
    height: 25vw;
    width: 100%;
}

/* ----- Home Block(s) ----- */
#ps-home-3 {
    font-size: 38px;
    color: transparent;
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    overflow: visible;
    vertical-align: top;
    font-style: normal;
    height: 1em;
    width: 1em;
    mix-blend-mode: multiply;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 12.5%, transparent 12.5%, transparent 87.5%, #ffffff 87.5%),
    linear-gradient(0deg, transparent 0%, transparent 50%, var(--math_green_2) 50%, var(--math_green_2) 62.5%, transparent 62.5%),
    linear-gradient(90deg, transparent 0%, transparent 43.75%, #ffffff 43.75%, #ffffff 56.25%, transparent 56.25%),
    linear-gradient(0deg, #ffffff 0%, #ffffff 12.5%, var(--math_green_0) 12.5%, var(--math_green_0) 62.5%, transparent 62.5%);
}
#ps-home-3:before {
    background-color: #ffffff;
    border-color: transparent transparent var(--math_green_0) transparent;
    border-style: solid;
    border-width: 0 0.5em 0.375em 0.5em;
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    top: 0.05em;
}
#home-a-3
{
    color: var(--math_green_0);
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-weight: bold;
    margin: 5px;
    text-align: center;
    text-decoration: none;
}

/* ----- Footer Block(s) ----- */
#footer-a-3
{
    color: var(--math_green_0);
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

/* ----- Title Block(s) ----- */
#title-div-3
{
    background: var(--math_green_2);
    border: 5px solid var(--math_green_0);
    border-radius: 20px;
    border-style: double double;
    color: var(--math_green_0);
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#title-div-3 p
{
    margin: 5px;
}

/* ----- Author and Date Block ----- */
#ad-table-3
{
    background: #FFFFFF;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    width: 100%
}
#ad-table-3 .author-td
{
    text-align: left;
}
#ad-table-3 .date-td
{
    text-align: right;
}

/* ----- Horizontal Line ----- */
.line-hr-3
{
    color: var(--math_green_0);
    border: 2px solid var(--math_green_0);
}

/* ----- Section Title Block ----- */
#section-div-3
{
    background: var(--math_green_0);
    border-left: 30px solid #403B3B;
    border-radius: 15px;
    box-shadow: 2px 2px 1px grey;
    color: #FEFFFF;
    display: inline-table;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-weight: bold;
    margin: 10px;
    text-align: center;
}
#section-div-3 p
{
    font-weight: bold;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- Step Block ----- */
#step-div-3
{
    background: var(--math_green_2);
    border-left: 15px solid var(--math_green_1);
    border-radius: 15px;
    box-shadow: 2px 2px 1px grey;
    color: #403B3B;
    display: table;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 20px;
    text-align: center;
}
#step-div-3 p
{
    font-weight: bold;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- Unordered List (Green Square) ----- */
#green-sqr-ul
{
    color: var(--math_green_1);
    line-height: 2;
    list-style-type: square;
    margin: 5px;
}
#green-sqr-ul p
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: normal;
}

/* ----- 2-Column Table ----- */
#col2-table-3
{
    background: #FFFFFF;
    border: 2px solid var(--math_green_0);
    border-radius: 5px;
    color: #FEFFFF;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 70%
}
#col2-table-3 th
{
    background: var(--math_green_0);
    border-bottom: 1px solid var(--math_green_1);
    border-radius: 5px;
    font-family: "Times New Roman", Times, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: bold;
    padding-left: 5px;
}
#col2-table-3 td
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    font-weight: normal;
    padding-left: 5px;
}
#col2-table-3 .col2-c1-even
{
    background: var(--math_green_2);
    width: 20%
}
#col2-table-3 .col2-c1-odd
{
    width: 20%
}
#col2-table-3 .col2-c2-even
{
    background: var(--math_green_2);
    width: 80%
}
#col2-table-3 .col2-c2-odd
{
    width: 80%
}

/* ----- 2-Row Table ----- */
#row2-table-3
{
    background: #FFFFFF;
    border: 2px solid var(--math_green_0);
    border-radius: 5px;
    color: var(--math_green_2);
    font-family: "Courier New", Courier, Fixed;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 70%
}
#row2-table-3 th
{
    background: var(--math_green_1);
    border-radius: 5px;
    border-bottom: 1px solid var(--math_green_0);
    color: #000000;
    font-weight: bold;
    padding-left: 5px;
}
#row2-table-3 .th-c1
{
    width: 10%
}
#row2-table-3 td
{
    background: #F4F4F4;
    border-radius: 5px;
    color: #000000;
    font-weight: normal;
    padding-left: 5px;
}

/* ----- Image Block ----- */
#img-outer-div-3
{
}
.img-cls-3
{
    border: 2px solid var(--math_green_0);
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
.img-cap-3
{
    background: var(--math_green_1);
    border-radius: 15px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    margin-top: -10px;
    padding: 1px;
    text-align: center;
    width: 10%;
}

/* ============================================================================================== */

/* ----- General Category ----- */

/* ----- Home Block(s) ----- */
#gen-home {
    font-size: 38px;
    color: transparent;
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    overflow: visible;
    vertical-align: top;
    font-style: normal;
    height: 1em;
    width: 1em;
    mix-blend-mode: multiply;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 12.5%, transparent 12.5%, transparent 87.5%, #ffffff 87.5%),
    linear-gradient(0deg, transparent 0%, transparent 50%, var(--gen_color_2) 50%, var(--gen_color_2) 62.5%, transparent 62.5%),
    linear-gradient(90deg, transparent 0%, transparent 43.75%, #ffffff 43.75%, #ffffff 56.25%, transparent 56.25%),
    linear-gradient(0deg, #ffffff 0%, #ffffff 12.5%, var(--gen_color_1) 12.5%, var(--gen_color_1) 62.5%, transparent 62.5%);
}
#gen-home:before {
    background-color: #ffffff;
    border-color: transparent transparent var(--gen_color_2) transparent;
    border-style: solid;
    border-width: 0 0.5em 0.375em 0.5em;
    box-sizing: border-box;
    content: '';
    display: block;
    position: absolute;
    top: 0.05em;
}
#gen-home-a
{
    color: var(--gen_color_2);
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-weight: bold;
    margin: 5px;
    text-align: center;
    text-decoration: none;
}

/* ----- Title Block(s) ----- */
#gen-title-div
{
    background: var(--gen_color_3);
    border: 5px solid var(--gen_color_0);
    border-radius: 5px;
    border-style: double double;
    color: var(--gen_color_2);
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
#gen-title-div p
{
    margin: 5px;
}

/* ----- Footer Block(s) ----- */
#gen-footer-a
{
    color: var(--gen_color_0);
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

/* ----- Author and Date Block ----- */
#gen-ad-table
{
    background: #FFFFFF;
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    width: 100%
}
#gen-ad-table .author-td
{
    color: var(--gen_color_0);
    text-align: left;
}
#gen-ad-table .date-td
{
    color: var(--gen_color_0);
    text-align: right;
}

/* ----- Horizontal Line ----- */
.gen-line-hr
{
    color: var(--gen_color_0);
    border: 2px solid var(--gen_color_0);
}

/* ----- Step Block ----- */
#gen-step-div
{
    background: var(--gen_color_1);
    border-left: 15px solid var(--gen_color_2);
    border-radius: 5px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    display: table;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    margin-left: 20px;
    text-align: center;
}
#gen-step-div p
{
    font-weight: bold;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* ----- Unordered List (General Square) ----- */
#gen-sqr-ul
{
    color: var(--gen_color_2);
    line-height: 2;
    list-style-type: square;
    margin: 5px;
}
#gen-sqr-ul p
{
    color: #000000;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: normal;
}

/* ----- 2-Row Table ----- */
#gen-row2-table-3
{
    background: #FFFFFF;
    border: 2px solid var(--gen_color_0);
    border-radius: 5px;
    color: var(--gen_color_2);
    font-family: "Courier New", Courier, Fixed;
    font-size: 13px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 70%
}
#gen-row2-table-3 th
{
    background: var(--gen_color_0);
    border-radius: 5px;
    border-bottom: 1px solid var(--gen_color_0);
    color: #FFFFFF;
    font-weight: bold;
    padding-left: 5px;
}
#gen-row2-table-3 .th-c1
{
    width: 10%
}
#gen-row2-table-3 td
{
    background: var(--gen_color_3);
    border-radius: 5px;
    color: #000000;
    font-weight: normal;
    padding-left: 5px;
}

/* ----- Image Block ----- */
#gen-img-outer-div
{
}
.gen-img-cls
{
    background: var(--gen_color_3);
    border: 2px solid var(--gen_color_0);
    box-shadow: 2px 2px 1px grey;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
.gen-img-cap
{
    background: var(--gen_color_1);
    border-bottom: 1px solid var(--gen_color_1);
    border-left: 1px solid var(--gen_color_1);
    border-right: 1px solid var(--gen_color_1);
    box-shadow: 2px 2px 1px grey;
    color: var(--gen_color_0);
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 10%;
}

/* ----- Command Block ----- */
#gen-cmd-div
{
    background: var(--gen_color_3);
    border: 2px solid var(--gen_color_0);
    border-left: 20px solid var(--gen_color_2);
    border-radius: 5px;
    color: var(--gen_color_0);
    font-family: "Courier New", Courier, Fixed;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    padding-left: 10px;
    width: 68%;
}
#gen-cmd-div p, pre
{
    color: var(--gen_color_0);
    font-family: "Courier New", Courier, Fixed;
    font-size: 12px;
    font-weight: bold;
}

/* ----- Source Code Block ----- */
#gen-src-outer-div
{
    background: var(--gen_color_3);
    border: 2px solid var(--gen_color_0);
    border-radius: 10px;
    box-shadow: 2px 2px 1px grey;
    color: #000000;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
.gen-src-cap
{
    border-radius: 5px;
    background: var(--gen_color_0);
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    margin: -10px;
    margin-left: 5%;
    padding: 3px 10px 3px 10px;
    text-align: center;
    width: max-content;
}
.gen-src-body
{
    font-family: Consolas, Monaco, "Courier New", Monospace;
    font-size: 12px;
    font-weight: normal;
    margin: 5px;
    overflow: auto;
    padding: 5px;
}
.gen-src-body pre
{
    color: var(--gen_color_0);
    font-weight: bold;
    margin: 5px;
    padding: 5px;
}

/* ============================================================================================== */

/* ----- End ----- */