/*CSS pertaining to the various tables in Mission Control*/

/*********Logs console table***********/

/*containers*/

div.logTableContainer, div.logHeaderContainer {
    overflow-y: scroll;
}

div.logTableContainer {
    height: calc(100% - 109px);
}

div.logHeaderContainer {
    position: relative;
    height: 109px;
    overflow: hidden;
}

.fixedToBottom {
    position: absolute;
    bottom: 0;
}

/*TR*/

tr.logRow td.sorted {
    border-top: solid 1px hsl(200, 20%, 32%);
    background-color: hsl(200, 25%, 25%);
}

td.sorted .buttonLogSort {
    display: block;
}

tr.logRow {
    background-color: hsl(0, 0%, 10%);
}

tr.logRow td {
    border-top: solid 1px hsl(0, 0%, 25%);
}

tr.logRow:first-child td {
    border-top: none;
}

/*TD*/

td.logHeader {
    position: relative;
    vertical-align: top;
    padding: 10px 0;
    width: auto;
    /*box-sizing: border-box;*/
    border-left: solid 1px hsl(0, 0%, 25%);
    border-right: solid 1px hsl(0, 0%, 25%);
    border-bottom: solid 1px hsl(0, 0%, 25%);
    cursor: pointer;
}

/**********sorting************/


td.logHeader.sorted {
    background-color: hsl(200, 85%, 35%);
}

td.logHeader.sorted p {
    color: white;
}

tr.logRow:first-child td.sorted {
    border-top: none;
}

tr.logRow td.sorted > p {
    color: white;
}

/*new log fade in*/

tr.newLog td, tr.newLog td.sorted {
    background-color: hsl(150, 100%, 30%) !important;
}

td.logHeader:first-child {
    border-left: none;
}

td.logHeader:last-child {
    border-right: none;
}

p.logHeaderText {
    pointer-events: all;
}

.unclickable p.logHeaderText {
    pointer-events: none;
    cursor: default;
}

p.activeColumnText {
    color: hsl(195, 100%, 85%);
}

td.activeSortColumn {
    background-color: hsl(0, 0%, 25%);
}

td.activeSortColumn p {
    color: white;
}

td.logHeader:hover {
    background-color: hsl(0, 0%, 20%);
}

/*td.logHeader:hover p.logHeaderText {*/
    /*color: white;*/
/*}*/

td.logHeader.sorted:hover {
    background-color: hsl(200, 85%, 35%);
    color: white;
}

div.logWrapper {
    padding: 0 10px;
    position: relative;
}

td.logMessage {
    position: relative;
    vertical-align: top;
    padding: 10px;
}

td.logValue {
    position: relative;
    vertical-align: top;
    padding: 10px;
    width: calc(100% - 460px);
}

td.logBadge {
    position: relative;
    vertical-align: top;
    width: 70px;
    min-width: 70px;
}

td.logTimeStamp {
    position: relative;
    padding: 10px;
    vertical-align: top;
    width: 1%;
    white-space: nowrap;
}


tr.headerRowCopy td.logTimeStamp {
    padding: 10px 0;
}

#log-headers-row td.logTimeStamp {
    padding: 10px 0;
}

td.logDetail {
    text-align: center;
    margin: 0 5px;
    width: 1%;
    min-width: 72px;
}

td.logUsername, td.logVersion {
    text-align: center;
    margin: 0 5px;
    width: 1%;
}


/*TABLE CELL Ps*/

p.logTextStandard, p.logContext, p.logTextDetail {
    text-align: left;
    color: hsl(0, 0%, 100%);
    font-size: 11pt;
    line-height: 135%;
    word-break: break-all;
}
p.logContext {
    word-break: break-all;
    margin: 4px 0 0 0;
    font-size: 11pt;
    color: hsl(0, 0%, 70%);
    line-height: 135%;
}

p.logTextDetail {

}

p.logDetailText {
    font-size: 11pt;
    color: hsl(0, 0%, 70%);
    line-height: 135%;
    margin-left: 10px;
    margin-top: 4px;
    margin-bottom: 0px;
}


p.tableExtra, p.tableHeader {
    color: grey;
    text-align: left;
    font-size: 22px;
    line-height: 135%;
}

p.tableHeader {
    white-space: nowrap;
}

p.logTimeStamp, p.logText, p.logBadgeText, p.logHeaderText {
    color: hsl(0, 0%, 70%);
    text-align: left;
    font-size: 11pt;
    line-height: 135%;
}

p.logTimeStamp {
    text-align: right;
    width: auto;
}

/*ERROR BADGE*/

div.errorBadge, div.alertBadge {
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    pointer-events: all;
    cursor: pointer;
    position: absolute;
    height: auto;
    /*top: 0px;*/
    /*bottom: 0px;*/
    /*width: 60px;*/
    background-color: hsl(0, 100%, 30%);
    /* border: solid 2px hsl(0, 0%, 60%); */
    border-radius: 3px;
}

div.errorBadge.expanded {
    background-color: hsl(0, 100%, 45%);
}

div.alertBadge.expanded {
    background-color: hsl(50, 100%, 40%);
}

div.alertBadge {
    background-color: hsl(50, 100%, 25%);
}

p.logBadgeType {
    font-family: "StandardFontBold", "Arial", sans-serif;
    font-size: 11pt !important;
    line-height: 26px;
    color: hsl(0, 100%, 90%);
    text-align: center;
    pointer-events: none;
}

div.alertBadge p.logBadgeType {
    color: hsl(50, 100%, 75%);
}

p.logBadgeText {
    font-family: "StandardFontBold", "Arial", sans-serif;
    font-size: 11pt !important;
    color: hsla(0, 0%, 100%, 0.65);
    text-align: center;
    margin-top: 1px;
    pointer-events: none;
    line-height: 100%;
}

p.logBadgeExpandIcon {
    position: absolute;
    width: 12px;
    left: 50%;
    margin-left: -6px;
    bottom: 0px;
    pointer-events: none;
    color: hsla(0, 0%, 100%, 0.45)
}

p.logText, p.logHeaderText {
    text-align: left;
    width: calc(100% - 100px);
    color: hsl(0, 0%, 100%);
}

p.logHeaderText {
    /*display: inline-block;*/
    color: hsl(195, 100%, 55%);
    width: auto;
    margin: 0 10px;
    line-height: 100%;
    text-align: center;
    font-weight: bold;
}

p.logHeaderTimestamp {
    margin: 0 !important;
    text-align: left !important;
}

p.logDetailText {
    margin: 0 10px;
}