/*----------------------------*/
.colWhiteFg {
    color:white!important;
}
.floatawayUp {
    /*position:fixed;*/
    visibility:hidden;
    /*top:-100px;*/
    /*opacity:0;*/
    z-index:999999;
    /*width:90% !important;*/
    /*border-color:#b4b4b4;*/
    /*box-shadow:0 6px 6px #b4b4b4;*/
    /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
    animation:4s ease-in-out 0.5s 1 floatawayAnimationUpv2 forwards;
}

@keyframes floatawayAnimationUpv2 {
    0%  {
        top:-100px;
        opacity:0;
        visibility:visible;
    }
    5% {
        top:1vh;
        opacity:1;
    }
    90% {
        top:1vh;
        opacity:1;
    }
    95% {
        top:0;
        opacity:0;
    }
    100% {
        top:-1000px;
        opacity:0;
        display:none;
    }
}
.responseMsg {
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
    position:fixed;
    z-index:9005;
    width:calc(80vw - 20px) !important; /* Was 80%; Was 50vw but changed to 80vw to work better on thin screens*/
    background-color:#e1f3f8;
    color:black;
    min-height:60px;
    top:1vh!important;
    xleft:60% !important; /* was 0; */
    margin-top:20px;
    margin-left:10%;
    margin-right:10%;
    border-color:#b4b4b4;
    box-shadow:0 3px 3px #b4b4b4;
    padding-top:0;
}
.responseMsg > outer {
    padding:15px !important;
}
.responseMsg > .outer > .inner {
    padding:16px 16px 0 16px;
    max-height:calc(100vh - 100px);
    max-width:calc(100vw - 100px);
    min-height:72px;
}
.responseMsg > .outer > .inner * tr {
    vertical-align: top;
}
.responseMsg > .outer > .inner * td {
    padding-right:10px;
}
.responseMsg > .outer > .inner > .home {
    width:99%;
    padding-bottom:0!important
}
.successmsgs {
    background-color: #45a731 !important;
    color:white !important;
    margin-top:25px!important;
}
.successmsgs > *, .successmsgstab > *, .successmsgs * a {
    color:white!important;
}
.errormsgs {
    background-color:#e25353 !important;
    color:white !important;
    margin-top:25px!important;
}
.fullwidth {
    width:100% !important;
}
.paddedBottom {
    padding-bottom:6px !important;
}
.goaway {
    opacity:0;
    top:-500px!important;
}
.alignleft {
    text-align:left !important;
    align:left !important;
}
.alignright {
    text-align:right !important;
    align:right !important;
}
.aligncenter { /* Also see centerBody2 */
    text-align:center !important;
    align:center !important;
}

.page-head {
    -webkit-transition:background-color 0.5s ease-out;
    -moz-transition:background-color 0.5s ease-out;
    -ms-transition:background-color 0.5s ease-out;
    transition:background-color 0.5s ease-out;
}
.fixedhead1 {
    margin-top: 100px;
}
.fixedhead {
    position:fixed;
    width:calc(100% - 20px);
    background-color:white;
    border-bottom:solid 1px black;
    box-shadow: 0 4px 16px 4px gray;
    padding:10px;
    margin:0;
    top:0;
    left:0;
    z-index: 99;
}
.hg-faded {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    background-color:grey;
    opacity: 0.6;
    cursor:wait;
    z-index:9999;
}
.bluehover {
    cursor: pointer !important;
}
.bluehover:hover {
    background-color: #3480f6;
    color:white;
}

/* jdb masterForm.css */
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height:1.6em;
}
h2 {
    line-height:1.5em;
}
sup {
    font-size:8pt;
}
.hidden {
    display:none!important;
}
.invisible {
    visibility:hidden;
}
a {
    padding:2px 8px 2px 8px;
    margin-left:-5px;
    margin-right:-5px;
    border-radius:9px;
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
    display:inline-block;
}
a:hover {
    background-color:#edeff3;
}
.nohover {
    background-color:unset!important;
}
#myframe {
    background-color:#f6f6f6;
}
#selected-content {
    width:100%;
    margin-bottom:10px;
    border:solid 1px #f6f6f6;
    background-color: #d3d9d5;
    font-weight:800;
    padding:10px;
    border-radius:9px;
}
#selected-content * {
    font-size:13pt;
    padding:12px;
}
@media screen and (min-width:1050px) {
    #selected-content {
        display:none;
    }
}
.private-ref {
    background-color:#ebebeb;
}
.homemain a:hover {
    xbackground-color:unset!important;
}
.collapser, .collapser:hover {
    text-decoration: none!important;
    cursor:pointer;
}
.collapseBlock {
    padding:20px;
}
.rp-collapser {
    position:relative;
    font-size:108%!important;
    top:200px;
    right:31px;
    background-color:#e5dbdb;
    border-radius:9px;
    opacity:0.5;
}
.rp-collapser:hover {
    opacity:1;
}

@media screen and (max-width:850px) {
    .filename, .code-toolbarXX, div.mf-editor-table-container {
        xmax-width:calc(100vw - 280px);
    }
    .code-toolbarXX, .page-footer {
        max-width:calc(100vw - 41px);
    }
    .project-content * code {
        xmax-width:calc(100vw - 372px)!important;
    }
    .login-footnote {
        display:none;
    }
    .foot {
        margin-right:-24px!important;
    }
}
@media screen and (max-width:1050px) {
    .rp-collapser {
        right:15px;
    }
}
@media screen and (min-width:850px) and (max-width:1050px) {
    .filename, .code-toolbarXX, div.mf-editor-table-container {
        max-width:calc(100vw - 270px)!important;
    }
}
@media screen and (min-width:1050px) {
    .filename, .code-toolbarXX, div.mf-editor-table-container {
        max-width:calc(100vw - 560px)!important;
    }
}
h2 .issue {
    background-color:#e4e4f8;
    border-radius:9px;
    padding:2px 20px 2px 20px!important;
    margin-right:10px;
}
.paddedbox {
    display:inline-block;
    padding:8px;
    border-right:solid 1px white;
}
#duplicatepopup {
    border:solid 1px #e4e4f8;
    border-radius:9px;
    width:calc(100% - 10px);
    padding-bottom:5px;
}
#duplicatelist {
    height:400px;
    max-height:400px;
    overflow:auto;
    border:solid 1px #ececec;
}
#duplicatelist span {
    border-radius:9px;
    padding:2px 8px;
}
#duplicatepopup button {
    margin-left:40%;
}
#duplicatelist table tr {
    vertical-align:top;
}
#duplicatelist table tr > td:nth-child(2) {
    font-size:80%;
    line-height:25px;
}
#duplicatelist table tr > td:nth-child(3) > div:first-child {
    line-height:16px;
    padding-top:4px;
}
#duplicatelist table tr > td:nth-child(3) > div:last-child {
    font-size:80%;
    line-height:22px;
}
.spinner {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
    font-size:114%!important;
    vertical-align:bottom;
    margin-left:10px;
    border:none!important;
    padding:0!important;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.sorttable * th {
    cursor:pointer;
}
#delete-issue {
    background-color:#f51c1c;
    float:right;
}
.releases .newrelease {
    text-align:center;
}
.releases .releasen {
    border-radius: 20px;
    background-color:#f3f1f1;
    margin-top:10px;
    margin-left:20px;
    width:calc(100% - 20px);
}

.releases .releasen a {
    color:black;
}
.releases .releasen a:first-child {
    color:white;
    background-color:#17a317;
    padding:10px;
    border-radius:30px;
    margin-right:10px;
}
.releases .material-icons {
    vertical-align:middle;
}
.releases .closedt {
    color:grey;
    font-size:80%;
    white-space:nowrap;
}
.releases .type {
    font-size:80%;
    padding:2px 8px 2px 8px;
    border-radius:9px;
}
.homecontainer .type {
    font-size:80%;
    padding:2px 4px 2px 4px;
    border-radius:9px;
    margin-left:2px;
}
.homecontainer .smallfont > .fa-comment {
    margin-left:2px;
}

.home-grid > .homecontainer {
    padding:10px;
}
.redborder {
    border:solid 1px red;
}
.popup {
    background-color:white;
    border:solid 1px black;
    position:fixed;
    padding:10px;
    top:30%;
    left:50%;
    transform: translate(-50%, -50%);
}
.popup input {
    text-align:left;
}
.popup textarea {
    width:calc(100% - 25px);
    min-height:100px;
    padding:10px;
    border:solid 1px grey;
    border-radius: 9px;
    resize:vertical;;
}
.popupBg {
    position:fixed;
    opacity:0.5;
    background-color:black;
    left:0;
    width:100vw;
    top:0;
    height:100vh;
    z-index:2;
}
#filter {
    margin-bottom:8px;
    width:calc(100% - 55px);
}
.smallframe {
    min-height:150px!important;
}
.smallfont {
    font-size:8pt!important;
}
.smallfont.material-icons {
    font-size:14pt!important;
}
.download-popup {
    display:table;
    position:fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:white;
    z-index:999;
    width:300px;
    min-width:500px;
}
.download-popup > div:first-child {
    display:table-caption!important;
}
.download-popup > div {
    display:table-row;
    width:100%;
}
.download-popup > div > h1 {
    border-radius:0;
    margin:0;
    text-align:left;
    white-space:nowrap;
    background-color:white;
    padding:4px;
    border:solid 1px #abaaaa;
}
.download-popup > div > div {
    display:table-cell;
    white-space:nowrap;
}
.download-popup > div > div:first-child {
    margin-right:10px;
    padding:5px;
}
.download-popup > div > div:nth-child(2) {
    width:1%;
    padding-right:30px;
}
.download-popup > div > div:last-child {
    margin-left:10px;
    padding:5px;
    text-align:right;
    width:10%;
}
.about > .mf-editorviewr, .license > .mf-editorviewr, .latest > .mf-editorviewr {
    padding-left:10px;
}
.about > .mf-editorviewr p, .license p > .mf-editorviewr, .latest p > .mf-editorviewr p {
    margin-bottom:5px;
}
.latest > h1 + span:first-child {
    padding-left:10px;
}
body.not-allowed {
    cursor: not-allowed;
}
.edit-about, .edit-license {
    float:right;
    font-size:90%!important;
}

.about-edit-buttons, .license-edit-buttons {
    padding-bottom:20px;
}
.about-edit-buttons button:last-child, .license-edit-buttons button:last-child {
    float:right;
}

