/*Resharper Options > Code Editing > CSS*/
body {
    margin: 10px;
    padding: 0;
    color: #000000;
    background-color: white;
}

body, span, th, td {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-size: 13px;
}

/*input[type=text]
or, to restrict to text inputs inside forms
form input[type=text]
or, to restrict further to a certain form, assuming it has id myForm
#myForm input[type=text]
*/
input, select, textarea {
    /*border: 1px solid blue*/
    border: 1px solid rgb(169, 169, 169);
    /*needed when background-color changes*/
    /*zdisplay: block;*/ /*block breaks error spans*/
    padding: 5px 8px;
    background-color: rgba(97, 127, 190, 0.15);
    box-sizing: border-box;
}

    input:focus, select:focus, textarea:focus {
        outline: 2px solid lightblue;
        border: 1px solid lightblue;
    }

    input[type=password] {
        /*border: 1px solid blue*/
        border: 1px solid #b48f8f;
        /*needed when background-color changes*/
    }

    input[type=image] {
        background: none;
        border: 0
    }

/*input[type=image]:focus {
            outline: 0;
            border: 0;
        }*/

select {
    /*1 padding less. e.g. /myfxboard/user_profile */
    padding: 4px 8px; /*4px 8px vs 5px 8px*/
}

textarea {
    font: 400 13.3333px Arial; /*input[type=text] default: will match input*/
}

img {
    border-width: 0;
    vertical-align: middle;
}

/*th {
    font-family: Verdana;
    font-size: 12px;
}

td {
    font-family: Verdana;
    font-size: 12px;
}*/

form {
    display: inline-block;
    /*margin: 0; 
    padding: 0;*/
}

div.ContentVerticalCenter {
    /*https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div*/
    display: flex;
    align-items: center;
}

div.DivCentered {
    margin-left: auto;
    margin-right: auto;
}

div.DivCenteredY {
    /* http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

a.forums {
    color: deepskyblue;
    font-weight: normal;
    font-size: 11px;
}

    a.forums:hover {
        color: #0000ff;
        text-decoration: underline;
    }

a.ForumTopMenu {
}

    a.ForumTopMenu:hover {
        border-top: 3px solid orange;
    }

a.TopProductLink {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #F2BE00;
    text-decoration: none;
}

    a.TopProductLink:visited, a.TopProductLink:active, a.TopProductLink:focus {
        color: #F2BE00;
        text-decoration: none;
    }

    a.TopProductLink:hover {
        color: #F2BE00; /*otherwise will be overridden by bootstrap*/
        text-decoration: underline;
    }

