.guidelines-container {
    display: grid;
    grid-template-columns: 20% 1fr;
    min-height: 300px;
}
.guidelines-sidebar {
    margin: 20px 20px 0 20px;
    border-right: 1px solid #c1c1c1;
    box-shadow: 12px 0px 10px -12px #bbbbbb;
}

.guidelines-sidebar > ul {
    margin: unset;
    list-style: none;
}

.guidelines-sidebar li {
    padding: unset;
}

.guidelines-sidebar li:has(> h2) {
    margin-top: 10px;
}

.guidelines-sidebar li:has(> a) {
    margin-left: 5px;
}

.guidelines-sidebar h2 {
    font-size: 18px;
    font-weight: 500;
}

.guidelines-sidebar li > a {
    margin: 3px 28px 0 0;
    border-radius: 8px;
    padding: 3px 6px;
    text-decoration: none;
    font-size:16px;
}

.guidelines-sidebar li h2 > a {
    text-decoration: none;
    color: unset;
}

.guidelines-sidebar li > a:hover {
    color: unset;
    background: #00000012;
}

.guidelines-sidebar li:hover > .top-right-menu {
    display: block;
}

.guidelines-sidebar a.current {
    background: #00000012;
}

.guidelines-sidebar .top-right-menu {
    margin: 0;
}

.guidelines-content {
    margin-top: 10px;
    max-width: 1000px;
}

.guidelines-content h1 { font-size: 1.7rem; }
.guidelines-content h2 { font-size: 1.3rem; }
.guidelines-content .top-right-menu { float: right; z-index: 1;}
.guidelines-content button.new {
    margin-top: 0px;
    margin-left: 0px;
    padding: unset;
    border: 2px dashed lightgray;
    border-radius: 15px;
    background-color: unset;
    box-shadow: unset;
    vertical-align: top;
    text-align: center;
    line-height: 150px;
    font-size: 25px;
    color: #474747;
    cursor: pointer;
}


#menu-content { width: 180px; }

#toggle-view-edit-mode {
    margin-left: 10px;
    min-width: 30px;
    margin-top: unset;
    background: #474747;
}

.preview.guidelines-colour-block {
    height: 150px;
    margin: unset;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: #FFF;
}

.guidelines-colour-block {
    width: 200px;
    border-radius: 15px;
    font-weight: bold;
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
}

.guidelines-colour-block--colour {
    height: 150px;
    border-radius: inherit;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .1);
}

.guidelines-colour-block--details {
    margin-top: 10px;
    line-height: 25px;
}

.guidelines-colour-block--details > .type {
    color: gray;
    width: 56px;
    display: inline-block;
}

.guidelines-colour-block.new {
    height: 150px;
}

.guidelines-content--typography-block {
    width: 200px;
    display: inline-block;
}

.context-menu-container {
    background: white;
    border-radius: 8px;
    padding: 6px;
    margin: 20px;
    box-shadow: 0 1px 5px 3px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 648px;
    top: 248px;
    width: 140px;
    z-index: 1000;
}

.context-menu-row {
    padding: 5px;
    width: -webkit-fill-available;
    border-radius: 4px;
    text-align: left;
    background-color: unset;
    color: inherit;
    box-shadow: none;
    font-size: unset;
    font-weight: unset;
}

.context-menu-row:hover {
    background: #e7e7e7;
    filter: none;
    -webkit-filter: none;
}

.context-menu-row i {
    font-size: 18px;
    padding: 0 10px 0 2px;
}

.add-new-content-container {
    padding: 10px;
    border: 2px dashed lightgray;
    margin: 10px 20px 20px 0;
    border-radius: 6px;
    display: inline-block;
    width: 200px;
    box-sizing: border-box;
    box-shadow: unset;
    font-size: 15px;
    font-weight: inherit;
    color: #474747;
    background-color: unset;
}

.add-new-content-container i {
    padding-right: 5px;
}

.image-full-width {
    max-width: 1000px;
    display: inline-block;
    object-fit: cover;
}


.image-full-width .nopreview {
    width: 1000px;
}

.image-half-width:first-child {
    padding-right: 20px;
}

