/* # is an ID selector and '.' is a class selector */
/* Margin is the buffer outside a html box and Padding is the buffer inside a html box, with border separating the two */

body {
    padding-top: 50px;
    padding-bottom: 20px;
    background-color: rgba(233, 233, 233, 1.0);
    font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: rgba(51, 51, 51, 1.0); /* font colours */
}

label {
    display: inline;
    margin-bottom: 0px;
    font-weight: normal;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}


#trading-chart-container {
    display: grid;
    width: 1200px;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: repeat(10, auto);
    /*background-color: rgba(100, 0, 0, 1.0); */
    padding: 0px; /*the space around the edge of the parent container and not the space between child containers*/
    grid-row-gap: 5px; /*the space between child containers*/
    grid-template-areas:
        'chart chart'
        'lastpricetext lastpricevalue'
        'datelastpricetext datelastpricevalue'
        'currentbidpricetext currentbidpricevalue'
        'numberbondssaletext numberbondssalevalue'
        'separator separator'
        'numberbondsbuytext numberbondsbuyvalue'
        'bidpricetext bidpricevalue'
        'totalcosttext totalcostvalue'
        'blank submitbutton';
}

.trading-chart-child {
    padding: 3px;
    box-shadow: none;
}

#trading-chart-child-chart {
    grid-area: chart;
    justify-self: center;
    padding-bottom: 20px;
}

#trading-chart-child-lastpricetext {
    grid-area: lastpricetext;
    text-align: right;
    font-weight: bold;
}

#trading-chart-child-lastpricevalue {
    grid-area: lastpricevalue;
    text-align: left;
}

#trading-chart-child-datelastpricetext {
    grid-area: datelastpricetext;
    text-align: right;
    font-weight: bold;
}

#trading-chart-child-datelastpricevalue {
    grid-area: datelastpricevalue;
    text-align: left;
}

#trading-chart-child-currentbidpricetext {
    grid-area: currentbidpricetext;
    text-align: right;
    font-weight: bold;
}

#trading-chart-child-currentbidpricevalue {
    grid-area: currentbidpricevalue;
    text-align: left;
}

#trading-chart-child-numberbondssaletext {
    grid-area: numberbondssaletext;
    text-align: right;
    font-weight: bold;
}

#trading-chart-child-numberbondssalevalue {
    grid-area: numberbondssalevalue;
    text-align: left;
    margin-bottom: 20px;
}

#trading-chart-child-separator {
    grid-area: separator;
}

#trading-chart-child-numberbondsbuytext {
    grid-area: numberbondsbuytext;
    text-align: right;
    align-content: center;
    font-weight: bold;
}

#trading-chart-child-numberbondsbuyvalue {
    grid-area: numberbondsbuyvalue;
    text-align: left;
    width: 120px;
}

#trading-chart-child-bidpricetext {
    grid-area: bidpricetext;
    text-align: right;
    align-content: center;
    font-weight: bold;
}

#trading-chart-child-bidpricevalue {
    grid-area: bidpricevalue;
    text-align: left;
    width: 120px;
}

#trading-chart-child-totalcosttext {
    grid-area: totalcosttext;
    text-align: right;
    font-weight: bold;
}

#trading-chart-child-totalcostvalue {
    grid-area: totalcostvalue;
    text-align: left;
}

#trading-chart-child-submitbutton {
    grid-area: submitbutton;
    text-align: center;
    width: 120px;
    height: 32px;
}




/* Removes number input tag arrows for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Removes number input tag arrows for Firefox */
input[type=number] {
    -moz-appearance: textfield;
}




/* COMPANY TILES */
.show {
    display: block;
}

/*
#companyTileBtnCont {
    margin-top: 20px;
    justify-content: left;
    grid-gap: 4px;
}
*/

#company-tile-cont {
    margin-top: 20px;
    overflow: hidden;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, 250px);
    grid-gap: 6px;
}

.companyTile {
    height: 250px;
    width: 250px;
    margin: 10px;
    white-space: nowrap;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    color: #333333;
    display: inline-block;
    background-color: #ffffff;
    border: 2px solid #cccccc;
    border-radius: 6px;
    align-content: center;
    text-align: center;
}

.companyTile:hover,
.companyTile:focus,
.companyTile:active,
.companyTile.active,
.open .dropdown-toggle.companyTile {
    color: #333333;
    background-color: #ebebeb;
    border-color: #adadad;
}

a {
    color: rgba(25, 25, 25, 1.0);
    text-decoration: none;
}

a:hover,
a:focus {
    color: rgba(60, 255, 20, 1.0); /* green text on hover */
    text-decoration: none;
}




/* RANGE SLIDER DROPDOWNS */
/* Compound selector, as is not separated by a combinator, so targets divs with the dropdown class */
div.sliderDropdown {
    position: relative;
    display: inline-block;
    width: 160px;
}

/**
    Hide the checkbox itself. Checking and unchecking 
    it we will be done via the label element.
*/

.sliderDropdown input[type=checkbox] {
    display: none;
}

/* Click to expand button */
/* Only applies to labels within dropdown class */
/*
.sliderDropdown label {
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: blue;
    padding: 15px 20px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}*/


.sliderDropdown ul {
    position: absolute;
    list-style: none;
    text-align: left;
    width: 160px;
    z-index: 1;
    margin: 7px 0 0 -13px;
    padding: 0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    display: none;
}