@media screen and (max-width:1050px) {
    .about-edit-buttons button, .license-edit-buttons button {
        min-width:fit-content;
    }
}
.latest span:last-child {
    float:right;
    color:grey;
}
.right-panel .mf-editorviewr {
    padding-bottom:0!important;
}
.right-panel .colSquareFg {
    font-size:52%!important;
    margin:3px;
}
.redcircle {
    background-color: #e54d4d!important;
    color: white;
    font-size: 11px;
    border-radius: 50%;
    width: fit-content;
    height: fit-content!important;
    position: absolute!important;
    margin-top: -9px!important;
    margin-left:2px!important;
    min-width: 20px;
    text-align: center;
    padding: 2px 2px 2px 2px!important;
    display: inline-block;
    vertical-align: top;
    line-height:19px;
}
.filecount {
    color:grey;
    font-size:70%;
}
.moremenu * .redcircle {
    display:none;
}
.moremenu a {
    color:black!important;
}
#newstatus, #newtype {
    width:calc(50% - 10px);
    margin-right:10px;
}
.newsubject {
    margin-bottom:10px;
    width:calc(100% - 20px);
}
.new-issue {
    padding:10px;
}
.comment-edit-buttons {
    margin-top:-10px;
}
.mf-inline {
    width:calc(100% - 20px);
    height:calc(100% - 20px);
}
.issues > h1 {
    margin-bottom:0;
}
.issues > .buttons {
    margin-bottom:5px;
    width:100%;
    text-align:right;
}
.issues > .filters > button {
    margin-bottom: 6px;
}
.issues > .filters > label {
    margin-right:5px;
}
input[type='checkbox'] {
    transform: scale(2);
    width:10px;
    margin-left:10px;
    margin-right:20px;
}
table.issueslist {
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}
table.issueslist tr {
    background-color:white;
}
table.issueslist td:nth-child(2) {
    line-height:23px;
    font-size:80%;
    padding-right:20px;
}
table.issueslist td {
    border-top:solid 1px #d2d0d0;
    border-bottom:solid 1px #d2d0d0;
    line-height:16px;
    padding-top:13px;
}
table.issueslist td:nth-child(4) {
    text-align:right;
}
table.issueslist * td:nth-child(3) a {
    margin-left:-9px;
    color:black;
}
table.issueslist * td:nth-child(3) a {
    font-weight:400;
    margin-top:2px;
    padding-bottom:0;
    line-height:22px;
}
table.issueslist .raisedTx {
    padding-top:0;
    padding-bottom:8px;
    font-size:13px;
    color:grey;
    line-height:18px;
}
table.issueslist .raisedTx > .raisedBy {
    white-space:nowrap;
    background-color:#E9F5F5;
    padding:2px 8px 2px 8px;
    border-radius:9px;
    margin-left:4px;
}
table.issueslist td:nth-child(2) {
    text-align:right;
}
table.issueslist td:last-child {
    text-align:right;
}
table.issueslist td:last-child > span {
    font-size:80%;
    padding:2px 8px 2px 8px;
    border-radius:9px;
}
.issueform {
    display: table;
    border-spacing: 0 10px;
}
.issueform * h2 {
    padding-bottom:33px; /* 33 so that if the screen is thin then the status/type don't overlap the border line */
}
.issueform * h2 span {
    margin-left:10px;
    padding:2px 8px 2px 8px;
    border-radius:9px;
}
.issueform * h2 div {
    float:right;
    white-space:nowrap;
}
.issueform * h2 div i {
    font-size:90%;
    color:grey;
}
.raisedby > img {
    border-radius:50%;
    width:40px;
    vertical-align:middle;
}
.issueform * .left {
    padding-bottom:50px;
    text-align:center;
    vertical-align:top;
}
.issueform * .right {
    border-top:solid 2px grey;
    padding:10px;
}
.issueform > div {
    width:100%;
    display:table-row;
    margin-bottom:10px;
}
.issueform * .raisedby {
    text-align:center;
}
.issueform * .dt {
    white-space:nowrap;
    font-size:80%;
}
.issueform .right {
    border:solid 1px #eae7e7;
    border-radius:9px;
    position:relative;
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}
.issueform .editfloat i {
    -webkit-transition:all 0.5s ease-out;
    -moz-transition:all 0.5s ease-out;
    -ms-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

.issueform .editfloat .deletecomment:hover {
    color:red;
}
.issueform > div > div:first-child {
    padding-right:20px;
    display:table-cell;
    width:100px;
}
.issueform > div > div:last-child {
    display:table-cell;
    width:99%;
}
table.issueslist td:nth-child(4) > span {
    font-size:80%;
    padding:2px 8px 2px 8px;
    border-radius:9px;
}
.statustriage  {
    background-color:#d73030;
    color:white;
}
.statusduplicate  {
    background-color:#d7d5d5;
    color:black;
}
.statusfixed  {
    background-color:lightgreen;
    color:green;
}
.statustodo {
    background-color:#6c6b6b;
    color:white;
}
.statusclosed {
    background-color:green;
    color:white;
}
.statuswip {
    background-color:orange;
    color:white;
}
.typebug {
    background-color:#d73030;
    color:white;
}
.typeissue {
    background-color:#cec1c1;
    color:white;
}
.typequestion {
    background-color:#efa271;
    color:white;
}
.typechange-request {
    white-space:nowrap;
    background-color:#ad34bb;
    color:white;
}
.private {
    color:#d07a5b!important;
}

.project-content .filelist + .code-toolbar .code {
    font-weight:200;
}
.noselect, .material-icons, .material-icons-outline {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.filefoldermenubut {
    cursor:pointer;
    vertical-align:top;
    cursor:pointer;
    transition: all 0.1s ease-out;
    margin-left:50px;
}
.filefoldermenu {
    display:inline-block;
    vertical-align:middle;
    line-height:1px;
    margin-left:10px;
    margin-bottom:1px;
    padding:2px 8px 2px 8px;
    background-color:#e5e2e2;
    border-radius:9px;
    transition: all 0.1s ease-out;
}
.filefoldermenu i {
    margin:0 5px 0 5px;
    cursor:pointer;
    font-weight:200;
    border-radius:15px;
}
.filefoldermenu i:hover {
    background-color:#eceaea;
}
.filelist .addfolder:hover {
    border-radius:15px;
    padding-right:1px;
    padding-bottom:2px;
    background-color:#c7c5c5;
}
.filemenuclicker {
    float:right;
    cursor:pointer;
}
.filerow td:first-child a {
    color:black;
}
.filerow:hover .filemenuclicker {
    visibility:visible;
}
.filemenu {
    position:fixed;
    background-color:#eae7e7;
    min-width:100px;
    min-height:50px;
    z-index:2;
    border:solid 1px grey;
    border-radius:2px;
    background-color:white;
    -webkit-box-shadow: 5px 5px 30px 0px rgba(20, 22, 20, 0.62);
    -moz-box-shadow: 5px 5px 30px 0px rgba(22, 22, 22, 0.62);
    box-shadow: 5px 5px 30px 0px rgba(22, 22, 22, 0.62);
}
.filemenu .bluehover {
    padding:5px 20px 5px 20px;
}
.colSquareFg {
    color:#186B84;
}
.colGreyBg {
    background-color:#c0bfbf;
}
.opacity50 {
    opacity:0.5;
}
.opacity25 {
    opacity:0.25;
}
.demo {
    min-height:calc(100vh - 300px);
    padding:10px!important;
}
.homecontainer {
    display:table;
}
.homeright {
    display:table-cell;
    padding-left:20px;
    text-align:right;
}
.homeright h2 {
    min-width:200px;
}
.homeright a {
    margin-bottom:20px;
    margin-left:10px;
}
@media screen and (max-width:600px) {
    .homeright {
        display:none;
    }
    .article-grid, .project-grid1, .project-grid2 {
        display:block!important;
    }
    .code-toolbar  {
        width:calc(100% + 14px);
        max-width:unset;
    }
    .code-toolbar > pre:first-child {
        max-width:100vw!important;
    }
}
.content-frame {
    margin:0;
    padding:0!important;
    xmax-height:calc(100vh - 400px);
    border:none!important;
}
.article-content + .demo, .home-article-content + .demo {
    padding:0!important;
}
.content-frame iframe {
    width:100%;
    margin:0;
    padding:0;
    border:none!important;
    box-shadow:none;
}
.project-grid1 {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto minmax(0,1fr) 300px;
    grid-template-areas:
            'pagehead     pagehead    pagehead'
            'projectmenu  projectmenu sidebar'
            'doclist     filecontent sidebar'
            'pagefooter   pagefooter  pagefooter';
    gap: 10px;
    height: 100%;
    min-height:100vh;
}
.project-grid1.collapsed-right {
    grid-template-columns: auto minmax(0,1fr) 0!important;
}
.project-grid1.collapsed-right > .right-panel {
    display:none;
}
.project-grid2 {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr) auto;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
            'pagehead    pagehead'
            'projectmenu sidebar'
            'filecontent sidebar'
            'pagefooter  pagefooter';
    gap: 10px;
    height: 100%;
    min-height:100vh;
}
.project-grid2.collapsed-right {
    grid-template-columns: minmax(0,1fr) 0!important;
}
.project-grid2.collapsed-right > .right-panel {
    display:none;
}
@media screen and (max-width:1050px) {
    .project-grid1, .article-grid {
        grid-template-columns: 0 minmax(0,1fr) 217px!important;
        gap: 1px!important;
    }
    .doc-list {
        display:none;
    }
    .project-grid1.collapsed-right, .article-grid.collapsed-right {
        grid-template-columns: 0 minmax(0,1fr) 0!important;
    }
    .project-grid1 .right-panel, .article-grid .right-panel {
        padding:5px;
    }
    .project-grid1 .doc-list, .article-grid .doc-list {
        padding:0 10px 0!important;
        min-width:auto;
    }
    .project-grid1 .project-content, .article-grid .article-content, .article-grid .home-article-content {
        padding:5px;
        margin:10px;
    }
    .project-grid1 .mf-editorviewr, .article-grid .mf-editorviewr {
        padding-right:5px;
    }
}
.article-grid {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: auto minmax(0,1fr) 300px;
    grid-template-areas:
            'pagehead     pagehead     pagehead'
            'articlemenu  articlemenu sidebar'
            'doclist      doccontent  sidebar'
            'pagefooter   pagefooter  pagefooter';
    gap: 10px;
    height: 100%;
    min-height:100vh;
}
.article-grid-no-sidebar {
    display: grid;
    grid-template-rows: auto auto 1fr ;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas:
            'pagehead     pagehead     '
            'articlemenu  articlemenu '
            'doclist      doccontent  '
            'pagefooter   pagefooter  ';
    gap: 10px;
    height: 100%;
    min-height:100vh;
}
.article-grid.collapsed-right {
    grid-template-columns: auto minmax(0,1fr) 0!important;
}
.article-grid.collapsed-right > .right-panel {
    display:none;
}

.page-head {
    grid-area: pagehead;
    top:0;
    z-index:99;
    background-color:white;
    padding-bottom:10px;
}
.doc-list {
    padding:5px 10px 20px 20px;
    text-align:right;
    xwhite-space:nowrap;
    overflow:hidden;
    grid-area: doclist;
    transition: margin-top 0.1s ease-out;
    min-width:200px;
}
.doc-list a {
    display:block;
    color:grey;
    padding:2px 8px 2px 8px;
    border-radius:9px;
    margin-bottom:10px;
}
.doc-list .selected {
    width:calc(100% - 16px);
    margin-left:0;
}
.project-menu {
    grid-area: projectmenu;
}
.article-menu {
    grid-area: articlemenu;
}
.right-panel {
    grid-area: sidebar;
    padding:20px;
    border-left:solid 1px #e1e1e1;
    xwidth:fit-content;
    transition: margin-top 0.1s ease-out;
}
.seelist {
    text-align:right
}
.seelist p:first-child {
    font-weight:600;
}
.seelist > a {
    display:block;
    padding-bottom:12px;
    line-height:21px;
}
.articlenm, .projectnm  {
    background-color:#fdc9aa!important;
    margin:0 50px 4px 0!important;;
    padding:2px 25px 2px 25px!important;
    border-radius:9px!important;
    height:31px!important;
    text-align:center;
    min-width:150px;
    font-weight:600;
    line-height:24px;
}
.articlenm > a, .projectnm > a {
    color:#896565;
}
.articlenm > a:hover, .projectnm > a:hover {
    background-color:unset!important;
    text-decoration:none!important;
}
.article-list * {
    color:black;
}
.article-list a:hover {
    text-decoration:none!important;
}
.project-content.docs, .article-content.docs, .home-article-content.docs {
    overflow-y:auto;
    padding:20px;
    line-height:2em;
}
.project-content.docs p, .article-content.docs p, .home-article-content.docs p,
.project-content.docs h1, .article-content.docs h1, .home-article-content.docs h1
.project-content.docs h2, .article-content.docs h2, .home-article-content.docs h2
.project-content.docs ul, .article-content.docs ul, .home-article-content.docs ul
{
    max-width:850px;
}
.project-content.files {
    overflow-y:auto;
    xpadding:20px;
    line-height:2em;
}
.project-content.files pre.code {
    max-width:unset!important;
    display:block!important;
}
.project-content {
    grid-area: filecontent;
}
.project-content, .article-content, home-article-content {
    xborder:solid 1px #b9b9b9;
    border-radius:9px;
}
.project-content.files pre {
    width:calc(100% - 30px)!important;
    max-height:calc(100vh - 270px);
    max-width:869px;
}
* {
    scroll-margin-top: 290px;
}
.article-content  {
    grid-area: doccontent;
    padding:20px;
}
.article-content  >.mf-editorviewr h1 {
    font-size:40px;
    line-height:1.05em;
    padding-bottom:4px;
    border-bottom:solid 1px black;
}
.article-content  >.mf-editorviewr h2 {
    font-size:28px;
    border-bottom:none;
}
.home-article-content {

}
.page-footer {
    grid-area: pagefooter;
}

.article-folder-nm {
    font-size:23px;
    font-weight:600;
    padding-left:20px;
}
div.table-container {
    overflow-x: auto;
    border: solid 1px red;
    margin: 10px 0 10px 0;
    padding: 10px;
}

.list-note {
    margin-left:15px;
}

.hitList {
    width:calc(100vw - 110px)!important;
}
.hitList > div {
    display:table;
}
.hitList > div > div {
    display:table-row;
}
.hitList > div > div:hover {
    background-color:#adaaaa;
}
.selectedHit {
    background-color:#adaaaa;
}
.hitList > div > div > div {
    display:table-cell;
    padding:4px;
}
.hitList > div > div > div >span {
    background-color:#dedbdb;
    border-radius:9px;
    padding:2px 8px 2px 8px;
    margin:4px;
}
.hitList > div > div > di:nth-child(2)v > span {
    background-color:#cec9c9;
}
.hitList > div > div > div:nth-child(3) > span {
    background-color:#e9f5f5;
}
.hitList > div > div > div:nth-child(4) > span {
    background-color:#f8f8f8;
}
pre {
    font-family:Courier Prime;
    font-size:9pt;
    margin:15px;
    padding:10px;
    overflow:auto;
    border:solid 1px #b3b0b0;
    xwidth:calc(100% - 100px);
    max-height:500px;
    line-height:1.5em;
    background-color:#e7e7e7;
    resize:vertical;
    min-height:20px;
}
.mf-editor-toolbar button {
    min-width:fit-content;
    margin-top:4px;
}
.page-footer-admin {
    backgropund-color:#f6f6f6;
    padding-top:10px;
    margin-top:500px;
}
.page-footer .hitinfo {
    padding:0 10px 0 10px;
}
.homelink {
    max-width:700px;
    width:calc(100% - 33px);
}
.homelink > a {
    color:black;
    width:100%;
}
a {
    text-decoration:none!important;
}
a:hover {
    text-decoration:underline!important;
}
.homelink > a:hover {
    text-decoration:none!important;
}
.homelink * h1 {
    font-size:20px;
    margin-bottom:10px;
}
p {
    line-height:21pt;
    margin-top:10px;
    margin-bottom:10px;
}
.homelink p {
    margin-top:0;
    padding-top:0;
    margin-bottom:0;
    padding-bottom:0;
}
.homemain * .keywords > .keyword {
    margin-left:0!important;
    margin-right:10px;
}
.entryfoot {
    font-size:12px!important;
}
.highlight {
    background-color:#d07a5b;
    color:white;
    border-radius:9px;
    padding:2px 8px 2px 8px!important;
    margin-left:10px!important;
}
.adminbuttons {
    margin:0 10px 10px 10px;
}
.main-container {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    height: 100%;
}
.main-left-panel {
    max-width:fit-content;
    min-width:200px;
    height:calc(100% - 50px);
    padding-top:57px;
    padding-right:30px;
    padding-left:20px;
    text-align:right;
    white-space:nowrap;
}
.main-left-panel a {
    color:black;
    padding:4px 8px 2px 8px;
    border-top-left-radius:9px;
    border-top-right-radius:9px;
    display:inline-block;
}
.main-content-panel {
    height:100%;
}
.main-content-panel > div {
    xdisplay: grid;
}
.main-right-panel {
    width: 200px;
    padding:14px 20px;
    min-height:500px;
    height:100%;
}
.main-content-panel .mf-editorviewr {
    display:grid;
}
.main-left-panel * .filelink {
    margin-bottom:10px;
}
.article-headlines {
    display:block;
    background-color:#f6f6f6;
    border-bottom-left-radius:9px;
    border-bottom-right-radius:9px;
    margin-top:-15px;
    margin-bottom:10px;
    padding-top:10px;
    white-space:nowrap;
    margin-left:0;
    width:100%;
}


.article-grid * .code-toolbar > pre:first-child {
    width:calc(100% + 15px)!important;
    max-width:unset!important;
}
.issueform .comment .right > div:first-child {
    max-width:1280px;
}
.issueform .comment .right:hover {
    border:solid 1px black;
}
.code-toolbarXX {
    width:calc(100% - 1px);
    xoverflow-x:auto;
}
.info > span, .pre {
    padding:5px;
    background-color:#F1F1F1;
    font-family:Courier Prime;
}
pre[class*=language-].line-numbers.line-numbers {
    width:calc(100% + 15px);
    max-width:calc(100vw - 300px);
    xoverflow:auto;
    margin-left:1.5px;
}

pre[class*=language-].line-numbers.line-numbers code {
    width: calc(100% - 63px); /* 63 */
}
@media screen and (min-width:850px) {
    pre[class*=language-].line-numbers.line-numbers code {
        width: calc(100% - 93px); /* 68 */
    }
}
@media screen and (max-width:1050px) {
    pre[class*=language-].line-numbers.line-numbers code {
        width: calc(100% - 68px); /* 68 */
    }
}
.line-numbers:before {
    width:100%;
}

.code-toolbar > pre.line-numbers > code[class^='language-'] { /* Important this is before the next one... */
    padding-left:3.8em!important;
}
.code-toolbarXX > pre {
    width:calc(100% - 49px);
    min-width:404px;
}


.issues * .filename {
    width:calc(100% - 110px);
}
.issues * .code-toolbar {
    width:calc(100% - 144px);
}
.issues * .filename {
    width:calc(100% - 113px);
}
.code-toolbar > pre > code {
    padding-left:13px!important;
    padding-right:45px!important;
}
xxx.issues * .code-toolbar > pre {
    min-width:unset;
}
@media screen and (max-width:1050px) {
    .issues * .code-toolbar > pre {
        min-width:calc(100% - 23px);
    }
    .issues * .code-toolbar {
        width:calc(100% - 181px);
    }
    .issues * .filename {
        width:calc(100% - 134px);
    }
}
.code-toolbar > pre > code {
    padding-right:70px!important;
}
@media screen and (min-width:500px) and (max-width:1075px) {
    .code-toolbarXX > pre > code {
        width:calc(100% - 163px)!important;
        color:red!important;
    }
}
@media screen and (min-width:1850px) {
    pre[class*=language-].line-numbers.line-numbers code {
        width: calc(100% - 68px); /* 68 */
    }
}
@media screen and (max-width:850px) {
    xxx.issues * .code-toolbarXX {
        max-width:calc(100% - 280px);
    }
    .issues * .mf-editorviewr .xxxfilename {
        max-width:calc(100% - 306px);
    }
}
.project-grid2 .code-toolbar pre:first-child {
    height:calc(100vh - 270px);
    max-height:calc(100vh - 270px);
    xmax-width:calc(100vw - 383px);

}
.project-grid2 > .project-content {
    overflow-y:hidden;
}




.articledt {
    background-color:#dcdcdc;
    border-radius: 9px;
    padding:2px 10px 2px 10px;
    margin-left:5px;
}

.mf-editorviewr {
    max-width:1300px;
    overflow-wrap:break-word;
    padding-top:0!important;
}
.mf-editorviewr p + p{
    margin-top:5px;
    margin-bottom:40px;
}
.mf-editorviewr p + ol > li:first-child {
    margin-top:-11px!important;
}
.mf-editorviewr p + p + ol > li:first-child {
    margin-top:-35px!important;
}
.mf-editorviewr a {
    width:fit-content;
}
.mf-editorviewr a, .mf-editorviewr a code {
    color:#1f1f94;
}
.mf-editorviewr iframe {
    width:100%;
    min-height:500px;
    xtransition:all 0.25s ease-in-out;
    border:solid 1px #c5c5c5;
    border-radius:9px;
    resize:both;
    margin-bottom:20px;

}
@media screen and (max-width:1350px) {
    iframe {
        width:calc(100% - 20px);
    }
}
.indented {
    padding-left:100px;
}
.indented20 {
    padding-left:20px;
}
.logo {
    width:100px;
    height:auto;
}
table.filelist {
    width:100%;
    border-collapse: collapse;
}
.filelist thead {
    background-color:#f1f1f1;
}
.filelist tr {
    vertical-align: top;
}
.filelist th:first-child {
    border-top-left-radius:8px;
    white-space: nowrap;
}
.filelist th:first-child a {
    color:black;
}
.filelist th:last-child {
    border-top-right-radius:8px;
}
.filelist td, .filelist th {
    padding:8px;
}
.filelist th div {
    text-align:right;
    font-weight:400;
    float:right;
}
@media screen and (max-width:880px) {
    .filelist th div {
        display:none;
    }
}
.filelist td {
    border:solid 1px #dedddd;
}
.filelist td:first-child {
    width:20px;
}
.filelist td:nth-child(1) {
    border-right:none!important;
}
.filelist td:nth-child(2) {
    border-left:none!important;
    width:50%;
    white-space:nowrap;
}
.filelist td:nth-child(2) a {
    text-overflow: ellipsis;
    color: black;
    text-decoration: none;
    max-width: calc(100% - 50px);
    overflow: hidden;
    display: inline-block;
}
.filelist td:nth-child(3) {
    white-space:nowrap;
}
.filelist td:nth-child(4), .filelist td:last-child {
    text-align:right;
    width:1%;
    white-space:nowrap;
}
.aligncenter {
    text-align: center!important;
}
div.pair {
    display:table-row;
}
div.pair > div {
    display:table-cell;
}
div.pair > div:first-child {
    white-space:nowrap;
}
div.pair > div:last-child {
    width:calc(100% - 10px)
}
.mf-select {
    height:36px;
    padding:4px!important;
}
div.pair > div:last-child > .mf-select-container, div.pair > div:last-child > input {
    width:100%;
    margin-left:5px;
    margin-bottom:10px;
    margin-right:10px;
    padding-right:10px;
}
xfilter {
    border-color:#adabab;
}
.xcode {
    height:calc(100vh - 200px);
    max-height:calc(100vh - 325px);
    width:100%;
    display:block!important;
    max-width:unset!important;
    overflow:hidden!important;
}



.h1, .h2, h3 {
    color:grey!important;
    font-size:90%;
}
div * h1:not(:first-child) {
    margin-top: 20px; /* change the value as per your requirement */
}
div * h2:not(:first-child) {
    margin-top: 30px; /* change the value as per your requirement */
}
div * h3:not(:first-child) {
    margin-top: 5px; /* change the value as per your requirement */
}
/*.h2 {*/
/*    font-size:80%;*/
/*}*/
/*.h3 {*/
/*    font-size:75%;*/
/*}*/


@media screen and (max-width:675px) {
    .filelist td:nth-child(2) {
        width:auto !important;
    }
}
.about, .license {
    display: -webkit-box;
    -webkit-line-clamp: 7; /* Change this value to adjust the number of lines */
    -webkit-box-orient: vertical;
    overflow:hidden;
}
.about * p, .license * p {
    margin-bottom:0;
}
.adspace {
    margin-top:10px;
    xbackground-color:green;
    padding:10px;
}



.doc-menu {
    position:fixed;
    top:48px;
    right:0;
    xwhite-space:nowrap;
    text-align:right;
    font-size:14px;
    background-color: rgba(255, 255, 255, 0.91);
    padding:10px;
    border-radius:12px;
    opacity:0.8;
    z-index:99;
    line-height:16px!important;
    -webkit-transition:all 0.15s ease-in-out;
    -moz-transition:all 0.15s ease-in-out;
    -ms-transition:all 0.15s ease-in-out;
    transition:all 0.15s ease-in-out;
}
.doc-menu i {
    margin-right:5px;
}
.project-content .doc-menu {
    xmargin-right:0; /* -585px; */
    margin-right:-580px; /* -585px; */
}
.doc-menu:hover {
    opacity:1;
    margin-right:0!important;
}
.doc-menu a {
    font-size:14px;
    border-radius:9px;
    background-color:#d2d2dc;
    padding:2px 6px 2px 6px;
    margin-left:10px;
    margin-bottom:10px;
    cursor:pointer;
    white-space:nowrap;
}
.doc-menu a i {
    font-size:16px;
    vertical-align: middle;
    margin-bottom:4px;
}
.doc-menu select {
    font-size:14px;
    width:fit-content;
    padding:0;
    background-color:#d2d2dc;
    border:none;
    margin-left:6px;
    padding:1px;
    text-align:right;
}
.option-private {
    background-color:red!important;
    color:white;
}
.option-WIP {
    background-color:#e88b59!important;
    color:white;
}
.option-public {
    background-color:#aee351!important;
}

table.grid-table {
    border-collapse:collapse;
}
table.grid-table th {
    border:solid 1px grey;
    background-color:#dadada;
    padding:8px;
}
table.grid-table td {
    border:solid 1px grey;
    padding:8px;
}

.selected {
    background-color:#efefef;
    width:100%;
}
.menu * .selected {
    border-bottom:solid 5px #3eb4de!important;
    background-color:unset!important;
    border-radius:0!important;
}
.menu * a.selected {
    color:#2889a9;
    line-height:1.5;
}
.menu * a.selected > i {
    color:#2889a9;
    line-height:0.7;
}
button:disabled {
    background-color:grey;
    cursor:not-allowed;
}
.latestpostings * .keywords {
    text-align:left!important;
    margin-bottom:50px;
}
.keyword-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    grid-auto-rows: 20px; /* Adjust the row height as needed */
    gap: 5px; /* Adjust the gap between keywords as needed */
    width: calc(100vw - 100px)!important; /* Adjust the width as needed */
    max-width:700px;
    padding: 10px;
    margin: 0 auto;
    max-height:150px;
    overflow:auto;
}
.keyword-container > .keyword {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e7c8a2;
    min-width:max-content;
}
.keyword-container > .kselected {
    background-color:orange!important;
}
.keywords {
    text-align:left;
    margin-bottom:8px;
    width:calc(100% - 20px);
}
.article-content .keywords, .home-article-content .keywords {
    float:left;
}
.keywords .keyword {
    margin-right:10px;
    padding:2px 8px 2px 8px;
    border-radius:8px;
    font-size:80%;
    xbackground-color:orange;
    color:white;
    white-space:nowrap;
}
.latestpostings * .keyword, .docinfo * .keyword {
    background-color:orange;
}
.keywords i {
    font-size:90%;
    margin-right:10px;
}
.docinfo {
    margin-bottom:2px;
}
section.following a {
    line-height:20px;
}
section.following td:first-child {
    width:10px;
}