a.toplink {
    color: #EDBE00;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

    a.toplink:visited, a.toplink:active, a.toplink:focus {
        color: #EDBE00;
        text-decoration: none;
    }

    a.toplink:hover {
        color: #EDBE00;
        text-decoration: underline;
    }

a.innerlink {
    color: #4040b0;
    text-decoration: none;
    font-family: Verdana;
    font-size: 11px;
}

    a.innerlink:visited {
        color: #4040b0;
        text-decoration: none;
    }

    a.innerlink:hover {
        color: #0000ff;
        text-decoration: underline;
    }

div.TdMenuNormal {
    background-color: #d40026;
    width: 100%;
    cursor: pointer;
    padding: 5px;
    box-sizing: border-box;
}

div.TdMenuHighlight {
    background-color: #e42046;
    width: 100%;
    cursor: pointer;
    padding: 5px;
}

    div.TdMenuHighlight A.TopProductLink {
        text-decoration: underline;
    }

div.TdMenuStatic {
    background-color: #e42046;
    height: 100%;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
    padding: 4px;
}

table.TableBorder1 {
    /*border="1" cellpadding ="0" cellspacing="0"*/
    border-collapse: collapse;
    /*border: 1px solid red;*/
}
    /*table.TableBorder1 > tbody > tr {
        border: 1px solid gray;
    }*/
    table.TableBorder1 > tbody > tr > th {
        border: 1px solid black;
    }

    table.TableBorder1 > tbody > tr > td {
        border: 1px solid gray;
    }

/*AppFrameUpdater*/
.DivUpdateProgress {
    font-size: 12px;
    background-color: #CF4342;
    color: #fff;
    width: 150px;
    text-align: center;
    vertical-align: middle;
    position: fixed;
    top: 0;
    left: 88%;
    z-index: 110;
}

/*AppFrameUpdater*/
.xTransparentGrayBackground {
    position: fixed;
    top: 0;
    left: 0;
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 100%;
    z-index: 110;
}

/*AppFrameUpdater*/
table.table1 {
    /*cellspacing: 0;*/
    border: 1px solid #888888;
}

    table.table1 > tbody > tr > th {
        color: #FFFFFF;
        background: #003399;
    }

    table.table1 > tbody > tr > td {
        color: #000000;
        background: #FFFFFF;
    }

/*AppFrameUpdater*/
td.td_light {
    background: #EEEEEE;
}

/*unused*/
.box101 {
    background-color: rgb(237, 240, 250);
    padding: 3px;
    border: 1px solid rgb(173, 197, 205);
    color: blue;
}

/*unused*/
.box102 {
    background-color: rgb(237, 240, 250);
    padding: 3px;
    border: 1px dotted rgb(173, 197, 205);
    color: blue;
}

table.Table98 {
    width: 98%;
}

/*unused*/
table.Table100 {
    width: 100%;
}

/*seen in tables and tds*/
.AppHeader {
    /*cellpadding="0" cellspacing="2"*/
    background-color: rgb(237, 240, 250);
    padding: 3px;
    border: 1px dotted rgb(173, 197, 205);
    color: blue;
    width: 98%;
}

.AppHeaderA1 {
    width: 14px;
    color: gray;
    height: 36px;
    background-color: darkblue;
}

.AppSection {
    background-color: orange;
    height: 24px;
    border: 1px solid rgb(238, 130, 0);
    color: black;
}

.AppSectionA1 {
    background-color: darkorange;
    height: 24px;
    width: 14px;
    border: 1px dotted rgb(227, 124, 0);
}

.BoxLatestUpdates1 {
    background-color: #e4e4ff;
    border: 1px dotted #c3c3e7;
    width: 1px;
}

.BoxLatestUpdates2 {
    background-color: #e9e9ff;
    border: 1px dotted #c3c3e7;
    width: 1px;
}

td.BoxLatestUpdates {
    background-color: #eeeeff;
    border: 1px dotted #d8d8e7;
    vertical-align: top;
    text-wrap: avoid;
    width: 280px;
}

    td.BoxLatestUpdates a {
        color: blue;
    }

.BoxWelcome {
    color: #111111;
    height: 36px;
    font-size: 20px;
    border: 1px dotted #111111;
}

.BoxWelcome_Text {
    color: #111111;
    height: 36px;
    font-size: 20px;
}

/*default table
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
*/

/*
    ----------------------------------
    table final facts
    ----------------------------------
    <table> 
        border-collapse: separate (default)   --> however border-style is hidden
        border-style: hidden (default)        --> no border -- border-collapse:separate has no effect as long as this is hidden
                                                  setting a border e.g. border: 10px solid red will turn border-style = solid
        border-spacing: 2px (default)         --> works
        <tr>
            <td>        
            border-collapse:separate (default)
*/

table111 {
    border: 10px solid red; /*outter border*/
    border-collapse: separate; /*border-collapse is for border-spacing*/
    border-spacing: 10px; /*default=2px*/
    background-color: navy;
}

table.TableCentered {
    margin-left: auto;
    margin-right: auto;
}

/*table.TableNoBorder {
    border: 0 solid black;
}*/

table.TableBorder1 {
    /*border="1" cellpadding ="0" cellspacing="0"*/
    /*border-collapse: collapse*/ /*border-collapse is for border-spacing*/
    border: 1px solid gray;
}

table.TableBorder2 {
    /*border="1" cellpadding ="0" cellspacing="0"*/
    /*border-collapse: collapse*/ /*border-collapse is for border-spacing*/
    border: 2px solid gray;
}

table.TableTest {
    /*border="1" cellpadding ="0" cellspacing="0"*/
    /*border-collapse: collapse;*/
    border-collapse: separate;
    border: 20px solid red;
}

    table.TableTest > tbody > tr > td {
        /*border="1" cellpadding ="0" cellspacing="0"*/
        /*border-collapse: collapse;*/
        border-collapse: separate;
        border: 20px solid gray;
        padding: 3px
    }

table.TableCellSpacing0 {
    /*https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    border-spacing: 0;
    /*to set border-spacing color -> see background-color*/
}

table.TableCellSpacing1 {
    /*https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    border-spacing: 1px;
    /*to set border-spacing color -> see background-color*/
}

table.TableCellSpacing2 {
    /*https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    border-spacing: 2px;
    /*to set border-spacing color -> see background-color*/
}

table.TableCellSpacing10 {
    /*https://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    border-spacing: 10px;
    /*to set border-spacing color -> see background-color*/
}

table.TableCellPadding0 > tbody > tr > td {
    padding: 0;
}

table.TableCellPadding1 > tbody > tr > td {
    padding: 1px;
}

table.TableCellPadding2 > tbody > tr > td {
    padding: 2px;
}

table.TableCellPadding3 > tbody > tr > td {
    padding: 3px;
}

table.TableCellPadding5 > tbody > tr > td {
    padding: 5px;
}

table.TableCellPadding10 > tbody > tr > td {
    padding: 10px;
}

table.TableCellSpacing0Padding0 {
    /*http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    /*cellspacing*/
    border-spacing: 0;
    border-collapse: separate;
}

    table.TableCellSpacing0Padding0 > tbody > tr > td {
        /*cellpadding*/
        padding: 0;
    }

table.TableCellSpacing0Padding1 {
    /*http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    /*cellspacing*/
    border-spacing: 0;
    border-collapse: separate;
}

    table.TableCellSpacing0Padding1 > tbody > tr > td {
        /*cellpadding*/
        padding: 1px;
    }

table.TableCellSpacing0Padding2 {
    /*http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    /*cellspacing*/
    border-spacing: 0;
    border-collapse: separate;
}

    table.TableCellSpacing0Padding2 > tbody > tr > td {
        /*cellpadding*/
        padding: 2px;
    }

table.TableCellSpacing0Padding3 {
    /*http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css*/
    /*cellspacing*/
    border-spacing: 0;
    border-collapse: separate;
}

    table.TableCellSpacing0Padding3 > tbody > tr > td {
        /*cellpadding*/
        padding: 3px;
    }

table.TableCellSpacing0Padding4 {
    /*cellspacing*/
    border-spacing: 0;
    border-collapse: separate;
}

    table.TableCellSpacing0Padding4 > tbody > tr > td {
        /*cellpadding*/
        padding: 4px;
    }

table.TableLeftContents {
    /*cellpadding="0" cellspacing="0" width="190px"*/
    /*xbackground-color: red;*/
    display: block;
    width: 190px;
}

    table.TableLeftContents > tbody > tr > td {
        padding: 0;
    }

#TableProductsDropDown {
    background: green;
    width: 200px;
    border-collapse: collapse; /* 'cellspacing=0' equivalent*/
    /*display: none;*/
    background-color: #A40006;
    /*padding-right: 10px*/
    /*-moz-transition: 3s;
    -ms-transition: 3s;
    -o-transition: 3s;
    -webkit-transition: 3s;
    transition: 3s;*/
    /*https://stackoverflow.com/questions/32915005/want-a-smooth-animation-when-resizing-div-javascript/32915045*/
    /*transition: all 0.5s ease;*/
    /*transition: all 0.5s ease-in-out;*/
    --transform: scale(0, 0);
    box-shadow: rgba(0, 0, 0, 0.3) 15px 15px 8px 8px;
}

