* {
    box-sizing: border-box;
}

body {
    font-family: Arial;
    padding: 10px;
    background-color: #F9F1DC;
}

.header {
    text-align: center;
    background: white;
}

.header h1 {
    font-size: x-large;
}

.cllh {
    float: left;
    width: 40%;
}
.clmh {
    float: left;
    width: 20%;
}
.clrh {
    background: white;
    float: left;
    width: 15%;
    padding: 10px;
}
.clrrh {
    background: white;
    float: left;
    width: 25%;
    padding: 10px;
}

.cll {
    float: left;
    width: 12%;
}
.clm {
    float: left;
    width: 44%;
}
.clr {
    background: white;
    float: left;
    width: 44%;
    padding: 10px;
}

.rw {
    background: white;
}
.rw:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the top navigation bar */
.topnav {
    margin-bottom: 10px;
    border-radius: 15px;
    overflow: hidden;
    background-color: #fff8dc;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Style the topnav links */
.topnav a {
    /*    float: left; */
    display: block;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
}

a.disabled {
  pointer-events: none !important;
  cursor: default;
  color:Gray;
}

/* Change color on hover */
.topnav a:hover {
    background-color: #eee289;
    color: black;
}
.topnav button {
    width: 100%;
    background-color: #fff8dc;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
    border: none;
    outline: none;
    font-size: large;
}
button.disabled {
  pointer-events: none !important;
  cursor: default;
}
.topnav button:hover {
    background-color: #eee289;
    color: black;
}

.help button {
    border-radius: 10px;
    background-color: #fff39a;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    width: 100%;
    background-color: #fff8dc;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
    border: none;
    outline: none;
    font-size: large;
}
.help button:hover {
    background-color: #eee289;
    color: black;
}

.leftcolumn {   
    float: left;
    width: 12%;
}

.midcolumn {
    float: left;
    padding-left: 20px;
    width: 44%;
    height: 100%;
}

.rightcolumn {
    float: left;
    width: 44%;
    padding-left: 20px;
}

.goalSpan0 {
    background-color: #ddffbb;
    border: solid #aacc88;
    padding-left: 3px;
    padding-right: 3px;
}
.goalSpan1 {
    background-color: #ddddff;
    border: solid #aaaacc;
    padding-left: 3px;
    padding-right: 3px;
}
.goalSpan2 {
    background-color: #ffddbb;
    border: solid #ccaa99;
    padding-left: 3px;
    padding-right: 3px;
}
.goalSpan3 {
    background-color: #ffddff;
    border: solid #ccaacc;
    padding-left: 3px;
    padding-right: 3px;
}
.goalSpan4 {
    background-color: #ddffff;
    border: solid #aacccc;
    padding-left: 3px;
    padding-right: 3px;
}
.goalSpan5 {
    background-color: #ffffdd;
    border: solid #ccccaa;
    padding-left: 3px;
    padding-right: 3px;
}
.goalSpan6 {
    background-color: #dddddd;
    border: solid #aaaaaa;
    padding-left: 3px;
    padding-right: 3px;
}

.bloomSpan0 {
    background-color: white;
    padding: 0px 2px 0px 2px;
    border: solid rgb(112, 48, 160);
    color: rgb(112, 48, 160);
}
.bloomSpan1 {
    background-color: white;
    padding: 0px 2px 0px 2px;
    border: solid rgb(0, 112, 192);
    color: rgb(0, 112, 192);
}
.bloomSpan2 {
    background-color: white;
    padding: 0px 2px 0px 2px;
    border: solid rgb(51, 204, 204);
    color: rgb(51, 204, 204);
}
.bloomSpan3 {
    background-color: white;
    padding: 0px 2px 0px 2px;
    border: solid rgb(0, 176, 80);
    color: rgb(0, 176, 80);
}
.bloomSpan4 {
    padding: 0px 2px 0px 2px;
    border: solid rgb(248, 242, 0);
    background-color: black;
    color: rgb(248, 242, 0);
}
.bloomSpan5 {
    background-color: white;
    padding: 0px 2px 0px 2px;
    border: solid rgb(255, 0, 0);
    color: rgb(255, 0, 0);
}

table {
    border: solid black;
}

tr:nth-of-type(odd) {
    background-color: #fff9ed;
}

tr {
    background-color: white;
}

td {
    padding: 5px;
    font-size: small;    
}
th {
    padding: 5px;
}

.Averages td {
}

.Averages .canvasWrapper {
    padding: 0px;
    margin: 0px;
    height: 70px;
    overflow: hidden;
}

canvas {
    height: 100%;
    width: 100%;
    display: flex;
}

.mainContent {
    position: relative;
    background-color: white;
    margin-top: 20px;
}

.mainContent textarea {
    /* position: absolute; */
    /* top: 0px; */
    /* left: 0px; */
    /* background-color: rgba(255,255,255,0.5); */

    
    font-size: large;
    font-family: Arial;
    
    width: 100%;
    height: 100%;
    overflow: scroll;
    
    overflow-x: hidden;
}

.mainContent textarea:focus {
    outline: none !important;
    border-color: black;
}

.grSuggestions:hover {
    background-color: #BBFFBB;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 10px;
    margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.collapser {
    cursor: pointer;
    width: 100%;
    border: none;
    padding: 0px;
    text-align: left;
    outline: none;
    font-size: large;
    background-color: #fff8dc;
    padding-left: 20px;
}

.collapser h4 {
    margin: 5px;
}
.collapser:hover {
    background-color: #fff9ed;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.collapser span {
    opacity:0;
    float:right;
}
.collapser:hover span {
    opacity:1;
}

.card textarea {
    background-color: rgba(255,255,245,1);

    font-size: medium;
    font-family: Arial;
    
    width: 100%;
    overflow: scroll;
    margin: auto;
    outline: none;

    height: 300px;
    wrap: soft;
    
    scrollbar-width: thin;
}

.card h2 {
    font-size: large;
    font-family: Arial;
}

.p {
    display: "block";
}

.card h1 {
    width: 100%;
    border: none;
    padding: 10px;
    text-align: left;
    outline: none;
    font-size: large;
    background-color: #fff8dc;
}

.bigger {
    font-size: 200%;
}

/* Footer */
.footer {
    padding: 10px;
    text-align: center;
    background: #fff39a;
    margin-top: 10px;
}



/* tooltip popup */
.granskaPopupText {
    display: none;
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgb(0,0,0,0.25);
    color: black;
}

.granskaPopupText-content {
    margin: auto;
    padding: 5px;
    border: 3px solid black;
    background-color: rgb(255,255,245);
    background-color: rgb(255,255,245, 0.75);
    color: black;
    border-radius: 10px;
    position: absolute;
    left: 100;
    top: 100;
    width: 20%;
    min-width: 200px;
}

.show {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.popupSearchButton {
    cursor: pointer;
    width: 100%;
    padding: 5px;
    margin: 0px 10px 5px 0px;
    border: 2px solid black;
    border-radius: 10px;
    text-align: left;
    outline: none;
    background-color: #ffffff;
}

.popupSearchButton:hover {
    background-color: #fff8dc;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}