.rowdragger {
    cursor:ns-resize;
    font-size:14pt!important;
    vertical-align:sub;
}
.pagebutton {
    display:inline-block;
    margin-top:20px;
    padding:5px;
    background-color: #358CCB;
    border-radius:9px;
    min-width:200px;
    font-family:Roboto;
    color:white;
}
.pagebutton:hover {
    background-color: #2595e5;
}
.pagebutton i, .pagebutton  a, .pagebutton div {
    color:white!important;
    font-size:14pt;
    text-decoration: none;
}
.pagebutton i:hover, .pagebutton  a:hover, .pagebutton div:hover {
    color:white;
}
.pagebutton.prev {
    float:left;
    padding-right:20px;
}
.pagebutton.next {
    float:right;
    text-align:right;
    padding-left:20px;
}
.pendingpriv {
    font-family:Arial;
    font-size:14px;
    vertical-align:top;
}
comments > date, comments > name {
    font-weight:600;
}
form > input, form > textarea {
    width:calc(100% - 26px);
    padding:8px;
    margin:4px;
    border:solid 1px grey;
    border-radius:9px;
}
form > textarea {
    min-height:100px;
    resize:vertical;
    font-size:12pt;
}
input[type='radio'] {
    width:20px!important;
    border-radius: 50%;
    width: 23px;
    height: 23px;

    border: 2px solid #999;
    transition: 0.2s all linear;
    margin-top:6px;
    margin-right: 5px;

    position: relative;
    top: 3px;
}
form > button {
    margin-bottom:10px;
}
button, .button {
    font-size:10pt;
    padding:10px;
    margin-top:10px;
    margin-right:0;
    background-color:#11b4ff;
    color:white!important;
    border:none;
    cursor:pointer!important;
    transition:all 0.25s ease-in-out;
    text-decoration: none;
    min-width:100px;
    text-align:center;
    border-radius:0;
    cursor:pointer;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */

}
button + button, .button + .button {
    margin-left:10px;
}
button:hover, .button:hover {
    background-color:#087baf!important;
}
button:disabled, .button:disabled {
    background-color:grey;
}
comments {
    width:calc(100% - 50px);
    background-color:#eff5f8;
    padding:8px;
    margin-left:10px;
    display:block;
    margin-bottom:8px;
    border-bottom:solid 1px #53654c;
    opacity:0.7;
    border:solid 2px white;
    transition:all 0.25s ease-in-out;
}
comments.pending {
    background-color:#eeeeee;
}
comments:hover {
    opacity:1;
    border:solid 2px grey;

}
notes {
    display:block;
    border:solid 1px #efefef;
    padding:4px;
    margin:0 10px 10px 10px;
    min-height:70px;
}
comments.pending > notes {
    background-color:#e3e3e3;
}
#hit-history {
    margin-top:10px;
    height:130px;
    width:calc(100% - 40px);
}
.page-footer .comments {
    padding:0 10px 0 10px;
}