#ctl00_TableProductsDropDown div { /*padding: 5px;*/
}

#TableProductsDropDown .separator /*.separator class below .TableProductsDropDown class*/ {
    font-size: 1px;
    height: 1px;
    background-color: #333;
    padding: 0;
    padding-right: 8px; /*TdMenuNormal.padding x2 */
    width: 100%;
    box-sizing: border-box;
}

td.TdVersionBox1 {
    background-color: #ccccff;
    border: 1px solid #C2C6E4;
}

td.TdVersionBox2 {
    background: #e0e0ff;
    border: 1px solid #C2C6E4;
    text-align: center;
}

td.TdFeedBackBox1 {
    background-color: #c7ccda;
    border: 1px solid #98a5ca;
}

div.DivLeftProductTitle {
    background-color: #8585ff;
    padding: 4px;
    height: 18px;
    border: 1px solid #6e7a84;
}

div.DivLeftProductContent {
    background-color: #ffffff;
    border-right: 1px dotted black;
    /*xborder-top: 1px dotted black;*/
    border-left: 1px dotted black;
    border-bottom: 1px dotted black;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}

/*col2*/

.TdContainerOfTableLeftSideBar {
    width: 220px;
    vertical-align: top;
    padding: 8px;
    float: left;
    margin-left: 10px;
}

