/* You can add global styles to this file, and also import other style files */

html, body, .app-body {
    height: 100%;
}

body {
    font-size: 11px;
    font-family: 'Segoe UI', Verdana, Geneva, sans-serif;
    margin: 0;
    padding: 0;
    color: #222;
    overflow: hidden;
    background: #CCC;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    padding-right: 5px;
}

::-webkit-scrollbar-track {
    background-color: #DDD;
}

::-webkit-scrollbar-thumb {
    background-color: #666;
}

::-webkit-scrollbar-button {
    height: 0px;
}

::-webkit-scrollbar-corner {
    background-color: black;
}

.spacer {
    cursor: auto;
    padding: 0px 10px;
}

.icon-small {
    font-size: 14px !important;
}

.icon-vsmall {
    font-size: 11px !important;
}

.icon-xsmall {
    font-size: 9px !important;
}

.icon-medium {
    font-size: 18px !important;
}

.icon-large {
    font-size: 20px !important;
}

.icon-gray {
    color: #222 !important;
}

.icon-white {
    color: #dce0e7 !important;
}

.icon-light {
    color: #FFF !important;
}

.pad-right {
    padding: 4px 8px;
    font-size: 14px !important;
}

.header-column {
    background: #2D435A;
    display: flex;
    height: 35px;
    font-size: 12px;
    color: #FFF;
}

.header-column>section {
    display: flex;
    flex: 1;
}

.header-column>section:last-child {
    align-content: flex-end;
    font-size: 20px;
    margin-top: 5px;
}

img.companyLogo {
    height: 22px;
    margin-top: 7px;
    margin-left: 5px;
}

.pc-title {
    padding: 0px;
    color: #fff;
    margin: 10px 8px;
    font-size: 11px;
}

.highlightText {
    color: #5ba7d2;
    padding-left: 2px;
}

img.clientlogo {
    height: 20px;
    padding: 1px 60px 7px 5px;
    align-content: flex-start;
    margin-top: 6px;
}

.noLogo {
    padding: 0px;
    align-content: flex-start;
}

.header-links {
    display: flex;
    flex: 1 1 auto;
    margin-top: 7px;
    justify-content: flex-end;
}

.secCount {
    position: relative;
    color: white;
    font-size: 9px;
    background-color: red;
    border-radius: 4px;
    padding: 0 4px 0px 3px;
    left: 12px;
    display: inline-flex;
    height: 13px;
}

.altMsg1 {
    opacity: 0;
    font-size: 9pt;
    transition: opacity 0.5s linear;
    padding: 0px 0px 2px 5px;
}

.altMsg2 {
    color: white;
    text-align: left;
    padding-left: 6px;
    position: relative;
    background-color: red;
    border-radius: 3px;
    height: fit-content;
	margin-right: -5px;
}

.altMsg2:after {
    left: 99%;
    top: 50%;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
    border-left-color: red;
    border-width: 8px;
    margin-top: -8px;
}

div.slcHeaderR {
    float: right;
    color: #2d435a;
    padding: 5px 10px 0px 10px;
}

.dataTableDark tr:hover {
    background-color: #EEE;
    cursor: pointer;
}

td.slsCellH {
    background-color: #2d435a;
    color: #FFF;
    padding-left: 5px;
    font-size: 11px;
    height: 30px;
    vertical-align: middle;
    border-bottom: 1px solid #2d435a;
    font-weight: bold;
    text-transform: uppercase;
}

td.slsCell {
    padding-left: 5px;
    padding-right: 5px;
    color: #222;
    font-size: 11px;
    font-weight: normal;
    height: 27px;
    cursor: pointer;
    vertical-align: middle;
    border-bottom: 1px solid #DDD;
    background-color: #F1F1F1;
}

td.slsCellWhite {
    background-color: #FFFFFF;
}

div.ButtonNew, div.ButtonNewR {
    position: relative;
    float: left;
	font-size: 11px;
    font-weight: bold;
    color: #FFF;
    background-color: #2d435a;
    cursor: pointer;
    padding: 4px 13px 5px 13px;
	margin-right:5px;
	width:auto;
}

div.ButtonNewR {
    float: right;
	margin-right:0px;
	margin-left:5px;
}