.page-footer {
    margin-top:9px;
    xborder-top:solid 1px grey;
    padding-top:10px;
}
.page-footer-admin {
    background-color:#f6f6f6;
    padding-top:10px;
    margin-top:500px;
}
.page-footer .foot {
    background-color:grey;
    padding:20px;
    margin:0;
}
.page-footer .foot a {
    font-size:80%;
    color:white;
    display:inline-block;
    min-width:100px;
}
.page-footer .foot a:active {
    color:white;
}
.page-footer .hitinfo {
    padding: 0 10px 0 10px;
    overflow-wrap: break-word;
}
.handcursor {
    cursor:pointer;
}
.link {
    padding-left:10px;
    vertical-align:text-bottom;;
    color:#1775d2;
    font-size:146%;
}
.cookies {
    position:fixed;
    left:0;
    bottom:0;
    height:fit-content;
    width:calc(100% - 20px);
    background-color:#a7c7a7;
    color:white;
    text-align:center;
    padding:10px;
    line-height:19px;
    vertical-align:bottom;
    z-index:9;
}
.cookies div:first-child {
    display:inline-block;
    max-width:calc(100% - 100px);
}
.cookies div:last-child {
    display:inline-block;
    vertical-align:top;
    width:100px;
    margin:0;
}
.cookies * button {
    vertical-align: middle;
    min-width:fit-content;
    margin:0;
}
.curvy {
    border-radius:9px;
    margin-left:5px;
    padding:2px 10px 2px 10px;
}
.transition {
    transition:all 0.25s ease-in-out;
}
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.demo * iframe {
    border:solid 1px red;
    -webkit-box-shadow: 0px 1px 11px 1px rgba(255, 0, 0, 0.62);
    -moz-box-shadow: 0px 1px 11px 1px rgba(255, 0, 0, 0.62);
    box-shadow: 0px 1px 11px 1px rgba(255, 0, 0, 0.62);
    min-height:100px;
    padding:10px;
    text-align:center;
    width:calc(100% - 20px);
    height:calc(100vh - 250px)!important;
}
.stickyLeft {
    position:-webkit-sticky;
    position:sticky;
    left:-7px;
    z-index:2 !important;
    background-color: #f9f9f9;
    background-clip:padding-box; /* This is so that Edge does not result in no borders */
}
.head-topline {
    width:100%;
    min-height:100px;
}
.head-right {
    position: absolute;
    top:5px;
    right:10px;
    text-align:right;
    float:right;
    z-index: 99;
}
.head-right > div:first-child {
    top:90px;
    right:0;
    position:absolute;
}
.head-right > div:last-child {
    position:absolute;
    min-width:400px;
    margin-top:40px;
    right:0;
}
.login-footnote {
    position:absolute;
    margin-top:-35px;
    right:10px;
    border:solid 1px #eeeef1;
    border-radius:4px;
    padding:4px;
    font-size:80%;

}
.login-footnote .material-icons {
    vertical-align:text-bottom;
}
.boxshadow {
    -moz-box-shadow:0 5px 12px #454545;
    -webkit-box-shadow:0 5px 12px #454545;
    box-shadow:0 5px 12px #454545;
    border:solid 1px #b8b8b8;
    zoom:1;
    z-index:9999;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    filter:
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=100,strength=7),
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=135,strength=7),
                    progid:DXImageTransform.Microsoft.Shadow(color=#989898,direction=180,strength=10),
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=225,strength=7),
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=260,strength=7);
}
.box-shadow {
    margin-left:50px;
    max-width:calc(100% - 100px);
    box-shadow: 5px 5px 30px 0px rgba(22, 22, 22, 0.62);
}
img.login {
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin-top:10px;
    margin-right:10px;
    vertical-align:middle;
}
.boxed {
    border:solid 2px black;
    font-size:90%!important;
    border-radius:4px;
    margin:4px;
    padding-left:0;
    padding-right:1px;
}
.padded {
    padding:10px;
}
label {
    margin-top:10px;
}
input, select {
    font-family:Roboto;
    font-size:13pt;
    padding:9px;
    border:solid 1px grey;
    border-radius:9px;
}
input::placeholder {
    color:lightgrey;
}
input {
    width:calc(100% - 25px);
}
input:read-only {
    background-color:inherit;
}
@media screen and (max-width:675px) {
    .hideOnSmallScreen {
        display:none !important;
    }
}
.scrollArea {
    position:relative;
    left:0;
    overflow:auto;
    width:100%;
    xheight:calc(100vh - 300px);
}
/*----- grid_table tables -----*/
table.grid_table, table.grid-table {
    border-spacing:0; /* cellspacing=0 cellpadding=0 */
    border-collapse:collapse;
    width:99%;
    background-color:white;
    margin-top:15px;
    margin-bottom:15px;
    padding-right:10px;
}
.grid_table .multiselectDDselect, .grid-table .multiselectDDselect {
    font-weight:bold!important;
    padding-top:0;
    margin-top:-4px; /* See Billing History table on TenantForm */
}
table.grid_table tr, table.grid-table tr {
    vertical-align:top;
}
table.grid_table th, table.grid-table th {
    border:solid 1px white;
    background-color:#e7e7e7;
    text-align:left;
    vertical-align:top;
    font-weight:bold!important;
    padding:8px;
}
table.grid_table th:last-child, table.grid-table th:last-child {
    border-right: solid 1px #e7e7e7;
}
table.grid_table th:first-child, table.grid-table th:first-child {
    border-left: solid 1px #e7e7e7;
}
table.grid_table td, table.grid-table td {
    border:solid 1px #dcdcdc;
    xbackground-color:white;
    text-align:left;
    vertical-align:top;
    padding:8px;
    overflow:hidden;
}
.grid_cell_highlighter {
    background-color:#ededed;
}
div.grid_table > div:first-child, div.grid-table > div:first-child {
    background-color:#dcdcdc;
    border:solid 1px white;
}
/*----- key_value tables -----*/
table.key_value_table, table.key-value-table {
    border-spacing:0; /* cellspacing=0 cellpadding=0 */
    border-collapse:collapse;
    width:100%;
    background-color:white;
    margin-top:15px;
    margin-bottom:15px;
    padding-right:10px;
}
table.key_value_table th, table.key-value-table th {
    border:solid 1px white;
    background-color:#e7e7e7;
    text-align:left;
    vertical-align:top;
    font-weight:bold;
    padding:8px;
}
table.key_value_table th:last-child, table.key-value-table th:last-child {
    border-right: solid 1px #e7e7e7;
}
table.key_value_table th:first-child, table.key-value-table th:first-child {
    border-left: solid 1px #e7e7e7;
    white-space:nowrap;
}
table.key_value_table td:first-child, table.key-value-table td:first-child {
    background-color: #f1f0f0;
    border-bottom:solid 1px #ffffff;
    white-space:nowrap;
}
table.key_value_table tr:last-child td, table.key-value-table tr:last-child td {
    border-bottom:solid 1px #f1f0f0;
}
table.key_value_table td, table.key-value-table td {
    border:solid 1px #e7e7e7;
    xbackground-color:white;
    text-align:left;
    vertical-align:top;
    padding:8px;
    overflow:hidden;
}
#preview {
    padding:2px 10px;
    border-radius:19px;
    background-color:lightgrey;
}
#preview > h4 {
    margin-top:0;
    margin-bottom:0;
}
button[type='submit'] {
    margin-left:10px;
}
.content-foot {
    border-top:solid 1px #dcd3d3;
    width:100%;
    margin-top:70px;
}
.pagebutton {
    display:inline-block;
    margin-top:20px;
    padding:5px;
    background-color: #358CCB;
    color:white;
    border-radius:9px;
    min-width:200px;
    font-family:"Abril Fatface", Roboto;
}
.pagebutton:hover {
    background-color: #0564ad;
    color:white;
}
a.pagebutton, .pagebutton i, .pagebutton  a, .pagebutton div {
    xcolor:#358CCB!important;
    font-size:14pt;
    text-decoration: none;
}
.pagebutton i:hover, .pagebutton  a:hover, .pagebutton div:hover {
    color:white;
}
.pagebutton.prev {
    float:left;
    padding-right:20px;
}
.pagebutton.next {
    float:right;
    text-align:right;
    padding-left:20px;
}
.pendingpriv {
    font-family:Arial;
    font-size:14px;
    vertical-align:top;
}
.releases .fs, .releases .releasedt {
    margin-left:10px;
    color:grey;
    font-size:80%;
    white-space:nowrap;
}
.releases .issuen {
    font-size:80%;
    white-space:nowrap;
}
.releases .releaseissues {
    margin-left:50px;
}
.releases .issue {
    display:block;
    margin-left:10px;
    text-decoration:none;
    color:black;
}
.releases .issue:hover {
    text-decoration:none!important;
    color:#4e4ea8;
}
.releases > .releaseissues > div {
    display:table-row;
}
.releases > .releaseissues > div > div {
    display:table-cell;
    line-height:24px;
    padding-top:8px;
    padding-bottom:20px;
}
.demo .release {
    padding:6px;
    float:left;
}
.demo .mf-select-release, .demo .mf-select-runfile {
    width:auto;
    margin-left:10px;
}
#demoframe {
    width:calc(100% - 10px);
    height:calc(100% - 90px);
    /*max-height:calc(100vh - 300px);*/
    resize:both;
}
.noselect, .material-icons, .material-icons-outline {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.article-content .doc-menu.short-menu, .home-article-content .doc-menu.short-menu {
    margin-right:-66px;
}
.article-content .doc-menu, .home-article-content .doc-menu {
    margin-right:-515px; /* was -515px; */
}
.filefoldermenubut {
    cursor:pointer;
    vertical-align:top;
    cursor:pointer;
    transition: all 0.1s ease-out;
    margin-left:50px;
}
.filefoldermenu {
    display:inline-block;
    vertical-align:middle;
    line-height:1px;
    margin-left:10px;
    margin-bottom:1px;
    padding:2px 8px 2px 8px;
    background-color:#e5e2e2;
    border-radius:9px;
    transition: all 0.1s ease-out;
}
.filefoldermenu i {
    margin:0 5px 0 5px;
    cursor:pointer;
    font-weight:200;
    border-radius:15px;
}
.filefoldermenu i:hover {
    background-color:#eceaea;
}
.filelist .addfolder:hover {
    border-radius:15px;
    padding-right:1px;
    padding-bottom:2px;
    background-color:#c7c5c5;
}
.filemenuclicker {
    float:right;
    cursor:pointer;
}
.filerow td:first-child a {
    color:black;
}
.filerow:hover .filemenuclicker {
    visibility:visible;
}
.filemenu {
    position:fixed;
    background-color:#eae7e7;
    min-width:100px;
    min-height:50px;
    z-index:2;
    border:solid 1px grey;
    border-radius:2px;
    background-color:white;
    -webkit-box-shadow: 5px 5px 30px 0px rgba(20, 22, 20, 0.62);
    -moz-box-shadow: 5px 5px 30px 0px rgba(22, 22, 22, 0.62);
    box-shadow: 5px 5px 30px 0px rgba(22, 22, 22, 0.62);
}
.filemenu .bluehover {
    padding:5px 20px 5px 20px;
}
.colGreyBg {
    background-color:#c0bfbf;
}
.opacity50 {
    opacity:0.5;
}
.opacity25 {
    opacity:0.25;
}
.homecontainer {
    display:table;
}
.homemain {
    display:table-cell;
}
.homeright {
    display:table-cell;
    padding-left:20px;
    text-align:left;
}
.homeright h2 {
    min-width:200px;
}
.homeright .most-pop a {
    display:block;
}
@media screen and (max-width:990px) {
    .homeright {
        display: block;
    }

    .homemain {
        display: block;
    }
}
#followingTable td {
    text-align:left;
    width:unset;
}
#followingTable td:nth-child(2) {
    text-align:right;
    padding:0;
}
#followingTable a {
    line-height:1.5em;
    margin:0;
}
#followingTable td > div {
    line-height:10px;
    margin-top:-10px;
}
@media screen and (max-width:600px) {
    .homeright {
        display:none;
    }
    .article-grid, .project-grid1, .project-grid2 {
        display:block!important;
    }
    .code-toolbar  {
        width:calc(100% + 14px);
        max-width:unset;
    }
    .code-toolbar > pre:first-child {
        max-width:100vw!important;
    }
}
.content-frame {
    margin:0;
    padding:0!important;
    xmax-height:calc(100vh - 400px);
    border:none!important;
}
.article-content + .demo {
    padding:0!important;
}
.content-frame iframe {
    width:100%;
    margin:0;
    padding:0;
    border:none!important;
    box-shadow:none;
}
@media screen and (max-width:850px) {
    .code-toolbarXX, .page-footer {
        max-width:calc(100vw - 41px);
    }
    .project-content * code {
        xmax-width:calc(100vw - 372px)!important;
    }
    .login-footnote {
        display:none;
    }
    .foot {
        margin-right:-24px!important;
    }
}
.s-menu * .selected {
    border-bottom:solid 5px #3eb4de!important;
    background-color:unset!important;
    border-radius:0!important;
}
.s-menu * a.selected {
    color:#2889a9;
    line-height:1.5;
}
.s-menu * a.selected > i {
    color:#2889a9;
    line-height:0.7;
}
.keywords .keyword {
    margin-right:10px;
    padding:2px 8px 2px 8px;
    border-radius:8px;
    font-size:80%;
    xbackground-color:orange;
    color:white;
    white-space:nowrap;
}
.latestpostings * .keyword, .docinfo * .keyword {
    background-color:orange;
}
.latestpostings  h2 > span {
    color:white;
    padding:2px 8px 2px 8px;
    border-radius:9px;
    margin-bottom:2px;
}
.latestpostings  h2 > span.Articles {
    background-color:#8bc3c9;
}
.latestpostings  h2 > span.Projects {
    background-color:#cd8282;
}
.keywords i {
    font-size:90%;
    margin-right:10px;
}
.docinfo {
    margin-bottom:2px;
}
section.following a {
    line-height:20px;
}
section.following td:first-child {
    width:10px;
}

