:root {
    --vi-base: #5d95d1;
    --vi-colour-01: #8cb5e0;
    --vi-colour-02: #9fc7ec;
    --vi-colour-03: #bedcfc;
    --vi-colour-04: #000;
    --vi-colour-05: #444;
    --vi-colour-06: #555;
    --vi-colour-07: #999;
    --vi-colour-08: #ccc;
    --vi-colour-09: #405265;
    --vi-colour-10: #6eff00;
    --vi-colour-11: #d6eaff;
    --vi-colour-12: #d7eaff;
    --vi-colour-13: #333;
    --vi-colour-14: #666;
    --vi-colour-15: #add7ff;
    --vi-colour-16: #244a73;
    --vi-lightest: #fff
}

.accessibility:focus, a:focus, a:focus .logo_olt, input:focus {
    outline: var(--vi-colour-04) dotted 2px !important
}

a.focus, input.focus {
    *border: var(--vi-colour-04) dotted 2px !important;
    padding: 0 !important
}

a, a:link, a:visited {
    color: var(--vi-colour-04);
    text-decoration: underline
}

    a:focus, a:hover {
        color: var(--vi-colour-04);
        background-color: var(--vi-lightest);
        text-decoration: none !important
    }

    a:active {
        color: var(--vi-lightest)
    }

.dottedLine {
    border-bottom-color: var(--vi-colour-07) !important
}

h1, h2, h3, h4 {
    color: var(--vi-colour-13) !important
}

#accessibility, .resources_icon, .new_admin_button i {
    background-color: var(--vi-lightest)
}

body {
    background-color: var(--vi-colour-03);
    color: var(--vi-colour-04)
}

footer {
    background-color: var(--vi-colour-02);
    border-top-color: var(--vi-base)
}

#footer_container .footer_copyright, #footer_container .social_media a {
    color: inherit
}

#footer_container .social_media a, #hype_footer a, #hype_header a {
    text-decoration: none
}

.main_content {
    background-color: inherit
}

.blog_newsletter h3, .blog_search h3, .blog_title h3, .login_button {
    color: var(--vi-lightest) !important
}

.resources_link {
    -moz-box-shadow: 0 0 0 1px var(--vi-base);
    -webkit-box-shadow: 0 0 0 1px var(--vi-base);
    box-shadow: 0 0 0 1px var(--vi-base)
}

    .resources_link:focus, .resources_link:hover {
        color: var(--vi-colour-04);
        background-color: var(--vi-colour-02);
        -webkit-box-shadow: inset 0 0 0 2px var(--vi-base) !important;
        -moz-box-shadow: inset 0 0 0 2px var(--vi-base) !important;
        box-shadow: inset 0 0 0 2px var(--vi-base) !important
    }

.user .main_content {
    -webkit-box-shadow: inset 0 0 0 2px var(--vi-base) !important;
    -moz-box-shadow: inset 0 0 0 2px var(--vi-base) !important;
    box-shadow: inset 0 0 0 2px var(--vi-base) !important
}

.user .main_content_fullwidth {
    -webkit-box-shadow: 0 0 0 2px var(--vi-base) !important;
    -moz-box-shadow: 0 0 0 2px var(--vi-base) !important;
    box-shadow: 0 0 0 2px var(--vi-base) !important
}

#main_content .welcome {
    background-color: var(--vi-colour-02)
}

.column_box_sub_title, .login_sign_in, .resources_status_pc, .welcome h1 {
    color: var(--vi-colour-04) !important
}

.about_col_r, .column_split, .side_box, hr, section {
    border-color: var(--vi-base)
}

.resources_status_progress_bar, .resources_status_progress_bar_reward, .tab.active a {
    background-color: var(--vi-colour-02)
}

.resources_status_star {
    border-color: var(--vi-colour-02)
}

#top_menu .signin {
    background-color: var(--vi-colour-14)
}

.subnav li.menu-item-has-children ul li a:focus, .subnav li.menu-item-has-children ul li a:hover {
    background-color: var(--vi-lightest);
    background-color: var(--vi-lightest);
    color: var(--vi-colour-04)
}

