/**
 * Aspire 2Be Digital Futures: Beyond the Roadmap
 * Copyright (c) Aspire 2Be. All rights reserved.
 */

/* Fonts */
@font-face
{
    font-family: Roboto;
    src: url(/resources/fonts/OpenSans-Regular.ttf);
}

@font-face
{
    font-family: RobotoMedium;
    src: url(/resources/fonts/OpenSans-Bold.ttf);
}

/* Colour variables */
:root
{
    --bs-primary: #da753d;
    --bs-primary-light: #faede6;
    --bs-primary-light-border: #ece0d9;
    --bs-primary-hover: #c26836;
    --bs-primary-active: #a85a2f;
    --bs-primary-disabled: #ccc7c4;
    --bs-success: #3eab3f;
    --bs-success-light: #caf1cc;
    --bs-success-light-border: #9ef0a1;
    --bs-success-hover: #359136;
    --bs-success-active: #2c772d;
    --bs-success-disabled: #7c9b7d;
    --bs-info: #99438c;
    --bs-info-light: #fad8f5;
    --bs-info-light-border: #ffb3f4;
    --bs-info-hover: #833a78;
    --bs-info-active: #75346c;
    --bs-info-disabled: #967e92;
    --bs-warning: #ffde00;
    --bs-warning-light: #fff8ca;
    --bs-warning-light-border: #fff29f;
    --bs-warning-hover: #e7c800;
    --bs-warning-active: #b69e00;
    --bs-warning-disabled: #e4e0c9;
    --bs-danger: #be1622;
    --bs-danger-light: #f3c7ca;
    --bs-danger-light-border: #f8a6ab;
    --bs-danger-hover: #ad141f;
    --bs-danger-active: #86121a;
    --bs-danger-disabled: #bb8b8e;
    --bs-dark: #000;
    --bs-dark-light: #888;
    --bs-dark-light-border: #777;
    --bs-dark-hover: #222;
    --bs-dark-active: #111;
    --bs-dark-disabled: #777;
    --font-normal: Roboto;
    --font-thick: RobotoMedium;
}

/* HTML font size */
html
{
    font-size: 15px;
}

/* Body layout */
body
{
    background-color: #fff;
    margin-top: 65px; /* Navbar is about this height */
    margin-bottom: 10px;
    font-family: var(--font-normal);
}

/* Body dark theme */
body.dark-theme
{
    background-color: #000;
    color: #fff;
}

body.dark-theme .text-secondary
{
    color: #aaa !important;
}

body.dark-theme table
{
    color: #fff;
}

body.dark-theme table.table-hover tr:hover
{
    background-color: var(--bs-dark-active);
    color: #fff;
}

body.dark-theme .breadcrumb
{
    background-color: var(--bs-dark-active);
    color: #fff;
}

body.dark-theme .breadcrumb .active
{
    color: #aaa;
}

body.dark-theme .list-group-item
{
    background-color: var(--bs-dark);
    border: 1px solid rgba(255, 255, 255, .125);
}

body.dark-theme .list-group-item-action
{
    color: #aaa;
}

body.dark-theme .list-group-item-action:hover
{
    background-color: var(--bs-dark-hover);
}

body.dark-theme .list-group-item-action:active
{
    background-color: var(--bs-dark-active);
}

body.dark-theme .list-group-item-action.active
{
    background-color: var(--bs-primary);
    color: #fff;
}

body.dark-theme .card
{
    background-color: #000;
    border: 1px solid rgba(255, 255, 255, .125);
}

body.dark-theme .card-header
{
    background-color: var(--bs-dark-active);
}

body.dark-theme .form-control, body.dark-theme .form-select
{
    background-color: #000;
    border: 1px solid #555;
    color: #fff;
}

body.dark-theme .form-control:disabled, body.dark-theme .form-select:disabled
{
    background-color: #222;
    border: 1px solid #444;
    color: rgba(255, 255, 255, .75);
}

body.dark-theme .form-check-label::before
{
    background-color: #000;
}

body.dark-theme .floater, body.dark-theme #accessibility-tools
{
    background-color: #000;
    color: #fff;
    box-shadow: 1px 1px 5px #222;
}

body.dark-theme .floater .floater-show-btn, body.dark-theme #accessibility-tools .accessibility-show-btn
{
    background-color: #000;
    color: #fff !important;
}

body.dark-theme .btn-light
{
    background-color: var(--bs-dark);
    border: 1px solid rgba(255, 255, 255, .125);
    color: #aaa;
}