.CourierArea {
    font-family: Courier New;
}

.ProTitle {
    font-size: x-small;
    color: lightgray;
}

.TopProductSquare {
    color: white;
    background-color: #A40006;
}

.Gray {
    color: gray
}

/*.GrayXSmall {
    color: gray; font-size: x-small;
}*/

.pre {
    display: block;
    unicode-bidi: embed;
    font-family: monospace;
    white-space: pre;
}

/*https://www.w3schools.com/css/css_table.asp*/

table.WebGridStyle {
    background-color: white;
    border: 1px solid #C3CECC;
    border-collapse: collapse; /* 'cellspacing=0' equivalent*/
}

tr.WebGridHeaderStyle {
    color: #CCCCFF;
    background-color: #003399;
    font-weight: bold;
    height: 30px;
    text-align: center
}

    tr.WebGridHeaderStyle a {
        color: #CCCCFF;
        background-color: #003399;
        font-weight: bold;
        height: 30px;
    }

tr.WebGridStyle > td {
    border: 1px solid #ddd;
    padding: 2px
}

table.WebGridStyle_sr {
    background-color: white;
    border: 0;
}

tr.WebGridStyle_sr > td {
    border: 0;
    padding: 2px;
    padding-bottom: 15px;
}

table.WebGridStyle_x1a {
    background-color: white;
    /*border: 1px solid #C3CECC;*/
    /*border-collapse: collapse;*/ /* 'cellspacing=0' equivalent*/
    width: 100%
}

tr.WebGridStyle_x1a > td {
    border: 1px solid #C3CECC;
    padding: 4px
}

    /*x1.threads*/

    tr.WebGridStyle_x1a > td:nth-child(2) {
        text-align: center;
    }

    /*x1.messages*/

    tr.WebGridStyle_x1a > td:nth-child(3) {
        text-align: center;
    }

table.WebGridStyle_x1b {
    background-color: white;
    border: 1px solid #C3CECC;
    border-collapse: collapse; /* 'cellspacing=0' equivalent*/
}

tr.WebGridStyle_x1b > td {
    border: 1px solid #C3CECC;
    padding: 4px
}

    tr.WebGridStyle_x1b > td:nth-child(3) {
        text-align: center;
    }

    tr.WebGridStyle_x1b > td:nth-child(4) {
        text-align: center;
    }