div.Button, div.ButtonR {
    font-size: 11px;
    text-align: center;
    background-color: #2d435a;
    color: #FFF;
    position: relative;
    float: left;
    font-weight: bold;
    cursor: pointer;
    margin: 5px 4px 0px;
    padding: 5px 13px;
}

div.ButtonR1{
    min-width: 80px;
    max-width: 18%;
}

.listmsg {
    position: relative;
    font-size: x-small;
    color: #b11515;
    padding: 3px;
    font-weight: bold;
}

select.selClass {
    font-size: 11px;
    font-family: 'Segoe UI';
    padding: 3px 5px;
    margin-left: 2px;
    margin-top: 6px;
    background-color: #f1f1f1;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #222;
    width: 150px;
}

input.selText {
    font-size: 11px;
    font-family: 'Segoe UI';
    padding: 4px 5px;
    width: 150px;
    border: 1px solid #222;
    margin-right: 2px;
    font-weight: bold;
}

button.GoBtn {
    color: #FFF;
    background-color: #2d435a;
    padding: 5px 10px;
    font-weight: bold;
    margin-left: 2px;
    border: 0px;
    font-size: 11px;
    font-family: 'Segoe UI';
    cursor: pointer;
}

.searchBox {
    position: relative;
    background: #f1f1f1;
}

.searchInput {
    width: calc(100% - 23px);
    margin: 5px 5px 5px 5px;
    padding: 4px;
    font-size: 11px;
}

div.slcBody {
    width: 100%;
    overflow: auto;
    padding-right: 1px;
}

div.slc-filters {
    height: 368px;
	margin-bottom:1px;
}

div.slc-filters-bottom {
    height: calc(100% + 5px);
	overflow-x: hidden;
	overflow-y: scroll;
}

div.slc-filters-gen {
    height: 405px;
}

div.sec-body {
	padding-bottom:0px;
}

div.slc-factsheet {
    height: calc(100% + 5px);
    border: 1px solid #ccc;
    padding: 0px;
    overflow: hidden;
}

div.slc-factsheet-st {
    height: calc(80vh - 97px);
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 0px;
    overflow: auto;
}

div.slcHeaderL {
    float: left;
    font-size: 12px;
    color: #222;
    padding: 5px 10px;
}

div.ButtonRSec {
    margin: 6px 1px 0px;
}

div.ButtonR {
    float: right;
}

div.btnNoLeftMargin, div.btnCtx {
    margin: 6px 8px 0px 0px;
}

div.btnCtx {
    left: 1%
}

.noTopMargin {
    padding-top: 0px !important;
}

.NoMargin {
    margin: 0 !important;
}

/* Sub header columns css */

.subheader-column {
    background: rgba(235, 238, 243, 0.61);
    display: flex;
    height: 35px;
    font-size: 12px;
    color: #222;
    border-bottom: 1px solid rgb(206, 206, 206);
    margin-bottom: 3px;
}

.subheader-column>section:first-child {
    display: flex;
    width: 17.5%;
}

.subheader-column>section:last-child {
    display: flex;
    flex: 3;
}

.toggleFilters {
    font-size: 11px;
    background-color: #2d435a;
    color: #FFF;
    border: none;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 10px;
    margin: 8px;
}

.headerDD, .headerDDR {
    background-color: #FFF;
    padding: 2px;
    margin: 7px 10px 0px 0px;
    border: 1px solid #2d435a;
    font-size: 11px;
    width: 150px;
}

.headerDDR {
    width: auto;
}

input.securityText {
    width: 230px;
    font-size: 11px;
    margin: 1px 5px 0px 0px;
    padding: 3px 4px;
    /* display: inline-flex; */
    border: 1px solid #2d435a;
}

.searchInputs {
    flex: 3;
}

section.searchSection {
    display: flex;
    flex: 3;
}

/* side panel */

div.sidepanel {
    width: 16.5%;
    min-width:250px;
    position: relative;
    float: left;
    padding: 0px 2px 5px 5px;
    opacity: 1;
    margin: 0 8px 5px 0;
    overflow-y: auto;
    height: calc(99vh - 97px);
}

button.accordion, button.noAccordion {
    margin-top: 2px;
    background-color: #dce0e7;
    color: #2d435a;
    cursor: pointer;
    padding: 6px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 11px;
    transition: 0.3s;
    font-weight: bold;
    font-family: 'Segoe UI';
    text-transform: uppercase;
}