body.dark-theme .btn-light:disabled
{
    background-color: var(--bs-dark-hover) !important;
}

body.dark-theme .bg-light
{
    background-color: var(--bs-dark-active) !important;
}

body.dark-theme .btn-light:hover
{
    background-color: var(--bs-dark-hover);
}

body.dark-theme .btn-light:active
{
    background-color: var(--bs-dark-active) !important;
    color: #fff !important;
}

body.dark-theme .modal-header
{
    color: #000;
}

body.dark-theme .modal-content
{
    background-color: #000;
}

body.dark-theme .modal-backdrop
{
    background-color: #222;
}

body.dark-theme .page-link
{
    background-color: var(--bs-dark);
}

body.dark-theme .page-link:hover
{
    background-color: var(--bs-dark-hover);
}

body.dark-theme .page-link:active
{
    background-color: var(--bs-dark-active);
}

body.dark-theme .dropdown-menu
{
    background-color: var(--bs-dark-active);
}

body.dark-theme .dropdown-item
{
    color: #fff;
}

body.dark-theme .dropdown-item:hover
{
    background-color: var(--bs-dark-hover);
}

body.dark-theme .dropdown-item:active, body.dark-theme .dropdown-item:focus
{
    background-color: var(--bs-dark);
}

body.dark-theme .dropdown-item.text-danger:active, body.dark-theme .dropdown-item.text-danger:focus
{
    background-color: var(--bs-danger);
}

body.dark-theme .progress
{
    background-color: var(--bs-dark-active);
}

body.dark-theme .dropdown.show .dropdown-toggle:not(.nav-link)
{
    background-color: var(--bs-dark-hover);
    color: #fff;
}

body.dark-theme .tooltip-inner
{
    background-color: var(--bs-dark-active);
}

body.dark-theme .tooltip.bs-tooltip-top .arrow::before
{
    border-top-color: var(--bs-dark-active) !important;
}

body.dark-theme .tooltip.bs-tooltip-left .arrow::before
{
    border-left-color: var(--bs-dark-active) !important;
}

body.dark-theme .tooltip.bs-tooltip-right .arrow::before
{
    border-right-color: var(--bs-dark-active) !important;
}

body.dark-theme .tooltip.bs-tooltip-bottom .arrow::before
{
    border-bottom-color: var(--bs-dark-active) !important;
}

body.dark-theme .input-group-text
{
    background-color: #222;
    border: 1px solid #555;
    color: #fff;
}

body.dark-theme hr
{
    border-color: #aaa;
}

body.dark-theme .alert-primary
{
    background-color: var(--bs-primary-hover);
    color: #fff;
}

body.dark-theme .alert-success
{
    background-color: var(--bs-success-hover);
    color: #fff;
}

body.dark-theme .alert-warning
{
    background-color: var(--bs-warning-hover);
    color: #000;
}

body.dark-theme .alert-info
{
    background-color: var(--bs-info-hover);
    color: #fff;
}

body.dark-theme .alert-danger
{
    background-color: var(--bs-danger-hover);
    color: #fff;
}

body.dark-theme .alert a, body.dark-theme .alert button.btn-link
{
    color: var(--bs-primary-active);
}

body.dark-theme .banner-bg
{
    color: #000;
}

body.dark-theme .toast
{
    background-color: var(--bs-dark-active);
}

body.dark-theme pre
{
    color: #aaa;
}

body.dark-theme .popover
{
    background-color: var(--bs-dark-active);
    color: #fff;
}

body.dark-theme .popover .popover-body
{
    color: #fff;
}

body.dark-theme .popover .popover-header
{
    background-color: var(--bs-dark-hover);
}

body.dark-theme .popover.bs-popover-top .arrow::after
{
    border-top-color: var(--bs-dark-active) !important;
}

body.dark-theme .popover.bs-popover-left .arrow::after
{
    border-left-color: var(--bs-dark-active) !important;
}

body.dark-theme .popover.bs-popover-right .arrow::after
{
    border-right-color: var(--bs-dark-active) !important;
}

body.dark-theme .popover.bs-popover-bottom .arrow::after
{
    border-bottom-color: var(--bs-dark-active) !important;
}

/* Loading modal text */
#loading-text
{
    font-family: var(--font-thick);
    font-size: 1.4rem;
}

/* <pre> tag white-space enforcement */
pre
{
    white-space: break-spaces;
}

