.green {
    color: green;
}

.report-exports button:last-child {/*Removes LD ProPanel download quiz report button*/
    display: none;
    }

  /* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
  }
  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    min-width: 100px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    width: 110px;
    top: 100%;
    left: 50%;
    margin-left: -65px;
    font-size: 14px;
  }
  .tooltip .tooltiptext-small {
    visibility: hidden;
    width: 70px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -46px;
    font-size: 14px;
  }
.tooltip .tooltiptext-med {
    visibility: hidden;
    width: 90px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -58px;/*centering machine toggle tooltip*/
    font-size: 14px;
  }
  .tooltip .tooltiptext-med-large {
    visibility: hidden;
    width: 100px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -58px;/*centering machine toggle tooltip*/
    font-size: 14px;
  }
  .tooltip .tooltiptext-large {
    visibility: hidden;
    width: 120px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -68px;/*centering machine toggle tooltip*/
    font-size: 14px;
  }
  .tooltip .tooltiptext-large-two {
    visibility: hidden;
    width: 120px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 0px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -68px;/*centering machine toggle tooltip*/
    font-size: 14px;
  }
  .tooltip .tooltiptext-large-xl {
    visibility: hidden;
    width: 140px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -68px;/*centering machine toggle tooltip*/
    font-size: 14px;
  }
  .tooltip .tooltiptext-xl {
    visibility: hidden;
    width: 200px;
    background-color: #57585a;
    color: #fff;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 50%;
    margin-left: -110px;/*centering machine toggle tooltip*/
    font-size: 14px;
  }
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {visibility: visible;}
  .tooltip:hover .tooltiptext-small {visibility: visible;}
  .tooltip:hover .tooltiptext-med {visibility: visible;}
  .tooltip:hover .tooltiptext-med-large {visibility: visible;}
  .tooltip:hover .tooltiptext-large {visibility: visible;}
  .tooltip:hover .tooltiptext-large-two {visibility: visible;}
  .tooltip:hover .tooltiptext-large-xl {visibility: visible;}
  .tooltip:hover .tooltiptext-xl {visibility: visible;}

#app {background-color: white; border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px 5px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: #D3D3D3; padding-right: 0px; margin-top: 10px; max-width: 1000px;}
#ptable {font-size: 22px; padding: 0px; border: 0px; vertical-align: middle; margin-bottom: 20px; margin-right: 0px; }
#ptable input[type=text] {font-size: 22px; padding-left: 10px; border-bottom: 1px solid lightgrey; margin-right: 10px;}
.wffs, .cites {border: none;}
.argument {cursor: pointer;}
.pointer-events-none {pointer-events: none;}
.clear-left {clear: left;}
.clear-right {clear: right;}
.clear-all {clear: both;}
.hide {display: none;}

.wffs {
	width: 350px !important;
	margin-right: 3px;
}
.cites {max-width: 190px;}
.numbs {min-width: 20px; vertical-align: bottom; padding-bottom: 4px;}

#app .button1 {
    border-radius: 30px;
    background-color: inherit; /* yellow;*/
    border: none;
    width: 38px;
    height: 38px;
}
#app .button1:hover {
    background-color: #e8e8e8;
}

#title-area {padding: 40px 20px 40px 20px; border-radius: 9px 9px 0px 0px; background-color: #22dfff;}
#fixed-mode-title-p, #fixed-mode-title-t {
    margin-left: 20px;
}
.font-size-fix {
    font-size: 16px;
    font-weight: 400;
}
#machine-toggle {
    float: right;
    margin-right: 10px;/*Margin between buttons in title area*/
}
.machine-title {
    font-size: 30px;
    font-weight: bold;
}
#ptable {margin-top: 10px; margin-left: 16px; margin-right: 0px;}
td {border: 0px; max-height: 16px; padding-bottom: 0px; padding-right: 0px; margin-right: 0px; width: fit-content;}
tr {padding-bottom: 0px; padding-right: 0px;}

p {width: 100%; padding-bottom: 0px; padding-top: 0px; 
    margin-top: 8px; 
    margin-bottom: 8px;
}

#modes-area label {
    display: block;
    width: 100%;
}


