/* ************************************************** */
/* CUSTOM
/* everything Bootstrap could not fulfill
/* Regex: \/\*[\s\S]+?\*\/ for removing multiline comments
/* Regex: \/\*.+?\*\/ for removing single line comments
/* Escaped regex, remove start / end escapes "\"
/* ************************************************** */

/* ==================================================  /
/* START: Main font
/* The line below makes the font available for CSS.
/* The action to use this font should be defined in
/* Bootstrap. font-family: Open Sans, sans-serif;
/* ==================================================
@import url('openSans.css');TODO: check for need */
/* END: Main font */

/* ==================================================  /
/* START: Global adaptions
/* ================================================== */


/* ==================================================  /
/* START: Trend Icons and color
/* ================================================== */
.trend > span {
    font-family: 'Font Awesome 5 Pro';
}
.trend > span.value-neg, .neg {
    color: rgb(217, 83, 79);
    font-weight: 400;
}
.trend > span.value-pos, .pos {
    color: rgb(92, 184, 92);
    font-weight: 400;
}
.trend > span.value-equal, .eq {
    color: rgb(91, 192, 222);
    font-weight: 400;
}
.stale {
    opacity:0.5;
}
/* END: Trend Icons and color */

/* ==================================================  /
/* START: Market clocks
/* ================================================== */
#solid .marketInfo .bc .bcClock {
    float: left;
    height: 100px;
    margin-right: 15px;
    width: 100px;
}
#solid .market-data-infos {
    margin-top: 15px;
}
#solid .market-data-infos ul{
    list-style-type: none;
    padding-left: 0;
}
/* END: Market clocks */

/* ==================================================  /
/* START: Detailheader
/* ================================================== */

.historyBack {
    border-radius: 0;
    padding: 6px 15px 15px 5px;
    white-space: nowrap;
    background-color: rgb(245, 245, 245);
    position: relative;
    top: 0px;
    float: right;
    height: 32px;
}
.historyBack > div {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    text-align: center;
    width: 32px;
    height: 32px;
    top: -10px;
    z-index: 10;
}
.historyBack > div > i{
    font-size: 14px;
    position: relative;
    top: 11px;
    left: 1px;
}
#instrument-detail-header {
    font-weight: 300;
    padding-bottom:0;

}
#instrument-detail-header > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}

#instrument-detail-header > div:not(.bottom-row) > div {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    #instrument-detail-header > div:not(.bottom-row) > div {
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 25%;
        display: flex;
    }
}
#instrument-detail-header .trend span {
    margin-right: 15px;
    top:5px;
}
#instrument-detail-header .h1 {
    margin-top: 0;
    font-weight: 300;
    white-space: nowrap;
}

#instrument-detail-header .dataWithDate .h1 {
    margin-bottom: 0px;
}

.bottom-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 30px;
    background-color: rgb(230, 230, 230);
    padding:5px 15px;
}
/* END: Detailheader */

/* ==================================================  /
/* START: Squabbles
/* ================================================== */

/*This centers column divs in the grid so we dnt have do
work with offsets (wich only works with even columns)*/
#solid .col-centered {
    float: none;
    margin: 0 auto;
}
/* Solves sizing problems on input type=text with addons */
#solid .input-group > .input-group-btn > .btn,
#solid .input-group > .input-group-btn:last-child > .dropdown-toggle{
    height: 34px;
}

#solid .nav-bottom-spacing {
    margin-bottom: 1em;
}

/* END: Squabbles */

/* ==================================================  /
/* START: yourmoney specials
/* ================================================== */
/* each btn-default schould look like a common link */



/* Restoring defaults for some buttons */
/* END: yourmoney specials */

/* TODO: replace the image with an icon from glyphicons or font awesome
    font aweosme has some spinning default icons: http://fortawesome.github.io/Font-Awesome/examples/
    add fa-spin to icon class
*/
#solid .loading {
    min-width: 50px;
    min-height: 50px;
    background: transparent url("../img/throbber.gif") no-repeat center center
}