tr.WebGridStyle_x2 > td {
    border: 1px solid #C3CECC;
    padding: 4px
}

    /*x2.messages*/

    tr.WebGridStyle_x2 > td:nth-child(3) {
        text-align: center;
    }

    tr.WebGridStyle_x2 > td:nth-child(4) {
        text-align: center;
    }

table.WebGridStyle_x3 {
    background-color: white;
    border: 0;
    /*https://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table*/
    border-collapse: separate;
    border-spacing: 0 10px;
}

tr.WebGridStyle_x3 {
}

    /*message x3: one td per row, td contains another table*/

    tr.WebGridStyle_x3 > td {
        /*padding-bottom: 5px;*/
        /*background-color: #eeeeff;*/
        border: 1px solid #ccccff;
        /*padding: 10px;*/
        /*width: 95%*/
        padding: 2px;
    }

/*https://stackoverflow.com/questions/9862167/positioning-div-element-at-center-of-screen*/

.PopupSx {
    --width: 300px;
    --height: 300px;
    min-width: 300px;
    min-height: 100px;
    /*max-width: 80%;*/
    overflow: hidden; /*https://stackoverflow.com/questions/2920114/how-to-auto-adjust-the-div-height-according-to-content-in-it*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: rgba(0, 0, 0, 0.3) 15px 15px 8px 8px;
    z-index: 1040; /*bootstrap top header is z-index 1030. 1040 allows summernote airmode*/
    border: 1px dotted navy;
}

.PopupSxBody {
    overflow: auto; /*18feb2019*/
    --max-height: 400px /*18feb2019*/
}

/*forumsx2 new topic*/
table#TableX2NewTopic > tbody > tr > td:first-child {
    background-color: #eaeaf2;
    border: 1px solid #cacad2;
}

/*forumsx3 new reply*/
table#TableX3NewReply > tbody > tr > td:first-child {
    background-color: #eaeaf2;
    border: 1px solid #cacad2;
    width: 79px;
    /*border: 1px dotted black;*/
}

#divWorking {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 30em;
    height: 8em;
    border: 4px solid #ccc;
    background-color: #f3f3f3;
    transform: translate(-50%, -50%);
    z-index: 1042; /*bootstrap top header is z-index 1030. 1040 allows summernote airmode*/
}

#divOverlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 0 solid #ccc;
    /*background-color: black;
    opacity: 0.5;*/ /*this also makes div contents at opacity 0.5*/
    background-color: rgba(0, 0, 0, 0.5); /*this keeps div contents at opacity 1*/
    transform: translate(-50%, -50%);
    z-index: 1039; /*bootstrap top header is z-index 1030. 1040 allows summernote airmode*/
}

/*.kminputbox {*/

/*chrome input inside table - top border missing fix*/

/*border: 1px solid #CCCCCC !important;*/

/*padding: 3px;*/

/*}*/

.mytable {
    border-collapse: collapse; /* 'cellspacing=0' equivalent*/
    border: 1px solid navy;
}

    .mytable > tbody > tr:first-child {
        background-color: red;
    }

        .mytable > tbody > tr:first-child > td {
            padding: 5px;
            border: 1px solid navy;
            background-color: #ddddff;
            font-weight: bold
        }

    .mytable > tbody > tr > td {
        border: 1px solid #cccccc;
        padding: 3px;
    }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: rgb(197, 193, 193);
}

::-moz-placeholder { /* Firefox 19+ */
    color: rgb(197, 193, 193);
}

:-ms-input-placeholder { /* IE 10+ */
    color: rgb(197, 193, 193);
}

:-moz-placeholder { /* Firefox 18- */
    color: rgb(197, 193, 193);
}

.reactions-container {
    /*km: parent: relative, child: absolute*/
    position: relative !important;
}