/*Controls the proof lines for FIXED PROOF mode Done mess with!*/
input[type="text"]:disabled {color: black; font-weight: 500; background-color: white; border: none;}
.check-line-button:disabled {color: green;}

/*All the code for the Fixed Problems bottom area hover color: #c2d6f3*/
#bottom-area {display: flex; font-size: 14px; 
    /*border-top: 2px solid #57585a;*/
}
.icon-pad {
    padding-right: 10px;
    margin-left: -5px;
}
.green {
    color: green;
}
.col-container {
    text-align: center;
    padding-left: 0px;
}
.col-header {
    margin-left: -30px;
    font-size: 20px;
    font-weight: bold;
    /*padding: 5px 5px 5px 5px;*/
}
.col-list {
    columns: 2;
    list-style-type: decimal;
    text-align: left;
    margin-top: 8px;
    padding-left: 30px;
}
.col-list2 {
    columns: 2;
    list-style-type: decimal;
    text-align: left;
    margin-top: 8px;
    padding-left: 30px;
}
#fixed-proof-area {
    background-color: #d8dadd;
    display: inline-block;
    width: 61%;
    border-radius: 0px 0px 0px 9px;
}
#fixed-proof-options {
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: visible;
}
#fixed-proof-selectors {
    padding: 5px;
    background-color: #c5c5c5;
    border: 8px solid #d8dadd;
    display: flex;
}

#systems, #levels, #skills, #progress {
    width: 130px;
    padding:  0px 0px 0px 10px;
}
#systems {
    margin: 10px 7px 10px 15px;
}
#levels, #skills {
    margin: 10px 10px 10px 10px;
}
#progress {
    margin: 10px 7px 10px 7px;
}
#reset-filters-proof {/*Working here.*/
    margin: 10px;
    border-radius: 50px; 
    background-color: inherit; 
    padding: 10px 10px; 
    border: none; 
    color: black; 
    cursor: pointer;
}
#reset-filters-proof:hover {background-color: #9d9d9d; color: white;}

.fixed-proof {
    padding: 5px 0px 5px 10px;
    border-radius: 8px;
    margin-right: 10px;
}

.col-list li:hover {
    background-color: #c2d6f3;
}
.col-list2 li:hover {
    background-color: #d8dadd;
}



/*Messages area*/
#message-area {
    background-color: #c5c5c5; 
    width: 39%; 
    border-radius: 0px 0px 9px 0px;
    display: inline-block;
    overflow: hidden;
    height: 600px;
}
#message-title {padding: 0px 0px 0px 0px; margin-left: 0px;}
#messages {clear: left; padding-left: 15px; padding-right: 15px; padding-bottom: 8px; padding-top: 0px; margin-bottom: 5px; min-height: 55px;}
#messages > :first-child {
    font-weight: bold;
}
#messages-word {float: left; font-size: 26px; color: black; padding: 10px 0px 0px 15px; padding-bottom: 10px;}
#clear-all {
    margin-left: 3px; 
    margin-top: 3px; 
    float: left; 
    cursor: pointer;
    background-color: inherit; 
    border-width: 0px; 
    padding: 7px;
    border-radius: 50px;}
#clear-all:hover {background-color: #9d9d9d; color: white;}