/* START market pages */
#solid #markets-news-column iframe { width: 100%; border: 0; }

#solid .m-market-chart-container div.marketChart {
    height: 336px;
}

#solid .m-dividend-calendar-container ul.nav {
    margin-bottom: 1em;
}
#solid .m-dividend-calendar-container h3 {
    margin-top: 0.1em;
}
#solid .m-dividend-calendar-container .news-creation-date {
    margin-bottom: 0;
}
/* END market pages  */

#solid .dropdown-nav {
    margin-bottom: 10px;
}

#solid .clearboth {
    clear: both;
}

#solid #m-six-branding, #solid #m-footer-project {
    font-size: 1em;
}

/*This centers column divs in the grid so we dnt have do
work with offsets (wich only works with even columns)*/
.col-centered {
    float: none;
    margin: 0 auto;
}


/* ==================================================  /
/* START: VERY RARE EXCPETIONS
/* ================================================== */
/* this are fastchanges as we had no time to make a new release. All these changes are
 also ported to the reallocation in the framewrok, so we can delete this without fears */

/* List here fields to be right aligned */
#solid th.customer_documents,
#solid td.customer_document { /*TODO: <-- make cells also plural... */
    text-align: center!important;
}

/* START: HeatMap Component */
/* TODO: this should be made with basic BS classes
    FIRST: prefix is missing!
    Secondly widget has no table so remove table.css
    Third: customlayout makes only sense if added as last css-script */

.heatmap .heatmapElement .table tbody tr td {
    font-size: 115% !important;
    font-weight: 800 !important;
}


/* END: HeatMap Component */
/* /List here fields to be right aligned */
/* END: VERY RARE EXCPETIONS */

#market-detail-customiframe {
    margin-top:20px;
}