input, select, textarea {
    background-color: var(--vi-colour-03);
    color: var(--vi-colour-04);
    border: 1px solid var(--vi-colour-04)
}

::-webkit-input-placeholder {
    color: var(--vi-colour-14)
}

:-moz-placeholder {
    color: var(--vi-colour-14)
}

::-moz-placeholder {
    color: var(--vi-colour-14)
}

:-ms-input-placeholder {
    color: var(--vi-colour-14)
}

.button:focus, .button:hover {
    color: var(--vi-colour-04) !important;
    background-color: var(--vi-lightest)
}

.button_form_clear, .button_form_send {
    text-decoration: underline
}

    .button_form_clear:focus, .button_form_clear:hover, .button_form_send:focus, .button_form_send:hover {
        text-decoration: none;
        background-color: var(--vi-lightest)
    }

#scroll_to_top {
    color: var(--vi-colour-04)
}

    #scroll_to_top span {
        color: var(--vi-lightest)
    }

    #scroll_to_top span, #scroll_to_top:hover span {
        background-color: var(--vi-base)
    }

.tab a {
    background-color: var(--vi-colour-11)
}

    .tab a:hover {
        color: var(--vi-colour-06) !important
    }

.border_box, .highlight_box, .highlight_box_blogs, .highlight_box_news, .profiles_bio, .profiles_bio::after, .short_course_inner, .tabs-bg, li.active {
    background-color: var(--vi-colour-02) !important
}

.hype_progress_bar {
    background-color: var(--vi-lightest)
}

#hype_footer, .byline, .course_outline_content, .highlight {
    background-color: var(--vi-colour-02)
}

.highlight_box {
}

.toggle_content, .toggle_course_content {
    background-color: var(--vi-colour-02)
}

.courses_countries_list a, .table_admin th, .table_admin tr:hover td {
    color: var(--vi-colour-04)
}

    .courses_countries_list a:focus, .courses_countries_list a:hover {
        background-color: var(--vi-lightest)
    }

.highlight {
    color: var(--vi-colour-04);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid var(--vi-base)
}

.byline:hover, ul#comments, ul#posts {
    background-color: var(--vi-colour-03)
}

.course_outline, .course_outline_content, .lead_tutor2 {
    border-color: var(--vi-base) !important
}

#main_container, .HYPE_scene {
    background-color: var(--vi-colour-03) !important
}

.responsive_hype_wrapper .hype_element .HYPE_scene {
    background-color: var(--vi-lightest) !important
}

#vimeo_options_dropdown .vimeo_title, #vimeo_options_nondropdown .vimeo_title, .HYPE_element {
    color: inherit
}

    .HYPE .vi, .hype_element .vi, .vi_apply {
        background-color: var(--vi-colour-02) !important;
        color: var(--vi-colour-04) !important
    }

.HYPE .vi_buttons {
    background-color: var(--vi-colour-04) !important
}

#comment a.likelink, #comment a.likelist, .popup_buttons a {
    color: var(--vi-lightest);
    text-decoration: none
}

#blog_menu {
    background-color: var(--vi-colour-02) !important
}

#side_menu_mobile, .blog_newsletter, .blog_search, .blog_title {
    background-color: var(--vi-base) !important;
    color: var(--vi-lightest) !important
}

#comments, .comment_text {
    color: var(--vi-colour-04)
}

#comments {
    margin-top:20px;
    background-color: var(--vi-colour-03) !important
}

.comment_text {
    background-color: var(--vi-colour-02)
}

.comment_like_thumbs a, .comment_like_who_liked a {
    color: var(--vi-lightest)
}

.side_menu_mobile_text {
    color: var(--vi-lightest) !important
}

.side_menu_mobile_line {
    background-color: var(--vi-lightest) !important
}

#comment a:focus.likelink, #comment a:focus.likelist, #comment a:hover.likelink, #comment a:hover.likelist {
    color: var(--vi-colour-04)
}

.contributions_fixed_position {
    background-color: #c8e0fd !important
}

#side_menu_inner, a.side_menu_link {
    background-color: var(--vi-colour-02)
}

#side_menu_inner {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.side_menu_title {
    background-color: var(--vi-base);
    color: var(--vi-lightest)
}