.reactions-menu {
    display: inline-block;
    padding: 10px 5px;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    width: 30px; /*ParseDom friendly, since it will load delayed*/
}

    .reactions-menu:hover, .reactions-menu:focus {
        color: #0366d6;
        text-decoration: none;
        opacity: 1
    }

.reactions-dropdown-box {
    transition: all 0.2s ease-in-out;
    transform: scale(0);
    /*height: 200px;*/
    /*width: 350px !important;*/
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 160px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 2px;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(27, 31, 35, 0.15);
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
}

.reactions-dropdown-box-sw {
    /*original=.dropdown-menu-sw*/
    right: 0;
    left: auto;
    /*ts:InjectReaction will swap these depending on screen position*/
}

.add-reactions-options_existing > tbody > tr > td {
    padding: 0 15px;
    /*background: red;*/
    text-align: center;
    /*vertical-align: center;*/
    /*height: 42px;
    width: 42px;*/
}

.add-reactions-options > tbody > tr > td {
    /*background: red;*/
    text-align: center;
    /*vertical-align: center;*/
    height: 42px;
    width: 42px;
}

.add-reactions-options-item {
    /*min-width: 31px;
    min-height: 31px;
    max-width: 31px;
    max-height: 31px;*/
    /*background: red;*/
    /*vertical-align: baseline;*/
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.reactions-emoji_existing {
    font-size: 18px
    /*font-size: 22px*/
}

.reactions-emoji {
    transition: 0.2s;
    font-size: 14px
    /*font-size: 22px*/
}

    .reactions-emoji:hover {
        font-size: 24px
        /*transition: all 0.2s ease-in-out;
        transform: scale(1.2)*/
    }

.reactions-octicon {
    display: inline-block;
    vertical-align: text-top;
    fill: currentColor
}

div.DivDropZone {
    /*border: 5px solid blue;*/
    border: 2px dashed gray;
    width: 450px;
    height: 100px;
    display: table-cell;
    /*width: 100px;
    height: 100px;*/
    /*background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="SVG 	namespace" version="1.1" width="270px" height="240px"><polygon points="5 235 135 10 265 235" fill="%23f00"/></svg>');*/
    background-image: url('data:image/svg+xml;charset=utf8, \
        <svg data-icon="cloud-upload-alt" role="img" xmlns="http://www.w3.org/2000/svg" \
            viewBox="0 0 640 512" \
            class="svg-inline"> \
            <path fill="rgb(97,175,239)" d="M537.6 226.6c4.1-10.7 6.4-22.4 6.4-34.6 0-53-43-96-96-96-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32c-88.4 0-160 71.6-160 160 0 2.7.1 5.4.2 8.1C40.2 219.8 0 273.2 0 336c0 79.5 64.5 144 144 144h368c70.7 0 128-57.3 128-128 0-61.9-44-113.6-102.4-125.4zM393.4 288H328v112c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V288h-65.4c-14.3 0-21.4-17.2-11.3-27.3l105.4-105.4c6.2-6.2 16.4-6.2 22.6 0l105.4 105.4c10.1 10.1 2.9 27.3-11.3 27.3z"></path> \
        </svg>');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50px;
    /*position: relative*/
}

.blockquote {
    padding: 12px 40px;
}

div.Ms-modal-window {
    flex-direction: column;
    background-clip: padding-box;
    background-color: rgb(255, 255, 255);
    border: 1px solid white;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 7px 0px;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: flex;
    flex-direction: column;
    font-size: 14px;
    transition-delay: 0s, 0s;
    transition-duration: 0.3s, 0.3s;
    transition-property: opacity, top;
    transition-timing-function: linear, ease-out;
    z-index: 2050;
    -webkit-font-smoothing: antialiased;
    width: 840px;
    height: 254.927px;
    max-height: 80%;
    min-height: 100px;
    overflow: hidden;
    /*https://stackoverflow.com/questions/2920114/how-to-auto-adjust-the-div-height-according-to-content-in-it*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*div.DivCentered*/
    margin-left: auto;
    margin-right: auto;
}

div.Ms-modal-header {
    background-color: rgb(0, 103, 184);
    border-bottom-color: rgb(238, 238, 238);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-sizing: border-box;
    height: 88px;
    padding-left: 28px;
    -webkit-font-smoothing: antialiased;
    /*display:block;*/
    /*ContentVerticalCenter:*/
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255);
    font-size: 26px;
    font-weight: 100
}

    div.Ms-modal-header > div > span {
        color: rgb(255, 255, 255);
        font-size: 26px;
        font-weight: 100
    }

