/* Layout */
table.pg-matrix {
    border: none 1px #fff;
    margin: 3px;
    border-collapse: collapse;
}

td.pg-matrixcell {
    position: relative;
    padding: 0px;
}

    td.pg-matrixcell div {
        display: table-cell;
        background-color: #fff;
        text-align: center;
        vertical-align: middle;
        font-family: Arial;
        font-size: 9pt;
        font-weight: normal;
    }

    td.pg-matrixcell button {
        border: 0;
        background-color: #fff;
        text-align: center;
        vertical-align: middle;
        color: #fff;
        padding: 0;
        text-wrap: nowrap;
    }

td.pg-matrixcell button {
    transition: ease background-color 0.1s;
}
    /* Appearance */
    td.pg-matrixcell-top {
        border-top: solid 2px #fff;
    }

td.pg-matrixcell-left {
    border-left: solid 2px #fff;
}

td.pg-matrixcell-bottom {
    border-bottom: solid 2px #fff;
}

td.pg-matrixcell-right {
    border-right: solid 2px #fff;
}

td.pg-matrixcell-top-thick {
    border-top: solid 3px #fff;
}

td.pg-matrixcell-left-thick {
    border-left: solid 3px #fff;
}

td.pg-matrixcell-bottom-thick {
    border-bottom: solid 3px #fff;
}

td.pg-matrixcell-right-thick {
    border-right: solid 3px #fff;
}

td.pg-matrixcell-dark {
    background-color: #c0c0c0
}

td.pg-matrixcell-light {
    background-color: #ffffff
}

td.pg-matrixcell-alt {
    background-color: #00c0c0
}

.pg-matrixcell-selected {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #eee !important
}

td.pg-matrixcell div.pg-matrixcell-indicator {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 5px;
    background-color: initial;
    color: #fff;
    font-weight: bold;
}

.pg-background {
    padding: 35px;
    clear: both;
    text-align: left;
    margin-top: 0px;
    width: 600px;
    height: 200px;
}

/* Clickable styles */
/* Some of this is POC e.g. the colors but shows how this should be coded with inline styles*/
table.pg-clickable td.q1 button {
    color: rgba(236, 83, 32, 0.9);
    background-color: rgba(236, 83, 32, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    border: solid 3px;
    border-radius: 5px;
    font-size: 20px;
}

table.pg-clickable td.q1 button:hover,
table.pg-clickable td.q1 button:focus {
    background-color: rgba(236, 83, 32, 0.2) !important;
}

table.pg-clickable td.q2 button {
    color: rgba(245, 185, 14, 0.9);
    background-color: rgba(245, 185, 14, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    border: solid 3px;
    border-radius: 5px;
    font-size: 20px;
}

    table.pg-clickable td.q2 button:hover,
    table.pg-clickable td.q2 button:focus {
        background-color: rgba(245, 185, 14, 0.2) !important;
    }

table.pg-clickable td.q3 button {
    color: rgba(5, 170, 233, 0.9);
    background-color: rgba(5, 170, 233, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    border: solid 3px;
    border-radius: 5px;
    font-size: 20px;
}

    table.pg-clickable td.q3 button:hover,
    table.pg-clickable td.q3 button:focus {
        background-color: rgba(5, 170, 233, 0.2) !important;
    }

table.pg-clickable td.q4 button {
    color: rgba(127, 200, 44, 0.9);
    background-color: rgba(127, 200, 44, 0.1) !important;
    width: 40px !important;
    height: 40px !important;
    border: solid 3px;
    border-radius: 5px;
    font-size: 20px;
}

table.pg-clickable td.q4 button:hover,
table.pg-clickable td.q4 button:focus {
    background-color: rgba(127, 200, 44, 0.2) !important;
}