a.side_menu_link {
    border-color: var(--vi-base)
}

    a.side_menu_link:focus, a.side_menu_link:hover {
        background-color: var(--vi-base);
        color: var(--vi-lightest)
    }

.icons_members_inner, article {
    background-color: var(--vi-colour-03) !important
}

a.column_pillers {
    background-color: var(--vi-colour-02)
}

.table_admin {
    background-color: var(--vi-colour-11) !important
}

    #quiz fieldset, .table_admin td, .table_admin th {
        border-color: var(--vi-base)
    }

.ticket_theircomment {
    background-color: var(--vi-colour-01)
}

    .ticket_theircomment::after {
        border-color: var(--vi-colour-01) transparent
    }

.profiles_bio, .profiles_bio::after {
    border-color: var(--vi-colour-04) !important
}

a.resources_icon_link:focus, a.resources_icon_link:hover, a.summary_icon:focus, a.summary_icon:hover {
    background-color: inherit !important
}

.summary_icon > span {
    border-top-color: var(--vi-base)
}

.summary_menu {
    background-color: var(--vi-colour-11);
    filter: none;
    border: 1px solid var(--vi-base)
}

    .summary_menu::after {
        border-bottom-color: var(--vi-base)
    }

#chat_window, #chat_window_in {
    -moz-box-shadow: inherit;
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    border: 1px solid var(--vi-base)
}

.chat_body {
    background-color: var(--vi-colour-02)
}

.ai_inner_wrapper, .ai_inner_wrapper .chat_body, .chat_comments {
    background-color: var(--vi-colour-03)
}

.banner_free, .live_chat_popup {
    color: var(--vi-colour-05)
}

.course_dropbtn, .dropdown-content {
    background-color: var(--vi-colour-06) !important
}

    .dropdown-content a {
        border-bottom: 1px solid var(--vi-colour-14) !important
    }

.final_highlight {
    background-color: var(--vi-colour-15)
}

.code_reveal {
    color: var(--vi-colour-04)
}

.checklist_box {
    border: 1px solid var(--vi-base) !important
}

#vimeo_options_dropdown, #vimeo_options_nondropdown {
    background-color: var(--vi-colour-03);
    color: inherit;
    border-color: var(--vi-base)
}

.progress-step h3, .progress-step h4, .textrow {
    background-color: var(--vi-colour-03) !important
}

.speechbubble {
    color: var(--vi-colour-04)
}

    .speechbubble a {
        color: var(--vi-colour-14) !important
    }

.divBoxoutTableCell {
    background-color: #e4f0ff !important
}

.hub_tab {
    background-color: var(--vi-base)
}

.hub_tab_org a {
    background-color: var(--vi-lightest);
    color: var(--vi-base)
}

    .hub_tab, .hub_tab_org a:hover {
        color: var(--vi-lightest)
    }

.hub_msg_text, .hub_msg_title, .hub_side_menu_blogs p, .hub_side_menu_rem td {
    color: var(--vi-colour-04)
}

.hub_blog_icons, .hub_cont_icons, .hub_msg_last, .msg_lgrey {
    color: var(--vi-colour-09)
}

a.hub_blog_link:focus .hub_blog_icons, a.hub_blog_link:focus .msg_lgrey, a.hub_blog_link:focus h4, a.hub_blog_link:focus p, a.hub_blog_link:hover .hub_blog_icons, a.hub_blog_link:hover .msg_lgrey, a.hub_blog_link:hover h4, a.hub_blog_link:hover p, a.hub_cont_link:focus .hub_cont_icons, a.hub_cont_link:hover .hub_cont_icons, a.hub_msg_link:focus .hub_msg_text, a.hub_msg_link:focus .hub_msg_title, a.hub_msg_link:focus .msg_lgrey, a.hub_msg_link:hover .hub_msg_text, a.hub_msg_link:hover .hub_msg_title, a.hub_msg_link:hover .msg_lgrey {
    color: var(--vi-colour-04) !important
}

.user_online::after {
    background: var(--vi-colour-10)
}

.hub_styles #side_menu_mobile {
    background-color: var(--oltmaincolour) !important
}