.mapLabel {cursor: pointer;color: #fefefe;font-size: 10px;}
.mapLabel.flag {background: url("") no-repeat;background-position: top right;padding-right: 30px;}
.maps .mapsTooltip .name{font-weight: 600;}
.maps .mapsTooltip.flag {background: url("") no-repeat;background-position: top right;padding-right: 30px;}

/*Make Tabs stack for small devices*/
@media (max-width: 480px) {
    .nav-tabs > li {
        float: none;
    }
    .nav-tabs > li > a {

    }
    .nav-tabs {

    }
    .nav-tabs > li > a {
        border: 1px solid transparent;
    }
    .nav-tabs > .active > a,
    .nav-tabs > .active > a:hover {
        border: 1px solid transparent;
    }
    .nav-tabs > li:first-child > a {

    }
    .nav-tabs > li:last-child > a {

    }
    .nav-tabs > li > a:hover,
    .nav-tabs > li > a:focus {
        border-color: transparent;
        z-index: 2;
    }
}

/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 600px */
@media (min-width: 600px) and (max-width: 767px) {
    div.matrixListWidget .prio_8,
    div.matrixListWidget .prio_7 {display:none;width:0;height:0;opacity:0;visibility: collapse;}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media  (min-width: 480px) and (max-width: 599px) {
    div.matrixListWidget .prio_8,
    div.matrixListWidget .prio_7,
    div.matrixListWidget .prio_6 {display:none;width:0;height:0;opacity:0;visibility: collapse;}
}
/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media (max-width: 479px) {
    div.matrixListWidget .prio_8,
    div.matrixListWidget .prio_7,
    div.matrixListWidget .prio_6,
    div.matrixListWidget .prio_5,
    div.matrixListWidget .prio_4,
    div.matrixListWidget .prio_3 {display:none;width:0;height:0;opacity:0;visibility: collapse;}
}

/* New 4 yourmoney */
.text-success {
    color: rgb(92, 184, 92);
}
.wfg_container .panel.m-detail-header {
    margin-bottom: 0px;
    border: 1px solid transparent;
    margin: 0px;
    box-shadow: none;
    margin-top: 5px;/* makes a margin top of 20px */
}
.m-detail-interactive {
    margin-left: 15px;
    justify-content: flex-end;
    display: flex;
    flex-grow: 1;
    position: relative;
    top: 3px;
}
@media screen and (max-width: 768px) {
    .m-detail-interactive {
        margin-left: 0;
    }
}
.m-detail-interactive.visible-xs-inline-block {
    top: 0px;
    margin-bottom: 5px!important;
}
.m-detail-interactive ul li {
    padding: 5px 0px;
    line-height: 18px;
    float: left;
    font-size: 15px;
    margin-right: 15px;
}
.m-detail-interactive ul li a {
    white-space: nowrap;
    background-color: rgb(245, 245, 245);
    padding: 7px 15px 7px 0px;
    border-radius: 15px;
    position: relative;
    top: 0px;
}
.m-detail-interactive ul li a > div {
    display: inline-block;
    position: relative;
    border: 1px solid rgb(220, 220, 220);
    border-radius: 50%;
    text-align: center;
    width: 42px;
    height: 42px;
    top: -10px;
    z-index: 10;
    background-color: rgb(255, 255, 255);
}
.m-detail-interactive ul li a i {
    font-size: 18px;
    position: relative;
    top: 11px;
    left: 1px;
}

#instrument-detail-header #sellTradingLink,
#instrument-detail-header #buyTradingLink {
    display: flex;
    margin-bottom: 15px;
    justify-content: center;
    flex-basis: 50%;
    height: 45px;
}
#instrument-detail-header #buyTradingLink {
    margin-right: 7px;
    margin-left: 0px;
}
#instrument-detail-header #sellTradingLink {
    margin-left: 7px;
    margin-right: 0px;
}
@media screen and (max-width: 768px) {
    #instrument-detail-header #buyTradingLink {
        margin-right: 0px;
        margin-left: 0px;
    }
    #instrument-detail-header #sellTradingLink {
        margin-left: 0px;
        margin-right: 0px;
    }
}
#instrument-detail-header #buyTradingLink i,
#instrument-detail-header #sellTradingLink i {
    padding-right: 5px;
    font-size: 16px;
}
#instrument-detail-header .m-detailcurrency {
    font-size: 18px;
}
#instrument-detail-header .m-detailcurrency + span {
    margin-top: 20px;
    display: block;
}
#instrument-detail-header .date {
    margin-bottom: 10px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: rgb(85, 124, 154);
}
.chartImageWrapper.dynImage > img {
    height: 100%;
}
/* login */
label {

}
.input-group-addon {
    padding: 6px 16px;
    font-size: 20px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(220, 220, 220);
    line-height: 40px;
    height: 40px;
    margin-top: 10px;
    border-radius: 10px 0 0 10px;
}
.loginMask .checkbox {

}
.loginMask .login {

}
.loginMask .forgotpassword {

}
.loginMask .btn {

}
.loginMask .btn.btn-default {

}
.loginMask .btn.btn-default:hover {

}
.btn-primary {
    background-color: #4E86B5!important;
    color: rgb(255, 255, 255)!important;
}
.btn-primary:hover {
    background-color: rgb(85, 124, 154)!important;
    border: 1px solid rgb(85, 124, 154)!important;
}
.radio label,
.checkbox label {
    padding-left: 10px;
}
input[type="radio"], input[type="checkbox"] {
    position: relative;
    top: 1px;
}
.form-horizontal .form-group {
    margin-right: 15px;
}
@media screen and (max-width: 380px) {
    .form-horizontal .form-group {
        margin-right: 10px;
        margin-left: 10px;
    }

    .loginMask .forgotpassword {
        margin-right: 0px;
        margin-left: -10px;
    }
}
/* /login */
/* portfolio */
/* form */
.breadcrumb > li + li:before {
    font-family: "Font Awesome 5 Pro";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    padding: 0 5px;
    color: #ccc;
    content: "\f105";
}
#addPortfolio .submitButton {
    float: right;
}
#addInstrument .submitButton {
    float: right;
}
/* /form */
/* overview */
table .cur {
    text-align: center;
}
table .market {
    text-align: center;
}
table .price,
table .lval {
    text-align: right;
}
table .nc2,
table .percent {
    text-align: right;
}
table .toolbar {
    text-align: center;
}
.wfg_container .isDefault {
    text-align: center;
}
.wfg_container .netchange {
    text-align: right;
}
.wfg_container tr.total {
    border-bottom: 1px solid #B8BAC0;
}
p.annotation {
    margin-top: 10px;
    font-size: 12px;
}
#limits sup,
#watchlist sup,
#portfolio sup {
    font-size: 14px;
    top: 0px;
}
/* overview */
/* news */
#m-news-with-images {
    display: flex;
    flex-direction: column;
}
#m-news-with-images .newsElement {
    display: inline;
}
#m-news-with-images .newsElement + .newsElement {
    border-top: 1px solid rgb(240, 240, 240);
    padding-top: 15px;
}
#m-news-with-images .newsElement:nth-child(odd) > a {
    float: left;
    margin-right: 15px;
}
#m-news-with-images .newsElement:nth-child(even) > a {
    float: right;
    margin-left: 15px;
}
#m-news-with-images .newsElement > h3 {
    line-height: 20px;
}
#m-news-with-images .newsElement > .news-link-readmore {
    float: right;
    margin-top: -10px;
    margin-bottom: 15px;
    margin-right: 15px;
}
/* /news */
.wfg_container table tr td.neg {
    color: rgb(217, 83, 79);
}
.wfg_container table tr td.pos {
    color: rgb(92, 184, 92);
}
.wfg_container table tr td.stale {
    color: rgb(200, 200, 200);
}
.wfg_container table tr td.value-equal {
    color: rgb(91, 192, 222);
}
#l-detail-header .h1 {
    font-size: 36px;
}
#l-detail-header .mainValue {
    height: 42px;
    margin-left: 15px;
}
table div.nested > span {
    font-size: 11px;
    font-weight: 300;
    font-family: 'LatoWeb';
}
/* /portfolio */
h1, .h1 {
    font-size: 25px;
    font-weight: 400;
}
.searchSubmit button:last-child {
    margin-right: 15px;
}
#agency-filter-dialog-content .btn-default,
#company-dialog-content .btn-default {
    border: 1px solid rgba(0,0,0,0.125);
}
#cash .btn-default{
    color: #333;
}
#cash .btn-default:hover{
    color: rgb(255, 255, 255);
}
#agency-filter-dialog-content .btn-default:active,
#agency-filter-dialog-content .btn-default:hover,
#company-dialog-content .btn-default:active,
#company-dialog-content .btn-default:hover {
    border: 1px solid rgba(0,0,0,0);
    box-shadow: none;
}
#agency-filter-dialog-content .agencyEntry label {
    margin-left: 10px;
}
body > .modal .modal-content {
    border: medium none transparent;
    border-radius: 1px;
}
body > .modal .modal-content .modal-header {
    border-bottom: medium none transparent;
    padding-top: 24px;
}

body > .modal .modal-content .modal-header h4 {
    margin-top: 10px;
    font-size: 18px;
    line-height: 20px;
    font-weight: bold;
    color: rgb(45, 45, 45);
}
#l-detail-header .mainValue {
    font-size: 24px;
    position: relative;
    bottom: -11px;
}
#l-detail-header .mainValue.pos,
#l-detail-header .mainValue.neg,
#l-detail-header .mainValue.eq {
    font-size: 36px;
}

.chartImageWrapper.dynImage:after {
    content: '';
    background-color: #fff;
    width: 100%;
    height: 15px;
    position: absolute;
    left: 0px;
    bottom: 18px;

}