.rowdragger {
    cursor:ns-resize;
    font-size:14pt!important;
    vertical-align:sub;
}

#ordersTable > tbody > tr > td:first-child {
    width:10px;
}

.keyword-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    grid-auto-rows: 20px; /* Adjust the row height as needed */
    gap: 5px; /* Adjust the gap between keywords as needed */
    width: calc(100vw - 100px)!important; /* Adjust the width as needed */
    max-width:700px;
    padding: 10px;
    margin: 0 auto;
    max-height:250px;
    overflow:auto;
}
.latestpostings * .keywords {
    text-align:left!important;
    margin-bottom:50px;
}
@media screen and (max-width: 950px) {
    .head-right {
        right: 60px;
    }
}
.navbar {
    background-color:white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 0 75px;
    display: flex;
    width:calc(1005 - 300px);
}
.logged-in > .nav-menu {
    margin-right:100px;
}

ul.nav-menu li::before {
    content: unset; /* Add content: \2022 is the CSS Code/unicode for a bullet */
}
.nav-menu li {
    xpadding: 0 10px 0 10px;
    margin-right: 0;
    xflex-grow:1;
    xflex-basis:0;
    min-width:90px;
    flex:1;
}
.nav-menu li:hover {
    xbackground-color: #e1dfdf;
}

.nav-menu li a {
    text-decoration: none;
    xpadding:4px 10px 4px 10px!important;
}
.nav-menu li a:hover {
    background-color: #e1dfdf!important;
    border-radius:10px;
}
.nav-menu a {
    xpadding:2px 2px 2px 2px!important;
    xwhite-space:nowrap;
    margin:0 30px 10px 0;
    color:#565656;
    font-size:14px;
    background-color:inherit!important;
}

/* Hamburger Menu */
.nav-menu-icon {
    display: none;
    cursor: pointer;
    margin-top:-11px;
}

#nav-menu-toggle {
    display: none;
}

/* Responsive Styles */
@media screen and (min-width: 451px) {
    .nav-menu-icon {
        display: none;
    }
}
@media screen and (max-width: 450px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        z-index: 1;
        width:100%;
        max-width:100%;
        height:fit-content;
        background-color: #f8f8f8;
        box-shadow: 0 16px 14px 4px gray;
    }

    .nav-menu-icon {
        display: block;
    }

    #nav-menu-toggle:checked ~ .nav-menu {
        display: flex;
    }

    .nav-menu li {
        margin: 0;
        text-align: center;
        border-top:solid 1px #e9e9e9;
        padding:10px;
    }
}