.msg_highlight {
    background-color: var(--vi-lightest);
    color: var(--vi-colour-04)
}

.stats_highlight {
    color: var(--vi-colour-13)
}

li.active {
    background-color: initial !important
}

.frame_shaded, .goalcontainer {
    background-color: var(--vi-colour-01) !important
}

.sg_example_prompts::after {
    border-color: var(--vi-colour-03) transparent transparent !important
}

.goal_info::before, .sliderContent {
    background-color: var(--vi-colour-03)
}

.goal_info {
    border-color: var(--vi-base)
}

    .exampleItem, .exampleItemDifficulties, .exampleItemStrengths, .goal_info::before {
        color: var(--vi-colour-04)
    }

#summaryContent, .observationToWorkOn {
    border-color: var(--vi-base);
    color: var(--vi-colour-16);
    font-weight: 700
}

.areaSelect:focus, .areaSelect:hover {
    background-color: var(--vi-colour-03)
}

.goals_prompt_result {
    color: var(--vi-colour-13)
}

.levelsText {
    border-bottom-color: var(--vi-colour-02)
}

.note-box {
    background: #dc143c;
    color: var(--vi-lightest)
}

    .note-box h3 {
        color: var(--vi-lightest) !important
    }

.sg_editbutton {
    color: var(--vi-colour-13) !important;
    text-decoration: underline
}

    .sg_editbutton:focus, .sg_editbutton:hover {
        background-color: var(--vi-lightest);
        color: var(--vi-colour-13) !important
    }

.smart_goals_divTable {
    background-color: var(--vi-colour-02)
}

#summaryContent_new, .observationToWorkOn_new, .smart_goals_domain_select, .smart_goals_highlight {
    background-color: var(--vi-colour-03)
}

.smart_goals_description_text, .smart_goals_goal_no, .smart_goals_help_dropdown .byline::before, .smart_goals_levels_dropdown .hint, .smart_goals_pc_end, .smart_goals_pc_start, .smart_goals_question_numbering, .smart_goals_step_wrapper .hint, .smart_goals_you_wrote {
    color: var(--vi-colour-13)
}

.smart_goals_tab_body.smart_goals_inner_wrap .byline, .smart_goals_tab_body.smart_goals_inner_wrap .toggle_content, .smart_goals_wrapper {
    background-color: var(--vi-colour-02)
}

.smart_goal_title > span {
    background: var(--vi-colour-02)
}

.smart_goals_inner_wrap .byline, .smart_goals_inner_wrap .toggle_content {
    background-color: var(--vi-colour-03)
}

.smart_goals_levels_dropdown .byline::before, .smart_goals_status_icon, .smart_goals_status_icon_done, .smart_goals_tick_todo {
    color: var(--vi-lightest)
}

.smart_goals_levels_dropdown .byline {
    background-color: var(--vi-base)
}

.levels_instructions {
    border: 1px solid var(--vi-base)
}

.smart_goals_levels_dropdown, .smart_goals_q_highlighted, .smart_goals_tab_body {
    background-color: var(--vi-colour-03)
}

.smart_goals_todo {
    color: var(--vi-colour-03) !important
}

.medal_highlight h3, .new_admin_button.selected span, .smart_goals_done1, .smart_goals_done2, .smart_goals_done3, .smart_goals_done4, .smart_goals_q_highlighted .smart_goals_todo, .underlined_info h3 {
    color: var(--vi-colour-04) !important
}

.smart_goals_tab_body .smart_goals_highlight {
    background-color: var(--vi-lightest)
}

.smart_goals_step_wrapper .tab a {
    border-bottom: 1px solid var(--vi-base);
    color: var(--vi-colour-14)
}

.smart_goals_step_wrapper .tab.active a {
    border: 1px solid var(--vi-base);
    border-bottom: none;
    color: var(--vi-colour-04)
}

.smart_goals_step_wrapper .tab a:hover {
    background-color: var(--vi-base);
    color: var(--vi-colour-04) !important
}

.slider_course_wrapper, .smart_goals_step_wrapper .tab a {
    background-color: var(--vi-colour-02)
}