button.accordion.active, button.accordion:hover, button.noAccordion.active {
    color: #FFF;
    background-color: #2d435a;
}

button.accordion:after {
    content: '\002B';
    font-size: 20px;
    color: #777;
    float: right;
    margin-left: 5px;
    font-weight: bold;
    line-height: 10px;
}

button.accordion.active:after {
    content: "\02212";
    color: #FFF;
    font-weight: bold;
}

div.panel {
    padding: 0 3px;
    font-size: small;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    opacity: 0;
    border: 1px solid #dce0e7;
    border-top: 0px;
}

div.panel.show {
    opacity: 1;
    max-height: 1500px;
    margin-bottom: 2px;
}

div.filter {
    background-color: #FAFAFA;
    border: 1px solid #dce0e7;
    color: #2d435a;
    padding: 2px 7px;
    position: relative;
    float: left;
    margin: 1px 2px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
}

div.filter:hover {
    border: 1px solid #2d435a;
    background-color: #2d435a;
    color: #FFF;
}

div.filterAll {
    font-weight: bold;
    color: #2d435a;
    cursor: pointer;
    padding: 4px;
    padding-left: 20px;
    float: right;
}

div.filterAll:hover {
    text-decoration: underline;
}

tr.filterRow td {
    padding: 0px 3px 0px 1px;
    height: 32px;
    line-height: 13px;
}

tr.filterRow:last-child td {
    border-bottom: 0px;
}

td.check, td.value, td.valueMore {
    vertical-align: middle;
    font-size: 11px;
    font-family: 'Segoe UI';
    font-weight: 500px;
    width: 4%;
    border-bottom: 1px solid #DDD;
}

tr.lipperscoretbl td {
    height: 22px !important;
}

td.value, td.valueMore {
    padding-right: 0px;
    font-weight: 600;
    /*white-space: nowrap;*/
    width: 92%;
}

td.valueMore {
    padding-left: 20px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
}

td.valType {
    font-size: 11px;
    font-family: 'Segoe UI';
    font-weight: bold;
    padding: 3px 0px 2px 2px;
	height: 22px !important;
}

td.valFrom, td.valTo {
    width: 41%;
    padding: 2px;
    font-family: 'Segoe UI';
    font-size: 11px;
    padding: 2px;
    padding-bottom: 5px;
    border-bottom: 1px solid #DDD;
	height: 22px !important;
}

td.valBtw, td.valGo {
    width: 8%;
    text-align: center;
    border-bottom: 1px solid #DDD;
}

td.valBtw {
	padding: 0px 6px 6px 0px !important;
}

td.valGo {
    width: 12%;
}

div.valGo {
    font-size: 11px;
    padding: 4px 8px 5px 8px;
    margin: 4px 3px 4px 3px;
    background-color: #dce0e7;
    font-weight: bold;
    cursor: pointer;
    color: #222;
}

div.valGo:hover {
	background-color: #2d435a;
	color:#FFF;
}

.lipperScoreLabel {
    color: #2d435a;
    padding: 3px 0 1px 3px;
    width: 100%;
    text-align: left;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.favorite {
    color: black !important;
    font-size: small !important;
}

.lipperScore {
    padding: 2px;
}

.scoreChk {
    float: left;
    margin-top: 1px;
}

input.valTextR {
    width: 80%;
    text-align: right;
    font-size: 11px;
    padding: 3px 3px;
}

/* main panel */

.mainpanel {
    width: auto;
    margin-right: 5px;
    order: 2;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5px 5px 5px 0px;
}

.spinner {
    height: 40px;
    position: fixed;
    top: 45%;
    margin: 0 6% 0 6%;
}

.spin-left {
    left: 50%;
}

.spin-right {
    right: 50%;
}

.innerspinner {
    height: 30px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

div.selFilters {
    height: 50px;
    overflow-y: auto;
    flex: 0 1 100%;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
}

div.searchResults1 {
    flex-wrap: wrap;
    flex: 100%;
    align-content: center;
    height: calc(100vh - 188px);
    align-self: stretch;
    overflow-y: auto;
    justify-content: center;
}

#secTable>tbody>tr:nth-child(odd):hover {
    background-color: #EEE;
}

#secTable>tbody>tr:nth-child(even):hover {
    background-color: #EEE;
}

div.filterLable {
    height: 40px;
    padding: 9px 0px;
}

