/*CSCTutor*/
input.submit:disabled {
    width: 100px;
    opacity: 0.8;
    background: #519D48;
    border-bottom: #488C40 1px solid;
    border-left: #488C40 1px solid;
    border-right: #488C40 1px solid;
    border-radius: 6px;
    text-align: center;
    color: white;
    padding: 10px;
    margin-top: 3px;
    float: right;
}

#clearbutton {
    float: left;
    width: 120px;
}

#codeMessage {
    width: calc(100% - 6px);
    font-family: monospace;
    color: transparent;
    background-color: transparent;
    z-index: 0;
    position: relative;
    caret-color: #000000;
    resize: none;
    white-space: break-spaces;
    word-break: break-word;
}

#usrMessage {
    width: calc(100% - 6px);
    height: 50px;
    resize: none;
}

#usrInput {
    width: calc(100% - 6px);
    height: 50px;
    resize: none;
}

#messageHistoryBorder {
    height: 30vh;
    width: 100%;
    border: #000000;
    box-shadow: 3px 3px 3px 0px #ababab;
    border-radius: 5px;
    background-color: #000000;
    overflow: hidden;
    margin-bottom: 5px;
}

#messageHistoryScrollFix {
    height: calc(30vh - 6px);
    width: calc(100% - 6px);
    margin: 3px;
    border: #000000;
    border-radius: 5px;
    background-color: #9d9d9d;
    overflow: hidden;
}

#messageHistory {
    height: calc(30vh - 6px);
    width: calc(100% - 6px);
    border: #000000;
    border-radius: 5px;
    background-color: #9d9d9d;
    overflow: auto;
    display: flex;
    flex-direction: column;
    scrollbar-gutter: stable;
}

#codeOutput {
    background: black;
    border: #53776d;
    border-width: 3px;
    color: white;
    padding: 10px 20px;
    border-style: solid;
    min-height: 10vh;
    border-radius: 3px;
}

#outputHere {
    color: #008000;
}

#outputHere:after {
    text-align: center;
    border-left: .5em solid #008000;
    content: "";
    -webkit-animation: blink 400ms linear infinite alternate;
    animation: blink 400ms linear infinite alternate;
    -webkit-transition: 4s;
    transition: 4s;
}

.codeError {
    color: rgb(194, 37, 37);
}

.message {
    padding: 5px;
}

.botMessage {
    text-align: left;
    max-width: 275px !important;
    overflow-wrap: break-word;
    border-radius: 10px;
    background-color: #d3dbde;
    padding: 5px;
}

.humanMessage {
    text-align: left;
    max-width: 275px !important;
    overflow-wrap: break-word;
    border-radius: 10px;
    float: right;
    background-color: #d3e7d1;
    padding: 5px;
}

.errorMessage {
    text-align: left;
    max-width: 275px !important;
    overflow-wrap: break-word;
    border-radius: 10px;
    float: left;
    background-color: #edc4d2;
    padding: 5px;
}

table.codepage td {
    vertical-align: top;
}

table.codepage {
    width: 100%;
}

table.codepage td.left {
    padding-right: 30px;
    width: 50%;
}

table.codepage td.right {
    padding-left: 30px;
    width: 50%;
}

table.codebox {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    border: 5px solid #53776D;
    border-radius: 3px;
    padding: 30px 50px;
    background: rgba(0,0,0,0.05);
    float: right;
    width: 100%;
}

table.codebox td.title {
    width: 100px;
}

.typing {
    position: relative;
}
.typing span.typeHere {
    content: "";
    -webkit-animation: blinkDot 1.5s infinite;
    animation: blinkDot 1.5s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    height: 0.625em;
    width: 0.625em;
    background: #55a597;
    position: absolute;
    left: 0.75em;
    top: 0.3em;
    border-radius: 50%;
}
.typing span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    margin-left: 1em;
}
.typing span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    margin-left: 2em;
}

.typingButton {
    position: relative;
    float: right;
    margin-top: 3px;
}
.typingButton span.typeHere {
    content: "";
    -webkit-animation: blinkDot 1.5s infinite;
    animation: blinkDot 1.5s infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    height: 0.625em;
    width: 0.625em;
    background: #127c69;
    position: absolute;
    left: 26px;
    top: 1em;
    border-radius: 50%;
}
.typingButton span:nth-child(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    margin-left: 1em;
}
.typingButton span:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    margin-left: 2em;
}
  
@-webkit-keyframes blinkDot {
    0% {
      opacity: 0.1;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0.1;
    }
}
  
@keyframes blinkDot {
    0% {
      opacity: 0.1;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0.1;
    }
}

:root {
    --star-rating-size: 1.6em;
    --unchecked-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3e%3cpath fill='%23ffffff' stroke='%23666' d='m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'/%3e%3c/svg%3e");
    --checked-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3e%3cpath fill='%23519D48' stroke='%23666' stroke-width='2' d='m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'/%3e%3c/svg%3e");
     --hovered-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3e%3cpath fill='%236eab68' stroke='%23666' stroke-width='2' d='m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z'/%3e%3c/svg%3e");
    --max-stars: 10;
   
}

.star-rating {
    border-style: none;
}

.star-rating>div {
    position: relative;
    height: var(--star-rating-size);
    width: calc(var(--star-rating-size) * var(--max-stars));
    background-image: var(--unchecked-image); 
    background-size: var(--star-rating-size) var(--star-rating-size);
}

.star-rating label {
    position: absolute;
    height: 100%;
    background-size: var(--star-rating-size) var(--star-rating-size);
}

.star-rating label:nth-of-type(1) {
    z-index: 10;
    width: calc(100% / var(--max-stars) * 1);
}

.star-rating label:nth-of-type(2) {
    z-index: 9;
    width: calc(100% / var(--max-stars) * 2);
}

.star-rating label:nth-of-type(3) {
    z-index: 8;
    width: calc(100% / var(--max-stars) * 3);
}

.star-rating label:nth-of-type(4) {
    z-index: 7;
    width: calc(100% / var(--max-stars) * 4);
}

.star-rating label:nth-of-type(5) {
    z-index: 6;
    width: calc(100% / var(--max-stars) * 5);
}

.star-rating label:nth-of-type(6) {
    z-index: 5;
    width: calc(100% / var(--max-stars) * 6);
}

.star-rating label:nth-of-type(7) {
    z-index: 4;
    width: calc(100% / var(--max-stars) * 7);
}

.star-rating label:nth-of-type(8) {
    z-index: 3;
    width: calc(100% / var(--max-stars) * 8);
}

 .star-rating label:nth-of-type(9) {
    z-index: 2;
    width: calc(100% / var(--max-stars) * 9);
}

 .star-rating label:nth-of-type(10) {
    z-index: 1;
    width: calc(100% / var(--max-stars) * 10);
}

.star-rating input:checked + label,
.star-rating input:focus + label{
    background-image: var(--checked-image); 
}
.star-rating input:checked + label:hover,
.star-rating label:hover{
    background-image: var(--hovered-image); 
}

.star-rating input,
.star-rating label>span{
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto separate lines and some screen readers do not understand line feeds as a space */
}