/* Headings */
h1, h2, h3, h4, h5, h6
{
    font-family: var(--font-thick) !important;
}

h1, h2
{
    color: var(--bs-primary);
    font-weight: bold;
}

.subpage-heading
{
    margin: 0;
}

/* Subpage header */
.subpage-header
{
    border-bottom: 3px solid var(--bs-primary);
}

/* Navbar */
.navbar
{
    position: fixed;
    top: 0;
    width: 100%;
    margin-right: -11px;
    margin-left: -11px;
    padding: 10px;
    z-index: 5;
    background-color: #000 !important;
}

.navbar-brand
{
    display: flex;
    align-items: center;
}

.navbar-brand img
{
    width: 100px;
}

.navbar-brand #navbar-school-name
{
    margin-left: 10px;
}

.navbar-nav
{
    align-items: center;
}

.nav-link
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-family: var(--font-thick);
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.nav-link.active
{
    background-color: var(--bs-primary);
    border-radius: calc(0.25rem - 1px);
}

/* Hexagon background and image (e.g. see homepage) */
.hexagon-bg
{
    display: flex;
    align-items: center;
    background-image: url(/resources/images/hexagon_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    overflow: hidden;
}

.hexagon-bg img
{
    width: 100%;
    min-width: 200px;
    max-width: 600px;
}

/* Banner background and image (e.g. see overview pages) */
.banner-bg
{
    display: flex;
    align-items: center;
    background-image: url(/resources/images/banner_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    height: 250px;
    overflow: hidden;
    text-align: center;
    font-size: 1.4rem;
    font-weight: bold;
}

.banner-bg img
{
    width: 100%;
    min-width: 100px;
    max-width: 200px;
}

/* Videos */
.video-container
{
    position: relative;
    padding-bottom: 50%;
}

.video-player
{
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Flip hexagons on homepage */
.flip-hexagon img
{
    width: 100%;
    min-width: 75px;
    max-width: 125px;
    transition: transform 0.25s ease-in-out;
}

.flip-hexagon img.flipped
{
    transform: rotateY(90deg);
}

/* Bootstrap icons */
.bi
{
    margin-top: -2px;
}

/* Form question image */
.form-question-image
{
    max-width: 100%;
}

/* Radio/checkbox grid and rating question tables */
table.radio-grid, table.checkbox-grid, table.rating
{
    width: 100%;
    text-align: center;
}

table.radio-grid .radio-grid-col:first-child,
table.checkbox-grid .checkbox-grid-col:first-child,
table.rating .rating-col:first-child
{
    width: 30%;
    text-align: right;
}

table.rating .rating-col:last-child
{
    width: 30%;
    text-align: left;
}

/* Footer */
.footer-logo
{
    width: 100%;
    max-width: 100px;
    min-width: 80px;
}

.footer-text
{
    font-size: 0.85rem;
}

/* Floater containers */
.floater
{
    position: fixed;
    left: 15px;
    top: 95px;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 5px 0 5px 5px;
    padding: 10px;
    box-shadow: 1px 1px 5px #ccc;
    z-index: 4;
    width: 300px;
    transition: left 0.2s ease-in-out;
}

.floater.hidden
{
    left: -300px;
}

@media (max-width: 576px)
{
    .floater
    {
        width: 250px;
    }
        
    .floater.hidden
    {
        left: -250px;
    }
}

.floater-show-btn
{
    position: absolute;
    top: -1px;
    right: -31px;
    background-color: #fff;
    padding: 5px;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-radius: 0 5px 5px 0;
    color: var(--bs-dark) !important;
}

.floater:not(.hidden) .floater-show-btn .show-icon
{
    display: none;
}

.floater.hidden .floater-show-btn .hide-icon
{
    display: none;
}

/* Toasts */
#toast-container
{
    position: fixed;
    top: 95px;
    right: 10px;
    z-index: 9999;
}

.toast
{
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 576px)
{
    #toast-container
    {
        right: 0px;
    }

    .toast
    {
        width: 100%;
    }
}

.toast .bi
{
    margin-top: 1px;
}

/* Popovers */
.popover
{
    font-family: var(--font-normal);
}

.popover-header
{
    font-size: 1rem;
}

/* Dropdown menu and items */
.dropdown-menu
{
    font-size: 1rem;
}

.dropdown-item:active
{
    background-color: var(--bs-primary);
    color: #fff !important;
}

.dropdown-item.text-danger:active
{
    background-color: var(--bs-danger);
    color: #fff !important;
}

/* Buttons */
.btn
{
    font-family: var(--font-thick) !important;
    font-size: 1rem;
}

.btn-sm
{
    font-size: 0.85rem !important;
}

.btn-lg
{
    font-size: 1.2rem !important;
}

/* Form text inputs */
.form-control, .input-group-text
{
    font-size: 1rem;
}

/* Colours */
.btn-primary, .badge-primary, .list-group-item.active
{
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.alert-primary
{
    color: var(--bs-primary);
    background-color: var(--bs-primary-light);
    border-color: var(--bs-primary-light-border);
}

.btn-outline-primary:not(:hover)
{
    color: var(--bs-primary);
}

.btn-outline-primary, .border-primary
{
    border-color: var(--bs-primary) !important;
}

.btn-outline-primary:disabled, .btn-outline-primary.disabled, .btn-outline-primary:disabled:hover
{
    border-color: var(--bs-primary-disabled);
    background-color: transparent;
}

.bg-primary
{
    background-color: var(--bs-primary) !important;
}

.btn-primary:disabled, .btn-primary.disabled, .btn-primary:disabled:hover
{
    background-color: var(--bs-primary-disabled);
    border-color: var(--bs-primary-disabled);
}

.btn-primary:hover, .btn-outline-primary:hover
{
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}

.btn-primary:active, .btn-primary:focus, .btn-outline-primary:active, .btn-outline-primary:focus
{
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
    color: #fff;
}

.text-primary:not(.disabled)
{
    color: var(--bs-primary) !important;
}

.text-primary.disabled
{
    color: var(--bs-primary-disabled) !important;
}

a, .btn-link
{
    color: var(--bs-primary);
    text-decoration: none;
}

.btn-link:hover, .btn-link:focus
{
    text-decoration: none;
}

a:hover, .btn-link:hover
{
    color: var(--bs-primary-hover);
}

a:active, .btn-link:active
{
    color: var(--bs-primary-active);
}

a:disabled, .btn-link:disabled, .btn-link.disabled
{
    color: var(--bs-primary-disabled);
}

.btn-success, .badge-success
{
    color: #fff;
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.alert-success
{
    color: var(--bs-success);
    background-color: var(--bs-success-light);
    border-color: var(--bs-success-light-border);
}

.btn-outline-success:not(:hover)
{
    color: var(--bs-success);
}

.btn-outline-success, .border-success
{
    border-color: var(--bs-success) !important;
}

.btn-outline-success:disabled, .btn-outline-success.disabled, .btn-outline-success:disabled:hover
{
    border-color: var(--bs-success-disabled);
    background-color: transparent;
}

.bg-success
{
    background-color: var(--bs-success) !important;
}

.btn-success:disabled, .btn-success.disabled, .btn-success:disabled:hover
{
    background-color: var(--bs-success-disabled);
    border-color: var(--bs-success-disabled);
}

.btn-success:hover, .btn-outline-success:hover
{
    background-color: var(--bs-success-hover);
    border-color: var(--bs-success-hover);
}

.btn-success:active, .btn-success:focus, .btn-outline-success:active, .btn-outline-success:focus
{
    background-color: var(--bs-success-active) !important;
    border-color: var(--bs-success-active) !important;
    color: #fff;
}

.text-success:not(.disabled)
{
    color: var(--bs-success) !important;
}

.text-success.disabled
{
    color: var(--bs-success-disabled) !important;
}

.btn-info, .badge-info
{
    color: #fff;
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.alert-info
{
    color: var(--bs-info);
    background-color: var(--bs-info-light);
    border-color: var(--bs-info-light-border);
}

.btn-outline-info:not(:hover)
{
    color: var(--bs-info);
}

.btn-outline-info, .border-info
{
    border-color: var(--bs-info) !important;
}

.btn-outline-info:disabled, .btn-outline-info.disabled, .btn-outline-info:disabled:hover
{
    border-color: var(--bs-info-disabled);
    background-color: transparent;
}

.bg-info
{
    background-color: var(--bs-info) !important;
}

.btn-info:disabled, .btn-info.disabled, .btn-info:disabled:hover
{
    background-color: var(--bs-info-disabled);
    border-color: var(--bs-info-disabled);
}

.btn-info:hover, .btn-outline-info:hover
{
    background-color: var(--bs-info-hover);
    border-color: var(--bs-info-hover);
}

.btn-info:active, .btn-info:focus, .btn-outline-info:active, .btn-outline-info:focus
{
    background-color: var(--bs-info-active) !important;
    border-color: var(--bs-info-active) !important;
    color: #fff;
}

.text-info:not(.disabled)
{
    color: var(--bs-info) !important;
}

.text-info.disabled
{
    color: var(--bs-info-disabled) !important;
}

.btn-warning, .badge-warning
{
    color: #000;
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.alert-warning
{
    color: var(--bs-warning-active);
    background-color: var(--bs-warning-light);
    border-color: var(--bs-warning-light-border);
}

.btn-outline-warning:not(:hover)
{
    color: var(--bs-warning);
}

.btn-outline-warning, .border-warning
{
    border-color: var(--bs-warning) !important;
}

.btn-outline-warning:disabled, .btn-outline-warning.disabled, .btn-outline-warning:disabled:hover
{
    border-color: var(--bs-warning-disabled);
    background-color: transparent;
}

.bg-warning
{
    background-color: var(--bs-warning) !important;
}

.btn-warning:disabled, .btn-warning.disabled, .btn-warning:disabled:hover
{
    background-color: var(--bs-warning-disabled);
    border-color: var(--bs-warning-disabled);
}

.btn-warning:hover, .btn-outline-warning:hover
{
    background-color: var(--bs-warning-hover);
    border-color: var(--bs-warning-hover);
}

.btn-warning:active, .btn-warning:focus, .btn-outline-warning:active, .btn-outline-warning:focus
{
    background-color: var(--bs-warning-active) !important;
    border-color: var(--bs-warning-active) !important;
    color: #000;
}

.text-warning:not(.disabled)
{
    color: var(--bs-warning) !important;
}

.text-warning.disabled
{
    color: var(--bs-warning-disabled) !important;
}

.btn-danger, .badge-danger
{
    color: #fff;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.alert-danger
{
    color: var(--bs-danger);
    background-color: var(--bs-danger-light);
    border-color: var(--bs-danger-light-border);
}

.btn-outline-danger:not(:hover)
{
    color: var(--bs-danger);
}

.btn-outline-danger, .border-danger
{
    border-color: var(--bs-danger) !important;
}

.btn-outline-danger:disabled, .btn-outline-danger.disabled, .btn-outline-danger:disabled:hover
{
    border-color: var(--bs-danger-disabled);
    background-color: transparent;
}

.bg-danger
{
    background-color: var(--bs-danger) !important;
}

.btn-danger:disabled, .btn-danger.disabled, .btn-danger:disabled:hover
{
    background-color: var(--bs-danger-disabled);
    border-color: var(--bs-danger-disabled);
}

.btn-danger:hover, .btn-outline-danger:hover
{
    background-color: var(--bs-danger-hover);
    border-color: var(--bs-danger-hover);
}

.btn-danger:active, .btn-danger:focus, .btn-outline-danger:active, .btn-outline-danger:focus
{
    background-color: var(--bs-danger-active) !important;
    border-color: var(--bs-danger-active) !important;
    color: #fff;
}

.text-danger:not(.disabled)
{
    color: var(--bs-danger) !important;
}

.text-danger.disabled
{
    color: var(--bs-danger-disabled) !important;
}

.btn-dark, .badge-dark
{
    color: #fff;
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
}

.alert-dark
{
    color: #fff;
    background-color: var(--bs-dark-light);
    border-color: var(--bs-dark-light-border);
}

.btn-outline-dark:not(:hover)
{
    color: var(--bs-dark);
}

.btn-outline-dark, .border-dark
{
    border-color: var(--bs-dark) !important;
}

.btn-outline-dark:disabled, .btn-outline-dark.disabled, .btn-outline-dark:disabled:hover
{
    border-color: var(--bs-dark-disabled);
    background-color: transparent;
}

.bg-dark
{
    background-color: var(--bs-dark) !important;
}

.btn-dark:disabled, .btn-dark.disabled, .btn-dark:disabled:hover
{
    background-color: var(--bs-dark-disabled);
    border-color: var(--bs-dark-disabled);
}

.btn-dark:hover, .btn-outline-dark:hover
{
    background-color: var(--bs-dark-hover);
    border-color: var(--bs-dark-hover);
}

.btn-dark:active, .btn-dark:focus, .btn-outline-dark:active, .btn-outline-dark:focus
{
    background-color: var(--bs-dark-active) !important;
    border-color: var(--bs-dark-active) !important;
    color: #fff;
}

.text-dark:not(.disabled)
{
    color: var(--bs-dark) !important;
}

.text-dark.disabled
{
    color: var(--bs-dark-disabled) !important;
}

.page-item .page-link
{
    color: var(--bs-primary);
}

.page-item.active .page-link
{
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.page-item.disabled .page-link
{
    background-color: transparent;
    color: var(--bs-primary-disabled);
}

.page-item.active:hover .page-link
{
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}

.page-item.active:active .page-link
{
    background-color: var(--bs-primary-active);
    border-color: var(--bs-primary-active);
}

.form-check-input:checked~.form-check-label::before
{
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.progress-bar
{
    background-color: var(--bs-primary);
}

.breadcrumb
{
    background-color: #fefefe;
    padding: 10px;
    border-radius: 5px;
}

.form-control:focus
{
    box-shadow: 0px 0px 0px 3px var(--bs-primary-light-border);
}

.form-control.is-invalid
{
    border-color: var(--bs-danger);
}

.form-control.is-invalid:focus
{
    box-shadow: 0px 0px 0px 3px var(--bs-danger-light-border);
}

/* List group item font */
.list-group-item-action
{
    font-family: var(--font-thick);
}

/* Card header font */
.card-header
{
    font-family: var(--font-thick);
    font-size: 1.1rem;
}

/* Loading spinner width */
.spinner-border
{
    border-width: 5px;
}

.spinner-border-sm
{
    border-width: 0.2em;
}

/* Custom input textbox width (label defines width) */
label[for*='-custom']
{
    width: 100%;
}

/* Alert icons */
.alert .bi
{
    min-width: 24px;
    max-width: 24px;
}

/* Feedback Tool */
#feedback-container
{
    position: fixed;
    right: 20px;
    bottom: 20px;
}

#feedback-container a
{
    color: var(--bs-primary);
}

#feedback-container a svg
{
    transition: transform 0.2s ease-in-out;
}

#feedback-container a svg:hover
{
    transform: scale(1.2);
}

#send-feedback-modal .modal-header
{
    background-color: var(--bs-primary) !important;
}

#send-feedback-modal #send-feedback-confirm-btn
{
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

#send-feedback-modal #send-feedback-confirm-btn:disabled
{
    background-color: #e0cbc5;
    border-color: #e0cbc5;
}

#send-feedback-modal #send-feedback-confirm-btn:hover:not(:disabled)
{
    background-color: #c54118;
    border-color: #c54118;
}

#send-feedback-modal #send-feedback-confirm-btn:active
{
    background-color: #b63c17;
    border-color: #b63c17;
}

#send-feedback-modal #send-feedback-confirm-btn:focus
{
    box-shadow: 0 0 0 3px rgba(255, 128, 0, 0.5);
}

/* Accessibility tools */
#accessibility-tools
{
    position: fixed;
    right: 15px;
    top: 95px;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 0 5px 5px 5px;
    padding: 10px;
    box-shadow: 1px 1px 5px #ccc;
    z-index: 4;
    width: 300px;
    transition: right 0.2s ease-in-out;
}

#accessibility-tools.hidden
{
    right: -300px;
}

@media (max-width: 576px)
{
    #accessibility-tools
    {
        width: 250px;
    }

    #accessibility-tools.hidden
    {
        right: -250px;
    }
}

.accessibility-show-btn
{
    position: absolute;
    top: -1px;
    left: -31px;
    background-color: #fff;
    padding: 5px;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    border-radius: 5px 0 0 5px;
    color: var(--bs-dark) !important;
}

/* Admin users table - Hide school accounts */
.users-table-school-account
{
    display: none;
}

.users-table-school-account.show
{
    display: table-row;
}

/* Form Tiles */
.form-tile
{
    text-align: center;
    width: 200px;
    height: 200px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 1.2rem;
    font-family: var(--font-thick);
    border-radius: 5px;
    overflow: hidden;
    word-break: break-word;
    transition: background-color 0.2s ease-in-out;
}

.form-tile:hover
{
    background-color: var(--bs-primary-hover);
    color: #fff;
}

.form-tile:active
{
    background-color: var(--bs-primary-active);
    color: #fff;
}

/* Radio and Checkbox Inputs */
.form-check-input:checked[type=radio], .form-check-input:checked
{
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Form Analysis */
.analysis-data
{
    border: 1px solid #aaa;
    border-radius: 3px;
}

.analysis-graph
{
    width: 100%;
    min-width: 500px;
    max-width: 700px;
}