div.actionBar {
    height: 40px;
    width: 100%;
}

div.filter {
    background-color: #FAFAFA;
    border: 1px solid #dce0e7;
    color: #2d435a;
    padding: 2px 7px;
    position: relative;
    float: left;
    margin: 1px 2px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    display: inline-table;
}

div.filter:hover {
    border: 1px solid #2d435a;
    background-color: #2d435a;
    color: #FFF;
}

.restrict {
    pointer-events: none;
}

div.clearAll {
    font-weight: bold;
    color: #2d435a;
    cursor: pointer;
    padding: 4px 4px 4px 20px;
    float: right;
    margin-left: auto;
    margin-right: 0;
}

div.clearAll > span:hover {
    text-decoration: underline;
}
/*
div.clearAll:hover {
    text-decoration: underline;
}*/

div.ButtonR {
    font-size: 11px;
    text-align: center;
    background-color: #2d435a;
    color: #FFF;
    font-weight: bold;
    cursor: pointer;
    margin: 5px 4px 0px;
    padding: 5px 13px;
}

.Button {
    font-size: 11px;
    text-align: center;
    background-color: #2d435a;
    color: #FFF;
    font-weight: bold;
    cursor: default;
    margin: 5px 4px 0px;
    padding: 5px 13px;
    background-color: #CCC;
    border: none;
}

div.ShowRecordCount {
    position: relative;
    float: left;
    width: 250px;
	padding: 4px 6px;
}

div.searchFilterLable {
    padding-right: 5px;
}

td.tabHeadL, td.tabHeadR, th.tabHeadL, th.tabHeadR {
    font-size: 11px;
    font-weight: bold;
    border-bottom: 1px solid #2d435a;
    padding: 5px;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
}

td.tabHeadR, th.tabHeadR {
    text-align: right;
}

th.tabHeadL {
    text-align: left;
}

td.tabCellL, td.tabCellR {
    font-size: 11px;
    font-weight: normal;
    padding: 5px;
    border-bottom: 1px solid #DDD;
}

#secTable>tbody>tr:nth-child(odd):hover {
    background-color: #EEE;
}

#secTable>tbody>tr:nth-child(even):hover {
    background-color: #EEE;
}

td.tabCellR {
    text-align: right;
}

tr.filterRow td {
    padding: 0px 3px 0px 1px;
    height: 32px;
    line-height: 13px;
}

tr.filterRow:last-child td {
    border-bottom: 0px;
}

input.tabCellL {
    margin-top: 5px;
}


td.secName {
    font-family: 'Segoe UI';
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 2px 10px 0px 5px;
    border-left: 1px solid #AAA;
    border-top: 1px solid #AAA;
    color: #222;
    background-color: #dce0e7;
}

td.secName:hover {
    text-decoration: underline;
    cursor: pointer;
}

td.secType {
    font-family: 'Segoe UI';
    font-size: 9px;
    font-weight: normal;
    padding: 0px 10px 2px 5px;
    border-left: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    color: #000;
    background-color: #dce0e7;
    text-transform: uppercase;
}

td.secAction {
    font-family: 'Segoe UI';
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    width: 20px;
    background-color: #dce0e7;
    border: 1px solid #AAA;
    border-left: 0px;
    cursor: pointer;
}

.noSecurities {
    color: red;
    font-style: italic;
    padding-top: 5px;
    font-weight: 600;
    font-size: xx-small;
}

span.sort {
    color: #777 !important;
}

span.sort:after {
    width: 10px;
    padding-left: 5px;
    margin-bottom: 1px;
    display: inline-table;
    content: '\25B2';
    color: #777 !important;
}

span.sort-up:after {
    width: 10px;
    padding-left: 5px;
    margin-bottom: 1px;
    display: inline-table;
    content: '\25B2';
    color: #222;
}

span.sort-down:after {
    width: 10px;
    padding-left: 5px;
    margin-bottom: 1px;
    display: inline-table;
    content: '\25BC';
    color: #222;
}

span.factsheetLink {
    color: #2D435A;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* footer */

.footer-column {
    height: 22px;
    padding: 5px;
    background: #2D435A;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    color: #ddd;
    font-size: 9px;
    flex-direction: row;
}

.copyright {
    flex: 3;
    justify-content: flex-start;
}

.version {
    justify-content: flex-end;
}

/* modals */

.sec-modal {
    z-index: 3;
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7)
}