.paddingLeft10 {
    padding-left:10px;
}
.paddingRight10 {
    padding-right:10px;
}
.paddingBottom10 {
    padding-bottom:10px;
}
.paddingTop10 {
    padding-top:10px;
}
.paddingBottom20 {
    padding-bottom:20px;
}
.paddingTop20 {
    padding-top:20px;
}

.marginLeft0 {
    margin-left:0;
}
.marginRight0 {
    margin-right:0;
}
.marginLeft10 {
    margin-left:10px;
}
.marginRight10 {
    margin-right:10px;
}
.marginBottom10 {
    margin-bottom:10px;
}
.marginTop10 {
    margin-top:10px;
}

.marginLeft20 {
    margin-left:20px;
}
.marginRight20 {
    margin-right:20px;
}
.marginBottom20 {
    margin-bottom:20px;
}
.marginTop20 {
    margin-top:20px;
}

.floatleft {
    float:left;
}
.floatright {
    float:right;
}
.clearLeft {
    clear: left;
}
.clearRight {
    clear:right;
}
.login-menu {
    max-width:350px;
    border:solid 1px grey;
    background-color:white;
    padding:10px;
    background-color:#efefef;
}
.login-menu > .pair > div:first-child {
    width:136px;
}
.signout {
    display:inline-block;
    margin-top:10px;
    padding-right:10px;
}
.help1, .help2 {
    color:grey;
    font-size:60%;
}
.help1-tx, .help2-tx {
    position:relative;
    text-align:left;
    font-size:75%;
    background-color:#d0d0d0;
    padding:5px;
    margin:5px;
}
.help1-tx::before, .help2-tx::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 80%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color:#d0d0d0;
}
.login-menu * input {
    width: calc(100% - 60px)!important;
}
.homelogo > .tagline {
    font-size:12px;
    font-weight:600;
    margin-top:-20px;
    margin-left:7px;
}
.nolink {
    text-decoration: none!important;
    color:grey;
    cursor:not-allowed!important;
}
ins {
    background-color:palegreen;
}
del {
    background-color:pink;
}


.dev-src-diff {
    max-height:1000px;
    overflow:scroll;
    resize:all;
    margin-left:50px;
}
.Differences {
    font-family:Courier New;
    font-size:12px;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}

.Differences thead th {
    text-align: left;
    border-bottom: 1px solid #000;
    background: #eceaea;
    color: #000;
    padding: 4px;
}
.Differences tbody th {
    text-align: right;
    background: #eceaea;
    width: 4em;
    padding: 1px 2px;
    border-right: 1px solid #000;
    vertical-align: top;
    font-size: 13px;
}

.Differences td {
    padding: 1px 2px;
    font-family: Courier New, Consolas, monospace;
    font-size: 13px;
}

.DifferencesSideBySide .ChangeInsert td.Left {
    background: #dfd;
}

.DifferencesSideBySide .ChangeInsert td.Right {
    background: #cfc;
}

.DifferencesSideBySide .ChangeDelete td.Left {
    background: #f88;
}

.DifferencesSideBySide .ChangeDelete td.Right {
    background: #faa;
}

.DifferencesSideBySide .ChangeReplace, .DifferencesSideBySide .ChangeDelete {
    margin-top:10px;
    border-top:solid 1px red;
}
.DifferencesSideBySide .ChangeReplace .Left {
    background: #fe9;
}

.DifferencesSideBySide .ChangeReplace .Right {
    background: #fd8;
}

.Differences ins, .Differences del {
    text-decoration: none;
}

.DifferencesSideBySide .ChangeReplace ins, .DifferencesSideBySide .ChangeReplace del {
    background: #fc0;
}

.Differences .Skipped {
    background: #e7e7e7;
    color:#e7e7e7;
    border-top:dashed 1px #9b9bd5;
}

.Differences .Skipped td, .Differences .Skipped th{
    line-height:7px;
}

.DifferencesInline .ChangeReplace .Left,
.DifferencesInline .ChangeDelete .Left {
    background: #fdd;
}

.DifferencesInline .ChangeReplace .Right,
.DifferencesInline .ChangeInsert .Right {
    background: #dfd;
}

.DifferencesInline .ChangeReplace ins {
    background: #9e9;
}

.DifferencesInline .ChangeReplace del {
    background: #e99;
}



.successmsgs {
    background-color: #45a731 !important;
    color:white !important;
    margin-top:25px!important;
}
.successmsgs > *, .successmsgstab > *, .successmsgs > a {
    color:white!important;
}
.errormsgs {
    background-color:#e25353 !important;
    color:white !important;
    margin-top:25px!important;
}
.colWhiteFg {
    color:white !important;
}
.colWhiteBg {
    background-color:white !important;
}
.colManillaFg {
    color:#d2d2a2;
}


.magnifier-glass {
    position: fixed;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: none;
    pointer-events: none;
    display: none;
    background-repeat: no-repeat;
    background-size: 800% 800%;
    background-color:red;
    /* Adjust the zoom level here */
}
.magnifier-container {
    position: fixed;
    display: inline-block;
}
.magnifier-container > img {
    background-color:#dcd8dc;
}

.mf-editorviewr {
    padding-bottom:20px;
}
.mf-editorviewr ul, .mf-editorprevw ul {
    margin:0;
}
.mf-editorviewr ul li:first-child, .mf-editorprevw ul li:first-child {
    margin-top:10px;
}
.mf-editorviewr ul li:last-child, mf-editorprevw ul li:last-child {
    margin-bottom:10px;
}


.mf-editorviewr code, .mf-editorprevw code {
    font-size: 12px;
    background-color: #ebeaea;
    border-radius: 9px;
    padding: 1px 6px 1px 6px;
    border: none;
    width:fit-content;
    white-space:nowrap;
    display:inline-block;
    overflow:auto;
    max-width:calc(100% - 10px);
    vertical-align:bottom;
    margin-top:1px;
}
.mf-editorviewr img {
    min-width:100px;
}

.collapsed-right * .mf-editorviewr pre > code, .mf-editorprevw pre > code  {
    width:100%!important;
}
.mf-editorviewr pre > code, .mf-editorprevw pre > code  {
    width:calc(100% - 44px); /* was - -34px */
}
@media screen and  (max-width:1050px) {
    .mf-editorviewr pre > code, .mf-editorprevw pre > code {
        width: calc(100% - 19px);
    }
}
.mf-editorviewr * sup,.mf-editorprevw * sup {
    font-size:65%;
    line-height:14px;
    vertical-align:top;
}
.mf-editorviewr * .mf-img-container,.mf-editorprevw * .mf-img-container {
    text-align:center;
}
.mf-editor-table-superscript * td sup {
    font-size:90%;
}
pre.line-numbers {
    padding:0;
    padding-top:0.5em;
    padding-bottom:0.5em;
    font-size:12px!important;
    background-color:inherit!important;
    overflow-y:auto;
}

.line-numbers .line-numbers-rows {
    line-height:9pt;
}
/* Add 0.5em of margin to the top and bottom of each line number */
.line-numbers .line-numbers-rows > span:before {
    margin: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.line-numbers > code {
    padding-top:10px!important;
    padding-bottom:10px!important;
}
.line-numbers-rows {
    padding-top:7px!important;
}

xtextarea.mf-inline-editor {
    width:calc(100% - 20px);
    height:calc(100% - 20px);
}
textarea.mf-floating-editor {
    width:calc(60vw - 220px);
    height:calc(80vh - 20px);
    min-height:200px;
}
textarea.mf-editor {
    padding:10px 10px 50px 10px;
    line-height:17px;
    margin-top:-3px;
}
.mf-editor-toolbar {
    position:relative;
    border:solid 1px grey;
    height:45px;
    width:calc(80vw - 200px);
    background-color: #eae7e7;
    color:black;
    white-space:nowrap;
    overflow-y:hidden;
    overflow-x:auto;
}
.mf-editor-toolbar .material-icons {
    color:black;
}

.material-icons {
    vertical-align:middle;
    color:#919191;
}
.mf-editor-toolbar::-webkit-scrollbar {
    width: 0.6em;
    height: 0.6em;
}
.mf-editor-toolbar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
.mf-editor-toolbar::-webkit-scrollbar-thumb {
    background-color: #b7b7b7;
    border-radius: 0;
}
.mf-editor-toolbar i {
    margin:2px;
    padding:6px;
    cursor:pointer;
    border:solid 1px #eae7e7;
    transition:all 0.25s ease-in-out;
}
.mf-editor-toolbar i:hover {
    border:solid 1px #cecaca;
    background-color: #d7d5d5;
}
.mf-editor-toolbar i.selected {
    background-color: #bdcee3 !important;
    width:fit-content;
}
.mf-editor-toolbarright {
    position:absolute;
    background-color:#eae7e7;
    right:0;
    top:5px;
    padding-right:10px;
    margin-right:10px;
}
.mf-editorprevw-floating {
    position:fixed;
    background-color: white;
    overflow:auto;
    padding:10px;
    z-index:999;
    border:solid 1px grey;
}
.toolbar-H1,.toolbar-H2,.toolbar-H3,.toolbar-H4 {
    font-weight:800;
    display:inline-block;
    margin-top:2px!important;
    vertical-align:top;
    line-height:11px;
    padding:12px 8px 12px 8px!important;
}

div.mf-editor-table {
    width:calc(100% - 20px);
    overflow-x:auto;
}
table.mf-editor-table {
    xwidth:1%;
    border-collapse:collapse;
}
table.mf-editor-table tr {
    vertical-align:bottom
}
table.mf-editor-table th {
    background-color:#e7e4e4;
    border:solid
}
table.mf-editor-table td:first-child {
    white-space:nowrap;
}
table.mf-editor-table td:first-child {
    text-align:left;
}
table.mf-editor-table th {
    white-space:nowrap;
}
table.mf-editor-table th, table.mf-editor-table td {
    border:solid 1px grey;
    text-align:center;
    padding:4px 8px 0 8px!important;
    vertical-align: top;
}
div.mf-editor-table-container {
    width:100%;
    max-width:calc(100vw - 100px);
    overflow-x:auto;
}
tr.row-na td {
    background-color:#b2b2b2;
}
.colGreenFg {
    color:green;
}
.colRedFg {
    color:red;
}
.colBlueFg {
    color: #b1b1d0;
}
.mf-editor-table-superscript {
    width: 100%;
}
.mf-editor-table-superscript td {
    font-size:70%;
    padding:0;
    margin:0;
    line-height:1.3em;
}
.mf-editor-table-superscript code {
    font-size:90%;
    padding-top:1px;
    padding-bottom:1px;
}
.mf-editor-fade-overlay {
    position:fixed;
    background-color:black;
    opacity:0.5;
    z-index:998;
    transition:all 0.25s ease-in-out;
}
.mf-editor-fade-overlay-off {
    opacity:0!important
}
.mf-editor-noscroll {
    overflow:hidden;
}
.mf-editor-absolute {
    position:fixed;
    z-index:999;
    max-height:calc(100vh - 150px);
    max-width:calc(100vw - 330px);
    padding-right:250px;
}
.mf-editor-noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
.mf-editorviewr .collapseBlock, .mf-editorprevw .collapseBlock {
    background-color: #d7dde1;
    border-radius: 9px;
}
.mf-editorviewr  .material-icons {
    vertical-align:middle;
}
.mf-editorviewr .button:hover {
    background-color:#11b4ff!important;
    cursor:default;
}
.copy-to-clipboard-button {
    position:relative;
    top:-20px;
    left:10px;
    background-color: white!important;
    font-family:inherit!important;
}
.mfe-highlight {
    background-color:orange;
    padding-left:3px;
}

pre.filename {
    background-color:#358ccb!important;
    color:white!important;
    resize:none!important;
    font-weight:600;
    font-size:13px!important;
    border-top-left-radius:9px!important;
    border-top-right-radius:9px!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
    padding:2px 14px 2px 10px!important;
    width:calc(100% - 25px);
    margin:0;
    width:calc(100% - 27px);
    overflow-x:auto;
}

pre.filename a {
    color:white;
}
.code-toolbar {
    margin-top:-7px!important;
    margin-bottom:30px!important;
    width:calc(100% - 75px);
}
.code-toolbar > pre {
    width:100%;
}

.code-toolbar > pre > code:first-child {
    margin:0!important;
    border-top-left-radius:0!important;
    border-top-right-radius:0!important;
}
.info > span, .pre {
    padding:3px;
    background-color:#F1F1F1;
    border:solid 1px #e7e6e6;
    font-family:Courier Prime;
    border-radius:10px;
    margin:2px;
}
.code-toolbar pre {
    border:none!important;
}
.code-toolbar pre:before, pre:after {
    display:none!important;
}
.xcode-toolbar > .line-numbers > code {
    max-height:50vh;
}
@media screen and (min-width:1050px) {
    .code-toolbar {
        width:calc(100% - 50px);
    }
}
@media screen and (max-width:1050px) {
    .code-toolbar {
        width:calc(100% - 75px);
    }
}
pre.filename {
    text-overflow:ellipsis;
    overflow:hidden!important;;
}
.codeblock {
    margin:50px 0 50px 0;
}
.code-toolbar + h1, .codeblock + p + h1, .code-toolbar + h2, .codeblock + p + h2, .code-toolbar + h3, .codeblock + p + h3 {
    margin-top:70px!important;
}
table * th, table td {
    font-family:inherit;
}
table tr {
    vertical-align:top;
}
table.grid, table.key-grid {
    border-collapse: collapse;
}
.grid td, .key-grid td {
    vertical-align:top;
    border:solid 1px #dcd8dc;
    padding:8px;
    white-space:normal;
    text-align:left;
}
.grid th, .key-grid th {
    vertical-align:top;
    text-align:left;
    padding:8px;
}
.grid tr > td:first-child, .key-grid tr > td:first-child {
    white-space:nowrap!important;
    vertical-align:top;
}
.key-grid tr > td:first-child {
    font-weight:800;
    vertical-align:top;
}
.mfe-popup {
    position:fixed;
    left:100px;
    top:20px;
    width:800px;
    max-width:calc(100% - 300px);
    background-color:white;
    padding:0;
    border:solid 1px black;
    z-index:999;
}
.mfe-popup div, .mfe-popup p, .mfe-popup li, .mfe-popup td {
    padding:10px;
    font-family:Arial!important;
}
.mfe-popup p {
    padding:4px;
}
.mfe-popup > div:first-child {
    background-color: #78a2c4;
    color:white;
}
.mfe-popup > div:nth-child(2) {
    background-color:white;
    height:calc(100vh - 200px);
    overflow-y:scroll;
}
.gallery {
    max-width:100%;
}
.mfe-popup * .grid-table >tbody> tr >td:first-child {
    font-family:Courier!important;
    font-size:13px;
}


.mf-gallery {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mf-gallery-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
}

.mf-gallery-thumbnails img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire space */
    object-position: center; /* Centers the image within the square */
    cursor: pointer;
}
.mf-gallery-full-image-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.mf-gallery-full-image {
    max-width: 100%;
    max-height: 100vh;
    cursor: pointer;
    transition: all 0.3s ease-in-out; /* Adjust transition timing as needed */
}

