.DialogueForm {
    position: absolute;
    border-style: groove;
    border-color: #222;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    display: none;
}

.DialogueForm[minimise] {
    opacity: 0.2;
}

.DialogueForm H3{
    text-align: center;
}

.DialogueForm label:has(+ input:required):after, 
.DialogueForm label:has(+ select:required):after {
    content: ' *';
    color: red;
}

.DialogueForm :required {
    border-color: red;
    background-color: #f8d5d5;
}

.DialogueForm :required:valid {
    border-color: green;
    background-color: #d5f8d7 !important;
}

.DialogueContainer{
    display:grid;
    grid-template-columns: max-content min-content;
    grid-gap:5px;
    margin: 5px;
}

.Dialogue3Columns {
    display:grid;
    grid-template-columns: min-content min-content min-content;
    grid-gap:5px;
    margin: 5px;
}

.DialogueSpanAll {
    grid-column: 1 / -1;
    display:grid;
}

.DialogueContainer label{
    width: 120px;
    text-align: right;
}

.DialogueContainer input{
    width: 200px;
    height: 25px;
}

.DialogueContainer select{
    width: 200px;
    height: 25px;
}

.DialogueContainer textarea{
    width: 300px;
    height: 120px;
}

.DialogueContainer label {
    width: 200px;
    height: 40px;
}

.DialogueContainer img {
    max-width: 360px;
    max-height: 400px;
}

.Dialogue7Columns {
    display:grid;
    grid-template-columns: min-content min-content min-content min-content min-content min-content min-content;
    grid-gap:5px;
    margin: 5px;
}
.Dialogue7Columns input {
    width: 99px;
    height: 25px;
}
.Dialogue3Columns select {
    width: 256px;
    height: 25px;
}

.Dialogue2Columns {
    display:grid;
    grid-template-columns: min-content min-content;
    grid-gap:15px;
    margin: 5px;
}
.Dialogue2Columns label {
    height: 20px;
}

#questionFrame, #markschemeFrame {
    height: 400px;
    width: 380px;
    border-color: black;
    border-width: 2px;
    border-style: solid;
    display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
}
#questionFrame img, #markschemeFrame img{

    border-color: black;
    border-width: 1px;
    border-style: solid;
}

.highlight {
    background-color: rgb(207, 207, 244);
}

.DialogueButtonBar span{
    float: right;
    margin-right: 5px;
}

.DialogueButtonBar button{
    width: 80px;
    height: 32px;
}

.DialogueError {
    background-color: #f8d5d5;
    color:rgb(128, 48, 0);
}


#CreateSubjectForm .DialogueContainer{
    display:grid;
    grid-template-columns: 200px 200px;
    grid-gap:5px;
    margin: 5px;
}

.DialogueTopicColumns {
    display:grid;
    grid-template-columns: 40px 40px 60px 210px 40px;
    grid-gap:5px;
    margin: 5px;
}

.DialogueSubTopicColumns {
    display:grid;
    grid-template-columns: 15px 40px 80px 210px 40px;
    grid-gap:5px;
    margin: 5px;
}

.TopicContainer label {
    width: 60px;
}

.SubTopicContainer label {
    width: 80px;
}

#CreateSubjectContainer button {
    width: 36px;
    height: 36px;
    padding: 4px;
}

#createQuestionForm {
    --textWidth: 240px;
}