/*Toggle shortcuts buttons*/
.show-shortcuts-1 {float: right; border-radius: 50px; background-color: #03a9f4; padding: 10px 10px; margin: 0px 10px 5px 15px; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #03a9f4; color: black; cursor: pointer;}
.show-shortcuts-1:hover {background-color: #17b5d0; color: white; border-color: #00B2B2}
#shortcut-info-p, #shortcut-info-t {clear: right; float: right;}

/*Subproof bars*/
.subproof-bars {
    margin: 0px 0px;
    font-weight: bold;
    padding-left: 0px;
	padding-right: 0px;
    font-size: 26px;}
.sub-generic {color: black;}
.sub-1-1 {color: purple;}
.sub-1-2 {color: rgb(197, 0, 197);}
.sub-1-3 {color: rgb(96, 22, 165);}
.sub-1-4 {color: purple;}
.sub-1-5 {color: rgb(197, 0, 197);}
.sub-1-6 {color: rgb(96, 22, 165);}
.sub-1-7 {color: purple;}
.sub-1-8 {color: rgb(197, 0, 197);}
.sub-1-9 {color: rgb(96, 22, 165);}
.sub-2-1 {color: blue;}
.sub-2-2 {color: rgb(3, 137, 155);}
.sub-2-3 {color: rgb(53, 124, 255);}
.sub-2-4 {color: blue;}
.sub-2-5 {color: rgb(3, 137, 155);}
.sub-2-6 {color: rgb(53, 124, 255);}
.sub-2-7 {color: blue;}
.sub-2-8 {color: rgb(3, 137, 155);}
.sub-2-9 {color: rgb(53, 124, 255);}
.sub-3-1 {color: rgb(255, 102, 0);}
.sub-3-2 {color: rgb(196, 127, 0);}
.sub-3-3 {color: rgb(255, 136, 0);}
.sub-3-4 {color: rgb(255, 102, 0);}
.sub-3-5 {color: rgb(196, 127, 0);}
.sub-3-6 {color: rgb(255, 136, 0);}
.sub-3-7 {color: rgb(255, 102, 0);}
.sub-3-8 {color: rgb(196, 127, 0);}
.sub-3-9 {color: rgb(255, 136, 0);}
.sub-4-1 {color: rgb(255, 0, 221);}
.sub-4-2 {color: rgb(206, 2, 121);}
.sub-4-3 {color: rgb(255, 0, 98);}
.sub-4-4 {color: rgb(255, 0, 221);}
.sub-4-5 {color: rgb(206, 2, 121);}
.sub-4-6 {color: rgb(255, 0, 98);}
.sub-4-7 {color: rgb(255, 0, 221);}
.sub-4-8 {color: rgb(206, 2, 121);}
.sub-4-9 {color: rgb(255, 0, 98);}
.sub-5-1 {color: rgb(75, 114, 2);}
.sub-5-2 {color: rgb(135, 207, 2);}
.sub-5-3 {color: rgb(127, 141, 3);}
.sub-5-4 {color: rgb(75, 114, 2);}
.sub-5-5 {color: rgb(135, 207, 2);}
.sub-5-6 {color: rgb(127, 141, 3);}
.sub-5-7 {color: rgb(75, 114, 2);}
.sub-5-8 {color: rgb(135, 207, 2);}
.sub-5-9 {color: rgb(127, 141, 3);}


/* Button 10 */
.button-cover, .knobs, .layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#app .button {
    position: relative;
    width: 160px;
    height: 40px;
    overflow: hidden;
}
.button.r, .button.r .layer {
    border-radius: 100px;
}
.checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}
.knobs {
    z-index: 2;
}
.layer {
    width: 100%;
    background-color: #03a9f4;/*Proof background*/
    transition: 0.3s ease all;
    z-index: 1;
}
#button-10 .knobs:before,
#button-10 .knobs:after,
#button-10 .knobs span {
  position: absolute;
  top: 4px;
  width: 59px;/*Slider size*/
  height: 14px;
  font-size: 20px;
  /*font-weight: bold;*/
  text-align: center;
  line-height: .8;
  padding: 9px 6px 9px 6px;
  border-radius: 50px;
  transition: 0.3s ease all;
}
#button-10 .knobs:before {
  content: "";
  left: 5px;
  background-color: #c6c6c6 ;/*Proof button*/
}
#button-10 .knobs:after {
  content: "Truth";
  right: 5px;/*Truth text padding from right*/
  color: black;/*Truth Background TEXT*/
  
}
#button-10 .knobs span {
  display: inline-block;
  left: 4px;
  color: black;/*Proof Button TEXT*/
  z-index: 1;
  
}
/* #knobs {
    padding-bottom: 10px;
    margin-bottom: 10px;
  bottom: 10px;
} */
#button-10 .checkbox:checked + .knobs:before {
  left: 84px;/*How far left button moves*/
  background-color: #c6c6c6;/*Truth button*/
}
#button-10 .checkbox:checked + .knobs span {color: black;}/*Proof Background TEXT*/
#button-10 .checkbox:checked + .knobs:after {color: black;}/*Proof Button TEXT*/
#button-10 .checkbox:checked ~ .layer {background-color: #03a9f4;}/*Truth Background*/