/*Colours*/
.bg-white {
    background-color:#FFF;
}

/*Divs*/
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
.flex-justify-start {
    justify-content: flex-start;
}
.flex-justify-center {
    justify-content: center;
}
.flex-justify-end {
    justify-content: flex-end;
}
.flex-justify-between {
    justify-content:space-between;
}
.flex-grow {
    flex-grow: 1;
}
.flex-shrink {
    flex-shrink: 1;
}
.flex-wrap {
    flex-wrap: wrap;
}
.small-column, .medium-column, .big-column {
    border: 1px solid #9e9e9e;
}
.small-column {
    width: calc(25%);
}
.big-column {
    width: calc(74%);
    margin-left: 5px;
}

/*Margins/Padding*/
.ml-0 {
    margin-left: 0px;
}
.ml-2 {
    margin-left: 2px;
}
.ml-4 {
    margin-left: 4px;
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-20 {
    margin-left: 20px;
}

.mr-0 {
    margin-right: 0px;
}
.mr-2 {
    margin-right: 2px;
}
.mr-4 {
    margin-right: 4px;
}
.mr-10 {
    margin-right: 10px;
}
.mr-20 {
    margin-right: 20px;
}

.mt-0 {
    margin-top: 0px;
}
.mt-2 {
    margin-top: 2px;
}
.mt-4 {
    margin-top: 4px;
}
.mt-5 {
    margin-top: 5px;
}
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-50 {
    margin-top: 50px;
}

.mb-0 {
    margin-bottom: 0px;
}
.mb-2 {
    margin-bottom: 2px;
}
.mb-4 {
    margin-bottom: 4px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}

.pg-5 {
    padding: 5px;
}
.pg-40 {
    padding: 40px;
}
.pt-10 {
    padding-top: 10px;
}

/* Autocomplete */
.topic-autocomplete-suggestions {
    display: none;
    border: 1px solid #ccc;
    border-radius:15px;
    max-height: 150px;
    overflow-y: auto;
    background-color: white;
    position: absolute;
    z-index: 1000;
}
.topic-autocomplete-suggestions {
    padding: 8px;
    cursor: pointer;
}
.topic-autocomplete-suggestion:hover {
    background-color: #f0f0f0;
}
.balloons-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.balloon {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    padding: 8px 14px 8px 8px;
    margin: 5px;
    display: flex;
    align-items: center;
    cursor: default;
    transition: background-color 0.2s;
    position: relative;
    width: fit-content;
}
.balloon .remove {
    margin-left: 5px;
    cursor: pointer;
    color: darkred;
    font-weight: bold;
    position: absolute;
    right: 2px;
    top: -5px;
}
.balloon .remove:hover {
    text-decoration: underline;
}

/*Work Area Drag&Drop*/
.reorder-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: Arial, sans-serif;
}
.reorder-table th, .reorder-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.reorder-table th {
    background-color: #f2f2f2;
}
.reorder-table tbody tr {
    cursor: grab;
    transition: background-color 0.2s ease;
}
.reorder-table tbody tr.dragging {
    opacity: 0.6;
    background-color: #e8e8e8;
}
.reorder-table tbody tr.over {
    border-top: 2px solid #3498db;
}
.reorder-table tbody tr td input {
    width: 50px;
    text-align: center;
    background-color: transparent;
    border: none;
    font-size: 14px;
}
.form-actions {
    margin-top: 20px;
    text-align: right;
}
.btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    color: #fff;
    background-color: #3498db;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.btn:hover {
    background-color: #2980b9;
}

/*Custom*/
.instructions-table th + th {
    text-align: center !important;
}
.instructions_button {
    border : 1px solid #004890;
}
.instructions_button:hover{
    background-color : #008c23;
    border : 1px solid #008c23;
}
.text_bold {
    font-weight: bold;
}
.topic-list {
    list-style: none;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
}
.topic-list li {
    display: grid;
}
.submenu {
    display: none;
}
.submenu li a{
    display: flex;
}

.search_filter {
    max-width: 30%;
}
.instruction-topic-div {
    display: flex;
    flex-direction: row;
    background-color: #DDDDDD;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}
.instruction-topic, .instruction-topic-first, .instruction-topic-last {
    padding: 10px;
    font-weight: bold;
    background-color: #DDDDDD;
    color: #333;
    flex-grow: 1;
}
.instruction-topic-first{
    border-top: unset;
}
.instruction-topic-last{
    border-bottom: unset;
}
.instruction-topic:hover, .instruction-topic-first:hover, .instruction-topic-last:hover,
.selected-topic {
    background-color: #008c23;
    color: #FFF;
}

.notice-popup {
    border: 1px dotted #999;
    padding: 12px 15px 12px 15px;
    margin-bottom: 15px;
    margin-left: 10px;
    margin-right: 10px;
}
.notice-symbol, .urgent-notice-symbol {
    background-color: #00a33b;
    font-size: 11px;
    color: #FFF;
    padding: 3px 6px 3px 6px;
}
.urgent-notice-symbol {
    background-color: orange;
}

.search_form {
    margin-bottom: 13px;
}
.topics_filter {
    flex-grow: 1;
    width: 100%;
}
.topics_filter select {
    width: 100%;
}
.topics_filter .search_form_label {
    float: none;
}
.dates_filter {
    width: min-content;
}

.search_from_topic {
    margin: 20px auto;
    display: flex;
    color: #000;
    font-size: 1.5em;
    justify-content: center;
}

.update_page table {
    margin-bottom: 20px;
}
.update_page td {
    border: 1px solid #ccc;
    padding: 5px;
}

.instructions_admin_panel_buttons, .instructions_admin_panel_notice {
    padding: 16px;
    margin-right: 20px;
}
.instructions_admin_panel_buttons {
    border: 1px dotted #CCC;
    background-color: #EEE;
}
.instructions_search {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 13px;
}

.management_panel_table th:nth-child(2) {
    width: 50%;
}

#instructions_page {
    background-color: #eee;
    padding: 10px;
    height: fit-content;
}
#instructions_page h3{
    margin: 0 0 10px 10px;
    color: #004890;
}
#instructions_page .landing_inner {
    background-color: #fff;
    overflow: hidden;
    padding: 10px;
}
.headinganchor {
    float: right;
    text-decoration: none;
    text-transform: lowercase;
    font-size: 80%;
    padding-right: 5px;
    padding-top: 4px;
    color: #0099cc;
}
.success_message {
    color: #000;
    margin-bottom: 20px;
    background-color: unset;
    padding: 10px 0px;
    text-align: unset;
}
.embedpdf {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    width: 100%;
    height: 900px;
}
@media screen and (max-width: 767px) {
    .embedpdf {
        height: 100vh;
    }
}
.updates_table {
    border: 1px solid #ccc;
    text-align: left;
    padding: 10px;
}
.toggle-subtopics {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: auto 5px;
    text-align: center;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    background: #f9f9f9;
}
.delete_warning_message {
    margin-right: 10px;
    margin-bottom: 0px;
    align-content: flex-end;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .toggle-subtopics {
        width: 40px;
        height: 95%;
    }
}
.candidates_only_checkbox {
    margin-left: 0px;
    width: fit-content;
}
.subtopic_li {
    list-style-type: circle;
}