div.PopupText {
    height: 405px;
	color:#b11515;
}

.center {
    text-align: center;
}

.sec-modal-content, .sec-modal-fs-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
}

.sec-modal-content {
	height: 550px;
    width: 800px;
    top: calc(50% - 275px) !important;
    left: calc(50% - 400px) !important;
    z-index: 1000;
    position: absolute;
}

.sec-modal-filters {
    width: 700px;
    height: 490px;
    top: calc(50% - 245px) !important;
    left: calc(50% - 350px) !important;
}

.sec-modal-filters-small {
    height: 300px;
    top: calc(50% - 150px) !important;
}

.sec-modal-broker {

}

.sec-modal-factsheet {
    width: 80%;
    height: 80%;
	top:10%;
}

div.sec-modal-compare {
    width: 88%;
    height: 82%;
	top:9%;
}

.sec-closebtn {
    text-decoration: none;
    float: right;
    font-size: 24px;
    font-weight: bold;
    color: inherit
}

.sec-container:after {
    content: "";
    display: table;
    clear: both
}

.sec-container {
    padding: 10px;
}

.sec-container-no-vpad {
    padding: 0px 10px;
}

.sec-factsheet {
    width: 99.5%;
    height: 80vh;
}

.sec-header, .sec-hover-header:hover {
    color: #fff!important;
    background-color: #2d435a!important
}

.sec-footer, .sec-hover-footer:hover {
    color: #fff!important;
    background-color: ivory!important
}

.sec-animate-top {
}

.sec-text-upper {
    text-transform: uppercase;
}

.modalHeader {
    position: absolute;
    box-sizing: border-box;
	top:0px;
    height: 38px;
    width: 100%;
    background-color: #2d435a;
    color: #FFF;
    padding: 10px;
}

.modalBody {
	position: absolute;
    box-sizing: border-box;
    top: 38px;
    bottom: 38px;
    width: 100%;
    overflow-y: hidden;
    padding: 10px;
}

.modalFooter {
    position: absolute;
    box-sizing: border-box;
    bottom: 0px;
	height: 38px;
    width: 100%;
    padding: 6px 10px;
}

.sec-error-popup {
}

.sec-modal-error {
    width: 400px;
    height: 230px;
    top: calc(50% - 130px) !important;
    left: calc(50% - 200px) !important;
}

h3 {
    font-size: 14px;
    margin: 0px;
}

.sec-error-div-text {
	width: calc(100% - 20px);
    height: 130px;
    padding: 0px;
}

@media (max-width:600px) {
    .sec-modal-content {
        margin: 0 10px;
        width: auto!important
    }
    .sec-modal {
        padding-top: 30px
    }
}

@media (max-width:768px) {
    .sec-modal-content {
       
    }
    .sec-modal {
        padding-top: 50px
    }
}

@media (max-width:993px) {
    .sec-modal-content {
       
        top: 12%;
    }
    .sec-modal-fs-content {
        width: 72.5%;
        top: 12%;
    }
}

.arrow_box, .arrow_box_large {
    position: absolute;
    background: #7d0e0e;
    color: #FFF;
    border: 0px solid #FFF;
    height: auto;
    width: 106px;
    margin-top: 7px;
    font-size: 11px;
    font-family: 'Segoe UI';
    font-weight: bold;
    padding: 5px 5px;
    z-index: 100;
}

.arrow_box:after, .arrow_box:before, .arrow_box_large:after, .arrow_box_large:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after, .arrow_box_large:after {
    border-color: none;
    border-bottom-color: #7d0e0e;
    border-width: 6px;
    margin-left: -6px;
}

.arrow_box:before, .arrow_box_large:before {
    border-color: none;
    border-bottom-color: #7d0e0e;
    border-width: 7px;
    margin-left: -7px;
}

.arrow_box_large {
	width:136px;
}

section.lCol, section.rCol {
    width: calc(50% - 10px);
    height: 100%;
    float: left;
    position: relative;
}

section.lCol {
    padding-right: 15px;
}

.broker footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 10px;
}

span.footerMsg {
    color: #7d0e0e;
    font-weight: bold;
    font-size: 10px;
    padding: 9px;
    float: left;
    text-transform: uppercase;
}