.sliderDropdown li {
    padding: 5px 0px;
    background-color: inherit;
    /*color: red;*/
    margin-bottom: 1px;
    cursor: pointer;
    padding-left: 6px;
}

/* Transparency removes the button default shading when hovering */
.sliderDropdown button {
    border-style: none;
    padding: 0px;
    background-color: inherit;
    color: inherit;
    margin-bottom: 0px;
    cursor: pointer;
    font-weight: normal;
    width: 100%;
    text-align: left;
}

.sliderDropdown li:hover {
    background-color: #ebebeb; /* Same as btn-default:hover background */
    color: inherit;
    font-weight: bold; /* This does not take effect for some reason */
    border-radius: 2px; /* This does not take effect for some reason */
    border: black; /* This does not take effect for some reason */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    padding-left: 9px;
}

/**

    By using the Following-sibling selector (~),
    we can target elements positioned after our checkbox in the DOM tree.

    With the state pseudo selector (:checked),
    we can make changes depending on the state of the checkbox.

    Using this combination of selectors
    allows to change the color
    of the label
    and show the list of items
    only when the checkbox is checked.

*/


/* Combines a class, pseudo-class and the label element type, along with two combinators i.e. ' ' and ~ */
.sliderDropdown input[type=checkbox]:checked ~ label {
    font-weight: bold;
}

.sliderDropdown input[type=checkbox]:checked ~ ul {
    display: block;
    color: #333333;
    background-color: #ffffff;
    font-weight: bold;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: transparent;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

#filters-btn-cont {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    justify-content: start;
    gap: 10px;
    margin: 10px 0px;
}

.arrow {
    border: solid black;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}




/* RANGE SLIDERS */
/* cont = container */
#range-slider-cont {
    width: 1250px;
    display: grid;
    grid-template-columns: auto auto auto auto auto; /* Sizes not specified here, so that boxes collapse if not selected */
    grid-template-rows: auto;
    gap: 0px;
    margin: 10px 0px; /* Top and bottom and then the sides e.g. 10px for top and bottom */
    grid-template-areas: 'turnover assets profit cashflow interestcover';
    justify-content: start;
}

#range-turnover-cont {
    display: grid; /* Of the 5 range sliders, so this is only one shown initially on landing */
    width: 240px;
    grid-area: turnover;
    margin: 0px 5px 0px 0px;
    padding: 5px; /* Padding adds 10px in total to the sides, so the range slider needs to be 10px thinner to accommodate */
    grid-template-columns: 50px 130px 50px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'label label label'
        'values values values'
        'min slider max';
    justify-content: start;
    align-items: center;
    border: 1px solid rgba(166, 166, 166, 1.0); /* For reference, btn-default colour is #cccccc i.e. 204, 204, 204 */
    border-radius: 5px;
}

#range-assets-cont {
    display: none;
    width: 240px;
    grid-area: assets;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    grid-template-columns: 50px 130px 50px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'label label label'
        'values values values'
        'min slider max';
    justify-content: start;
    align-items: center;
    border: 1px solid rgba(166, 166, 166, 1.0);
    border-radius: 5px;
}

#range-profit-cont {
    display: none;
    width: 240px;
    grid-area: profit;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    grid-template-columns: 50px 130px 50px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'label label label'
        'values values values'
        'min slider max';
    justify-content: start;
    align-items: center;
    border: 1px solid rgba(166, 166, 166, 1.0);
    border-radius: 5px;
}

#range-cashflow-cont {
    display: none;
    width: 240px;
    grid-area: cashflow;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    grid-template-columns: 50px 130px 50px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'label label label'
        'values values values'
        'min slider max';
    justify-content: start;
    align-items: center;
    border: 1px solid rgba(166, 166, 166, 1.0);
    border-radius: 5px;
}

#range-interestcover-cont {
    display: none;
    width: 240px;
    grid-area: interestcover;
    margin: 0px 5px 0px 0px;
    padding: 5px;
    grid-template-columns: 50px 130px 50px;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        'label label label'
        'values values values'
        'min slider max';
    justify-content: start;
    align-items: center;
    border: 1px solid rgba(166, 166, 166, 1.0);
    border-radius: 5px;
}

.rangeValuesLabel {
    font-weight: bold;
    grid-area: label;
}

.rangeValues {
    background-color: transparent;
    grid-area: values;
    border: 0; /* Border = 0 needed to stop text input box formatting appearing */
}

.rangeMin {
    grid-area: min;
    justify-self: center;
    margin-right: 5px;
    font-size: 12px;
}

.rangeSlider {
    grid-area: slider;
    justify-self: stretch;
}

.rangeMax {
    grid-area: max;
    justify-self: center;
    margin-left: 5px;
    font-size: 12px;
}




/* FINANCIALS ANALYTICS */
table {
    border: 2px solid rgba(51, 51, 51, 0.5);
    border-collapse: separate;
    border-radius: 5px;
    table-layout: fixed;
    max-width: 600px;
    background-color: transparent;
    padding: 10px; /* the spacing created inwards radiating from the edge of the outer table edge */
}

td, th {
    text-align: center;
}

td {
    border-top: 2px solid rgba(51, 51, 51, 0.25);
    padding-top: 5px;
}

th {
    padding-bottom: 5px;
}