@import './../../../mni_common/static/mni_common/less/constants.less';

@propcalc-orange: #e39910;
@propcalc-red: #dc4b4b;
@propcalc-green: #369136;

.green {
    color: @propcalc-green;
    padding: 5px;
}
.grid-green {
    border-color: @propcalc-green;
}

.orange {
    color: @propcalc-orange;
    padding: 5px;
}
.grid-orange {
    border-color: @propcalc-orange;
}

.red {
    color: @propcalc-red;
    padding: 5px;
}
.grid-red {
    border-color: @propcalc-red;
}

.lightGrey {
    background-color: @lightGrey;
    padding: 5px;
}

.measured { 
    padding: 5px;
    border-width: 3px;
    border-style: solid;
    background-color: white;
}

#propcalc-table-container {
    overflow-x:auto
}

#propcalc-grid-container {
    display:grid;
    grid-template-columns: auto auto auto auto;
    max-width:100%;
    overflow-x:auto;
}

.propcalc-grid-item {
    border-radius: 4px;
    border-style: solid;
    border-color: @veryDarkBlue;
    border-width: 2px;
    margin: 1%;
    padding: 25px 20px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:center;
    .title{
        text-align: center;
    }
    .subtitle{
        text-align: center;
    }
    max-width:100%;
}

.propcalc-grid-value{
    margin: 0px;
    padding: 0px;
}

.base-properties-container{
    border-style: solid;
    border-width: 3px;
    border-radius: 2px;
    padding: 3px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.button-row-container {
    display:flex;
    flex-direction:row;
    margin-bottom:20px;
    margin-top:20px;
    width:100%;
    justify-content:space-between;
}
.left-buttons {
    display:flex;
    flex-direction:row;
}
.right-buttons {
    display:flex;
    flex-direction:row;
    float:right;
}

th.order-column{
    width:20px;
}