.inputTable {
    border: 1px solid black;
}

table.matrixGrid {
    border: 1px solid black;
    min-width: 600px;
    border-collapse: collapse;
}

table.matrixGrid td {
    font-size: 15px;
    border: 1px solid black;
    padding: 10px;
    width:20px;
    height:20px;
    box-sizing: content-box;
    text-align: center;
}

table.matrixGrid th {
    font-size: 15px;
    padding: 8px;
    width:20px;
    height:20px;
    box-sizing: border-box;
    font-family: 'Times New Roman', Times, serif;
}

.checkboxRow td {
    background-color: #e4e4e4;
}

.clear_button {
    padding: 0px 16px;
}

.buttons {
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 2;
}

.button_pdf {
    font-size: 15px;
    text-decoration: none;
    background-color: #EEEEEE;
    color: black;
    padding: 2px 6px 2px 6px;
    border-top: 0.5px solid black;
    border-right: 0.5px solid black;
    border-bottom: 0.5px solid black;
    border-left: 0.5px solid black;
}

.button_pdf:hover {
    background-color: #b3b3b3;
}

.yellow {
    background-color: yellow;
    opacity: 0.5;
}

.red {
    background-color: red;
    opacity: 0.5;
}

.red_yellow {
  background: linear-gradient(rgba(220,0, 0,0.5), rgba(220,0,0,0.5)),
  linear-gradient(yellow, yellow);
}

.green {
    background-color: green;
    opacity: 0.5;
}

.blue {
    background-color: blue;
    opacity: 0.5;
}


.horizontal_yellow {
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.vertical_yellow {
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.cross_yellow {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_yellow_teal {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_yellow_purple {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_yellow_orange {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.horizontal_teal {
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.vertical_teal {
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.cross_teal {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_teal_yellow {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_teal_purple {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_teal_orange {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.horizontal_purple {
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.vertical_purple {
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.cross_purple {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_purple_yellow {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_purple_teal {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_purple_orange {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.horizontal_orange {
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.vertical_orange {
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
    rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
    rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)
    );
}

.cross_orange {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_orange_yellow {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(243, 225, 62, 0.6) 33.4%, rgba(243, 225, 62, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_orange_teal {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(21, 203, 193, 0.6) 33.4%, rgba(21, 203, 193, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.cross_orange_purple {
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(249, 133, 51, 0.6) 33.4%, rgba(249, 133, 51, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0)),
        linear-gradient(to right,
            rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 33.3%,
            rgba(153, 92, 238, 0.6) 33.4%, rgba(153, 92, 238, 0.6) 66.6%,
            rgba(255, 255, 255, 0) 66.7%, rgba(255, 255, 255, 0));
}

.error_checkbox {
    color: red;
}