div.Ms-modal-body {
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    display: block;
    font-size: 14px;
    line-height: 20px;
    max-height: 340px;
    overflow-y: auto;
    padding: 15px;
    position: static;
    width: 100%;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

div.Ms-modal-footer {
    background-color: white;
    border-bottom-color: rgb(238, 238, 238);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    font-size: 14px;
    height: 88px;
    padding-left: 28px;
    -webkit-font-smoothing: antialiased;
    /*display:block;*/
    /*ContentVerticalCenter:*/
    display: flex;
    align-items: center;
}

button.Ms-modal-button {
    float: right;
    margin-right: 10px;
    cursor: pointer;
    background-color: #1e73be;
    background-image: none;
    color: white;
    border-radius: 0;
    text-shadow: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
    font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    border: 1px solid rgb(187, 187, 187);
}

#MyAccountMenu {
    position: absolute;
    top: 140px;
    left: 850px;
    width: 140px;
    min-height: 120px;
    background-color: white;
    display: inline-block;
    float: left;
    text-align: left;
    display: none;
    padding: 10px;
    border-collapse: collapse;
    border: 1px solid #a0a0a0;
    z-index: 10000;
    box-shadow: 5px 5px 8px #888888
}

.myButton {
    /*https://www.bestcssbuttongenerator.com/#/12*/
    box-shadow: inset 0px 1px 0px 0px #54a3f7;
    background-color: #007dc1;
    border-radius: 3px;
    border: 1px solid #124d77;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 13px;
    padding: 4px 8px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #154682;
    min-width: 60px
}

    .myButton:hover {
        background-color: #0061a7;
    }

    .myButton:active {
        background-color: #004187;
    }

    .myButton:disabled {
        background-color: rgb(128, 128, 128);
        opacity: 0.5
    }
/*.myButton:active {
    position:relative;
    top:1px; left:-1px
}*/

.myButton2 {
    border: 1px solid blue;
    padding: 3px 7px;
    border-top: 1px solid lightblue;
    border-left: 1px solid lightblue;
    background: white;
    cursor: pointer
}

span.SpanRed {
    color: red
}

span.SpanGreen {
    color: green
}

/*Animatable CSS properties
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
    https://stackoverflow.com/questions/25872767/allowed-properties-for-css-transition-property
*/
@keyframes ProductsDropDownAnimationOn {
    0% {
        transform: scale(0.01, 1);
        /*display: block;*/
        display: none; /*display is not used in animations*/
    }

    50% {
        transform: scale(2, 1)
    }

    100% {
        transform: scale(1, 1);
        /*border: 20px solid blue*/
    }
}

@keyframes ProductsDropDownAnimationOff {
    0% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(0.1, 1);
        /*animationFillMode:forwards keeps visibility hidden, 
            but changing animation to "ProductsDropDownAnimationOn" 
            removed all keyframe: 100% properties */
        visibility: hidden;
        /*border: 20px solid blue*/
    }
}