label.label {
    float: left;
    font-size: 11px;
    font-weight: bold;
    color: #444;
    width: 100%;
    padding-bottom: 3px;
    text-transform: uppercase;
}

label.mandatory {
    color: #2d435a;
}

div.value {
    width: 100%;
    padding-bottom: 15px;
    float: left;
}

div.noPadding {
    padding-bottom: 5px !important;
}

label.half {
    width: 50%;
    float: left;
}

div.half {
    width: 50%;
    float: left;
}

div.clearingFirm {
    background-color: #EEE;
    padding: 15px 0px 0px 15px;
    float: left;
    margin-bottom: 20px;
}

.brokerInput, .brokerSelect {
    font-family: 'Segoe UI';
    width: calc(100% - 20px);
    margin-right: 20px;
    font-size: 13px;
    border: 1px solid #CCC;
    padding: 4px;
    background-color: #FFF;
    box-sizing: border-box;
}

.brokerRadio {
    width: 20px;
    padding: 0px;
    margin: 0px;
    margin-top: 4px;
}

span.clearingLabel {
    font-weight: bold;
    font-size: 12px;
    color: #2d435a;
    text-transform: uppercase;
}

brokerSelect {
    padding: 3px 2px;
}

td.radio {
    width: 20px;
}

select.smallInput, input.smallInput {
    width: calc(100% - 20px) !important;
    margin-right: 20px !important;
}

select.smallInput, input.smallInput {
    width: 50%;
    margin-right: 20px;
}

.broker-info {
}

.broker-info-container {
    top: 40px;
    bottom: 35px;
    position: absolute;
}

.broker-info-footer {
    position: absolute;
    bottom: 0;
    height: 35px;
    text-align: right;
    padding: 4px 5px 0px 5px;
    background-color: #EEE;
    border-top: 1px #ddd solid;
    width: 98.7%;
}

.broker-info-cell {
    height: auto !important;
}

td.radio {
    font-size: 12px;
    width: 30%;
    padding-right: 10px;
}

input.brokerInput {
    vertical-align: bottom;
    padding-right: 0px;
    margin-right: 0px;
}

button.broker-info-button {
    background-color: #2d435a;
    color: #FFF;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    border: 0px;
    cursor: pointer;
    margin: 4px 3px;
}

button.broker-info-button:disabled {
    background-color: #CCC;
    color: #888;
    cursor: default;
}

button.broker-info-button:hover:enabled {
    background-color: #222;
}

input.mandatory, select.mandatory {
    border-color: #5ba7d2;
}

.compare-container {
    box-sizing: border-box;
    height: calc(100% + 5px);
    overflow-y: scroll;
    overflow-x: hidden;
	border: 1px solid #CCC;
    margin: 0px;
    padding: 5px 2px;
}

.footer {
    position: absolute;
    bottom: 5px;
    width: 100%;
    padding-top: 10px;
    right: 5px;
}

td.AttName {
	font-weight:bold;
	padding:4px 8px 4px 8px;
	color:#2d435a;
	font-size:10px;
	border:1px solid #DDD;
	background-color:#EEE;
}

td.AttValue {
	text-align:right;
	padding:4px 8px 4px 8px;
	color:#222;
	font-size:10px;
	border:1px solid #DDD;
	background-color:#FFF;
}

td.AttValueBold {
	font-weight:bold;
}

.highcharts {
    vertical-align: top;
    height: 55%;
    width: 100%;
    padding-top: 10px;
}

img.Lipper {
    width: 20%;
    min-width: 40px;
}

div.ComparePanel {
    font-size: small;
    max-height: 0;
    overflow: hidden;
    transition: 0.3s ease-in-out;
    opacity: 0;
    border-top: 0px;
}

div.CompareSlcBody {
    overflow: auto;
}

div.ComparePanel.show {
    opacity: 1;
    max-height: 1500px;
    margin-bottom: 2px;
}

button.accordioncmp {
    margin-top: 2px;
    background-color: #dce0e7;
    color: #2d435a;
    cursor: pointer;
    padding: 6px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 11px;
    transition: 0.3s;
    font-weight: bold;
    font-family: 'Segoe UI';
    text-transform: uppercase;
}

button.accordioncmp.active, button.accordioncmp:hover {
    color: #FFF;
    background-color: #2d435a;
}