.slider_course_enrolling, .slider_course_hours, .slider_course_info, .slider_course_name, .slider_course_type, a.button_download:link {
    color: var(--vi-colour-04)
}

.bg_colour_grey, .table_membership .bg_colour {
    background-color: var(--vi-colour-03)
}

.achieve_goals_bg, .medal_highlight, .table_membership {
    background-color: var(--vi-colour-02)
}

    .table_membership, .table_membership td, .table_membership th {
        border: 5px solid var(--vi-colour-03)
    }

.table_membership_remove_border_btm {
    border-bottom-color: var(--vi-colour-02) !important
}

.table_membership_remove_border_top {
    border-top-color: var(--vi-colour-02) !important
}

.table_membership td img {
    filter: invert(1)
}

.membership_status_divTable {
    background-color: var(--vi-colour-02)
}

.bringout {
    background-color: var(--vi-colour-01)
}

.table_membership_remove_border_btm.bringout {
    border-bottom-color: var(--vi-colour-01) !important
}

.memberships .tab a, .memberships_benefits, .memberships_buy_note, .memberships_info_inner_partner {
    background-color: var(--vi-colour-03)
}

.memberships .tab.active a {
    background-color: var(--vi-colour-02) !important
}

.memberships_subtitle_ind, .memberships_subtitle_org {
    color: var(--vi-colour-13)
}

.new_admin_button span, .testimonials_members_from, .testimonials_members_name, .testimonials_members_title {
    color: var(--vi-colour-04)
}

.white-popup {
    background-color: var(--vi-colour-03)
}

.general_newsletter_wrapper, .webinars_divTable {
    background-color: var(--vi-colour-02)
}

.blue_bg_white_text, .white_text {
    color: var(--vi-colour-13) !important
}

.box_inner_style {
    background-color: var(--vi-colour-02) !important
}

.new_admin_button {
    background-color: var(--vi-colour-03) !important;
    border: 1px solid var(--vi-base)
}

.new_admin_button.selected {
    background-color: var(--vi-lightest) !important
}

.screen_reader_vi {
    background-color: inherit;
    border-color: var(--vi-base) !important
}

.screen_reader_vi::after, .screen_reader_vi::before {
    background-color: var(--vi-base);
    color: var(--vi-lightest)
}
/* CK EDITOR */
.vi_box_spacing {
    padding:20px;
}
.cke_chrome {
    border:none !important;   
}
.cke_top {
    background-color: var(--vi-colour-02) !important;
    border-color: var(--vi-base) !important;
}
.cke_bottom {
    border-color: var(--vi-base) !important;
    border-right: 1px solid var(--vi-base) !important;
    border-left: 1px solid var(--vi-base) !important;
    border-bottom: 1px solid var(--vi-base) !important;
    border-top: initial !important;
}
.cke_contents {
    border-left:1px solid var(--vi-base) !important;
    border-right:1px solid var(--vi-base) !important;
    border-color: var(--vi-base) !important;
}
.cke_wysiwyg_frame, .cke_wysiwyg_div {
    background-color: var(--vi-colour-03) !important
}
.cke_reset {
    background: none !important;
}
iframe.cke_wysiwyg_frame, .cke_bottom {
    background-color:var(--vi-colour-03) !important;
}
.cke_toolbar_separator {
    background-color: var(--vi-base) !important;
}
.cke_toolgroup a.cke_button:last-child::after, .cke_toolgroup a.cke_button.cke_button_disabled:hover:last-child::after, .cke_combo::after {
    border-right: 1px solid var(--vi-base) !important;
}
.cke_resizer {
    border-color: transparent var(--vi-base) transparent transparent !important;
}
/* MESSAGES */
.table_alerts th, .table_alerts tr, .table_alerts td {
    border-bottom: 1px solid var(--vi-base);
}
.message_highlight {
    background-color: initial !important;
}
.table_alerts .readbutton:hover {
    background-color: var(--vi-colour-02) !important;
}
.alert_message,
.readbutton:focus-visible {
    background-color: var(--vi-colour-02) !important;
}
#drag-and-drop-area, .drag-and-drop-area {
    border: 2px dashed var(--vi-base)
}
.message_highlight_columns {
    background-color: var(--vi-colour-02) !important;    
}