/* The Modal (background) */
.ImageModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 40px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    --background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
    background-color: rgba(128,128,128,0.9); /* Black w/ opacity */
}

    /* Modal Content (image) */
    .ImageModal #ImageModalImage {
        margin: auto;
        display: block;
        width: 80%;
        /*max-width: 700px;*/
        cursor: pointer
    }

    /* Caption of Modal Image */
    .ImageModal #ImageModalCaption {
        margin: auto;
        display: block;
        width: 80%;
        /*max-width: 700px;*/
        text-align: center;
        color: navy;
        padding: 20px 0;
        --height: 50px;
        background-color: white;
    }

    /* Add Animation */
    .ImageModal #ImageModalImage, .ImageModal #ImageModalCaption {
        animation-name: ImageModalZoom;
        animation-duration: 0.1s;
    }

    /* The Close Button */
    .ImageModal #ImageModalCloseButton {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }

        .ImageModal #ImageModalCloseButton:hover,
        .ImageModal #ImageModalCloseButton:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .ImageModal #ImageModalImage {
        width: 100%;
    }
}

@keyframes ImageModalZoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

div.UserMenu {
    cursor: pointer;
}

div.DivUserMenu {
    position: absolute;
    left: 170px;
    top: 94px;
    border-collapse: collapse;
    background-color: white;
    border: 1px solid gray;
    padding: 10px;
    width: 300px;
    /*box-sizing: border-box;*/
    box-shadow: rgba(0, 0, 0, 0.3) 15px 15px 8px 8px;
}

@keyframes UserMenuAnimationOn {
    0% {
        /*transform: scale(0.01, 0.01);*/
        /*display: block;*/
        display: none; /*unused! display is not used in animations*/
        opacity: 0;
    }
    /*50% {
        transform: scale(2, 1)
    }*/
    100% {
        /*transform: scale(1, 1);*/
        opacity: 1;
        /*border: 20px solid blue*/
    }
}

@keyframes UserMenuAnimationOff {
    0% {
        /*transform: scale(1, 1);*/
        visibility: visible;
        opacity: 1;
    }

    100% {
        /*transform: scale(0.1, 0.1);*/
        opacity: 0;
        /*animationFillMode:forwards keeps visibility hidden, 
            but changing animation to "ProductsDropDownAnimationOn" 
            removed all keyframe: 100% properties */
        visibility: hidden;
        /*border: 20px solid blue*/
    }
}

@keyframes MyAccountMenuAnimationOn {
    0% {
        display: none; /*unused! display is not used in animations*/
        opacity: 0;
        transform: scale(0.1, 1)
    }

    50% {
        transform: scale(1.1, 1)
    }

    100% {
        transform: scale(1, 1);
        opacity: 1;
        /*border: 20px solid blue*/
    }
}

@keyframes MyAccountMenuAnimationOff {
    0% {
        /*transform: scale(1, 1);*/
        visibility: visible;
        opacity: 1;
    }

    100% {
        /*transform: scale(0.1, 0.1);*/
        opacity: 0;
        /*animationFillMode:forwards keeps visibility hidden, 
            but changing animation to "ProductsDropDownAnimationOn" 
            removed all keyframe: 100% properties */
        visibility: hidden;
        /*border: 20px solid blue*/
    }
}

#SearchDiv {
    height: 28px;
    width: 200px;
    border: 1px solid #adadab;
    background-color: white
}

#SearchTerm {
    border: 0px;
    background-color: white
}

#IxMainDiv {
    width: 1000px;
    --font-size: 12px;
    --text-align: left
}

.DivContainer {
    overflow: hidden
}
/* or => .DivContainer::after {
    content: "";
    display: block;
    clear: both
}*/

.UpProgramDiv {
    cursor: pointer;
    font-weight: bold;
    text-decoration: underline;
}

a.PageLink {
    border: 1px solid rgb(199, 197, 197);
    background-color: white;
    padding: 3px;
    margin: 2px;
    color: blue;
    height: 20px;
    display: inline-block;
}

span.PageLink {
    border: 1px solid rgb(199, 197, 197);
    background-color: blue;
    padding: 6px;
    color: white;
    font-weight: bold;
    text-decoration: underline
}