button.accordioncmp:after {
    content: '\002B';
    font-size: 20px;
    float: left;
    margin-left: 5px;
    font-weight: bold;
    line-height: 10px;
    margin-right: 5px;
}

button.accordioncmp.active:after {
    content: "\02212";
    color: #FFF;
    font-weight: bold;
}

.growthtitle {
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    height: 20px;
    padding-left: 10px;
}

td.nameboldsmall {
    font-size:11px;
	font-weight:bold;
    text-transform:uppercase;
    height:21px;
}

td.boldname{
    width: 5%;
    font-size: 11px;
    vertical-align: top;
    padding-top: 3px;
}

td.tdlabel {
    width: 20%;
    height: 20px;
    vertical-align: top;
}
td.tdlabel input{
    padding-left: 2px;
}

input.scenario_input {
    font-size: 11px;
    padding: 1px 0px 2px 2px;
    width: calc(100% - 5px);
}

textarea.scenario_input {
    font-size: 11px;
    padding: 1px 2px 2px 2px;
    height: 180px;
    width: calc(100% - 5px);
}

.saveScenarioMsg,
.deleteScenarioMsg {
    float: left;
    color: #b11515;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 10px 0px 0px;
}

.filterDelObj {
    color: #2d435a;
    font-style: italic;
}

div.scenarioNotes {
    height: 45px;
    overflow-y: auto;
    padding: 2px 5px;
    background-color: #FAFAFA;
    border: 1px solid #BBB;
}

div.scenarioLabel {
	font-weight: bold;
    padding: 10px 0px 5px 0px;
}

.empty {
    vertical-align: -webkit-baseline-middle;
    align-content: center;
    color: #dc0a0a;
    padding-left: 5px;
}

.customlabel {
	box-sizing: border-box;
	position:relative;
	float:left;
    width: 90px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color: #444;
    padding: 6px;
}

.custominput {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
	position:relative;
    width: calc(100% - 90px);
	float:left;
    font-family: 'Segoe UI';
    font-size: 13px;
    border: 1px solid #CCC;
    padding: 4px;
    margin-bottom: 8px;
}

.arrow {
    height: 10%;
    padding-left: 12px;
}

td.CellH1 {
    width: 45%;
    background-color: #2d435a;
    color: #FFF;
    padding-left: 20px;
    font-size: 11px;
    height: 30px;
    vertical-align: middle;
    border-bottom: 1px solid #2d435a;
    font-weight: bold;
    text-transform: uppercase;
}

td.CellH2 {
    width: 10%;
}

td.CellH3 {
    width: 45%;
    background-color: #2d435a;
    color: #FFF;
    padding-left: 20px;
    font-size: 11px;
    height: 30px;
    vertical-align: middle;
    border-bottom: 1px solid #2d435a;
    font-weight: bold;
    text-transform: uppercase;
}

.ComparePanel > table {
    table-layout:fixed;
    border-collapse:collapse;
    width: 100%;
}
.ComparePanel > table > div {
    display: contents;
}

td.ColName {
    font-weight: bolder;
    padding: 6px 14px 6px 30px;
    color: #2d435a;
    font-size: 10px;
    border: 1px solid #DDD;
    background-color: #EEE;
}

td.SelColName {
    font-weight:bold;
	padding:4px 8px 4px 9px;
	color:#2d435a;
	font-size:10px;
    background-color:#EEE;
    border-bottom: 1px solid #DDD;
}

td.slsCellCust {
    padding-left: 5px;
    color: #222;
    font-size: 11px;
    font-weight: normal;
    height: 27px;
    cursor: pointer;
    vertical-align: middle;
    border: 1px solid #DDD;
    background-color: #F1F1F1;
}
.securitiesDropdown
{
    position:absolute;
    z-index: 1;
    overflow-y: auto;
    min-width:100%;
    max-height: 300px;
    background: #FFFFFF;
    border: 0.2px solid black;
}
.securitiesDropdownOption {
    display: flex;
    justify-content: space-between;
    padding:5px;
    overflow: auto;
}
/* .securitiesDropdownOption:hover{
  background-color: #cbe5f8;
} */

div.pchelp {
	width: 70%!important;
    height: 70%!important;
    left: 15%!important;
    top: 15%!important;
}

.current{
    background-color: #cbe5f8;
  }

  span.errorPC {
    font-size: 11px;
    color: #7d0e0e;
    font-weight: bold;
}