/*Resharper Options > Code Editing > CSS*/
/*c:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Web\External\node_modules\csslint*/
/*
        https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
        The width and height properties (and min/max properties) includes content, padding and border
        * {         box-sizing: border-box;    }
    */

body {
    
}

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

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

    img.ContentVerticalCenter {
        vertical-align: middle
    }

/*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);
    /*border-radius: 4px;*/
}
    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;
    }

    input[type=button] {
        /*legend button*/
        outline: 0;
        border: 0;   
    }

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

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

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

@media only screen and (min-device-width: 800px) {
    a:link, a:visited {
        border-bottom: medium none;
        color: #191970;
        text-decoration: none;
    }

    a:hover, a:active {
        border-bottom: 2px solid #B8860B;
        text-decoration: none;
        /*xbackground-color: #D2D2D2;*/
        color: #0000FF;
        /*xcolor: rgb(255,34,34);*/
    }
}

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;
}

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

#TableAppSection {
    /*cellpadding ="0" cellspacing="2"*/
    /*xbackground-color: rgb(237, 240, 250);
    xbackground-color: red;*/
    padding: 0;
    border: 0 dotted rgb(173, 197, 205);
    border-spacing: 0;
    width: 100%
}

    #TableAppSection > tbody > tr:first-child > td {
        vertical-align: middle;
        background-color: #0066CC;
        text-align: center;
        font-weight: bold;
        color: white;
        font-size: 18px;
        height: 35px;
        /*background-image: url(images/BG_darkblue.png);*/
    }

/*table.CenteredTableX
{
    margin-left:auto;
    margin-right:auto;
}*/

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

/*
    ----------------------------------
    table final facts
    ----------------------------------
    <table> 
        border-collapse: separate (default)   --> border-collapse is for table border-spacing not table border
        border-spacing: 2px (default)         --> visible / works
        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-width: 3px; (default)          --> but border-style is hidden
        border-color: gray; (default)         --> but border-style is hidden
        <tr>
            <td>        
            border-collapse:separate (default)

      table > border-collapse is for table border-spacing not table border
*/

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

zzz-table {
    border-collapse: separate; /*border-collapse is for border-spacing*/
    border-spacing: 0; /*default=2px*/
}

/*table {
    background-color: red
}*/

zzz-td {
    padding: 4px
}

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.TableCellSpacing0Padding5 {
    /*cellspacing*/
    border-spacing: 0;
    border-collapse: separate;
}

    table.TableCellSpacing0Padding5 > tbody > tr > td {
        /*cellpadding*/
        padding: 5px;
    }

/*table
{
border-collapse: collapse;  'cellspacing' equivalent 
}

table td, table th
{
padding: 0;  'cellpadding' equivalent 
} */

.input101 {
    font-size: 10pt;
    background-color: rgb(0, 0, 255);
    color: rgb(0, 255, 255);
    border-left: 3px solid rgb(255, 0, 255);
    border-right: medium none;
    border-top: medium none;
    border-bottom: medium none;
    padding: 6px 12px;
    /*padding: 1px 6px; default*/
    margin: 2px;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
    cursor: pointer
}

    .input101:disabled {
        background-color: rgb(128, 128, 128);
    }

    .input101:active {
        /*mousedown*/
        /*background-color: red;*/
    }
        .input101:active:hover {
            /*mousedown+hovered*/
            /*background-color: yellowgreen;*/
            transform: translate(1px, 1px);
            box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);
        }

textarea.input103 {
    background-color: #CED6FB;
    /*font-size: 10pt;*/
    border-style: solid;
    border-width: 0;
    width: 600px;
    height: 180px;
}
    textarea.input103 .r2 {
         height: 40px;
    }
    textarea.input103 .r4 {
         height: 80px;
    }
    textarea.input103 .r3 {
         height: 60px;
    }
    textarea.input103 .r8 {
         height: 160px;
    }

a.stock_href:hover, a.stock_href:active {
    border-bottom: 10px;
}

a.classA2 {
    color: #00f000;
}

    a.classA2:hover, a.classA2:active {
        color: rgb(255, 255, 255);
        background-color: navy;
        text-decoration: none;
    }

/*a.classA3 { color: #00f000; }

    a.classA3:link, a.classA3:visited {
        color: #0000FF;
    }

    a.classA3:hover, a.classA3:active {
        color: #0000FF;
        border-bottom-width: 0;
        background-color: red;
    }*/