.image-thumbnail {
    display: inline-block;
    margin: 0 20px 10px 0;
    width: 200px;
    height: 200px;
    background: #dbdbdb;
    align-content: space-around;
    border-radius: 5px;
}

.image-half-width img,
.image-half-width p,
.image-half-width .nopreview {
    width: 466px;
}

.image-thumbnail img {
    max-width: 200px;
    border-radius: 5px;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
}

.new.image-half-width {
    width: 466px;
    height: inherit;
}

.image-half-width .grid-item.top-right-menu {
    z-index: 999;
}

.top-right-menu {
    display: none;
    margin: 10px;
    width: 28px;
    height: 28px;
    border-radius: 30px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

div[id^='page-content-item-']:hover .top-right-menu,
.group:hover > .top-right-menu,
div[id^='page-content-item-']:hover > a.grid-item.video-js-resource {
    display: block;
    background: #dfdfdf;
}

.grid-container {
    display: grid;
    grid-template-areas: "box";
}
.grid-item.top-right-menu,
.guidelines-sidebar li h2.grid-item,
.grid-item.rich-text-content,
a.grid-item,
.guidelines-content .videojscontent {
    grid-area: box;
}
.grid-item.top-right-menu {
    place-self: start end;
}

.guidelines-content .video-js {
    margin: unset;
}

a.grid-item.video-js-resource {
    place-self: start;
    margin: 10px 10px 10px 0;
    padding: 3px 10px;
    border-radius: 30px;
    z-index: 999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}
.image-half-width a.grid-item.video-js-resource {
    max-width: 400px;
}
.resource-content-full-width a.grid-item.video-js-resource {
    max-width: 900px;
}

.grid-item .nopreview {
    height: 200px;
    font-size: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.grid-item > .nopreview {
    background: #dbdbdb;
    border-radius: 5px;
}

.guidelines-content > div[id^='page-content-item-']:has(> a.grid-item .nopreview),
.group:has(a.grid-item .nopreview) {
    margin-top: 10px;
}

button#guidelines-toc {
    display: none;
}

form.guidelines .FormError {
    margin: 0 0 10px 310px;
}

.rich-text-content {
    min-height: 48px;
}

/* ResourceSpace global.css is setting these and TinyMCE then has some logic which makes the buttons spread more than
necessary */
form.guidelines .tox-toolbar__group > button {
    min-width: unset;
    filter: unset;
    -moz-filter: unset;
    -webkit-filter: unset;    
}

/* --- Deviation from standard behaviour (on purpose for UI/UX consistency/improvement) */
/* Hide the FIELD_TYPE_TEXT_RICH label on manage/content.php. The caption is visible based on the selected layout. */
#Question_richtext label, #Question_caption {
    display: none;
}
#Question_richtext {
    padding: unset; /* Remove padding to give as much horizontal space to tinymce and align with header */
}
/* --- End of Deviation from standard behaviour */

@media(max-width:1000px) {
    /* Prevent the sidebar from getting squished too much on smaller screens */
    .guidelines-container {
        grid-template-columns: 30% 1fr;
    }

    .guidelines-sidebar {
        margin: 20px 20px 0 0;
    }
}

@media(max-width:600px) {
    .guidelines-container {
        display: flex;
        flex-direction: column;
    }

    button#guidelines-toc {
        display: block;
    }

    button#guidelines-toc:hover {
        background-color: #1679c0;
    }

    .guidelines-content {
        max-width: 100%;
    }

    .guidelines-sidebar {
        display: none;
        margin: unset;
    }

    .image-full-width,
    .image-half-width img,
    .image-half-width p {
        width: 100%;
    }

    .image-half-width:first-child {
        padding: 0 0 10px 0;
    }
    .image-half-width p {
        padding: unset;
    }

    .image-container {
        flex-wrap: wrap;
    }

    .top-right-menu,
    a.grid-item.video-js-resource {
        display: block;
    }

    .grid-item.top-right-menu,
    a.grid-item.video-js-resource {
        background: #dfdfdf;
    }

    .image-half-width a.grid-item > .nopreview {
        width: 300px;
    }

    .image-half-width a.grid-item.video-js-resource,
    .resource-content-full-width a.grid-item.video-js-resource {
        max-width: 75%;
    }
}