.mf-gallery-close {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;

    color: white;
    background-color:black;
    border-radius:50px;
    padding:5px 8px;
    cursor: pointer;
    z-index:9;
}

.mf-gallery-prev, .mf-gallery-next {
    position: absolute;
    top: 50%;
    font-size: 30px;
    color: white;
    cursor: pointer;
    user-select: none;
    color: white;
    background-color:black;
    border-radius:50px;
    padding:13px 20px;
    cursor: pointer;
    z-index:9;
    opacity:0.7;
    transition: all 0.3s ease-in-out;
}

.mf-gallery-prev {
    left: 20px;
    z-index:9;
}

.mf-gallery-next {
    right: 20px;
    z-index:9;
}

@media screen and (max-width: 768px) {
    .mf-gallery-thumbnails {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}
.mf-gallery-alt-text {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Menu */
.stretchmenu * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.stretchmenu div {
    position: relative;
    background-color: #ccc;
    height: 40px;
    margin-top:0;
    overflow: visible;
}

ul.stretchmenu,
.stretchmenu ol {
    display: flex;
    height: 40px;
    max-width:100%;
    overflow: hidden;
    padding:0 0 0 10px;
}

ul.stretchmenu>a,
.stretchmenu ol>a {
    flex-grow: 1;
    display: block;
    white-space: nowrap;
    padding: 4px 4px 4px 4px;
    max-width:fit-content;
    margin-right:40px;
}
.stretchmenu ol {
    position: absolute;
    right: 0;
    top: 0;
    overflow: visible;
}

.stretchmenu ol>a {
    min-width: 120px;
}

.stretchmenu ol ul {
    position: absolute;
    top: 120%;
    right: 10%;
}

.stretchmenu ol a ul>a {
    list-style: none;
    background-color: #eee;
    border: 1px solid gray;
    padding: 4px 8px;
}
.moremenu {
    position:fixed;
    background-color:white;
    border:solid 1px grey;
    cursor:pointer;
    text-align:left;
    margin-top:-30px;
    padding:4px;
}
.moremenubutton {
    float:right;
    margin-top:-52px;
    position:relative;
    cursor:pointer;
    transition:all 0.25s ease-in-out;
    padding:0 0 0 4px;
    border-radius:9px;
}
.moremenubutton:hover {
    background-color:#ece9e9;
}
.menu * a {
    cursor:pointer;
}
.menu {
     vertical-align:middle;
     height:50px;
     overflow:hidden;
     font-size:14px;
     margin-bottom:20px;
 }
.menu * i {
    font-size:20px!important;
    margin-top:2px;
    margin-right:4px;
    vertical-align:top;
    text-rendering: optimizeLegibility;
}
.menu a {
    display:inline-block;
    white-space:nowrap;
    margin:0 30px 10px 0;
    text-decoration: none;
    color:#565656;
    transition:all 0.25s ease-in-out;
    padding:2px 12px 2px 8px;
    border-radius:9px;
}
.menu a:hover {
    background-color:#ece9e9;
}
.s-menu {
     vertical-align:middle;
     height:50px;
     overflow:hidden;
     font-size:14px;
     margin-bottom:20px;
 }
.s-menu * i {
    font-size:20px!important;
    margin-top:2px;
    margin-right:4px;
    vertical-align:top;
    text-rendering: optimizeLegibility;
}
.s-menu a {
    display:inline-block;
    white-space:nowrap;
    margin:0 0px 10px 0;
    text-decoration: none;
    color:#565656;
    transition:all 0.25s ease-in-out;
    padding:2px 12px 2px 8px;
    border-radius:9px;
}
.s-menu a:hover {
    background-color:#ece9e9;
}

/* class.HomeForm.css */
.mf-editorviewr p + p{
    margin-bottom:unset!important;/* Removed as it wasn't looking right in jdbfashion-cms */
}

section {
    margin-top:50px;
    padding:30px;
    display:block!important;
}
section.banner {
    margin:0;
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, -1.1), rgba(0, 0, 0, 0.1)), url("https://jdbfashion.com/images/hero.webp");

    width:100%;
    height: 60vh!important;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
section.contact {
    background-color: #edf1ef;
    margin-bottom:50px;
}
section h1 {
    font-size:30px;
    font-weight:900;
    color:#93cdb4;
}

section.banner {
    padding:0;
}
section.banner h1 {
    font-size:73px;
}
@media screen and (max-width: 1000px) {
    section.banner h1 {
        font-size:53px;
    }
}
@media screen and (max-width: 600px) {
    section.banner h1 {
        font-size:43px;
    }
}
/* Place text in the middle of the image */

/* Place text in the middle of the image */
.hero-text {
    font-size:30px;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width:calc(100% - 20px);
    white-space:normal;
    margin-left:10px;
}

.hero-text > h1 {
    text-align:left;
    line-height:42pt;
}
.hero-text h2 {
    color:white!important;
    text-transform: lowercase;
    padding-left:6px;
}
.hero-text > p {
    font-size:30px;
}

@media screen and (min-width:701px) and (max-width: 800px) {
    .hero-text > h1 {
        line-height:35pt;
        font-weight:800!important;
    }
    .hero-text > h2 {
        xfont-size:20px!important;
        font-weight:800!important;
    }
}
@media screen and (min-width:611px) and (max-width: 700px) {
    .hero-text > h1 {
        xfont-size: 45px;
        line-height: 35pt;
    }
}
@media screen and (min-width:551px) and (max-width: 610px) {
    .hero-text {
        width:100%;
        padding-left:50px;
        top:200px;
    }
    .hero-text > h1 {
        font-size: 40px;
        line-height: 35pt;
        font-size:30px;
        font-weight:800!important;
    }
    .hero-text > p {
        font-size:20px;
        line-height:20pt;
    }
    .bg-top {
        height: 60%;
    }
}
@media screen and (min-width:471px) and (max-width: 550px) {
    .hero-text > h1 {
        font-size: 38px;
        line-height: 35pt;
        font-weight:800!important;
    }
    .hero-image {
        margin: 0;
    }
}
@media screen and (min-width:381px) and (max-width: 470px) {
    section.banner {
        max-height:350px;
    }
    .hero-text > h1 {
        font-size: 27px!important;
        line-height: 21pt;
        font-weight:800!important;
        width:90%;
    }
    .hero-text > h2 {
        font-size:90%;
        width:75%;
    }
    .hero-image {
        margin: 0;
    }
    section.about > .div-2 {
        display:none;
    }
    section.about > .div-3 {
        padding-left:0!important;
    }
}
@media screen and (max-width: 380px) {
    section.banner {
        max-height:350px;
    }
    .hero-text > h1 {
        font-size: 20px!important;
        line-height: 21pt;
        font-weight:800!important;
        width:90%;
    }
    .hero-text > h2 {
        font-size:60%;
        width:75%;
    }
    .hero-image {
        margin: 0;
    }
    section.about > .div-2 {
        display:none;
    }
    section.about > .div-3 {
        padding-left:0!important;
    }
}
section.banner h1, section.banner h2 {
    color:white!important;
    text-transform: lowercase;
    padding-left:6px;
    border-bottom:none;
}
section.banner > p {
    font-size:30px;
}
@media screen and (max-width: 550px) {
        .hero-image {
        margin: 0;
    }
}
@media screen and (max-height: 800px) {
    section.banner  {
        height:30%;
        min-height:300px;
    }
}
@media screen and (max-height: 610px) {

    .bg-top {
        height: 60%;
    }
}
.mf-editorviewr, .mf-editorprevw {
    font-family: Montserrat, sans-serif;
}
.homemain h1 {
    font-family: 'Nunito Sans', sans-serif!important;
    margin:0 0 15px;
    text-transform: uppercase!important;
}
.homemain h2 {
    font-family: 'Montserrat Alternates', sans-serif;
    text-align:left;
}

h2,h3,h4,h5 {
    font-weight:700;
    line-height:1.4em;
    margin:0 0 15px;
}
h2 {
    font-size:25px;
}
h2 + h3 {
    padding-top:0!important;
}
p,li {
    font-family: 'Montserrat', sans-serif;
    margin-top:10px;
    margin-bottom:10px;
}
section h2 .fa {
    font-size:17pt!important;
}
@media screen and (max-width:675px) {
    .hideOnSmallScreen {
        display: none !important;
    }
}
ul {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}
ul li::before {
    content: "■";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #93cdb4;; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -0.1em; /* Also needed for space (tweak if needed) */
}
.pagebutton {
    background-color: white;
    color:#93cdb4;
}
.pagebutton:hover {
    background-color: white;
    color: #b2199f;
}
a.pagebutton, .pagebutton i, .pagebutton  a, .pagebutton div {
    color: #93cdb4 !important;
}

.boxes {
    width:100%;
    display:flex;
    justify-content: space-between;
}
@media screen and (max-width: 850px) {
    .boxes {
        display: block;
    }
    .boxes > div {
        width:calc(100% - 50px)!important;
        margin-left:0!important;
        margin-right:0!important;
    }
}
.stretchmenu div {
    background-color: #93cdb4 !important;
}
.s-menu a {
    color:white;
}
.boxes > div {
    border:solid 4px #93cdb4;
    border-radius:9px;
    width:30%;
    margin:20px;
    text-align:center;
    padding:20px;
}
.boxes h3 {
    font-family: 'Montserrat Alternates', sans-serif;
    color:#93cdb4!important;
}
.boxhead {
    font-weight:700;
}
.box .fa {
    font-size:50px;
    padding:0;
    color:#93cdb4;
    display:block;
    font-weight:500;
}
/* FontAwesome */
.fa {
    font-weight:900;
}
.boxes > div {
    border: solid 4px #93cdb4;
    border-radius: 9px;
    width: 30%;
    margin: 20px;
    text-align: center;
    padding: 20px;
    overflow:hidden;
}
.boxes > div > i.material-icons, .boxes > div > i.fa {
    font-size:40pt;
    color:#93cdb4;
}
.boxes h3 {
    font-size:17pt;
}
.boxes a {
    overflow-wrap:anywhere;
}
.mf-editorviewr a, .mf-editorviewr a code {
    font-weight:800;
}
.doc-menu {
    font-family: Roboto;
}
.doc-menu a {
    xfont-size:15px!important;
}
.mf-editorviewr {
    max-width:unset!important;
}
.article-content > .mf-editorviewr h1
, .article-content > .mf-editorviewr h2
, .article-content > .mf-editorprevw h1
, .article-content > .mf-editorprevw h2 {
    font-family:"Abril Fatface", Roboto;
    font-weight:400;
}
section.about > div {
    display:table-cell;
}
section.about > div:first-child {
    background-image: linear-gradient(rgba(0, 0, 0, -1.1), rgba(0, 0, 0, 0.1)), url("https://jdbfashion.com/images/hand-guitar-shop-store-finger-fashion-1236222-pxhere.com.webp");

    /* Set a specific height */
    height: 60vh;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width:30vw;
}
section.about > div:nth-child(2) {
    padding-left:30px;
}
section.about > div:nth-child(2) > h1 {
    margin-top:0;
}

.login-footnote {
    border:none;
    width:1px;
    height:1px;
}



.article-content {
    max-width:790px;
}
.login-spacer {
    width:200px;
}

.jdb {
    display:inline-block;
    font-family:Open Sans;
}
.info-pink {
    background-color: #dce7df;
    border-radius:9px;
    padding:10px;
}
.article-content .icon-row {
    display: flex;
    xflex-wrap: nowrap; /* Prevents wrapping onto multiple rows */
    justify-content: space-between;
    width: calc(100% - 50px);
    margin: 20px;
    position:relative;
}
.article-content .icon-row img {
    max-width:100%; /* Allows images to shrink or grow while maintaining aspect ratio */
    min-width:20%;
    height: auto;
    flex: 1; /* Distributes remaining space equally among images */
    object-fit: cover;
    position:relative;
    margin:10px;
}
.article-content .doc-menu, .home-article-content .doc-menu {
     margin-right: -536px;
 }
.head-right > div {
    margin-right:20px;
}

div.dnd {
    display:inline-block;
    border-style:dashed !important;
    border-width:2px !important;
    border-color:white;
}
.dnd label {
    width:100px;
    display:inline-block;
    padding:0;
    text-align:center;
}
.dnd {
    -webkit-transition:all 0.5s ease 0.25s;
    -moz-transition:all 0.5s ease 0.25s;
    -o-transition:all 0.5s ease 0.25s;
    transition:all 0.5s ease 0.25s;
    xheight:200%;
}
.dndAreaHighlight {
    border-style:dashed !important;
    border-width:1px !important;
    border-color:green !important;
    background-color:#ebfae6 !important;
    -webkit-transition:all 0.5s ease 0.25s;
    -moz-transition:all 0.5s ease 0.25s;
    -o-transition:all 0.5s ease 0.25s;
    transition:all 0.5s ease 0.25s;
}
.dndAreaHighlight * .aforminputlabel {
    background-color:#ebfae6 !important;
}
.aforminputlabel {
    transition:all 0.5s ease 0.25s;
}
.dndProgressZone {
    background-color:red;
    position:absolute;
    z-index:999;
    opacity:1;
    bottom:0;
}
.dndBasic {
    font-family:%adminFontFace%;
    border:dashed 1px white;
    background-color:white;
    color:black;
    border-radius:8px;
    -webkit-transition:all 0.5s ease 0.25s;
    -moz-transition:all 0.5s ease 0.25s;
    -o-transition:all 0.5s ease 0.25s;
    transition:all 0.5s ease 0.25s;
    overflow:hidden;
    padding:4px;
    height:50px;
    text-align:center;
}
.warningCloseButton {
    float:right;
    cursor:pointer;
    background-image:url(%homeurl%/images/closeWindowButton2.png);
    background-repeat:no-repeat;
    content:' ';
    width:10px;
    height:10px;
    margin:0;
}

.dndDarker, .xdndDarker * div, .dndAreaWindowHighlight {
    opacity:0.4;
    border-style:dashed !important;
    border-width:1px !important;
    border-color:green !important;
    background-color:rgba(201, 253, 160, 0.25)!important;
    xborder:dashed 2px #00d200 !important;
    -webkit-transition:all 0.5s ease 0.25s;
    -moz-transition:all 0.5s ease 0.25s;
    -o-transition:all 0.5s ease 0.25s;
    transition:all 0.5s ease 0.25s;
}
.dndMsg {
    position:fixed;
    color:green;
    font-size:40px;
    font-weight:800;
    text-align:center;
    /*animation-name: hintAppear;*/
    /*animation-duration:0.35s;*/
    /*animation-delay:0s;*/
    animation-timing-function: ease;
    -webkit-transition:all 0.25s ease 0.25s;
    -moz-transition:all 0.25s ease 0.25s;
    -o-transition:all 0.25s ease 0.25s;
    transition:all 0.25s ease 0.25s;
}
.dndHintOff {
    opacity:0;
    margin-top:200px;
}
#uploadprogress {
    padding-right:10px;
    margin:0;
    padding:0;
    border-radius:8px;
    overflow:auto;
    min-width:90%;
    margin:0 auto;
}
.progressBarOuter {
    position:relative;
    width:90%;
    background-color:#e8f0f6;
    padding:10px;
    border-radius:8px;
    border:solid 1pt #cdd4da;
    margin:5px 25px 5px 5px;
    text-align:left;
    opacity: 1;
    z-index:99;
    transition:all 0.5s ease-in-out 0s;
}
.progressBar {
    width:1%;
    height:26px;
    background-color:rgba(0, 128, 18, 0.81);
    border-radius:8px;
    border-solid:solid 1pt #009100;
    padding-left:6px;
    color:white;
}
.dndUploadSideBar {
    position:fixed;
    z-index:10001;
    width:70vw;
    max-width:500px;
    height:calc(100vh);
    padding-top:20px;
    padding-bottom:100px;
    top:0;
    right:0;
    background-color:white;
    transition:all 0.5s ease-in-out 0s;
    border-left:solid 1px black;
    margin:0!important;
    overflow:auto;
}
.dndClosePanel {
    transition:all 0.5s ease-in-out 0s;
    margin-right:-20px;
    cursor:pointer;
}
.dndClosePanel:hover {
    color:grey;
}
.dndCloseButton2 {
    position:absolute;
    z-index:99999;
    right:25px;
    top:0;
    padding-top:10px;
}
.dndUploadSideBarFoot {
    position:fixed;
    z-index:10002;
    width:70vw;
    max-width:480px;
    height:10vh;
    bottom:0;
    right:0;
    background-color:white;
    transition:all 0.5s ease-in-out 0s;
    margin:10px 20px 0 10px;
    padding:10px 0 10px 0;
    text-align:center;
}
.dnddropzone {
    top:0;
    width:100%;
    height:100%;
    position:fixed;
    text-align:center;
    padding-top:15%;
    vertical-align:middle;
    font-size:200%;
    font-weight:600;
}
.fileuploadbutton {
    line-height:30px;
    display:inline-block;
    padding:0 4px 0 4px;
    width:auto;
    min-width:auto;
}
#m_chosenfile {
    display:inline-block;
    padding:0 0 0 5px;
}
.chosenfiles {
    margin-top:8px;
}
.chosenfilename {
    display:inline-block;
    background-color:#ebebeb;
    border-radius:9px;
    padding:2px 10px 2px 10px;
    white-space:nowrap;
    line-height:20px;
    margin-bottom:5px;
}
.dndDropZoneOverlay {
    xborder-style:dashed !important;
    xborder-width:3px !important;
    xborder-color:green !important;
    position:absolute;
    font-size:110%;
    xbackground-color: #e0eae0;
    vertical-align: middle;
    text-align:center;
    opacity:1;
    padding:4px;
    animation-name:dndFlashfadeAnim;
    animation-duration:1.5s;
    animation-timing-function:ease-out;
    animation-delay:0s;
}
@keyframes dndFlashfadeAnim {
    0% {
        opacity:0;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.dndUnfadeaway {
    /* @keyframes duration | timing-function | delay |
        iteration-count | direction | fill-mode | play-state | name */
    display:block;
    visibility:visible;
    opacity:1 !important;
    xheight:auto !important;
    overflow:hidden;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.dndFadeaway {
    /* @keyframes duration | timing-function | delay |
        iteration-count | direction | fill-mode | play-state | name */
    opacity:0 !important;
    height:0 !important;
    overflow:hidden;
    margin:0;
    padding:0;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
    border:none;
    min-height:unset;
}
.dndUnfadeawayDown {
    /* @keyframes duration | timing-function | delay |
        iteration-count | direction | fill-mode | play-state | name */
    display:block;
    visibility:visible;
    opacity:1 !important;
    overflow:hidden;
    bottom:0 !important;
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.colWhiteFg {
    color:white!important;
}
.colGreyFg {
    color:#C8C8C8 !important;
}
.colPaleRedBg {
    background-color: #c57676 !important;
}
.width0 {
    width:0 !important;
}
.dndBoxshadow {
    -moz-box-shadow:0 5px 12px #454545;
    -webkit-box-shadow:0 5px 12px #454545;
    box-shadow:0 5px 12px #454545;
    border:solid 1px #b8b8b8;
    zoom:1;
    z-index:9999;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    filter:
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=100,strength=7),
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=135,strength=7),
                    progid:DXImageTransform.Microsoft.Shadow(color=#989898,direction=180,strength=10),
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=225,strength=7),
                    progid:DXImageTransform.Microsoft.Shadow(color=#b8b8b8,direction=260,strength=7);
}
.opacity0 {
    opacity:0 !important;
}