.table1 {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.td1 {
    background-color: rgb(239, 239, 239);
    color: rgb(0, 0, 0);
}

.td2 {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

tr.tr_2 {
    background-color: rgb(239, 239, 239);
    color: rgb(0, 0, 0);
}

/*a_:visited { color: #0066ff; }*/

/*usage: tr class="tr_inbox_text" */

/* first tr is optional, "." is needed */

tr.tr_discussion_header {
    background-color: black;
    color: white;
    height: 24px;
}

tr.tr_message_header {
    background-color: #8888aa;
}

tr.tr_blogmessage_header {
    background-color: #8888dd;
}

tr.tr_picmessage_header {
    background-color: #bb8888;
}

tr.tr_community_header {
    background-color: #dadada;
}

tr.tr_inbox_header {
    background-color: #c0c0c0;
}

tr.tr_inbox_text {
    background-color: #e0e0e0;
}

/* class=editbox_blue needs. in definition */

input.editbox_blue {
    font-size: 13px;
    background-color: #9191FF;
    color: #00FFFF;
    font-weight: bold;
    border: 1px solid rgb(169, 169, 169);
    padding: 5px
}

select.editbox_blue {
    /*1 padding less. e.g. /myfxboard/FormEditUserProfile */
    font-size: 13px;
    background-color: #9191FF;
    color: #00FFFF;
    font-weight: bold;
    border: 1px solid rgb(169, 169, 169);
    padding: 4px
}

input.editbox_lightblue {
    font-size: 13px;
    background-color: #CED6FB;
    color: black;
    font-weight: bold;
    border: 1px solid rgb(169, 169, 169);
    padding: 5px
}

select.editbox_lightblue {
    /*1 padding less. e.g. /myfxboard/FormEditUserProfile */
    font-size: 13px;
    background-color: #CED6FB;
    color: black;
    font-weight: bold;
    border: 1px solid rgb(169, 169, 169);
    padding: 4px
}

.fim-thumbnail {
    /*xfloat: left;*/
    background: url(images/fim-shadow.png) no-repeat bottom right;
    margin: 5px 0 0 6px;
    padding: 0 0 0 0;
}

    .fim-thumbnail img {
        background-color: #fff;
        border: 1px solid #a9a9a9;
        border-width: 1px !important; /*ucPicture adds border-width=0*/
        display: block;
        margin: -5px 5px 5px -5px;
        padding: 4px;
        position: relative;
    }

        .fim-thumbnail img:hover {
            background-color: #ccd;
        }

table.WebGridStyle {
    background-color: white;
    border: 1px solid #C3CECC;
    border-collapse: collapse;
}

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
}

/*forums*/
table.WebGridStyle_x1a {
    background-color: white;
    border: 1px solid red;
    /*border-collapse: collapse;*/
    width: 100%;
    border: 10px ; /*means 0 none black*/
    /*https://stackoverflow.com/questions/351058/space-between-two-rows-in-a-table*/
    border-collapse: separate;
    border-spacing: 0 20px;
}

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

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

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

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

    /*x1b.messages*/

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

    /*x1b.votes*/

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

table.WebGridStyle_ForumsX2 {
    width: 100%
}

tr.WebGridStyle_ForumsX2 > td {
    /*border: 3px solid #ddd;*/
    border: 1px solid #C3CECC;
    padding: 4px
}

    tr.WebGridStyle_ForumsX2 > td:nth-child(2) {
        text-align: right;
        width: 80px
    }

    tr.WebGridStyle_ForumsX2 > td:nth-child(3) {
        text-align: right;
        width: 140px
    }

    tr.WebGridStyle_ForumsX2 > td:nth-child(4) {
        text-align: right;
        width: 140px
    }

table.WebGridStyle_ForumsX3 {
    background-color: white;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
}

tr.WebGridStyle_ForumsX3 > table {
    padding-bottom: 5px
}

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

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

/*blogs*/
table.WebGridStyle_Blogs {

}

tr.WebGridStyle_Blogs > td {

}

tr.WebGridStyle_Blogs-alt > td {

}
    

/*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*/
}

/*blogs*/
table#TableX2NewBlog > tbody > tr > td:first-child {
    background-color: #eaeaf2;
    border: 1px solid #cacad2;
    /*background-color: #e4e8f2;
        border: 1px solid #c4c8d2;*/
}

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

/*forumsx3 new reply*/
table#TableX3NewReply > table > 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*/
}

.PopupWindow {
    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*/
    /*allow scroll*/
    /*display: block;
    overflow: auto;*/
}

#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;
    border: 1px solid navy;
}

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

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

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

.DivBlog {
    background-color: white;
    padding: 20px;
    padding-bottom: 30px;
    border: 2px dotted gray;
    margin-top: 30px;
    margin-bottom: 30px;
}

    .DivBlog > h3 {
        background-color: lightblue;
        padding: 20px;
        border: 1px dotted gray;
    }

    /*.DivBlog > span {
        padding: 10px;
        border: 1px dotted gray;
    }*/

::-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;
}

.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;
    background: rgb(204, 231, 240);
    /*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*/
}
    div.DivDropZone:hover {
        border: 2px dashed yellowgreen;
        background: rgb(153, 191, 203);
        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>');
    }
    div.DivDropZone:active {
        border: 2px dashed rebeccapurple;
    }

    div.DivDropZone .LabelDropZone {
        background-color: #2E3E4B;
        width: 100px
    }
        div.DivDropZone .LabelDropZone:hover {
            background-color: #232F39;
        }

.blockquote {
    padding: 12px 40px;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}
    
.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e9e9e9; 
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}

.BoxColorSet_Gray {
    background-color: #DCDCE7;
    border: 2px #bCbCb7 solid;
}

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-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);
}

div.UserMenu > span {
    color: navy;
    cursor: pointer
}

    div.UserMenu > span:hover {
        border-bottom: 2px solid #B8860B;
        text-decoration: none;
        /*xbackground-color: #D2D2D2;*/
        color: #0000FF;
        cursor: pointer
    }

#TableAppSection {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.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: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;
}

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
}

table.DarkYellow {
    background-color: #DCDCE7;
    border: 2px #bCbCb7 solid;
    padding: 10px;
    box-shadow: 5px 5px 8px #888888;
}

    table.DarkYellow > tbody > tr:first-child > td {
        /*vertical-align: middle;
        background-color: #575757;
        height: 35px;*/
    }

    table td.TdDarkYellow {
        vertical-align: middle;
        background-color: #575757;
        height: 35px;
    }

        table td.TdDarkYellow > span {
            color: #FFFF00;
            font-weight: bold;
            padding-left: 10px
        }

span.clear {
    clear: left; 
    display: block;
}

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
}