@import url("variables.css");

/* variables.css */


:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #272822;
}

pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: hidden;
    border-radius: 0.3em;
}

.material-symbols-outlined {
    font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}

.material-symbols-filled {
    font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}

/*
 *---------------------------------------------------------------
 * LAYOUT & UTILITIES
 *---------------------------------------------------------------
 *
 */

html {
    box-sizing: border-box;
    height: 100%;
    font-size: 100%;
}

body {
    color: var(--body-regular);
    font-family: "Outfit", sans-serif;
    height: 100%;
}

.body_wrapper {
    flex: 1;
    height: 100%;
    position: relative;
}

.show_rec_actions {
    position: relative;
}

.left_bar {
    max-width: 100%;
}

::selection {
    background-color:#333;
    color:#fff;
}

*, *:before, *:after {
    box-sizing: inherit;
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.clear:before, .clear:after {
    content:'';
    display:table;
}

.clear:after {
    clear:both;
}

.fl {
    float:left;
}

.fr {
    float:right;
}

.hide,
.hidden {
    display: none;
}

.mobile-hide {
    display: none !important;
}

.w100 {
    width:100%;
}

.w90 {
    width:90%;
}

.w80 {
    width:80%;
}

.w75 {
    width:75%;
}

.w70 {
    width:70%;
}

.w60 {
    width:60%;
}

.w50, .half {
    width:50%;
}

.w40 {
    width:40%;
}

.w33-3, .third {
    width:33.3333333%;
}

.w30 {
    width:30%;
}

.w25, .quarter {
    width:25%;
}

.w20, .fifth {
    width:20%;
}

.w16-6, .sixth {
    width:16.6666666%;
}

.w12-5, .eighth {
    width:12.5%;
}

.w10, .tenth {
    width:10%;
}

.w5 {
    width: 5%;
}

ul, ol {
    padding-left: 1.5em;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.ofv {
    overflow: visible !important;
}

.mra {
    margin-right: auto;
}

.mla {
    margin-right: auto;
}

.no-height {
    height:initial !important;
}

.flex {
    display: flex;
}



/*
 *---------------------------------------------------------------
 * A TAG RESET
 *---------------------------------------------------------------
 *
 */

a:link {
    text-decoration: none;
    color: var(--black);
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--black);
}

a:active {
    text-decoration: none;
    color: var(--black);
}

/* Stop iPhone changing numbered links to telephone numbers */

a[href^=tel] {
    text-decoration:inherit;
    color: inherit;
}

/*
 *---------------------------------------------------------------
 * DEFAULT TEXT COLOURS
 *---------------------------------------------------------------
 *
 */
h1 {
    color:#2c82c9;
}

h2 {
    color: var(--black);
    font-weight: 600;
}

h3 {
    color: var(--black);
    font-weight: 600;
}

.ac_popup h3 {
    font-weight: 300;
    color: var(--body-regular);
    font-size: var(--body-size);
}

.ac_popup h3 b {
    font-weight: 600;
    color: var(--black);
}

h4 {
    color: var(--body-semi);
    font-weight: 600;
}

.txtBlack {
    color: #000;
}

.txtWhite {
    color: #fff;
}

.txtGrey {
    color: #666;
}

.txtBlue {
    color:#2c82c9;
}

.txtPurple {
    color: var(--purple);
}

.txtGreen {
    color: #13c975;
}

.txtOrange {
    color: var(--orange);
}

.txtRed {
    color: var(--red);
}

.txtBronze {
    color: var(--bronze);
}

.txtSilver {
    color: var(--silver);
}

.txtGold {
    color: var(--gold);
}

.txtCenter {
    text-align: center;
}

.txtRight {
    text-align: right;
}

ol li {
    margin-bottom: 1em;
}

/*
 *---------------------------------------------------------------
 * DEFAULT BACKGROUND COLOURS
 *---------------------------------------------------------------
 *
 */

.bgBlack {
    background-color: #000;
}

.bgWhite {
    background-color: #fff;
}

.bgGrey {
    background-color: #666;
}

.bgBlue {
    background-color:#2c82c9;
}

.bgPurple {
    background-color: #bb1cc9;
}

.bgGreen {
    background-color: #13c975;
}

.bgRed {
    background-color: #c92a12;
}

/*
 *---------------------------------------------------------------
 * ALERTS
 *---------------------------------------------------------------
 *
 */

.alert {
    background: var(--white);
    width: 40px;
    height: 40px;
    background-size: 1rem;
    display: flex;
    justify-content: center;
    align-content: center;
    border-radius: 40px;
    margin-right: 10px;
}

.alert span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.alert-success {
    background: #d2fcd2;
    border-color: #3cc13c;
}

.alert-error {
    background: #ffd3d3;
    border-color: #d04e4e;
}

/*
 *---------------------------------------------------------------
 * DEFAULT FORMS
 *---------------------------------------------------------------
 *
 */

fieldset {
    border: none;
    padding: 0;
}

label {
    padding: 0.5em 0;
    display: inline-block;
    color: #666;
}

input, select, textarea {
    border:1px solid #d1d1d1;
    width: auto;
    padding: 1em;
    outline: none;
    transition: box-shadow 0.30s ease-in-out;
}

input:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
}

textarea {
    resize: none;
    text-align: left;
    letter-spacing: normal;
    word-spacing: normal;
    text-indent: 0;
    white-space: pre-wrap; /* safe */
    box-sizing: border-box;
}

select {
    /*background: #FFF url('../assets/downArrow.svg') no-repeat right;*/
    background-size: contain;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 2px rgba(81, 203, 238, 1);
}

.chkRdLabel {
    display: block;
    position: relative;
    padding-left: 2em;
    padding-top: 0.1em;
    margin-bottom: 0.5em;
    cursor: pointer;
    /*font-size: 22px;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.chkRdLabel input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.customCheckbox, .customRadio {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5em;
    width: 1.5em;
    background-color: #eee;
}

.customRadio {
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.chkRdLabel:hover input ~ .customCheckbox,
.chkRdLabel:hover input ~ .customRadio {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chkRdLabel input:checked ~ .customCheckbox,
.chkRdLabel input:checked ~ .customRadio {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.customCheckbox:after,
.customRadio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chkRdLabel input:checked ~ .customCheckbox:after,
.chkRdLabel input:checked ~ .customRadio:after {
    display: block;
}

/* Style the checkmark/indicator */
.chkRdLabel .customCheckbox:after {
    left: 0.6em;
    top: 0.35em;
    width: 0.3em;
    height: 0.6em;
    border: solid white;
    border-width: 0 0.2em 0.2em 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Style the indicator (dot/circle) */
.chkRdLabel .customRadio:after {
    top: 0.42em;
    left: 0.45em;
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background: white;
}

/* END CHECKBOX AND RADIO */

::-webkit-input-placeholder {
    color: #d1d1d1;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

::-moz-placeholder {
    color: #d1d1d1;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
    color: transparent;
}

:-ms-input-placeholder {
    color: #d1d1d1;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
    color: transparent;
}

.error input, .error textarea {
    outline:1px solid #b8312f;
}

.field_error {
    color: #9d9d9d;
    font-size: 0.6em;
    margin: 0.5em 0;
}

/*
 *---------------------------------------------------------------
 * RESPONSIVE SLIDER JS PLUGIN
 *---------------------------------------------------------------
 *
 */

.jsSlides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.jsSlides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.jsSlides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.jsSlides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

/*
 *---------------------------------------------------------------
 * LIVE SEARCH
 *---------------------------------------------------------------
 *
 */

.searchBox {
    border-bottom: 1px solid var(--border-color);
}

.search_wrap {
}

.search {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.search input {
    background: #E3E3ED;
    border-radius: 5px;
    padding: 0.7em 0.7em 0.7em 55px;
    color: #101034;
    border: 0;
}

.search span {
    background: #E3E3ED;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 0;
    border-right: solid white 1px;
    width: 40px;
    color: #101034;
    margin: 0;
    left: 0;
    top: 0;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: var(--body-semi);
}
::-moz-placeholder { /* Firefox 19+ */
    color: var(--body-semi);
}
:-ms-input-placeholder { /* IE 10+ */
    color: var(--body-semi);
}
:-moz-placeholder { /* Firefox 18- */
    color: var(--body-semi);
}

.closeSearch {
    float:right;
    padding:10px 20px;
    margin: 2px;
    cursor: pointer;
}

.liveSearch {
    background-color: #666;
    left: -9999px;
    min-height: auto;
    position: relative;
    top:54px;
    z-index: 999;
}

.liveSearch.active {
    background-color: #666;
    overflow: scroll;
    min-height: 100%;
    left: auto;
    opacity: 0.9;
}

/*
 *---------------------------------------------------------------
 * 1st HEADER - BREADCRUMBS - PROGRESSBAR
 *---------------------------------------------------------------
 *
 */

.header {
    background: var(--purple);
    display: flex;
    flex-direction: column;
    align-content: start;
    align-items: start;
    justify-content: space-between;
}

.header > div:first-child {
    padding: 0 0.9em;
}

.header .logo {
    max-width: 120px;
    width: 100%;
    display: flex;
    min-height: 60px;
    padding-left: 10px;
}

.header .logo a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.header .logo img {
    width: 100%;
    min-width: 100px;
}

.header .icon_wrap {
    border-left: 1px solid #8b63e4;
    position: relative;
    /*width: 200px;*/
    height: 60px;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px ;
}

.header .icon_wrap_two {
    /*position: absolute;*/
    height: 60px;
    right: 100px;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.header .icon_wrap_three {
    border-left: 1px solid #8b63e4;
    background: var(--dark--purple);
    position: relative;
    /*width: 200px;*/
    height: 60px;
    /*right: 51px;*/
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px ;
}

.header .icon {
    /*max-width: 100px;*/
    width: 100%;
    display: grid;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

.header .icon:after {
    position: absolute;
    content: '6';
    width: 25px;
    height: 25px;
    display: none;
    justify-content: center;
    align-items: center;
    right: 15px;
    color: var(--white);
    border-radius: 25px;
    border: 1px solid var(--white);
    font-size: 12px;
    top: 0;
}

.header .icon span {
    background: var(--black);
    border: 2px solid var(--light-purple);
    width: 36px;
    height: 36px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    overflow: hidden;
    font-size: 0.8em;
    position: relative;
}

.header .icon_wrap_three .icon span {
    border: 0;
}

/*.header .icon span img {*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    object-fit: cover;*/
/*}*/

.header .icon span img {
    /*max-width: 60px;*/
    border-radius: 100px;
    position: absolute;
    z-index: 1;
}

.header .icon:hover img {
    border: 2px solid var(--white);
}

.header .icon_wrap_three .icon > div {
    display: none;
    color: var(--white);
    font-size: 0.8em;
}

.cell .owner,
.cell .owner,
.actionTable .owner {
    background: var(--black);
    border: 2px solid var(--light-purple);
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.cell .owner a:link {
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.cell .owner:hover {
    background: var(--purple);
}

.header .menublock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header .menublock .menu_wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .menublock .menu_wrap > nav {
    width: 100%;
}

.header .crimson-dawn {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.right_school_menu div >.school_group {
    background: var(--dark--purple);
}

.school_group {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap;
    padding: 1em;
    gap: 0.3em;
    color: var(--white);
    border-top: 1px solid var(--white);
}

#org_select .school_group {
    padding: 0;
}

#org_select .school_group a {
    background: var(--purple );
    color: var(--white);
    padding: 1em;
    width: 100%;
    display: flex;
    flex-direction: row;
}

#org_select .school_group a:hover {
    background: var(--dark--purple);
    color: var(--white);
}

#org_select .school_group a span {
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 100px;
    position: relative;
    outline: 2px solid var(--white);
    margin-right: 0.5em;
    overflow: hidden;
}

.school_group .school_logo {
    width: 20px;
    height: 20px;
    background: var(--white);
    border-radius: 100px;
    padding: 0.2em;
    position: relative;
    outline: 2px solid var(--white);
    margin-right: 0.5em;
}

.school_group .school_logo span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    color: var(--purple);
}

.school_group .school_logo img {
    background: var(--white);
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100px;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
}


#org_select .school_group {
    /*outline: red solid 1px;*/
}

.school_group a.edit {
    background: var(--white);
    color: var(--purple);
    font-size: 0.7em;
    padding: 0.4em 0.8em;
    border-radius: 20px;
    margin-top: 0.5em;
}

.school_group a.edit:hover {
    background: var(--purple );
    color: var(--white);
}


.header .menublock .topmenu {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #8b63e4;
    display: none;
    width: 100%;
}

.header .menublock .topmenu.on {
    display: block;
}

.header .menublock .topmenu li {
    margin: 0;
    position: relative;
    border-bottom: 1px solid #8b63e4;
}

.header .menublock .topmenu li a {
    font-weight: 600;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    font-size: 0.9em;
    padding: 1.2em ;
}

.header .menublock .topmenu li a span {
    margin-top: 2px;
    font-weight: 300;
}


.header .menublock .topmenu li a:hover {
    background: var(--dark--purple);
}

.header .menublock .topmenu li a:before {
    font-family: 'Material Symbols Outlined', serif;
    font-size: 1.2em;
    font-weight: normal;
    content: "chevron_right";
    line-height: 28px;
    color: var(--white);
    left: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .menublock .topmenu li.menuActive > a {
    background: var(--white);
    color: var(--purple);
}

.header .menublock .topmenu li.menuActive > .subNav input:before {
    color: var(--purple);
}

.header .menublock .topmenu li.menuActive a:before {
    color: var(--white);
}

.header .menublock .topmenu li.menuActive > a:before {
    color: var(--purple);
}

.header .menublock .topmenu li a.menuLink2:before {
    content: "check_small";
    font-size: 1.5em;

}

.header .menublock .topmenu li a.menuLink3:before {
    content: "star";

}

.header .menublock .topmenu li a.menuLink3:before {
    font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
}

.header .menublock .topmenu li a.menuLink4:before {
    content: "fiber_manual_record";
}

.header .menublock .topmenu li a.menuLink5:before {
    content: "bar_chart";
}

.header .menublock .topmenu li a.menuLink13:before {
    content: "trophy";

}

.header .hidden ul.topmenu  {
    background: var(--dark-blue);
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    gap: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.header .hidden ul.topmenu li {
    border-top: 2px solid var(--white);
    position: relative;
    width: 100%;
}

.header .hidden ul.topmenu li:before {
    content: '';
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    height: 100%;
    width: 5px;
}



.header .hidden ul.topmenu li:nth-child(1):before { background: var(--audit-col-blue);}
.header .hidden ul.topmenu li:nth-child(2):before { background: var(--audit-col-orange); }
.header .hidden ul.topmenu li:nth-child(3):before { background: var(--audit-col-pink);}
.header .hidden ul.topmenu li:nth-child(4):before { background: var(--audit-col-green);}

.header .hidden ul.topmenu li:nth-child(1):hover a { background: var(--audit-col-blue);}
.header .hidden ul.topmenu li:nth-child(2):hover a { background: var(--audit-col-orange); }
.header .hidden ul.topmenu li:nth-child(3):hover a { background: var(--audit-col-pink);}
.header .hidden ul.topmenu li:nth-child(4):hover a { background: var(--audit-col-green);}

.header .hidden ul.topmenu li.menuActive:nth-child(1) a { background: var(--audit-col-blue); }
.header .hidden ul.topmenu li.menuActive:nth-child(2) a { background: var(--audit-col-orange); }
.header .hidden ul.topmenu li.menuActive:nth-child(3) a { background: var(--audit-col-pink);}
.header .hidden ul.topmenu li.menuActive:nth-child(4) a { background: var(--audit-col-green);}


.header .hidden ul.topmenu li a {
    width: 100%;
    border-radius: 0;
    text-align: left;
}

.header .hidden ul.topmenu li a:after,
.header .hidden ul.topmenu li.menuActive a,
.header .hidden ul.topmenu li.menuActive a:before {
    color: var(--white);
}

.header .hidden ul.topmenu li a:hover {
    background: var(--purple);
    color: var(--white);
}


.header .hidden ul.topmenu li:hover a:before {
    color: var(--white);
}

.hidden {
    display: none;
}

.subNav input {
    width: 65px;
    height: 65px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    cursor: pointer;
    display: block;
}

.subNav input:after {
    font-family: 'Material Symbols Outlined', serif;
    content: 'menu';
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    height: 100%;
}

#click:checked + div.hidden  {
    display: block;
}

.topmenu.child {
    display: block;
}

.topmenu.child li {

}


.icon_wrap_school {
    position: relative;
}




.right_menu_wrap {
    position: relative;
}

.right_top_menu {
    display: none;
    position: absolute;
    z-index: 3;
    top: 60px;
    right: 0;
    width: 250px;
}

.right_school_menu {
    display: none;
    position: absolute;
    z-index: 3;
    top: 60px;
    /*right: 100px;*/
    width: 250px;
    right: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}

.icon_wrap input[type=checkbox],
input[type=checkbox]#trigger_school {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0;

    cursor: pointer;
    position: absolute;
    right: 0;
    display: block;

    z-index:   2;
    margin: 0;
    top: 0;
}


/* Show on larger screens */
@media screen and (min-width: 56.875em) /* 910px */ {
    .icon_wrap input[type=checkbox] {
        /*max-width: 70px;*/
    }
}

/* Show on larger screens */
@media screen and (min-width: 61.5625em) {
    .icon_wrap input[type=checkbox] {
        /*max-width: 80px;*/
    }
}


/*.icon_wrap input[type=checkbox]#trigger_school {*/
/*    right: 80px;*/
/*    outline: 1px sienna solid;*/
/*}*/

/*.icon_wrap_school:hover {*/
/*    background: var(--dark--purple);*/
/*}*/

.icon_wrap #trigger:checked ~ .right_top_menu.profile_menu {
    display: block;
}

#trigger_school:checked ~ .right_school_menu {
    display: block;
}


.right_top_menu {
    background: var(--dark--purple);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.right_top_menu.profile_menu {
    background: var(--purple);
}

.icon_wrap_school .right_top_menu {
    background: var(--dark-blue);
}

.icon_wrap_school .right_top_menu p {
    padding: 1em;
    margin: 0;
    color: var(--white);
}

.right_top_menu ul {
    box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    overflow: hidden;
    list-style: none;
    padding: 0;
    margin: 0;
}

.right_top_menu ul li a {
    border-top: 1px solid var(--white);
    text-decoration: none;
    padding: 1em ;
    display: block;
    color: var(--white);
}

.right_top_menu ul li a:hover {
    background: var(--dark--purple);
}

.right_top_menu ul li:last-child a {
    border-bottom: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.right_school_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.filterwrap {
    background: var(--white);
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.5em;
    border-left: 1px solid #110e3d;
}

.filterwrap:after {
    position: absolute;
    border-left: 1px solid #110e3d;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 39px;
    font-family: 'Material Symbols Outlined', serif;
    content: "arrow_drop_down";
    color: var(--black);
    font-size: 30px;
    right: 0;
    top: 0;
}

.addfilterwrap {
    background: #110e3d;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.5em;
    border: 1px solid white;
    color: red;
}

.addfilterwrap select {
    color: white;
}

.addfilterwrap:after {
    position: absolute;
    border-left: 1px solid #110e3d;
    display: flex;
    height: 50px;
    width: 55px;
    content:' ';
    background-size: 30px;
    color: var(--black);
    right: 0;
    top: 0;
}


.filterbutton {
    background: var(--white);
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.5em;
    border-left: 1px solid #110e3d;
    text-overflow: ellipsis;
    padding-right: 38px;
    cursor: pointer ;
}

.filterbutton input {
    position: relative;
    z-index: 1;
    background: none;
    padding: 10px 35px 10px 10px;
    text-align: left;
    font-size: 16px;
    height: 39px;
    width: 100%;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.filterbutton:after,
.filterbutton:before {
    position: absolute;
    border-left: 1px solid var(--dark-blue);
    height: 39px;
    width: 39px;
    background: var(--white);
    color: var(--green);
    z-index: 1;
    right: 0;
    top: 0;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.filterbutton:after{
    content: "check_circle"; /* name of the icon */

}

.filterbutton:before {
    content: "do_not_disturb_on"; /* name of the icon */
    color: var(--red);
    z-index: 0;
}

.filterbutton:hover:before {
    z-index: 2;
}

.sidebar select {
    position: relative;
    z-index: 1;
    padding: 0 35px 0 10px;
    font-size: 16px;
    height: 39px;
    border: 0;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis ;
}

/* CAUTION: IE hackery ahead */
select::-ms-expand {
    display: none; /* remove default arrow on ie10 and ie11 */
}

.sidebar h3 {
    color: var(--white);
    font-weight: inherit;
    font-size: 0.9em;
    margin-top: 0;
}

.sidebar h2 {
    color: var(--white);
    font-weight: 700;
}


.sidebar .search_box {
    background: var(--white);
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.5em;
    border-left: 1px solid var(--dark-blue);


    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar .search_box input {
    background: var(--white);
    border: 0;
    width: 100%;
    padding: 10px 35px 10px 10px;
    height: 55px;

}

.sidebar .search_box button {
    background: var(--purple);
    color: var(--white);
    position: absolute;
    font-family: 'Material Symbols Outlined', serif;
    content: 'search';
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    padding: 0 0 0 0;
    border: 1px solid var(--white);
    cursor: pointer;
    border-radius: 5px;
    height: 100%;
    width: 50px;
    right: 0;
    top: 0;
}

.sidebar .search_box button:hover {
    background: var(--dark-blue);
}

.submitWelcomewrap  {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid var(--white);
    border-radius: 20px;
    padding: 2em 0.5em;
    gap: 1em;
}

.submitWelcomewrap h3 {
    font-size: var(--font-size-lg);
    text-align: center;
    font-weight: 600;
    margin: 0;
}

.submitWelcomewrap p {
    text-align: center;
    color: var(--white);
    line-height: 2;
    font-size: 0.9em;
    margin: 0;
}

.submitww.pill_button {
    /*padding-right: 40px;*/
    /*background-image: url("../assets/icon_w.svg");*/
    background-color: var(--red);
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: right 10px center;
    border-color: 1px solid var(--white);
    display: flex;
    gap: 10px;
}

.submitww.pill_button svg {
    display: flex;
    height: 20px;
    fill: var(--white);
    transition: transform .7s ease-in-out;
    pointer-events: none;
}

.submitww.pill_button:hover {
    background-color: var(--dark-blue);
    /*background-image: url("../assets/icon_w.svg");*/
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: right 10px center;
    border-color: 1px solid var(--white);
}

.submitww.pill_button:hover svg {
    transform: rotate(360deg);
}

.pill_button.session-expired {
    display: inline-flex;
    margin-right: auto;
}

.pill_button.session-expired button {
    background: none;
    border: 0;
    color: var(--white);
}

/*
 *---------------------------------------------------------------
 * LEFT FILTERS *
 *---------------------------------------------------------------
 *
 */

.filters details {
    background: var(--white);
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 1.5em;
    text-overflow: ellipsis;
    cursor: pointer ;
}

.filters summary {
    position: relative;
    z-index: 1;
    background: none;
    padding: 0 35px 0 10px;
    text-align: left;
    font-size: 0.9em;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--dark-blue);;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis ;
    min-height: 39px;
    line-height: 39px;
}

.filters details[open] summary {
    border-bottom: 1px solid var(--dark-blue);
    background: var(--light-gray);
}

.filters summary:before {
    position: absolute;
    height: 100%;
    width: 39px;
    background: var(--white);
    color: var(--dark-blue);
    border-left: 1px solid var(--dark-blue);
    display: flex;
    font-size: 20px;
    line-height: 39px;
    align-content: center;
    justify-content: center;
    z-index: 1;
    right: 0;
    top: 0;
}

.filters details[open] summary:before {
    background: var(--light-gray);
}

.filters details div {
    padding: 5px;
    display: flex;
    align-content: center;
    justify-content: start;
    gap: 5px;
    cursor: default;
}

.filters details div label {
    font-size: 0.8em;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.filters details div input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #000;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

/* Hide default checkbox */
.filters details div input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #000;
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

/* Checked state */
.filters details div input[type=checkbox]:checked {
    background-color: var(--purple);
    border-color: var(--purple);
}

.filters details div input[type=checkbox]:checked + label {
    color: var(--purple);
}

/* Add checkmark */
.filters details div input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filters details div input[type=checkbox]:hover {
    border: 2px solid var(--purple);
}

.filters .scroll {
    overflow-y: scroll;
    max-height: 250px;
    width: 100%;
    display: block;
}

.filters span {
    position: relative;
    width: 18px;
    height: 18px;
    background: var(--light-gray);
    border-radius: 30px;
    color: var(--gray);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filters label {
    display: flex;
    gap: 5px;
}

.filters .rec:nth-child(1)  label span:nth-child(-n + 1){ background: #38a478; color: var(--white); }
.filters .rec:nth-child(2)  label span:nth-child(-n + 2){ background: #9fd173; color: var(--white); }
.filters .rec:nth-child(3)  label span:nth-child(-n + 3){ background: #f1b772; color: var(--white); }
.filters .rec:nth-child(4)  label span:nth-child(-n + 4){ background: #ff6a00; color: var(--white); }
.filters .rec:nth-child(5)  label span:nth-child(-n + 5){ background: #c20013; color: var(--white); }
.filters .rec:nth-child(6)  label span:nth-child(-n + 6){ background: var(--black); color: var(--white); }


.filters .activeFilters {
    margin-top: 1.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}


.filters .activeFilter {
    margin-bottom: 0.5em;
}

.filters .clearAll a,
.filters .activeFilter a {
    display: inline-flex;
    gap: 5px;
    font-size: 10px;
}

.filters .activeFilter a {
    border: 1px solid var(--white);
    background: none;
}

.filters .clearAll a span,
.filters .activeFilter a span {
    color: var(--white);
    background: none;
    font-size: 14px;
}

.filters .activeFilter a {
    font-size: 10px;
}

/*
 *---------------------------------------------------------------
 * NO RESULTS
 *---------------------------------------------------------------
 *
 */

.noResult {
    background: var(--light-purple);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 50vh;
    gap: 20px;
    padding: 20px;
}

.noResult h2 {
    margin: 0;
}

.noResult p {
    max-width: 400px;
    margin: 0;
}

/*
 *---------------------------------------------------------------
 * 1st HEADER - BREADCRUMBS - PROGRESSBAR
 *---------------------------------------------------------------
 *
 */

.header-max-height {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.breadcrumbs {
    width: 100%;
}

.progress_bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    width: 100%;
    background: #D3C2F7;
    z-index: 1;
}

.progress_bar > div {
    max-width: 0;
    height: 5px;
    width: 100%;
    background: var(--purple);
    animation: progressBar 3s ease-in-out;
    animation-fill-mode:both;
}

/*
 *---------------------------------------------------------------
 * 2nd HEADER - BREADCRUMBS - PROGRESSBAR
 *---------------------------------------------------------------
 *
 */

.second_header {
    width: 100%;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
    padding: 2em 0;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.second_header > div > div {
    text-align: left;
    width: 100%;
}

.sub_header {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.second_header .round_button {
    display: block;
    margin: 0 auto 10px auto;
    text-align: center;
}

.info_link_wrapper {
    text-align: center;
}

.second_header .crumbs {
    font-size: 0.8em;
    margin-bottom: 10px;
    text-align: center;
}

.second_header  a.audit_link {
    font-size: 0.8em;
    margin-bottom: 0;
}

.second_header .sec_sub_menu {
    display: flex;
    align-items: center;
    margin: 0 auto;
    flex-direction: column;
}

.second_header .sec_sub_menu a:first-child {
    margin-bottom: 10px;
}

.second_header > div {
    max-width: 100%;
    width: 100%;
}

.header_wrap {
    display:flex;
    flex-direction: column;
    width:100%;
}

.header_wrap .left {
    width: 100%;
    min-height: 110px;
}

.header_wrap .right {
    width: 100%;
}

.btm {
    border-bottom: 1px solid var(--border-color);
}

/*
 *---------------------------------------------------------------
 * User Detail (Left Menu)
 *---------------------------------------------------------------
 *
 */

.user_wrap {
    margin-left: auto;
    display: none;
}

.user_wrap > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.user_wrap .user_icon {
    background: #FFF;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    display: block;
}

.user_wrap .user_title {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-right: 0.5rem;
}

.user_wrap .user_title a {
    font-size: 0.8em;
    color: #110F3E;
}

.user_wrap .user_title a.name {
    font-weight: 600;
}

.user_wrap .alert-notify {
    background-color: var(--purple);
    margin-left: 1rem;
    margin-right: 0;
}

.user_wrap .alert-notify span {
    color: var(--white);
}

/*
 *---------------------------------------------------------------
 * SITE SPECIFIC CONTENT
 *---------------------------------------------------------------
 *
 */

.mainMenu {
    padding: 0;
    margin: 0;
    margin-bottom: 1.5em;
}

.mainMenu li {
    display: inline-block;
    list-style: none;
    margin-right: 0.5em;
}

.content {
    padding: 1em 0;
}

.footer {
    border-top: 1px solid black;
    text-align: right;
    padding: 1em 0;
}

.small_gutter {
    padding: 1.5em;
}

.gutter {
    padding: 1em;
}

.side_gutter {
    padding: 0 1em;
}

.mobile_gutter {
    padding: 0 10px;
}

.bottom_gutter {
    padding-bottom: 1em;
}

/*
 *---------------------------------------------------------------
 * Left Purple Menu Column
 *---------------------------------------------------------------
 *
 */

.left_col {
    background: var(--purple);
    width: 100%;
}

.left_col div form {
    margin-bottom: 0;
}

.left_col .left_inner {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.left_col .left_inner > div {
    display: flex;
    justify-content: end;
    width: 50%;
}

.left_col .left_inner > div > div {
}

.left_col .left_inner > div:first-child {
    display: flex;
    justify-content: start;
}

.left_col .left_inner > div:first-child img {
    max-width: 200px;
    width: 100%;
}

.alert-notify {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    margin-right: 10px;
}

.alert-notify span {
    font-size: 1.4rem;
    color: var(--purple);
}

.menu span {
    font-size: 2rem;
    color: var(--white);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mainmenu {
    display: none;
}

.mainmenu.on {
    display: block;
}

.on {
    display: block;
}

/*
 *---------------------------------------------------------------
 * REPORTS Menu
 *---------------------------------------------------------------
 *
 */

.sidebar .menuIcon {
    display: none;
}

.sidebar ul.mainMenu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sidebar ul.mainMenu li {
    display: flex;
    margin: 0;
}

.sidebar ul.mainMenu li a {
    text-align: center;
    padding: 0.5em 0 ;
    width: 100%;
    font-size: 1.1em;
    color: var(--dark-blue);
    border-radius: 6px;
    border: var(--white) solid 1px;
    background: var(--white);
}

.sidebar ul.mainMenu li a {
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar ul.mainMenu li a:hover {
    background: var(--purple);
    border: var(--purple) solid 1px;
    color: var(--white);
}

.sidebar ul.mainMenu.disabled li a {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    border: var(--white) solid 1px;
    background: var(--dark-blue);
    color: var(--white);
}

.sidebar ul.mainMenu li.menuActive a {
    background: var(--purple);
    color: var(--white);
}

.sidebar ul.mainMenu li.menuActive a {
    background: var(--purple);
    color: var(--white);
}

/*
 *---------------------------------------------------------------
 * REPORTING PAGE
 *---------------------------------------------------------------
 *
 */

.reports-page .home_welcome_wrap > div {
    width: 100%;
    max-width: 90%;
}

.reports-page .right_col {
    /*background: var(--light-gray);*/
}

.home_welcome_wrap .reportWrap {
    margin-top: 4em;
}

.reportWrap {
    background: var(--white);
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    overflow: hidden;
    display: grid;
    gap: 2em 0;
}

.reportWrap hr {
    border: 0;
    border-top: 1px dashed var(--border-color);
}

.reportbox .filterappWrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    z-index: 1;
}

.reportbox .filterappWrap > div {
    display: grid;
    /*place-items: center;*/
}



.reportbox .filterappWrap .divide {
    display: none;
}

.reportWrap .reportbox {
    position: relative;
    display: grid;
}

.filter_report_select,
.filter_report_input {
    position: relative;
    width: 100%;
    background: var(--white);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.filter_report_select select,
.filter_report_input input[type="text"],
.filter_report_input input[type="date"]{
    position: relative;
    z-index: 1;
    padding: 0 35px 0 10px;
    font-size: 12px;
    height: 39px;
    line-height: 39px;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.filter_report_select::after {
    content: "arrow_drop_down";
    position: absolute;
    right: 0;
    top: 0;
    width: 39px;
    height: 100%;
    border-left: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Material Symbols Outlined', serif;
    font-size: 30px;
    color: var(--border-color);
    pointer-events: none;
}

.pm-btn-minus {
    --size: 36px;
    --purple: #6d28d9;

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid var(--border-color);
    background: var(--white);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: 150ms ease;
}

.reportbox .filterappWrap .one {
    display: none;
}

/* icon */
/*.pm-btn::before {*/
/*    content: "+";*/
/*    font-size: 22px;*/
/*    font-weight: 700;*/
/*    line-height: 1;*/
/*}*/

/* hover: white version + minus */
.pm-btn-minus:hover {
    border: 2px solid var(--purple);
    background: var(--purple);
    color: var(--white);
}

.pm-btn-minus:before {
    content: "−";
    color: var(--purple);
}

.filterappWrap:first-of-type .pm-btn-minus:before {
    content: " ";
    color: var(--purple);
}

.pm-btn-minus:hover:before {
    color: var(--white);
}

/* keyboard focus */
.pm-btn-minus:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.35);
    outline-offset: 3px;
}

.pm-btn-add {
    --size: 36px;
    --purple: #6d28d9;

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 2px solid var(--purple);
    background: var(--white);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    transition: 150ms ease;
}

/* icon */
/*.pm-btn::before {*/
/*    content: "+";*/
/*    font-size: 22px;*/
/*    font-weight: 700;*/
/*    line-height: 1;*/
/*}*/

/* hover: white version + minus */
.pm-btn-add:hover {
    border: 2px solid var(--purple);
    background: var(--purple);
    color: var(--white);
}

.pm-btn-add:before {
    content: "+";
    color: var(--purple);
}

.pm-btn-add:hover:before {
    color: var(--white);
}

.add_button {
    position: relative;
}

.pm-btn-add span {
    content: 'Add';
    display: block;
    position: absolute;
    /*left: -34px;*/
    padding-left: 42px;
    line-height: 34px;
    color: var(--purple);
    width: 200px;
}

/* keyboard focus */
.pm-btn-add:focus-visible {
    outline: 3px solid rgba(109, 40, 217, 0.35);
    outline-offset: 3px;
}















.reportWrap .small-gutter {
    padding: 1em;
}

.gap-2 {
    gap: 1em;
}

.gap-1-5 {
    gap: 1.5em;
}

.flex-col {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.reportbox > div {
    /*background-color: var(--white);*/
    display: grid;
    gap: 1em;
}

.reportbox .audit_icon {
    margin: 0 auto;
}

.reportbox h2, .reportbox h3 {
    margin: 0;
}

.reportbox h3 {
    font-size: 1em;
}

.reportbox  p {
    font-size: 0.8em;
}

.row-1,
.row-2,
.row-3,
.row-4,
.row-5 {
    gap: 1em;
}

.row-1 .reportbox {
    border: 1px solid var(--border-color);
}

.row-2 .reportbox > div {
    text-align: center;
}

.grid {
    display: grid;
}

.reportWrap .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

.grid-template-columns-2 {
    grid-template-columns: 1fr;
}

.grid-template-columns-3 {
    grid-template-columns: 1fr;
}

.grid-template-columns-5 {
    grid-template-columns: 1fr;
}

.grid-template-columns-3 > div {
    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
}

.grid-full {
    grid-column: 1 / -1;
}

.reportWrap .icon {
    max-width: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

.reportWrap .icon span {
    background: var(--black);
    border: 2px solid var(--light-purple);
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.reportWrap .logs {
    display: grid;
    gap: 1em;
}

.reportWrap .log {
    background: var(--light-gray);
    border: 1px dashed var(--border-color);
    border-radius: 5px;
    gap: 1em;
}

.panel-container .legalWrap,
.popup-panel .questWrap,
.ac_popup .questWrap {
    background: var(--light-gray);
    border-radius: 5px;
    padding: 0.5em;
    margin-bottom: 20px;
    color: var(--body-regular);
    border: 1px solid var(--border-color);
}

.lea9 .popup-panel .questWrap, .lea9 .questWrap { border-color: var(--audit-col-blue); background: var(--audit-col-bluel); }
.cur9 .popup-panel .questWrap, .cur9 .questWrap { border-color: var(--audit-col-orange); background: var(--audit-col-orangel); }
.inf9 .popup-panel .questWrap, .inf9 .questWrap { border-color: var(--audit-col-pink); background: var(--audit-col-pinkl); }
.phy9 .popup-panel .questWrap, .phy9 .questWrap { border-color: var(--audit-col-green); background: var(--audit-col-greenl); }

.ac_popup .questWrap {
    margin-bottom: 0;
}

.ac_popup footer {
    background: var(--light-gray);
    border-top: 1px solid var(--light-purple );
}

.ac_popup section {
    display: grid;
}

.ac_popup .gap-2 {
    margin-bottom: 2em;
}

.ac_popup h2 {
    margin-top: 0;
}

.popup-panel .questWrap b {
    color: var(--black);
}

.panel-container .legalWrap p {
    margin: 0;
    font-size: 14px;
}

.reportWrap .log a {
    color: var(--body-regular);
}

.reportWrap .log a b {
    color: var(--black);
}

.reportWrap .log a:hover,
.reportWrap .log a:hover b {
    color: var(--purple);
}

.reportWrap.no-data {
    display: none;
}

.reportWrap.no-preview .no-data {
    display: flex;
    flex-direction: column;
    align-content: center;
    text-align: center;
}




.report-preview-table table {
    width: 100%;
    border-bottom: 1px solid #d6d3ea;
    border-right: 1px solid #d6d3ea;
}

.report-preview-table th, .report-preview-table td {
    padding: 1em;
    text-align: center;
    border-top: 1px solid #d6d3ea;
    border-left : 1px solid #d6d3ea;
}

/* ---------- desktop ---------- */
@media (min-width: 900px) {

    .report-preview-table th:first-of-type,
    .report-preview-table td:first-of-type{
        text-align: left;
    }

}






/* ---- export ---- */
.export{
    width: 100%;
    display: grid;
    gap: 16px;
    align-items: center;
    margin: 2em 0;
}

/* On mobile: label on top, options below */
.export__label{
    margin: 0;
    /*font-size: clamp(18px, 3.2vw, 28px);*/
}

/* Options row */
.export__options{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}

/* Each choice = radio + icon card */
.export__option{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    user-select: none;
    padding: 0;
}

/* Custom radio */
.export__radio{
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #c6c8d4;
    background: transparent;
    display: grid;
    place-items: center;
    flex: 0 0 26px;
}

.export__radio::before{
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform .15s ease;
    background: var(--purple);
}

.export__radio:checked{
    border-color: var(--purple);
}

.export__radio:checked::before{
    transform: scale(1);
}

/* Card "file" icon */
.export__card{
    width: 58px;
    aspect-ratio: 4 / 5;       /* keeps a file-like shape */
    border-radius: 10px;
    display: grid;
    place-items: center;
    position: relative;
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}

/* folded corner */
.export__card::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 26%;
    height: 26%;
    background: rgba(0,0,0,.18);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    border-top-right-radius: 10px;
}

/* label text inside card */
.export__text{
    font-size: clamp(12px, 2.4vw, 16px);
}

.export__card--pdf{ background: #ff4b4b; }
.export__card--word{ background: #25a7ff; }
.export__card--csv{ background: #7ddc1f; }

.export__option:focus-within .export__radio{
    outline: 3px solid rgba(59,130,246,.25);
    outline-offset: 3px;
}

/* Desktop: label left, options right */
@media (min-width: 720px){
    .export{
        grid-template-columns: auto 1fr;
        gap: 24px;
    }

    .export__options{
        justify-content: flex-start;
    }
}








.left_nav {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #8b63e4;
}

.left_nav li.menuitem {
    margin: 0;
    position: relative;
    border-bottom: 1px solid #8b63e4;
}


.left_nav li.menuitem .menu_group {
    display: none;
}

.left_nav li.menuitem:hover .menu_group {
    display: block;
}

.left_nav li.menuitem > a {
    font-weight: 300;
    color: white;
    display: flex;
    text-decoration: none;
    transition:.6s ease;
    font-size: 0.9em;
    padding: 1.2em;
}

.left_nav li.menuitem a > div {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    justify-content: start;
    text-align: left;
    padding-left: 30px;
}

.left_nav li.menuitem > a span.access {
    position: absolute;
    display: flex;
    top: 3px;
    left: 0;
    content: '';
    width: 20px;
    height: 20px;
}

.left_nav li.menuitem > a span.access:after {
    position: absolute;
    background: url("../assets/icon_w.svg") no-repeat center;
    top: 0;
    left: 0;
    content: '';
    width: 20px;
    height: 20px;
}

.left_nav li.menuitem > a span.access:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 20px;
    height: 20px;
}

.left_nav li.menuitem > a:hover span.access:after {
    opacity: 0;
}

.left_nav li.menuitem > a span.material-symbols-outlined {
    position: absolute;
    top: 3px;
    left: 0;
}

.left_nav li.menuitem a b {
    margin-bottom: 0.5em;
    font-weight: 600;
}

.left_nav li.menuitem > a:hover {
    color: #3b0e9f;
    border-radius: 3px;
    background: white;
}

.menu_group {
    margin-top: 1em;
}

.left_nav .sub_menu {
    list-style: none;
    background: var(--black);
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.left_nav .sub_menu li {
    border-bottom: 1px solid var(--border-color);
    display: flex;
}

.left_nav .sub_menu li:last-child {
    border: 0;
}

.left_nav .sub_menu li a {
    color: var(--white);
    padding: 1em 0 1em 2.5em;
    display: flex;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.8em;
}

.left_nav .sub_menu li a:hover {
    background: var(--white);
    color: var(--purple);
}

.left_nav .sub_menu li a.icon {
    position: relative;
}

.left_nav .sub_menu .material-symbols-outlined {
    font-size: 15px;
    margin-right: 5px;
}

.m_group {
    display: none;
    width: 100%;


    visibility:hidden;
    opacity:0;
    transition: all 0.5s ease-out;
}

.m_group.active {
    display: flex;
    visibility: visible;
    opacity: 1;
}

.task_boxes {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.task_boxes > div {
    flex: 1 0 100%;
    margin: 5px;
    height: 80px;
    background: var(--light-gray);
    border-radius: 6px;
}

/*
 *---------------------------------------------------------------
 * EVIDENCE PAGE
 *---------------------------------------------------------------
 *
 */

.reportbox.error {
    background: var(--lorange);
    border: 1px solid var(--morange);
    border-radius: 10px;
}

.reportboxGroup {
    display: grid;
    gap: 1rem;
}

/* Show on larger screens */
@media screen and (min-width: 56.875em) /* 910px */ {
    .reportboxGroup {
        grid-template-columns: 180px 1fr;
        gap: 1rem;
        align-items: start;
    }
}

.reportboxGroup h2 {
    font-size: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 180px;
    padding-top: 0.4rem;
}

.reportboxGroup .filterGroup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.reportboxGroup .filterGroup > div select {
    width: 100%;
}

/* Desktop: variant column counts */
@media screen and (min-width: 56.875em) /* 910px */ {
    .filterGroup.two   { grid-template-columns: repeat(2, 1fr); }
    .filterGroup.three { grid-template-columns: repeat(3, 1fr); }
    .filterGroup.four  { grid-template-columns: repeat(4, 1fr); }
    .filterGroup.five  { grid-template-columns: repeat(5, 1fr); }
}


.tickGroup label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 32px;
}

/* Hide the real checkbox, replace with pseudo-element on label */
.tickGroup input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* The circle */
.tickGroup label::before {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ccc;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

/* Checked circle */
.tickGroup label:has(input:checked)::before {
    border-color: var(--green);
}

/* The tick mark */
.tickGroup label::after {
    content: '';
    display: none;
    position: absolute;
    left: 8px;
    top: 50%;
    width: 6px;
    height: 10px;
    border: 2px solid var(--green);
    border-top: none;
    border-left: none;
    transform: translateY(-60%) rotate(45deg);
}

.tickGroup label:has(input:checked)::after {
    display: block;
}

/* Focus for accessibility */
.tickGroup label:has(input:focus-visible)::before {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.tickGroup .evidence-mode-toggle {
    display: none;
}


/*
 *---------------------------------------------------------------
 * ACCESSIBILTY PLAN REVIEW
 *---------------------------------------------------------------
 *
 */

.action_boxes {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: var(--light-purple);
    border: 2px solid var(--purple);
    border-radius: 6px;
}

.action_boxes > div {
    padding: 2em 0;
}

.action_boxes h4 {
    margin-top: 0;
    color: var(--purple);
}

.action_boxes h4 span {
    font-size: 1.8em;
}

.action_boxes p {
    margin-top: 0;
    color: var(--body-semi);
}

/*
 *---------------------------------------------------------------
 * REPORTS TABLE REVIEW
 *---------------------------------------------------------------
 *
 */

@keyframes plan-preview-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.plan-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
}

.plan-preview__meta {
    margin: 0;
    opacity: 0.75;
    font-size: 0.95em;
}

.plan-preview__wrap {
    position: relative;
    margin-top: 1em;
}

.plan-preview__loader {
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    padding: 1em 0;
}

.plan-preview__spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #d9d9d9;
    border-top-color: #6f42c1;
    border-radius: 50%;
    display: inline-block;
    animation: plan-preview-spin 0.8s linear infinite;
}

.plan-preview__content {
    transition: opacity 0.2s ease;
}

.plan-preview__table-scroll-wrap {
    width: 100%;
    border: 1px solid var(--border-color);
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    display: grid;
    margin: 1em 0;
}

.plan-preview__table-wrap {
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
}

.plan-preview__table {
    width: auto;
    border-collapse: collapse;
}

.plan-preview__table th,
.plan-preview__table td {
    padding: 0.75em;
    text-align: left;
    vertical-align: top;
}

.plan-preview__table thead th {
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}

.plan-preview__table tbody tr + tr td {
    border-top: 1px solid #efefef;
}

.plan-preview__empty,
.plan-preview__summary,
.plan-preview__note {
    margin: 0.75em 0 0;
}


.plan-preview__table .col-xs { min-width: 80px; }
.plan-preview__table .col-small { min-width: 120px; }
.plan-preview__table .col-compact { min-width: 150px; }
.plan-preview__table .col-medium { min-width: 180px; }
.plan-preview__table .col-large { min-width: 660px; }

.plan-preview__table .col-nowrap {
    white-space: nowrap;
}

.plan-preview__table .col-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

.plan-preview__table th,
.plan-preview__table td {
    width: auto;
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--lighter-gray);
}

.plan-preview__table th {
    background: var(--light-purple);
    color: var(--purple);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.plan-preview__table tr:nth-child(even) {
    background: var(--light-gray);
}

.plan-preview__table tr:hover {
    background: var(--lblue);
    transition: background 0.2s ease;
}

.plan-preview__table td {
    color: var(--body-regular);
}







.userWrap {
    background: var(--white);
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    overflow: hidden;
    display: grid;
    /* gap: 2em 0; */

}

.user-preview__table-scroll-wrap {
    width: 100%;
    border-top: 1px dashed var(--border-color);
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    display: grid;
    margin: 1em 0;
}

.user-preview__table-wrap {
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
}

.user-preview__table {
    width: auto;
    border-collapse: collapse;
}

.user-preview__table th,
.user-preview__table td {
    width: auto;
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px dashed var(--border-color);
}



.user-preview__table tbody tr:nth-child(2n+1) {
    background: var(--light-gray);
}

.user-preview__table th {
    color: var(--purple);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.user-preview__table td {
    color: var(--body-regular);
}

.user-preview__table .col-xs { min-width: 80px; }
.user-preview__table .col-small { min-width: 120px; }
.user-preview__table .col-compact { min-width: 150px; }
.user-preview__table .col-medium { min-width: 180px; }
.user-preview__table .col-large { min-width: 660px; }

.user-preview__table .col-nowrap {
    white-space: nowrap;
}

.user-preview__table .col-wrap {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media screen and (min-width: 56.875em) /* 910px */ {
    .email.ellispis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 150px;
    }

    .user-preview__table td {
        border-right: 1px dashed var(--border-color);
    }
}

.user-image-name {
    display:flex;
    align-items:center;
    gap:0.75em;
}

.edit-user-popup {
    background:#fff;
    border-radius:1em;
    padding:2em;
    max-width:700px;
    width:100%;
    box-sizing:border-box;
}

.user-section-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5em;
    background: green;
}

.user-section-spread {
    display:grid;
    gap:1.5em;
}

.user-label-input label {
    display:block;
    margin-bottom:0.4em;
    font-size:12px;
}

.user-section-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.user-label-input .item,
.user-label-input .item-select {
    /*background: var(--white);*/
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.user-label-input .item input,
.user-label-input .item-select select {
    border: 0;
    width: 100%;
    outline: none;
    box-shadow: none;
}

.user-label-input .item-select:after {
    position: absolute;
    border-left: 1px solid var(--border-color);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 39px;
    font-family: 'Material Symbols Outlined', serif;
    content: "arrow_drop_down";
    color: var(--black);
    font-size: 30px;
    right: 0;
    top: 0;
}


@media screen and (min-width: 56.875em) /* 910px */ {

    .user-section-spread {
        grid-template-columns:1fr 1fr;
    }

}



/*
 *---------------------------------------------------------------
 * ACTION BOX SLIDER
 *---------------------------------------------------------------
 *
 */

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

.fix_actions .rslides .action_boxes {
    min-height: 250px;
}

.fix_actions .rslides_tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.fix_actions .rslides_tabs li {
    width: 20px;
    height: 20px;
    background: var(--purple);
    margin: 0 10px;
    color: transparent;
    border-radius: 20px;
    font-size: 0;
}

.fix_actions .rslides_tabs li.rslides_here {
    background: var(--light-purple);
}

.fix_actions .rslides_tabs li a {
    display: flex;
    width: 20px;
    height: 20px;
}

/*
 *---------------------------------------------------------------
 * ROUND BUTTON STYLING
 *---------------------------------------------------------------
 *
 */

.round_button {
    border-radius: 100px;
    background: var(--light-gray);
    padding: 0.5em 1em;
    color: var(--black);
    font-weight: 300;
    text-decoration: none !important;
    display: flex;
}

.round_button:hover {
    background: var(--purple);
    color: var(--white);

}

.round_button_small {
    border-radius: 100px;
    background: var(--light-gray);
    padding: 0.5em 1em;
    font-weight: 300;
    color: var(--black);
    text-decoration: none;
    display: inline-flex;
}

.round_button_small.purple {
    background: var(--purple);
    font-weight: 600;
    color: var(--white);

}

/*
 *---------------------------------------------------------------
 * Foundation Audit (details & Summary)
 *---------------------------------------------------------------
 *
 */

.left.detial {
    padding-top: 20px;
}

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    font-family: 'Material Symbols Outlined', serif;
    content: "arrow_back_ios_new";
}
details[open] summary::before {
    content: "keyboard_arrow_down";
    font-size: 30px;
}


details.details_drop_down > summary::-webkit-details-marker {
    display:none;
}
details.details_sub_drop_down summary::-webkit-details-marker {
    display:none;
}

.details_drop_down > summary {
    position: relative;
    cursor: pointer;
    margin-bottom: 2em;
    border-radius: 5px;
    border: 1px solid var(--purple);
    background: var(--light-gray);
    padding: 10px 10px 10px 20px ;
}

/*.ac.audit_group_2 > summary,*/
/*.ac.audit_group_3 > summary,*/
/*.ac.audit_group_4 > summary { border-left: solid 10px; border-color: var(--purple); background: var(--white); }*/

.lea9.details_drop_down > summary, .audit_group_3 > summary { border-left: solid 10px; border-color: var(--audit-col-blue); background: var(--audit-col-bluel); }
.phy9.details_drop_down > summary, .audit_group_4 > summary { border-left: solid 10px; border-color: var(--audit-col-green); background: var(--audit-col-greenl); }
.inf9.details_drop_down > summary, .audit_group_2 > summary { border-left: solid 10px; border-color: var(--audit-col-pink); background: var(--audit-col-pinkl); }
.cur9.details_drop_down > summary, .audit_group_1 > summary { border-left: solid 10px; border-color: var(--audit-col-orange); background: var(--audit-col-orangel); }

.details_drop_down > summary:hover {
    background: var(--purple);
}

.actionStatus0 summary:hover {
    background: black;
    color: white;
}
/*.details_drop_down > summary:hover,*/
/*.ac.audit_group_1 > summary:hover { background: var(--morange); }*/
/*.ac.audit_group_2 > summary:hover,*/
/*.ac.audit_group_3 > summary:hover,*/
/*.ac.audit_group_4 > summary:hover { background: var(--purple); }*/

.details_drop_down > summary h3 {
    margin: 0;
    line-height: 30px;
}

.details_drop_down > summary:hover h3 {
    color: var(--white);
}

.details_drop_down > summary:before {
    position: absolute;
    color: var(--black);
    right: 15px;
    top: 15px;
    font-family: 'Material Symbols Outlined', serif;
    font-size: 20px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    border-radius: 100px;
    padding-top: 2px;
}

/*Audit & Recommendations drop down bars*/

.lea9 > summary:before, .audit_group_3 > summary:before { color: var(--audit-col-blue); }
.phy9 > summary:before, .audit_group_4 > summary:before { color: var(--audit-col-green); }
.inf9 > summary:before, .audit_group_2 > summary:before { color: var(--audit-col-pink); }
.cur9 > summary:before, .audit_group_1 > summary:before { color: var(--audit-col-orange); }

.lea9 > summary:hover, .audit_group_3 > summary:hover { background: var(--audit-col-blue); }
.phy9 > summary:hover, .audit_group_4 > summary:hover { background: var(--audit-col-green); }
.inf9 > summary:hover, .audit_group_2 > summary:hover { background: var(--audit-col-pink); }
.cur9 > summary:hover, .audit_group_1 > summary:hover { background: var(--audit-col-orange); }

.details_drop_down > summary:hover:before,
.lea9 > summary:hover:before, .audit_group_1 > summary:hover:before,
.phy9 > summary:hover:before, .audit_group_4 > summary:hover:before,
.inf9 > summary:hover:before, .audit_group_2 > summary:hover:before,
.cur9 > summary:hover:before, .audit_group_3 > summary:hover:before { color: var(--white); }

/*Action center drop down bars*/

.ac.actionStatus0 > summary { border-left: solid 10px; border-color: #6E5AE6; background: #c0b6ff;}
.ac.actionStatus1 > summary { border-left: solid 10px; border-color: #F59E0B; background: #fee6c8;}
.ac.actionStatus2 > summary { border-left: solid 10px; border-color: #fc5551; background: #ffc7c7;}
.ac.actionStatus3 > summary { border-left: solid 10px; border-color: #22C55E; background: #c8f3d8;}

.pu2_itemWrap.actionStatus0 { border-left: solid 1px; border-color: #6E5AE6; background: #c0b6ff;}
.pu2_itemWrap.actionStatus1 { border-left: solid 1px; border-color: #F59E0B; background: #fee6c8;}
.pu2_itemWrap.actionStatus2 { border-left: solid 1px; border-color: #fc5551; background: #ffc7c7;}
.pu2_itemWrap.actionStatus3 { border-left: solid 1px; border-color: var(--green); background: var(--green);}

.pu2_itemWrap.actionStatus3 select { color: var(--white); }

.pu2_itemselectWrap.actionStatus0:after { border-left: 1px solid #6E5AE6; }
.pu2_itemselectWrap.actionStatus1:after { border-left: 1px solid #F59E0B; }
.pu2_itemselectWrap.actionStatus2:after { border-left: 1px solid #fc5551; }
.pu2_itemselectWrap.actionStatus3:after { border-left: 1px solid #22C55E; color: var(--white); }

.ac.actionStatus0 > summary:hover { background: #6E5AE6;}
.ac.actionStatus1 > summary:hover { background: #F59E0B;}
.ac.actionStatus2 > summary:hover { background: #fc5551;}
.ac.actionStatus3 > summary:hover { background: #22C55E;}

.ac.actionStatus0 > summary:before { color: #6E5AE6; }
.ac.actionStatus1 > summary:before { color: #F59E0B; }
.ac.actionStatus2 > summary:before { color: #fc5551; }
.ac.actionStatus3 > summary:before { color: #22C55E; }

.ac.actionStatus0 > summary:hover:before,
.ac.actionStatus1 > summary:hover:before,
.ac.actionStatus2 > summary:hover:before,
.ac.actionStatus3 > summary:hover:before { color: var(--white) }


.details_drop_down.blue > summary:before { background: var(--black); }

.details_sub_drop_down {
    margin-bottom: 20px;
}

details.details_sub_drop_down > summary::-webkit-details-marker {
    display:none;
}

details.details_sub_drop_down summary {
    border: 1px solid ;
    border-left: 5px solid;
    border-color: var(--black);

    position: relative;
    padding: 10px 50px 10px 10px ;

    cursor: pointer;
}

details.details_sub_drop_down summary:before {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-size: 26px;
    text-align: center;
    line-height: 40px;
    height: 100%;
    width: 50px;
    right: 0;
    top: 0;
}

details.details_sub_drop_down summary:before { color: var(--black); }

.lea9 .details_sub_drop_down summary:before { color: var(--audit-col-blue); }
.lea9 .details_sub_drop_down summary { border-color: var(--audit-col-blue); }

.inf9 details.details_sub_drop_down summary:before { color: var(--audit-col-pink); }
.inf9 details.details_sub_drop_down summary { border-color: var(--audit-col-pink); }

.cur9 details.details_sub_drop_down summary:before { color: var(--audit-col-orange); }
.cur9 details.details_sub_drop_down summary { border-color: var(--audit-col-orange); }

.phy9 details.details_sub_drop_down summary:before { color: var(--audit-col-green); }
.phy9 details.details_sub_drop_down summary { border-color: var(--audit-col-green); }

details.details_sub_drop_down summary .title {
    color: var(--black);
    font-weight: 400;

    overflow: visible;
    white-space: normal;
    text-overflow: unset;
}

details.details_sub_drop_down[open] summary .title {
    overflow: visible;
    white-space: inherit;
    text-overflow: inherit;
}

details.details_sub_drop_down summary .title strong {
    display: block;
}

/*
 *---------------------------------------------------------------
 * QUESTION DETAIL PAGE
 *---------------------------------------------------------------
 *
 */

.question_title {
    font-weight: 200;
    color: var(--black);
    font-style: italic;
    font-size: 3vw;
}

.question_group_title {
    font-weight: 300;
    font-size: 1.2em;
}

.question_group_title span {
    font-weight: 600;
}

.question_actions {
    display: flex;
    flex-direction: column;

    align-items: center;
    width: 100%;
    margin-top: 1em;
}

/*
 *---------------------------------------------------------------
 * ACTION LINK BUTTONS (Used on all pages)
 *---------------------------------------------------------------
 *
 */

a.action_link {
    border-radius: 100px;
    background: var(--border-color);
    padding: 0.5em 1em;
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
}

.action_link.yes {
    background: var(--green);
}

.action_link.no {
    background: var(--red);
}

.action_link.partially {
    background: var(--orange);
}

.action_link:hover {
    background: var(--purple);
}

.action_link.black {
    background: var(--black);
}

.action_link.black:hover {
    background: var(--purple);
}


.action_link.purple {
    background: var(--purple);
}

.action_link.purple:hover {
    background: #D3C2F7;
    color: var(--purple);
}

.fix_actions h3 {
    margin-top: 0;
}

.top_gutter {
    padding: 1.5em 0;
    position: relative;
}

/*
 *---------------------------------------------------------------
 * QUESTION DETAIL PAGE (SELECTIONS YES/NO/PRIORITY BUTTONS)
 *---------------------------------------------------------------
 *
 */

.question_selections {
    display: flex;
    flex-direction: row;

    align-items: center;
    width: 100%;
    margin-top: 1em;
}

.question_selections > a {
    margin-right: 10px;
}

.question_selections a.question_links {
    border-radius: 100px;
    background: var(--border-color);
    padding: 0.5em 1em;
    font-weight: 500;
    color: var(--white);
    font-size: 1.2em;
    text-decoration: none;
    display: inline-flex;
}

.question_links.yes {
    background: var(--green);
}

.question_links.no {
    background: var(--red);
}

.question_links.partially {
    background: var(--orange);
}

.question_links:hover {
    background: var(--purple);
}

/*
 *---------------------------------------------------------------
 * QUESTION DETAIL PAGE (GRAY BUTTONS)
 *---------------------------------------------------------------
 *
 */

.com_up_save {
    flex-direction: row;
    flex-wrap: wrap;
}

.com_up_save {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1em;
}

.com_up_save a:hover {
    border: var(--purple);
    background: var(--purple);
    color: var(--white);
}

.com_up_save {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1em;
}

.action_link_wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 2.5em;
}

a.audit_link,
button.audit_link {
    border-radius: 100px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
    font-weight: 500;
    color: var(--body-semi);
    font-size: 1.2em;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    margin-bottom: 1em;
    width: 100%;
}

button.audit_link {
    width: auto;
}

a.audit_link.purple,
button.audit_link.purple {
    background: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
    cursor: pointer;
}

.orange a.audit_link.purple {
    background: var(--orange);
    border: 1px solid var(--orange);
}

.darkblue a.audit_link.purple {
    background: var(--dark-blue);
    border: 1px solid var(--dark-blue);
}

.disabled a.audit_link.purple {
    background: var(--gray);
    border: 1px solid var(--gray);
}

a.audit_link.delete {
    background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
    cursor: pointer;
}



a.audit_link.purple:hover,
button.audit_link.purple:hover,
a.audit_link.delete:hover {
    background: var(--black);
    border: 1px solid var(--black);
}

a.audit_link.green,
button.audit_link.purple {
    background: var(--green);
    border: 1px solid var(--green);
    color: var(--white);
    cursor: pointer;
}

a.audit_link.green:hover,
button.audit_link.purple:hover {
    background: var(--black);
    border: 1px solid var(--black);
}


a.audit_link.black,
.action_link_form.black input[type=button],
.action_link_form.black input[type=submit],
.action_link_form.black input[type=reset],
button.audit_link.black {
    cursor: pointer;
    background: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}

.action_link_form.black input[type=button]:hover,
.action_link_form.black input[type=submit]:hover,
.action_link_form.black input[type=reset]:hover,
button.audit_link.black:hover {
    cursor: pointer;
    background: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
}

a.audit_link:hover,
button.audit_link:hover {
    background: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
}

.small,
a.audit_link.small,
button.audit_link.small{
    font-size: 1.2em;
    font-weight: 500;
}


a.audit_link.min_width,
button.audit_link.min_width{
    min-width: 140px;
    width: 100%;
    display: block;
}

a.audit_link.max_width,
button.audit_link.max_width{
    display: block;
    max-width: 250px;
    width: 100%;
    margin: auto;
}

.action_link_form input[type=button],
.action_link_form input[type=submit],
.action_link_form input[type=reset],
.action_link_form input[type="file"]::file-selector-button {
    border-radius: 100px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
    font-weight: 500;
    color: var(--body-semi);
    font-size: 1.2em;
    text-decoration: none;
    text-align: center;
    margin-bottom: 1em;
    width: 100%;
}

.action_link_form input[type="file"]::file-selector-button {
    margin-bottom: 0;
    cursor: pointer;
}

.action_link_form input[type="file"]::file-selector-button:hover {
    background: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
}


.action_link  input[type=submit],
.action_link  input[type=button] {
    background: none;
    border: 0;
    color: var(--white);
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 500;
    padding: 0.5em 1em;
}

.action_link.rounded {
    border-radius: 100px;
    margin-top: 1rem;
}

.action_block {
    display: flex;
    flex-wrap: wrap;
    flex-basis:50%;
}

.action_block > *  {
}

.action_popup .question_group_title {
    margin-bottom: 0;
}

.flex-column {
    display: flex;
    flex-wrap:wrap;
}

.flex-column .column-item-one {
    flex-basis:20%;
    display: none;
    align-items: center;
}

.flex-column .column-item-two {
    flex-basis:100%;
}

.cat_sat_score {
    display: flex;
    flex-direction: row;
    align-items: start;
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 2em 0;
}

.cat_sat_score > div {
    border-left: 1px solid var(--border-color);
    padding: 1em;
}

.cat_sat_score > div:first-child {

    border: 0;
}

.content_sections_two {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    height: 100%;
}

/*
 *---------------------------------------------------------------
 * RIGHT TOP (SCORE)
 *---------------------------------------------------------------
 *
 */

.score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 400px;
    margin: 0 auto;

    padding: 20px 0;
}

.score > div {
    width: 100%;
    text-align: left;
    flex-wrap: wrap;
}

.score .progress {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.score span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #209A9C;
    font-weight: 600;
    background-size: contain;
    max-width: 50%;
    margin-top: 20px;
}

.score .progress_icon {
    display: flex;
    width: 50%;
    height: 100%;
    min-height: 160px;
}

.score .out_of {
    font-size: 0.8em;
}

.score  div:last-child {
    text-align: center;
}

/*
 *---------------------------------------------------------------
 * MISC!
 *---------------------------------------------------------------
 *
 */

.max_300  {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
}

.max_400  {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

.max_800  {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.max_50  {
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
}

.max_70  {
    max-width: 70%;
    margin: 0 auto;
    width: 100%;
}

.max_80  {
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
}

.max_90  {
    max-width: 90%;
    margin: 0 auto;
    width: 100%;
}



/*
 *---------------------------------------------------------------
 * MISC!
 *---------------------------------------------------------------
 *
 */

.t_wrap, .t_one {
    display: flex;
    flex-direction: row;
}

.tb {
    padding: 1em;
    display: flex;
    align-items: center;
}

/*
 *---------------------------------------------------------------
 * Recommendations NEW TABLE Stylings & Structure
 *---------------------------------------------------------------
 *
 */

.sheet {
    align-items: start;
    position: relative;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-left:  1px solid var(--border-color);
}

.checks {
    display: none;
    position: absolute;
    left: -32px;
}

.checks > div {
    display: flex;
    align-items: start;
    justify-content: center;
    min-height: 35px;
    width: 35px;
}

.scroller {
    overflow-x: auto;
}

.scroller-y-hide {
    overflow-y: hidden;
}

.row .cell:last-child  {
    border-right: 0;
}

.row.head .cell {
    display: none;
}

.row {
    grid-template-columns: 150px 1fr 120px 140px 230px  100px;
    border-left: 1px solid var(--border-color);
}

.row.ac {
    grid-template-columns:125px 1fr 120px 100px 120px 100px 125px 135px 150px 130px 150px 125px 125px;
}

.row:hover > div {
    background: #ebf2fe;
}

.row:hover > div > div a {
    color: var(--black);
}

.row.lea9,
.row.ac.lea9 {
    border-left: 5px solid var(--audit-col-blue);
}

.row.phy9,
.row.ac.phy9 {
    border-left: 5px solid var(--audit-col-green);
}

.row.inf9,
.row.ac.inf9 {
    border-left: 5px solid var(--audit-col-pink);
}

.row.cur9,
.row.ac.cur9 {
    border-left: 5px solid var(--audit-col-orange);
}

.head.row {
    border-left: 5px solid var(--black);
}

@media screen and (min-width: 56.875em) /* 910px */ {

    .grid-table {
        min-width: 1000px; /* allows horizontal scroll when narrow */
    }

    .row {
        display: grid;
    }

    .add_wrap .answers {
        flex-direction: column;
    }

    .row:nth-child(1) .cell:nth-child(1) {
        text-align: left;
    }

    .row.head .cell {
        display: block;
    }

    .row .cell {
        border-right: 1px solid var(--border-color);

    }

    .scroller-set-height {
        border-bottom: 1px solid var(--border-color);
        height: 100vh;
        max-height: 500px;
    }
}

@media screen and (min-width: 90em) {
    .scroller-set-height {
        max-height: 900px;
    }
}

.cell {
    padding: 10px;
}

.row .cell {
    border-bottom: 1px solid var(--border-color);

}

.row:nth-child(1) .cell {
    padding: 10px 20px;
    text-align: center;
}

.minw_100 {
    min-width: 100px;
}

.minw_200 {
    min-width: 200px;
}

/* moved to repsonsive group */
/*.minw_300 {*/
/*    min-width: 300px;*/
/*}*/

.minw_400 {
    min-width: 400px;
}

.add_wrap {
    background: #ebf2fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add_wrap .answers {
    flex-direction: row;
    justify-content: center;
}

.rec_wrap {
    padding: 20px;
    contain: layout;
}

.rec_wrap a {
    color: var(--body-regular);
}

.rec_wrap b,
.rec_wrap a b {
    color: var(--black);
}

.qw_wrap, .center_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.center_wrap.section {
    align-items: start;
}

.qw_wrap > span {
    color: var(--gold);
}

.qw_wrap > span.no {
    color: transparent;
}

.qw_wrap > div {
    color: transparent;
    font-size: 0;
}

.ap_wrap > span {
    color: var(--green);
    font-size: 1.7em;
    cursor: pointer;
}

.ap_wrap > span.no {
    color: var(--red);
}

.center_wrap .deleteAction span {
    color: var(--red);
    transition: .2s ease;
}

.center_wrap .deleteAction:hover {
    background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
}

.center_wrap .deleteAction:hover span {
    color: var(--white);
}

.center_wrap.section a {
    font-weight: 600;
}

.priority_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    font-weight: 600;
}

.section_wrap {
    display: flex;
    align-items: center;
    justify-content: left;
    color: var(--black);
    font-weight: 600;
}

.HighPriority {
    background: var(--lred);
}

.MediumPriority {
    background: var(--lorange);
}

.LowPriority {
    background: var(--lgreen);
}

.cost_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cost {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pu_item .cost {
    justify-content: start;
}

.pu_item .cost span {
    width: 38px;
    height: 38px;
    font-size: 20px;
}

.cost span {
    position: relative;
    width: 18px;
    height: 18px;
    background: var(--light-gray);
    border-radius: 30px;
    color: var(--gray);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cost label {
    display: flex;
    gap: 5px;
}

.cost .rec:nth-child(1)  label span:nth-child(-n + 1){ background: #38a478; color: var(--white); }
.cost .rec:nth-child(2)  label span:nth-child(-n + 2){ background: #9fd173; color: var(--white); }
.cost .rec:nth-child(3)  label span:nth-child(-n + 3){ background: #f1b772; color: var(--white); }
.cost .rec:nth-child(4)  label span:nth-child(-n + 4){ background: #ff6a00; color: var(--white); }
.cost .rec:nth-child(5)  label span:nth-child(-n + 5){ background: #c20013; color: var(--white); }
.cost .rec:nth-child(6)  label span:nth-child(-n + 6){ background: var(--black); color: var(--white); }

.chooseWrap {
    position: relative;
}

.chooseHide {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    visibility: hidden;
    z-index: calc(infinity);
    padding-top: 20px;
    padding-bottom: 20px;
    transition:
            opacity 0.4s ease,
            transform 0.4s ease,
            visibility 0.4s ease;
}

.chooseWrap:hover .chooseHide {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.chooseWrap .chooseBlock  {
    box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
    background: var(--white);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    padding: 0.7em;
    gap: 5px;
    font-weight: 300;
    font-size: 0.8em;
}

.chooseBlock:after {
    top: 0;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.chooseBlock:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: var(--white);
    border-width: 10px;
    margin-left: -10px;
}

.chooseBlock > div {
    background: var(--white);
    border: 1px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7em;
    color: var(--black);
    white-space: nowrap;
}

.chooseBlock.accessPlan > div {
    padding: 0.2em;
}

.chooseWrap .chooseBlock p {
    text-align: center;
    font-size: 0.8em;
    margin-top: 0;
}

.chooseWrap a .chooseBlock > div {
    background: var(--white);
    border: 1px solid var(--black);
}

.chooseWrap a .chooseBlock > div.inProgress {
    background: var(--lorange);
    border: 1px solid var(--lorange);
}

.chooseWrap a .chooseBlock > div.overdue {
    background: var(--lred);
    border: 1px solid var(--lred);
}

.chooseWrap a .chooseBlock > div.complete {
    background: var(--lgreen);
    border: 1px solid var(--lgreen);
}

.chooseWrap a .chooseBlock > div:hover  {
    background: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}

.chooseWrap a .chooseBlock > div.inProgress:hover  {
    background: var(--orange);
    border: 1px solid var(--orange);
    color: var(--white);
}

.chooseWrap a .chooseBlock > div.overdue:hover  {
    background: var(--red);
    border: 1px solid var(--red);
    color: var(--white);
}

.chooseWrap a .chooseBlock > div.complet:hover  {
    background: var(--green);
    border: 1px solid var(--green);
    color: var(--white);
}

.chooseBlock.accessPlan > div.yes {
    background: var(--lgreen);
    border: 1px solid var(--lgreen);
    cursor: pointer;
}

.chooseBlock.accessPlan > div.yes:hover {
    background: var(--green);
}

.chooseBlock.accessPlan > div.no {
    background: var(--lred);
    border: 1px solid var(--lred);
    cursor: pointer;
}

.chooseBlock.accessPlan > div.no:hover {
    background: var(--red);
}

.chooseBlock.accessPlan > div.yes span {
    color: var(--green);
}

.chooseBlock.accessPlan > div.yes:hover span {
    color: var(--white);
}

.chooseBlock.accessPlan > div.no span {
    color: var(--red);
}

.chooseBlock.accessPlan > div.no:hover span {
    color: var(--white);
}

/*
 *---------------------------------------------------------------
 * TABLE Stylings & Structure
 *---------------------------------------------------------------
 *
 */

.overflow_scroll {
    overflow: scroll;
    overflow-y: hidden;
}

table.cat_table.custom_table {
    border-left: 1px solid var(--white);
}

table {
    width: 100%;
    border-collapse: collapse;
}

caption {
    font-weight: 600;
    padding: 1em;
    text-align: left;
    color: var(--black);
}

caption span {
    font-weight: 300;
}

caption > div {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

caption a.audit_link {
    width: auto;
    font-size: 1em;
    margin: 0 auto;
}

th, td {
    padding: 1rem;
    text-align: left;
    vertical-align: middle;
}

.custom_table th {
    border: 0;
}

table.cat_table th {
}

.tablecheckwrap > div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}

/* Hide default checkbox */
.black-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid  var(--border-color);
    background-color: #fff;
    cursor: pointer;
    position: relative;
}

/* Checked state */
.black-checkbox:checked {
    background-color: var(--purple);
    border-color: var(--purple);
}

/* Add checkmark */
.black-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

.black-checkbox:hover {
    border: 1px solid var(--purple);
}

.grid-table_wrap.is-checked .grid-table .row {
    background: red;
}

td {
    display:block;
    width:100%;
}

td:last-child {
    border-right: 0;
}

tr.border_pink td:first-child {
    border-right: 5px solid violet;
}

tr.border_blue td:first-child {
    border-right: 5px solid #1CB0F6;
}

tr.border_yellow td:first-child {
    border-right: 5px solid #FFC800;
}

tr.border_green td:first-child {
    border-right: 5px solid #209A9C;
}

.custom_table tr:first-child {
    border-top: 0;
    border-right: 1px solid crimson;
}

.custom_table tbody {
    border-right: 1px solid crimson;
}

.custom_table thead tr:first-child {
    border-top: 0;
    border-right: 0;
}

th {
    font-weight: bold;
}

.cat_table b {
    color: var(--black);
}

.dismissed_actions .cat_table b {
    opacity: 0.4;
}

.audit_table caption {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.audit_table tr {
    border: 1px solid var(--border-color);
}

.audit_table tr:hover {
    background: #ebf2fe
}

.audit_table tr:first-child {
    border-top: 0;
}

.question {
    color: #333;
}

.info-icon {
    background: #673ab7;
    border-radius: 30px;
    font-size: 0.9em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-left: auto;
}

.info-icon a {
    color: var(--white);
}

.info-icon:hover {
    background: var(--black);
}

.button-group button {
    padding: 1em 0;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1em;
    min-width: 90px;
}

.button-group.add_dismiss button {
    max-width: 150px;
    min-width: 100px;
    width: 100%;
}

button:focus {outline:0;}

.button-group button:last-child {
    margin-bottom: 0;
}

.btn {
    background-color: var(--lighter-gray);
    color: var(--black);
    font-size: 1.2em;
    font-weight: 500;
}

.btn2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* hide native radios */
.btn2 input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }

/* pill labels */
.btn2 label,
.btn3 div,
.btn3 a,
.pu_item .delete,
.pu_item .save {
    background: var(--white);
    border:1px solid var(--dark-gray);
    color:#555;
    transition:.2s ease;

    text-align: center;
    padding: 1em;
    /*border: none;*/
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8em;
    min-width: 90px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.btn3 a {
    color: var(--black);
}

.btn3 input[type="checkbox"] {
    display: none;
}

.btn3 fieldset {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
}

.niceWork .btn3 fieldset {
    justify-content: start;
}

.btn3 label {
    padding: 0;
}

.btn3 div span {
    line-height: 0.5em;
}

.btn2 label:hover {
    border: 1px solid var(--black);
    background: var(--light-gray);
}

/* active states */
.btn3 input[type="checkbox"]:checked + div.yes { background: var(--green); border:1px solid var(--green); color: var(--white); }
.btn2 input[type="radio"]:checked + label.yes { background: var(--green); border:1px solid var(--green); color: var(--white); }
.btn3 input[type="checkbox"]:checked + div.no { background: var(--red); border:1px solid var(--red); color: var(--white); }
.btn2 input[type="radio"]:checked + label.no  { background: var(--red); border:1px solid var(--red); color: var(--white); }
.btn2 input[type="radio"]:checked + label.par { background: var(--orange); border:1px solid var(--orange); color: var(--white); }
.btn3 input[type="checkbox"]:checked + div.par { background: var(--orange); border:1px solid var(--orange); color: var(--white); }


.btn2 label span {
    line-height: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn2 label:nth-of-type(1) span,
.btn3 input[type="checkbox"] + div.yes span { color: var(--green); }
.btn2 input[type="radio"]:checked + label:nth-of-type(1) span,

.card.red .btn2 label span,
.card.green .btn2 label span,
.btn3 input[type="checkbox"]:checked + div.yes span { color: var(--white); }

.btn2 label:nth-of-type(2) span,
.btn3 input[type="checkbox"] + div.no span { color: var(--red); }
.btn2 input[type="radio"]:checked + label:nth-of-type(2) span,
.btn3 input[type="checkbox"]:checked + div.no span{ color: var(--white); }







.test .btn2 input[type="radio"] {
    display: none; /* hide the original radio */
}

.test .btn2 label {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 6px;
    background-color: pink;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

/* when radio is checked → label turns red */
.test .btn2 input[type="radio"]:checked ~ label {
    background-color: red;
}

.btn.black {
    background-color: var(--black);
    color: #fff;
}

.btn:hover,
.btn-yes:hover,
.btn-no:hover,
.btn-partially:hover {
    background-color: var(--purple);
}

.btn-yes {
    background-color: #0d9488;
    color: #fff;
}

.btn-no {
    background-color: #ef4444;
    color: #fff;
}

.btn-partially {
    background-color: #f59e0b;
    color: #fff;
    border: 2px solid #fff;
}

.button-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.table_group {
    min-width: 50px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: start;
}

.table_number {
    margin-right: 10px;
    font-weight: 600;
}

.table_question {
    padding-right: 0.2em;
    font-size: 0.9em;
}

.user_info > div {
    font-size: 0.8em;
    margin-bottom: 10px;
    color: var(--white);
}

.user_info .icon {
    background: var(--white);
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    width: 50px;
    height: 50px;
}

.user_info .title {
    font-weight: 600;
    font-size: 1em;
}

.one_by_one {
    display: flex;
    flex-direction: column;
}

.supporting_actions .comment {
    min-width: 200px;

}

.supporting_actions .comment > div {
    text-align: center;
}

.supporting_actions .comment span {
    color: var(--border-color);
    margin: 0 auto;
}

.user_img {
    max-width: 100px;
    border-radius: 100px;
    overflow: hidden;
    margin: 0 auto;
}

.action_status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    font-weight: 600;
}

.attachments_link {
    text-decoration: underline;
    color: var(--purple);
    cursor: pointer;
}

.as {
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}

.tb_green {
    background: var(--tb-green);
}

.tb_red {
    background: var(--tb-red);
}

.tb_orange {
    background: var(--tb-orange);
}

.table_hr {
    border: 0;
    margin: 0;
    border-top: 1px solid var(--border-color);
}

thead {
    display: none;
}

.purplebackground {
    color: white;
    background: var(--purple);
}

.purplebackground th:first-child {
    background: var(--white);
}

.graybackground {
    color: white;
    background: var(--border-color);
}

.graybackground th:first-child {
    background: var(--white);
}

.greenbackground {
    color: #209A9C;
    background: #DEF0F0;
}

.redbackground {
    color: white;
    background: #ef4444;
}

.redbackground {
    color: white;
    background: var(--tb-red);
}

.recommended_action_link {
    display: flex;
    flex-direction: column;
}

.recommended_action_link a {
    text-align: center;
}

.recommended_action_link a {
    margin-top: 20px;
}

.notes {
    font-style: italic;
    font-weight: 300;
}

.score_group {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 50px;
}

.score_group > * {
    display: inline-block;
}

.text-center {
    text-align: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.guidance {
    min-width: 240px;
    display: flex;
    flex-direction: column;
}

.guidance_box {
    border-radius: 20px;
}

.guidance .btn {
    width: 100%;
}
.guidance .btn:first-child {
    margin-bottom: 10px;
}

.guidance_box .question_title {
    font-size: 1.5em;
    font-weight: 600;
}

.accordion {
    background-color: var(--white);
    color: #444;
    cursor: pointer;
    padding: 1em 0;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-weight: 600;
    font-size: 1.17em;
    border-top: 1px solid var(--gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion.blue {
    background-color: #110e3d;
    border: 0;
    color: var(--white);
    border-bottom: 1px solid #4d4b7a;
}

.active, .accordion:hover {
    color: var(--purple);
}

.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

.panel.blue {
    background-color: #110e3d;
    border: 0;
    color: var(--white);
}

.panel.blue a {
    color: var(--white);
}

.task_table_footer,
.report_tasks {
    background: var(--light-gray);
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.report_tasks {
    background: var(--white);
    padding: 0;
    text-align: center;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr;*/
}


.task_table_footer select,
.report_tasks select {
    position: relative;
    z-index: 1;
    /*margin: 50px;*/
    /*width: 150px;*/
    padding: 0 35px 0 10px;
    font-size: 16px;
    height: 39px;
    border: 0;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis ;
}

.task_table_footer .filterwrap,
.report_tasks .filterwrap {
    border-radius: 20px;
    display: flex;
    margin: 2em auto 0 auto;
    max-width: 170px;
    border: 1px solid var(--black);
}

.task_table_footer .icon,
.report_tasks .icon {
    background: var(--purple);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    color: var(--white);
}

.report_tasks .orange .icon {
    background: var(--orange);
}

.report_tasks .darkblue .icon {
    background: var(--dark-blue);
}

.report_tasks .gold .icon {
    background: var(--gold);
}

.report_tasks .red .icon {
    background: var(--red);
}

.report_tasks .blue .icon {
    background: var(--blue);
}

.report_tasks .green .icon {
    background: var(--green);
}


.report_tasks .icon.accessBadge svg {
    width: 24px;
    fill: var(--white);
}

.task_table_footer > div,
.report_tasks > div {
    border-top: 1px solid var(--border-color);
    background: var(--white);
    padding: 2em 0 4em 0;
    width: 100%;
    transition: background 0.2s ease, color 0.2s ease;
}

.task_table_footer > div {
    background: var(--light-gray);
}

.report_tasks > div:hover {
    background: var(--light-gray);
}

.task_table_footer a,
.report_tasks a {
    display: flex;
    margin: 2em auto 0 auto;
    max-width: 170px;
}


.sidebar .panel {
    background: none;
    color: var(--white);
}

.sidebar .panel a {
    color: var(--white);
}

/*
 *---------------------------------------------------------------
 * SCROLL BAR STYLING
 *---------------------------------------------------------------
 *
 */

/* width */
.supporting_actions::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.supporting_actions::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.supporting_actions::-webkit-scrollbar-thumb {
    background: var(--black);
}

/* Handle on hover */
.supporting_actions::-webkit-scrollbar-thumb:hover {
    background: var(--purple);
}

body::-webkit-scrollbar {
    width: 10px;
}

/* Track */
body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
body::-webkit-scrollbar-thumb {
    background: var(--black);
}

/* Handle on hover */
body::-webkit-scrollbar-thumb:hover {
    background: var(--purple);
}

.scroll_box::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.scroll_box::-webkit-scrollbar-track {
    background: var(--light-gray);
}

/* Handle */
.scroll_box::-webkit-scrollbar-thumb {
    background: var(--purple);
}

/* Handle on hover */
.scroll_box::-webkit-scrollbar-thumb:hover {
    background: var(--purple);
}

/*
 *---------------------------------------------------------------
 * ACTION POPUP
 *---------------------------------------------------------------
 *
 */

.action_popup {
    border-radius: 20px;
}

.action_popup h2 {
    font-size: 1em;
    color: var(--gray);
    font-weight: 400;
}

.action_popup input, .action_popup select, .action_popup textarea {
    border: 0;
    border-bottom:1px solid #d1d1d1;
}

.action_popup select {
    padding-right: 50px;
    color: var(--purple);
}

.column-item-two.dropdown {
    position: relative;
}

.column-item-two.dropdown:after {
    position: absolute;
    right: 0;
    width: 50px;
    height: 100%;
    display: block;
}

.column-item-two select {
    position: relative;
    z-index: 2;
}

/*
 *---------------------------------------------------------------
 * LOGIN PAGE
 *---------------------------------------------------------------
 *
 */

.login_box_wrap {
    display: flex;
    flex-flow: row wrap;
    height: 100%;

    flex-direction: column;
}

.login_box_wrap > div:first-child {
    width: 100%;
}

.login_box_wrap > div {
    flex: 1 1 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login_box_wrap > div:first-child {
    background: var(--purple);
    padding: 2em;
}

.login_wrap h1 {
    color: var(--purple);
}

.login_wrap a {
    color: var(--purple);
}

.login_wrap  p {
    font-size: 0.8em;
}

.login_wrap input {
    width: 100%;
    border-radius: 5px;
}

.section_header {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.section_header a {
    max-width: 250px;
    margin: 0;
}

/*
 *---------------------------------------------------------------
 * ACCESS CUSTOM TABLE (/audit/detail/foundation)
 *---------------------------------------------------------------
 *
 */

.access_custom_table .custom-table {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.access_custom_table .table-row:first-child {
    border-left: 1px solid #ddd;
}

.access_custom_table .table-row {
    border-bottom: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.access_custom_table .title {
    font-weight: bold;
}

.access_custom_table .col {
    padding: 1em 1em;
}

.access_custom_table .color {
    background: var(--pink);
    width: 5px;
    display: flex;
    align-items: stretch;
    align-content: center;
}

.access_custom_table .col-question {
    flex: 2;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.access_custom_table .col-question span {
    color: var(--black);
    font-size: 1.2em;
}

.access_custom_table .col-question a {
    color: var(--black);
    font-weight: bold;
    font-size: 1.2em;
}

.access_custom_table .col-answer {
    flex: 1;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: baseline;
}

.access_custom_table .col-guidance {
    flex: 1.2;
    display: flex;
    gap: 6px;
}

.access_custom_table .col-guidance > div {
    flex: 1.2;
    display: flex;
    gap: 6px;
    justify-content: space-between;
    align-content: unset;
    align-items: baseline;
    flex-direction: column;
}

/*
 *---------------------------------------------------------------
 * MIN & MAX width SEE TABLE (/audit/detail/foundation Guidance...)
 *---------------------------------------------------------------
 *
 */


.minwid200 {
    min-width: 230px;
}

.maxwid200 {
    max-width: 350px;
    display: block;
}

.max200 {
    max-width: 200px;
    display: block;
}

.maxwid400 {
    max-width: 400px;
    display: block;
}

/*
 *---------------------------------------------------------------
 * ACCESS CUSTOM ICONS (/audit/detail/foundation)
 *---------------------------------------------------------------
 *
 */

.update_action.icons_wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.update_action .icon {
    height: 40px;
    width: 40px;
    background: var(--light-gray);
    border:1px solid var(--dark-gray);
    background: var(--white);
    border-radius: 100px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.update_action .icon .counter-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    border: 1px solid var(--white);
    background: var(--purple);
    color: var(--white);
    border-radius: 100px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5em;
}

.update_action .icon:hover {
    background: var(--purple);
    border:1px solid var(--purple);
    color: var(--white);

}

.update_action .icon:before {

}

.update_action .icon span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 *---------------------------------------------------------------
 * ACCESS TASKS (/tasks/ TOP MENU)
 *---------------------------------------------------------------
 *
 */

.task-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: white;
    border-bottom: 1px solid #ddd;
    min-height: 70px;
}

.task-manager-header .task-manager-header-group {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    padding-left: 20px;
    min-height: 70px;
}

.title_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.action-header-wrap .title_toggle {
    gap: 5px;
    width: 100%;
}

.action-header-wrap .title_toggle .pill_button.help {
    min-width: 90px;
    justify-content: space-between;
    padding: 0.3em 1em;
    min-height: 35px;
    display: flex;
}

.action-header-wrap .title_toggle .pill_button.add,
.action-header-wrap .title_toggle .pill_button.red {
    justify-content: space-between;
    padding: 0.3em 1em;
    min-height: 35px;
    background: var(--red);
    border-color: var(--red);
}

.action-header-wrap .title_toggle .pill_button.add:hover,
.action-header-wrap .title_toggle .pill_button.red:hover {
    background: var(--dark-blue);
    border-color: var(--dark-blue);
}

.action-header-wrap .title_toggle .pill_button.add span,
.action-header-wrap .title_toggle .pill_button.red span,
.action-header-wrap .title_toggle .pill_button.help span {
    pointer-events: none;
    /*display: none;*/
}

.level_1 .action-header-wrap .title_toggle button {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.title_toggle button {
    display: none;
    background: none;
    border: 0;
    color: var(--purple);
    cursor: pointer;
    padding: 0 20px;
    /*pointer-events: none;*/
}

.title_toggle button span {
    /*pointer-events: auto;*/
    /*cursor: pointer;*/
    position: relative;
    z-index: -1;
}

.title_toggle button:hover {
    color: var(--black);
}

.task-manager-header .title {
    padding: 20px 0 20px 0 ;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
    display: flex;
    align-content: center;
    justify-content: center;
    gap: 5px;
}

.task-manager-header .title div {
    display: inline-block;
    width: auto;
    font-size: 0;
}

.task-manager-header .title span.material-symbols-outlined {
    color: var(--green);
}

.title_toggle .toggle_wrap {
    display: flex;
    align-items: center;
}

.task-manager-header .search-bar {
    position: relative;
    display: flex;
    border: 1px solid var(--purple);
    border-radius: 30px;
    overflow: hidden;
    flex-grow: 1;
    min-height: 55px;
}

.task-manager-header .search-bar:hover {
    border: 1px solid var(--black);
}

.task-manager-header .search-bar:hover button {
    border: 1px solid var(--black);
    background: var(--black);
}

.task-manager-header .search-bar input {
    border: none;
    padding: 10px 60px 10px 15px ;
    flex-grow: 1;
    outline: none;
    font-size: 16px;
    position: relative;
    z-index: 1;
}

.task-manager-header .search-btn {
    border: 1px solid var(--purple);
    background-color: var(--purple);
    color: white;
    padding: 10px 15px;
    font-size: 1em;
    cursor: pointer;
    position: absolute;
    min-height: 55px;
    z-index: 9;
    right: 0;
    top: 0;
}

.task-manager-header .search-btn span {
    font-size: 1.4em;
}

.task-manager-header .create-btn {
    background-color: var(--purple);
    color: white;
    border: none;
    padding: 12px 15px;
    border-radius: 50px;
    font-size: 1.4em;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 20px;
}

.task-manager-header .create-btn:hover {
    background: var(--black);
}

.task-manager-header .create-btn i {
    display: none;
}

.task-manager-header .create-btn span {
    font-size: 1em;
}

.task-manager-header .progress-box {
    background-color: var(--dark-blue);
    color: white;
    display: block;
    align-items: center;
    justify-content: center;
    max-width: 60px;
    margin-left: auto;
    height: 65px;
    width: 100%;
}

.task-manager-header .progress-box.progress-25, .progress-box.progress-25 { background:var(--bronze) }
.task-manager-header .progress-box.progress-50, .progress-box.progress-50 { background:var(--silver) }
.task-manager-header .progress-box.progress-75, .progress-box.progress-75 { background:var(--gold) }

.filter_help .progress-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.filter_help .progress-icon {
    width: 24px;
    height: 24px;
}

.filter_help .progress-box .progress-content {
    display: flex;
    flex-direction: row;
    color: var(--white);
    gap: 10px;
}

.progress-text {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 24px;
}

.task-manager-header .progress-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    font-size: 0.9em;
    font-weight: bold;
}

.task-manager-header .progress-icon {
    height:  24px;
    width: 24px;
}

.progress-text {
    display: inline-block;
    text-align: right;
}

.filter_box {
    /*display: none;*/
}

.toggleFilters .filter_box {
    display: none;
}

.filter_box.on {
    display: block;
}

.filter_help {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: #110e3d;
    justify-content: space-between;
    border-bottom: 1px solid #8b63e4;
}

.dash-wrap .filter_help .filterIcon {
    display: none;
}

.filter_help > div {
    border-right: 1px solid #8b63e4;
    display: flex;
    width: 33.3%;
}

.dash-wrap .filter_help > div {
    width: 50%;
}

.filter_help > div button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

.filter_help > div:last-child {
    border-right: 0
}

.filter_help > div span,
.filter_help > div a {
    display: flex;
    width: 100%;
    padding: 20px 0;
    justify-content: center;
    color: var(--white);
    cursor: pointer;
}

.filter_help > div span:hover,
.filter_help > div a:hover {
    background: var(--light-purple);
    color: var(--purple);
}

.level_1 .filter_help > div button {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.5;
}

/*
 *---------------------------------------------------------------
 * HOME
 *---------------------------------------------------------------
 *
 */

.home_blocks .holder {
    text-align: center;
}

.home_blocks {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.home_blocks > div {
    width: 100%;
}

.dashboard_wrap {
    border-bottom: 1px solid var(--border-color);
}

.dashboard_wrap .intro {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    width: auto;
}

.dashboard_wrap .intro > div {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    width: auto;
}

.dashboard_wrap .intro h2 {
    margin-top: 2em;
}

.dashboard_wrap .intro a {
    margin: 2.8em auto 0 auto;
    gap: 0.5em;
}

.dashboard_wrap .intro a span {
    pointer-events: none;
}

.dashboard_wrap .intro a.get_help {
    background: var(--red);
    border: 1px solid var(--red);
}

.dashboard_wrap .intro a.get_help:hover {
    background: var(--dark-blue);
    border: 1px solid var(--dark-blue);
}

.dashboard_wrap > div {
    background: var(--light-gray);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 2em;
}

.dash_round_progress {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 90%;
}

.dash_round_progress .overallscore p,
.dash_round_progress .overallscore h3,
.dash_round_progress .overallscore h2 {
    color: var(--white);
}

.dash_round_progress > div {
    background-color: var(--white);
    border-radius: 16px;
    border: 1px solid var(--white);
    padding: 2em 1em;
}

.dash_round_progress .overallscore  { border-color: var(--border-color); }
.dash_round_progress .information   { border-color: var(--audit-col-pink); }
.dash_round_progress .curriculum    { border-color: var(--audit-col-orange); }
.dash_round_progress .leadership    { border-color: var(--audit-col-blue); }
.dash_round_progress .physical      { border-color: var(--audit-col-green); }

.dash_round_progress .overallscore .pill_button { background: var(--border-color); border-color: var(--border-color); }
.dash_round_progress .information .pill_button  { background: var(--audit-col-pink); border-color: var(--audit-col-pink); }
.dash_round_progress .curriculum .pill_button   { background: var(--audit-col-orange); border-color: var(--audit-col-orange); }
.dash_round_progress .leadership .pill_button   { background: var(--audit-col-blue); border-color: var(--audit-col-blue); }
.dash_round_progress .physical .pill_button     { background: var(--audit-col-green); border-color: var(--audit-col-green); }

.dash_round_progress .overallscore .pill_button:hover,
.dash_round_progress .information .pill_button:hover,
.dash_round_progress .curriculum .pill_button:hover,
.dash_round_progress .leadership .pill_button:hover,
.dash_round_progress .physical .pill_button:hover  { background: var(--black); border-color: var(--black); }

@media screen and (min-width: 40.375em) {
    .dash_round_progress { grid-template-columns: repeat(2, 1fr); }
    .dash_round_progress > div:first-child { grid-column: 1 / -1; /* makes the last one span all columns */ }

}

@media screen and (min-width: 56.875em) /* 910px */ {
    .dash_round_progress { grid-template-columns: repeat(4, 1fr); /* 4 equal columns */ }
}

@media screen and (min-width: 61.5625em) {
    .dash_round_progress {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
        gap: 2rem;
        max-width: 1300px;
    }

    .dash_round_progress {
        padding: 4em 2em;
    }

    .dash_round_progress > div:first-child {
        grid-column: auto;
    }

    .dashboard_wrap .intro {
        margin-top: 3.5em;
    }

    .dashboard_wrap .intro p {
        font-size: 1.2em;
    }

    .dashboard_wrap .intro > div {
        flex-direction: row;
        gap: 1em;
    }

    .dashboard_wrap .intro a {
        margin: 0 auto 0 auto;
    }

    .dashboard_wrap .intro h2 {
        margin-top: 1em;
    }


}

.dash_cards {
    display: grid;
}

.dash_cards > div {
    padding: 2em;
}

.dash_cards .view-reports {
    display: flex; justify-content: center; align-items: center;
}

.dash_cards .card > {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
}

.dash_cards .card > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dash_cards .card:last-child > div {
    justify-content: flex-start;
    height: 100%;
}

.dash_cards .card .icon {
    background: var(--border-color);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 40px;
    height: 40px;
    min-height: 40px;
    color: var(--white);
}

.dash_cards .card svg {
    max-width: 100px;
}

.dash_cards .card .counter {
    font-size: 5em;
    font-weight: 400;
    color: var(--black);
}

.dash_cards .card a.audit_link {
    font-size: 1em;
    margin: 0 auto;
    width: auto;
}

.dash_cards .card a.audit_link:last-child {
    margin-top: 1em;
}

@media screen and (min-width: 56.875em) /* 910px */ {
    .dash_cards { grid-template-columns: repeat(2, 1fr); }

    .dash_cards > div {
        border-bottom: 1px solid var(--border-color);
    }

    .dash_cards > div:nth-child(even) {
        border-left: 1px solid var(--border-color);
    }
}

@media screen and (min-width: 61.5625em) {
    .dash_cards { grid-template-columns: repeat(4, 1fr); /* 4 equal columns */ }

    .dash_cards > div:nth-child(-n+3) {
        border-left: 1px solid var(--border-color);
    }

    .dash_cards .card:last-child > div a.audit_link {
        /*font-size: 1.1em;*/
    }
}

/*
 *---------------------------------------------------------------
 * HOME (SCORE) old!
 *---------------------------------------------------------------
 *
 */

.home_score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.home_score > div {
    width: 100%;
    text-align: left;
    flex-wrap: wrap;
}

.home_score .progress {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.home_score span {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #209A9C;
    font-weight: 600;
    background-size: contain;
}

.home_score .progress_icon {
    display: flex;
    width: 60px;
    height: 60px;
}

.home_score .out_of {
    font-size: 1em;
    margin-bottom: 20px;
}

.home_score  div:last-child {
    text-align: center;
}

/*
 *---------------------------------------------------------------
 * AUDIT (SCORE)
 *---------------------------------------------------------------
 *
 */

.audit_score {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.audit_icon {
    width: 200px;
    height: 200px;
    background: var(--light-gray);
    border-radius: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit_icon img {
    width: 70%;
}


.progress-circle {
    --size: 100%;        /* circle size */
    /*--value: 75;          !* percentage (0–100) *!*/
    /*--bar-color: #5c27ff; !* progress color *!*/
    /*--track-color: #eee;  !* background track *!*/

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    /*background: conic-gradient(*/
    /*        var(--border-color) calc(var(--value) * 1%),*/
    /*        var(--track-color) 0*/
    /*);*/
}

.progress-circle {
    /* defaults */
    --value: 0; /* 0–100 */


    /* the ring */
    background: conic-gradient(
            var(--border-color) calc(var(--value) * 1%),
            var(--light-gray) 0
    );
}

.progress-circle span {
    background: #fff;
    color: var(--white);
    border-radius: 50%;
    width: 75%;
    height: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.purple {
    fill: var(--purple);
}

.fillBronze {
    fill: var(--bronze);
}

.fillSilver {
    fill: var(--silver);
}

.fillGold {
    fill: var(--gold);
}

.fillWhite {
    fill: white;
}

.fillOffwhite {
    fill: var(--black);
}


.svgIcon {
    position: absolute;
    z-index: 2;
    max-width: 60%;
}

.clr_leadership_and_governance .svgIcon,
.blue_leadership .svgIcon {
    fill: var(--audit-col-blue);

}

.clr_curriculum .svgIcon,
.orange_curriculum .svgIcon {
    fill: var(--audit-col-orange);

}

.clr_physical_environment .svgIcon,
.green_physicalspace .svgIcon {
    fill: var(--audit-col-green);

}

.clr_information .svgIcon,
.pink_information .svgIcon {
    fill: var(--audit-col-pink);
}

.svgIcon.fillRed {
    fill: var(--red);
}

.svgIcon.fillOrange {
    fill: var(--orange);
}

.svgIcon.fillGreen {
    fill: var(--green);
}

.dash_round_progress .bgPurple,
.progress-circle .bgPurple {
    background: var(--purple);
    border: 1px solid var(--purple);;
}

.bgPurple .progress-circle span {
    background: var(--purple);
}

.bgPurple .progress-circle {
    background: conic-gradient(
            #FFFFFF calc(var(--value) * 1%),
            rgba(127, 112, 222, 0.8) 0
    );
}

.dash_round_progress .bgBronze{
    background: var(--bronze);
    border: 1px solid var(--bronze);
}

.bgBronze .progress-circle span {
    background: var(--bronze);
}

.bgBronze .progress-circle {
    background: conic-gradient(
            #FFFFFF calc(var(--value) * 1%),
            rgba(158, 86, 48, 0.8) 0
    );
}

.dash_round_progress .bgSilver,
.progress-circle .bgSilver {
    background: var(--silver);
    border: 1px solid var(--silver);;
}

.bgSilver .progress-circle span {
    background: var(--silver);
}

.bgSilver .progress-circle {
    background: conic-gradient(
            #FFFFFF calc(var(--value) * 1%),
            rgba(200, 202, 209, 0.8) 0
    );
}

.dash_round_progress .bgGold,
.progress-circle .bgGold {
    background: var(--gold);
    border: 1px solid var(--gold);
}

.bgGold .progress-circle span {
    background: var(--gold);
}

.bgGold .progress-circle {
    background: conic-gradient(
            #FFFFFF calc(var(--value) * 1%),
            rgba(225, 195, 98, 0.8) 0
    );
}

.audit_score_text {
    font-size: 0.8em;
    text-align: center;
    margin: 10px 0;
}

.audit_score_text h3 {
    font-weight: 400;
}

.audit_score p {
    text-align: center;
}

.audit_score_number {
    font-size: 2em;
    color: #209A9C;
    font-weight: 600;
    text-align: center;
}
.pill_button,
a.pill_button {
    cursor: pointer;
    border-radius: 100px;
    padding: 0.5em 1em;
    font-size: 0.9em;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    background: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.pill_button.large {
    font-size: 1.2em;
}

.pill_button.gray.large {
    color: white;
    border: 1px solid var(--border-color);
    background: var(--border-color);
}

a.pill_button {
    text-decoration: none;
}

a.pill_button.green {
    background: var(--green);
    border: 1px solid var(--green);
}

a.pill_button.brown {
    background: var(--brown);
    border: 1px solid var(--brown);
}

a.pill_button.orange {
    background: var(--orange);
    border: 1px solid var(--orange);
}

a.pill_button.red {
    background: var(--red);
    border: 1px solid var(--red);
}

a.pill_button.back {
    background: #8b63e4;
    border: 1px solid #8b63e4;
}

.confirmation-buttons .pill_button:hover,
.pill_button.gray.large:hover,
a.pill_button.red:hover,
a.pill_button.orange:hover,
a.pill_button.brown:hover,
a.pill_button.green:hover,
a.pill_button:hover {
    background: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}

.pill_button.darkblue {
    background: none;
    border: 1px solid var(--dark-blue);
    color: var(--dark-blue);
}

.pill_button.active,
a.pill_button.active {
    border: 1px solid var(--dark-blue);
    background: var(--dark-blue);
}

/* Exact match */
a.pill_button.inverted[href="?tab=active"] {
}

/* Exact match */
a.pill_button.inverted[href="?tab=invited"] {
}

.edit-user-btn {
    border: 1px solid var(--border-color);
    display:inline-flex;
    background:transparent;
    color: var(--dark-blue);
    cursor:pointer;
}

.edit-user-btn:hover {
    border: 1px solid var(--purple);
    background: var(--purple);
    color: var(--white);
}


/*
 *---------------------------------------------------------------
 * AUDIT SCORE GRID
 *---------------------------------------------------------------
 *
 */

.ipad_content.mosaic {
    --gap: 16px;
    --red: #e60000;

    display: grid;
    grid-template-columns: 1fr;  /* mobile base */
    gap: var(--gap);
    max-width: 90%;
    margin-bottom: 20px;
}

.mosaic .tile {
    border-radius: 8px;
}

.mosaic .tile.tile--c, .mosaic .tile.tile--d  {
    display: none;
}

/*
 *---------------------------------------------------------------
 * AUDIT SCORE GRID
 *---------------------------------------------------------------
 *
 */

.audit_task_box_table {
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 20px;
}

.audit_task_box table .user {
    border-radius: 100px;
    margin: 0 auto;
    height: 40px;
    width: 40px;
}

.audit_task_box_table th, .audit_task_box_table td {
    padding: 0.5rem;
    text-align: center;
}

.audit_task_box_table thead {
    background: var(--red);
    color: var(--white);
}

.audit_task_box_table thead tr {
    border-top: none ;
}

/*
 *---------------------------------------------------------------
 * ACTION BOX SLIDER
 *---------------------------------------------------------------
 *
 */

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

.latest_welcome_wins .rslides .action_boxes {
    min-height: 250px;
    border: 1px solid var(--border-color);
    background: var(--white);

}

.latest_welcome_wins .rslides .action_boxes > div {
    display: flex;
    flex-direction: column;
}

.latest_welcome_wins .rslides_tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.latest_welcome_wins .rslides_tabs li {
    width: 20px;
    height: 20px;
    background: var(--purple);
    margin: 0 10px;
    color: transparent;
    border-radius: 20px;
    font-size: 0;
}

.latest_welcome_wins .rslides_tabs li.rslides_here {
    background: var(--light-purple);
}

.latest_welcome_wins .rslides_tabs li a {
    display: flex;
    width: 20px;
    height: 20px;
}

.latest_welcome_wins .user {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    margin: 0 auto 10px auto;
}

.latest_welcome_wins h3 {
    margin-top: 0;
}

/*
 *---------------------------------------------------------------
 * ACTION FADE SETTINGS
 *---------------------------------------------------------------
 *
 */

/* Base style */
.fade_section {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s forwards;
}

/* Animation keyframes */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered delays */
.fade_section.one { animation-delay: 0.2s; }
.fade_section.two { animation-delay: 0.6s; }
.fade_section.three { animation-delay: 1.0s; }
.fade_section.four { animation-delay: 1.4s; }

/*
 *---------------------------------------------------------------
 * HOME WELCOME
 *---------------------------------------------------------------
 *
 */

.home_welcome {
    text-align: center;
}

.home_welcome img {
    border-radius: 16px;
}

.home_welcome .play {
    position: relative;
}

.home_welcome .play a {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 0;
    color: transparent;
    justify-content: center;
    align-items: center;
    background-size: 25%;
}

.welcome_boxes {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.welcome_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--white);

}

.welcome_box > div {
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

.start_your_review {
    background: var(--purple);
    border-color: var(--purple);
    max-width: 800px;
    display: grid;
    gap: 20px;
    margin: 20px 0;
}

.start_your_review > div {
    display: grid;
    gap: 20px;
}

.start_your_review a.audit_link {
    border-color: var(--white);
    width: auto;
    margin: 0;
}

.start_your_review a.audit_link:hover {
    background: var(--black);
    color: var(--white);
}

.start_your_review h2,
.start_your_review p {
    color: var(--white);
    margin: 0;
}

.start_your_review span {
    display: flex;
    justify-content: center;
}

/*
 *---------------------------------------------------------------
 * FOUNDATION AUDIT
 *---------------------------------------------------------------
 *
 */

.audit_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background: var(--light-purple);
    border-radius: 16px;
    border: 2px solid var(--purple);
}

.audit_wrap > div {
    margin: 0 auto 20px auto;
}

.audit_wrap > div a {
    display: inline-flex;
    justify-content: center;
    max-width: 300px;
    width: auto;
    margin: 0 auto;
}

.audit_prog_wrap > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.audit_prog_wrap div:nth-child(2) {
    /*outline:  red solid 1px;*/
    margin-top: 20px;
}

.foundation_welcome {
    max-width: 800px;
    margin: 0 auto;
}

.foundation_welcome > div {
    text-align: center;
}

.foundation_audit_progress_boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.foundation_audit_progress_boxes > div {
    text-align: center;
    margin-top: 20px;
}

.foundation_audit_progress_wrap {
    margin: 0 auto;
}

.foundation_audit_progress_wrap h2,
.foundation_audit_progress_wrap p {
    text-align: center;
}

.foundation_audit_progress_boxes > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 250px;
    border-radius: 16px;
    border: 2px solid var(--purple);
    background: var(--white);
    width: 100%;
}

.foundation_audit_progress_boxes > div.gray {
    border-color: var(--light-purple);
}

.foundation_audit_progress_boxes > div.clr_leadership_and_governance,
.foundation_audit_progress_boxes > div.blue_leadership {
    border-color: var(--audit-col-blue);
}

.foundation_audit_progress_boxes > div.clr_curriculum,
.foundation_audit_progress_boxes > div.orange_curriculum {
    border-color: var(--audit-col-orange);
}

.foundation_audit_progress_boxes > div.clr_physical_environment,
.foundation_audit_progress_boxes > div.green_physicalspace {
    border-color: var(--audit-col-green);
}

.foundation_audit_progress_boxes > div.clr_information,
.foundation_audit_progress_boxes > div.pink_information {
    border-color: var(--audit-col-pink);
}

.foundation_audit_progress_boxes > div > div:nth-child(2) {
    margin: 20px 0;
}

details.section_includes {
    position: relative;
    text-align: left;
    width: 100%;
    margin-top: 20px;
}

details.section_includes summary {
    cursor: pointer;
}

.section_includes > summary:before {
    position: absolute;
    color: var(--white);
    right: 0;
    top: 0;
    background: var(--purple);
    font-family: 'Material Symbols Outlined', serif;
    font-size: 10px;
    line-height: 40px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    border-radius: 100px;
    padding-top: 2px;
}

.foundation_audit_progress_boxes > div.clr_leadership_and_governance .section_includes > summary:before,
.foundation_audit_progress_boxes > div.blue_leadership .section_includes > summary:before {
    background: var(--audit-col-blue);
}

.foundation_audit_progress_boxes > div.clr_curriculum .section_includes > summary:before,
.foundation_audit_progress_boxes > div.orange_curriculum .section_includes > summary:before {
    background: var(--audit-col-orange);
}

.foundation_audit_progress_boxes > div.clr_information .section_includes > summary:before,
.foundation_audit_progress_boxes > div.pink_information .section_includes > summary:before {
    background: var(--audit-col-pink);
}

.foundation_audit_progress_boxes > div.clr_physical_environment .section_includes > summary:before,
.foundation_audit_progress_boxes > div.green_physicalspace .section_includes > summary:before {
    background: var(--audit-col-green);
}

.foundation_audit_progress_boxes > div.clr_leadership_and_governance a.pill_button,
.foundation_audit_progress_boxes > div.blue_leadership a.pill_button {
    background: var(--audit-col-blue);
    border: 2px solid var(--audit-col-blue);
}

.foundation_audit_progress_boxes > div.clr_curriculum a.pill_button,
.foundation_audit_progress_boxes > div.orange_curriculum a.pill_button {
    background: var(--audit-col-orange);
    border: 2px solid var(--audit-col-orange);
}

.foundation_audit_progress_boxes > div.clr_information a.pill_button,
.foundation_audit_progress_boxes > div.pink_information a.pill_button {
    background: var(--audit-col-pink);
    border: 2px solid var(--audit-col-pink);
}

.foundation_audit_progress_boxes > div.clr_physical_environment a.pill_button,
.foundation_audit_progress_boxes > div.green_physicalspace a.pill_button {
    background: var(--audit-col-green);
    border: 2px solid var(--audit-col-green);
}

.foundation_audit_progress_boxes > div.blue_leadership a.pill_button:hover,
.foundation_audit_progress_boxes > div.orange_curriculum a.pill_button:hover,
.foundation_audit_progress_boxes > div.green_physicalspace a.pill_button:hover,
.foundation_audit_progress_boxes > div.pink_information a.pill_button:hover,
.foundation_audit_progress_boxes > div.clr_leadership_and_governance a.pill_button:hover,
.foundation_audit_progress_boxes > div.clr_curriculum a.pill_button:hover,
.foundation_audit_progress_boxes > div.clr_information a.pill_button:hover,
.foundation_audit_progress_boxes > div.clr_physical_environment a.pill_button:hover {
    background: var(--black);
    border: 2px solid var(--black);
}

.section_includes[open] summary::before {
    font-size: inherit;
}

.section_includes ul {
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
}

.section_includes ul li {
    text-align: left;
    padding: 0 0 0 10px;
    font-size: 0.9em;
    position: relative;
}

.section_includes ul li:before {
    content: '-';
    padding-right: 5px;
    position: absolute;
    left: 0;
    top: 0;
}

.section_includes .grid_table {
    padding: 1em 0;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.section_includes .grid_row {
    display: contents;
}

.section_includes .grid_table > div {
    padding: 0.5rem;
}

.clr_leadership_and_governance .section_includes .grid_row.top_row > .col,
.blue_leadership .section_includes .grid_row.top_row > .col {
    background: var(--lblue);
    color: var(--blue);
}

.clr_curriculum .section_includes .grid_row.top_row > .col,
.orange_curriculum .section_includes .grid_row.top_row > .col {
    background: var(--audit-col-orangel);
    color: var(--audit-col-orange);
}

.clr_information .section_includes .grid_row.top_row > .col,
.pink_information .section_includes .grid_row.top_row > .col {
    background: var(--audit-col-pinkl);
    color: var(--audit-col-pink);
}

.clr_physical_environment .section_includes .grid_row.top_row > .col,
.green_physicalspace .section_includes .grid_row.top_row > .col {
    background: var(--audit-col-greenl);
    color: var(--audit-col-green);
}

.section_includes .col {
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.9em;
    padding: 0.5rem;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.section_includes .top_row .col {
    border:0;
}

.section_includes .col:not(:first-child) {
    text-align: center;
}

/*
 *---------------------------------------------------------------
 * INVITE PAGE
 *---------------------------------------------------------------
 *
 */

.home_welcome_wrap .audit_builder {
    max-width: 900px;
}

.audit_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.audit_nav > a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    width: 49%;
}

@media screen and (min-width: 56.875em) /* 910px */ {

    .audit_builder_header {
        display: flex;
        align-content: center;
        justify-content: space-between;
    }

    .audit_nav {
        float: right;
        max-width: 304px;
        gap: 5px;
    }

    .audit_nav > a {
        width: 150px;
        margin-bottom: 0;
    }
}

.audit_blocks {
    display: flex;
    justify-content: space-between;
    gap: 1%;
    flex-wrap: wrap;
}

.audit_blocks > div {
    width: 49%;
}

.audit_blocks > div > div {
    width: 100%;
    flex: 0 0 auto; /* don’t stretch/shrink */
    border: 1px solid var(--border-color);
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
}

.audit_blocks .green {
    border: 1px solid var(--green);
    background: #e9f7f6;
}

.audit_blocks > div img {
    max-width: 50px;
    margin: 0 auto;
}

.audit_blocks > div h3 {
    margin-top: 0;
}

.audit_blocks > div > p {
    text-align: center;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.8em;
    max-width: 80%;
}

.add_remove {
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-btn {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: var(--white);
    color: var(--black);
    border-radius: 100px;
    /*width: 100px;*/
    font-weight: 600;
    height: 40px;
    cursor: pointer;

}

.add-btn:hover {
    border: 1px solid var(--green);
    background: #e9f7f6;
}

.audit_blocks .green .add-btn,
.add-btn.added {
    background: var(--green);
    border: 1px solid var(--green);
    color: var(--white);
}

.undo-link {
    padding: 0 5px;
    color: var(--black);
}

/*
 *---------------------------------------------------------------
 * INVITE PAGE
 *---------------------------------------------------------------
 *
 */

.invite_section {
    max-width: 1000px;
    margin: 0 auto;
}

.invite_search_link .breadcrumb_links {
    text-align: left;
    max-width: none;
    font-size: inherit;
    margin: inherit;
}

.copy-link {
    --height: 36px;

    display: flex;
    border: 1px solid #cccccc;
    padding: 20px;
    border-radius: 16px;
}

.copy-link-input {
    flex-grow: 1;
    padding: 0 8px;
    font-size: 14px;
    border: none;
    outline: none;
    background: none;
}

input.copy-link-input:focus {
    outline: none;
    border: none;
}

*:focus {
    outline: none;
}

.copy-link-button {
    min-width: 150px;
    cursor: pointer;
}

.invite-link input, .invite-link textarea {
    display: flex;
    border: 1px solid #cccccc;
    padding: 30px;
    border-radius: 16px;
    width: 100%;
}

.invite_submit_link,
.invite_search_link {
    display: inline-flex;
    margin-top: 20px;
    width: 100%;
}

/*
 *---------------------------------------------------------------
 * ROLE PICKER
 *---------------------------------------------------------------
 *
 */

* { box-sizing: border-box; }

.role-picker {
    max-width: 1100px;
    margin: 0 auto;
}

.role-picker h2 {
    margin: 0 0 14px 0;
    font-size: clamp(1rem, 0.9rem + 0.6vw, 1.15rem);
    font-weight: 700;
}

.role-picker__group {
    border: 0;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

/* Hide native radios but keep them accessible */
.role-picker__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.role-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 12px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .2s ease, transform .08s ease;
    outline-offset: 4px;
}

.role-card:where(:hover, :focus-visible) {
    box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
}

.role-card__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
}

.role-card__icon svg {
    width: 56px;
    height: 56px;
}

.icon-circle {
    fill: none;
    stroke: #cfd5e2;          /* default ring (unselected) */
    stroke-width: 3.5;
}

.icon-check {
    fill: none;
    stroke: #cfd5e2;          /* default (unselected) */
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.role-card__text { display: grid; gap: 6px; }

.role-card__title {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--black);
}

.role-card__muted { color: var(--rp-muted); font-weight: 500; }

.role-card__desc {
    font-size: clamp(.95rem, .9rem + .2vw, 1.1rem);
    color: #1f2937;
    line-height: 1.45;
}

#role-user:checked + .role-card .icon-circle,
#role-admin:checked + .role-card .icon-circle {
    stroke: var(--rp-teal-weak);
    fill: none;
}

#role-user:checked + .role-card .icon-check,
#role-admin:checked + .role-card .icon-check {
    stroke: var(--rp-teal);
}

#role-user:checked + .role-card,
#role-admin:checked + .role-card {
    box-shadow: 0 0 0 2px rgba(0,0,0,.02), 0 10px 28px rgba(0,0,0,.07);
}

.role-picker__radio:focus-visible + .role-card {
    outline: var(--rp-ring);
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,1px,1px);
    white-space: nowrap; border: 0;
}

/*
 *---------------------------------------------------------------
 * WE JUST NEED
 *---------------------------------------------------------------
 *
 */

.questionnaire  .audit_link {
    margin-top: 2em;
}

.questions-list ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

.question-item {
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 10px;;
    font-weight: 700;
    padding: 20px 0;
}

.question-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
    gap: 20px;
}

.we_need_question { display:flex; align-items:center; gap:18px; padding:18px 0; }
.we_need_question .col-letter { width:24px; font-weight:700; }
.we_need_question .col-text { flex:1; font-weight:700; color:#555; }
.we_need_question .col-options { display:flex; gap:10px; }

/* hide native radios */
.we_need_question input[type="radio"] { position:absolute; opacity:0; pointer-events:none; }

/* pill labels */
.we_need_question label {
    display:inline-block; padding:8px 18px; background:#eee; color:#555;
    border-radius:999px; font-weight:700; cursor:pointer; transition:.2s ease;
}

/* active states */
.we_need_question input[type="radio"]:checked + label.yes { background: var(--green); color: var(--white); }
.we_need_question input[type="radio"]:checked + label.no  { background: var(--red); color: var(--white); }

.we_need {
    text-align:center; margin-top:20px;
}

.we_need > div:last-child {
    margin: 20px 0;
    display: grid;
    align-items: center;
    justify-content: center;

}

.cat_info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.cat_info > div:nth-child(3) * {
    min-width: 250px;
}

.cat_info > div:nth-child(2) {
    text-align: center;
    font-weight: 400;
}

.play_wap {
    text-align: center;
    min-width: 300px;
    width: 300px;
    height: 100px;
    display: inline-table;
}

.play_wap img {
    border-radius: 16px;
}

.play_wap .play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.play_wap .play a {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    font-size: 0;
    color: transparent;
    justify-content: center;
    align-items: center;
    /*background: url("../assets/play.svg") center no-repeat;*/
    background-size: 25%;
}

.segmented-control {
    display: flex;
    border: 2px solid #189999;
    border-radius: 50px;
    overflow: hidden;
    width: fit-content;
    font-family: Arial, sans-serif;
}

.segmented-control button {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: #f9f9fc;
    color: #189999;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.segmented-control button:first-child {
    border-radius: 50px 0 0 50px;
}

.segmented-control button:last-child {
    border-radius: 0 50px 50px 0;
}

.segmented-control button.active {
    background: #189999;
    color: white;
}

/*
 *---------------------------------------------------------------
 * NOT APPLICABLE
 *---------------------------------------------------------------
 *
 */

.no-applicable-wrap {
    display: grid;
    gap: 1em;
    grid-template-columns: 24px 1fr;
}

.no-applicable {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #189999;
    font-weight: bold;
    justify-content: center;
    border: 2px solid var(--border-color);
    position: relative;
    cursor: pointer;
}

.no-applicable input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.no-applicable label {
    cursor: pointer;
    font-family: 'Material Symbols Outlined', serif;
    font-size: 1em;
    line-height: 1;
    transition: all 0.2s ease;
    pointer-events: none;
}

.no-applicable label::before {
    content: "";
    color: var(--green);
}

.no-applicable input[type="checkbox"]:checked + label::before {
    content: "check";
    color: var(--green);
}

.no-applicable:hover {
    opacity: 0.8;
}

.no-applicable:has(input[type="checkbox"]:checked) {
    background: var(--green);
    border-color: var(--green);
}

.no-applicable input[type="checkbox"]:checked + label::before {
    content: "check";
    color: #fff;
}

/*
 *---------------------------------------------------------------
 * POPUP STYLING
 *---------------------------------------------------------------
 *
 */

.f-html {
    border-radius: 20px;
    border: 2px solid var(--white);
    overflow: hidden;
}

.pu_item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pu_dropdown-wrapper {
    position: relative;
    display: contents;
}

.pu_dropdown-wrapper select {
    appearance: none; /* hide browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 1.5em;

    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.pu_dropdown-wrapper .material-symbols-outlined {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* allows clicking select */
    font-size: 20px;
    color: #444;
}

.pu_item label {
    width: 100px;
    font-weight: var(--font-weight-bold);
}

.pu_item input,
.pu_item select,
.pu_item > div,
.pu_item textarea {
    border: 0;
    outline: none;
    border-bottom: 1px solid var(--gray);
}
.pu_item select {
    background-position: center right;
    background-size: 30px;
}

.pu_item input,
.pu_item select {
    font-weight: 600;
}

.pu_item select:has(option[value="new"]:checked) {
    color: var(--blue);
}

.pu_item select:has(option[value="completed"]:checked) {
    color: var(--green);
}

.pu_item select:has(option[value="in-progress"]:checked) {
    color: var(--orange);
}

.pu_item select:has(option[value="overdue"]:checked) {
    color: var(--red);
}

.pu_item input:focus,
.pu_item select:focus,
.pu_item textarea:focus,
.pu_item button:focus {
    outline: none !important;
    box-shadow: none;
}

/*
 *---------------------------------------------------------------
 * dialog (Popup)
 *---------------------------------------------------------------
 *
 */

.popup > div {
    background: none;
}

::backdrop {
    background: rgba(0,0,0,0.5);
    opacity: 0.7;
}

dialog {
    border: 0;
    padding: 0;
    min-width: 20%;
    background: none;
    position: relative;
    overflow: visible;
}

dialog.modal {
    color: var(--body-regular);
}

dialog.modal[open] {
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: popFade .2s ease-out;
}

@media screen and (min-width: 56.875em) /* 910px */ {
    dialog {
        max-width: 1000px;
    }

    dialog.ac_pop_wrap {
        max-width: 700px;
    }
}

.modal.scl {
    position: fixed;
    border-radius: 10px;
}

#dialog-content1 {
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* modal height */
}

#dialog-content1 > div {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100%;
    padding-right: 0.5rem; /* stops scrollbar overlaying content */
    overscroll-behavior: contain; /* stops background page scroll */
}

dialog .modal[open] {
    animation: fadeInModal 1.0s ease normal;
}

dialog #cM {
    border: 1px solid var(--white);
    border-radius: 10px;
    background: var(--white);
    overflow: hidden;
}

.confirmation-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
}

.confirmation-dialog {
    padding: 2em;
}

.confirmation-dialog h2 {
    margin-top: 0;
}

/*dialog .closeModal {*/
/*    content: 'close_small';*/
/*    line-height: 30px;*/
/*    border-radius: 30px;*/
/*    border: 0;*/
/*    padding: 0;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    background-color: var(--white);*/
/*    color: var(--purple);*/
/*    width: 30px;*/
/*    height: 30px;*/
/*    font-size: 20px;*/
/*    position: absolute;*/
/*    right: 20px;*/
/*    top: 20px;*/
/*    z-index: 999999;*/
/*    cursor: pointer;*/
/*}*/

/*dialog .closeModal span {*/
/*    pointer-events: none;*/
/*    font-size: 100%;*/
/*}*/

/*dialog .closeModal:hover {*/
/*    !*background-color: var(--red);*!*/
/*    color: var(--red);*/
/*}*/

@keyframes fadeInModal{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*
 *---------------------------------------------------------------
 * Sign up ALERT
 *---------------------------------------------------------------
 *
 */

.alert {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 15px;
}
.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-error {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

/*
 *---------------------------------------------------------------
 * POPUP STYLING
 *---------------------------------------------------------------
 *
 */


.f-html {
    background: none !important;
    overflow: hidden;
    border-radius: 20px;
    padding: 0 !important;
}

.popup .content_detail {
    margin-bottom: 0;
}

.popup .top_gutter {
    padding: 0;
}

.pu_dropdown-wrapper {
    position: relative;
    display: contents;
}

.pu_dropdown-wrapper select {
    appearance: none; /* hide browser arrow */
    -webkit-appearance: none;
    -moz-appearance: none;

    padding-right: 1.5em;

    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
}

.pu_dropdown-wrapper .material-symbols-outlined {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* allows clicking select */
    font-size: 20px;
    color: #444;
}

.pu_item label {
    width: 100px;
    font-weight: var(--font-weight-bold);
}

.pu_item > div {
    padding: 1em;
}

.pu_item input,
.pu_item select,
.pu_item > div,
.pu_item textarea {
    width: 100%;
    border: 0;
    outline: none;
    border-bottom: 1px solid var(--gray);
}

.pu_item input:focus,
.pu_item select:focus,
.pu_item textarea:focus,
.pu_item button:focus {
    outline: none !important;
    box-shadow: none;
}

.popup .audit_link,
.popup a.audit_link,
.popup button.audit_link {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
}

.popup.ac_popup .link_wrap {
    width: auto;
}

.popup.ac_popup .audit_link {
    width: auto;
    display: inline-block;
    margin-bottom: 0;
}

.popup.ac_popup .audit_link.return {
    font-size: 1.5em;
    /*margin-top: 1em;*/
}

.pu_item.saveDeleteWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}

.pu_item.saveDeleteWrap a {
    flex: 1;
}

.popup .update_action *:last-child {
    margin-bottom: 0;
}

.popup button.audit_link {
    margin-bottom: 0;
    width: 100%;
}

.popup button.audit_link span {
    margin-right: 5px;
}

.pop_cat_sat_score {
    display: flex;
    flex-direction: row;
    align-items: start;
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 2em 0;
}

.pop_cat_sat_score > div {
    border-left: 1px solid var(--border-color);
    padding: 1em;
}

.pop_cat_sat_score > div:first-child {

    border: 0;
}

.pop_com_up_save {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 1em;
}


.popup .pop_com_up_save a.audit_link {
    margin-bottom: 20px;
}

.pop_com_up_save a:hover {
    border: var(--purple);
    background: var(--purple);
    color: var(--white);
}

.pu2_itemWrap,
.pu2_itemselectWrap {
    /*background: var(--white);*/
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.pu2_itemWrap.topLabel {
    overflow: visible;
    display: flex;

}

.getAction label.small {
    font-size: 12px;
}

.pu2_itemWrap.topLabel input,
.pu2_itemWrap.topLabel textarea {
    border-radius: 5px;
}

.pu2_itemselectWrap:after {
    position: absolute;
    border-left: 1px solid var(--border-color);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 39px;
    font-family: 'Material Symbols Outlined', serif;
    content: "arrow_drop_down";
    color: var(--black);
    font-size: 30px;
    right: 0;
    top: 0;
}

.pu2_itemselectWrap.yes:before {
    position: absolute;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 39px;
    font-family: 'Material Symbols Outlined', serif;
    content: "check_circle";
    color: var(--green);
    font-size: 20px;
    left: 0;
    top: 0;
}

.pu2_itemselectWrap.no:before {
    position: absolute;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 39px;
    font-family: 'Material Symbols Outlined', serif;
    content: "cancel";
    color: var(--red);
    font-size: 20px;
    left: 0;
    top: 0;
}

.pu2_itemselectWrap.yes_no select {
    padding-left: 39px;
}

.pu2_itemWrap input,
.pu2_itemselectWrap {
    width: 100%;
}

.pu2_itemWrap input,
.pu2_itemWrap textarea {
    border: 0;
}

.pu2_itemWrap textarea {
    width: 100%;

}

.pu2_itemselectWrap select {
    border: 0;
    background: none;
    width: 100%;
}

.pu2_item.aco_wrap {
    display: flex;
    align-items: center;
    justify-content: left;
    margin: 1em 0;
    gap: 0 1em;
}

.pu2_item.aco_wrap .cost span {
    font-size: 15px;
    width: 30px;
    height: 30px;
}

.pu2_itemWrap.price_prefix {
    display: flex;
}

.pu2_itemWrap.price_prefix .currency-input__prefix {
    padding: 1em 0 1em 1em;
    line-height: 1.5;
}

.pu2_itemWrap.price_prefix input {
    padding-left: 0;
    outline: none;
    box-shadow: none;
}

.pu2_item .btn3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1em;
}

.pu2_item .btn3 span,
.pu_item .delete span,
.pu_item .save span {
    pointer-events: none;
}

.pu2_item .btn3 a,
.pu_item .delete,
.pu_item .save {
    min-width: 140px;
    font-weight: 300;
    gap: 0.5em;
    font-size: 1em;
    flex: 1;
}

.pu2_item .btn3 span {
    color: var(--purple);

}

.pu_item .delete span {
    color: var(--red);
}

.pu2_item .btn3 a:hover,
.pu_item .delete:hover,
.pu_item .save {
    border: 1px solid var(--purple);
    background: var(--purple);
    color: var(--white);
}

.pu2_item .btn3 a:hover span {
    color: var(--white);
}

.pu_item .save:hover {
    border: 1px solid var(--green);
    background: var(--green);
    color: var(--white);
}

.pu_item .delete:hover {
    border: 1px solid var(--red);
    background: var(--red);
}

.pu_item .delete:hover span {
    color: var(--white);
    transition: .2s ease;
}

.pu2_item.costWrap {
    border: 1px solid var(--border-color);
    border-radius: 5px;
    display: flex;
    align-items: start;
    padding: 1em;
    gap: 0.5em;
}

.pu2_item,
.ac_popup .relatedQuestion {
    color: #666;
}

.pu2_itemselectWrap.yes_no select {
    color: #666;
}

.pu2_itemWrap.price_prefix input::placeholder {
    color: #666;
}

.relatedQuestion {
    margin-bottom: 1em;
}

/*
 *---------------------------------------------------------------
 * POPUP (SELECTIONS YES/NO/PRIORITY BUTTONS)
 *---------------------------------------------------------------
 *
 */

.pop_question_selections {
    display: flex;
    flex-direction: row;

    align-items: center;
    width: 100%;
    margin-top: 1em;
}

.strategic_planning_pu .pop_question_selections {
    margin-bottom: 1em;
}

.pop_question_selections > a {
    margin-right: 10px;
}

.pop_question_selections a.question_links {
    border-radius: 100px;
    background: var(--border-color);
    padding: 0.5em 1em;
    font-weight: 500;
    color: var(--white);
    font-size: 1.2em;
    text-decoration: none;
    display: inline-flex;
}

.pop_question_selections.yes {
    background: var(--green);
}

.pop_question_selections.no {
    background: var(--red);
}

.pop_question_selections.partially {
    background: var(--orange);
}

.pop_question_selections.question_links:hover {
    background: var(--purple);
}


.recommendation_box {
    background: var(--light-purple);
    border-radius: 16px;
    border: 2px solid var(--purple);
}

.recommendation_box .ct1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recommendation_box .ct1 h4 {
    margin: 0;
}

.recommendation_box .small_gutter {
    padding-bottom: 0;
}

.recommendation_box .small_gutter:last-child {
    padding-bottom: 1.5em;
}

.recommendation_box .add_task {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.recommendation_box .add_task .btn2 {
    max-width: 200px;
}

.recommendation_box .add_task span {
    font-size: 0.8em;
}

.recommendation_box .add_task div:last-child {
    text-align: right;
}


.recommendation_box .add_task > div {
    width: 49%;
}

.recommendation_box .add_task .add_title {
    padding-bottom: 0.5em;
    display: flex;
}

.recommendation_box .add_task .btn2 label {
    background: #c0aee9;
    color: var(--white);
}


.popup .rslides_tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 1em 0;
}

.popup .rslides_tabs li {
    width: 20px;
    height: 20px;
    background: var(--purple);
    margin: 0 10px;
    color: transparent;
    border-radius: 20px;
    font-size: 0;
}

.popup .rslides_tabs li.rslides_here {
    background: var(--light-purple);
}

.popup .rslides_tabs li a {
    display: flex;
    width: 20px;
    height: 20px;
}

.linked_question_box {
    background: var(--black);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.linked_question_box > div > div {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    color: var(--white);
    padding: 1.2em 0;
    border-bottom: 1px solid #565657;
}

.linked_question_box .title {
    min-width: 200px;
    font-size: 12px;
    padding-right: 20px;
    font-weight: var(--font-weight-bold);
}

.linked_question_box .description span {
    font-size: 1.2em;
    font-weight: var(--font-weight-bold);
}

.strategic_planning_pu .round_button_small.purple {
    background: var(--link-color);
}

.popup .score {
    max-width: 150px;
    margin: 1em auto 2em auto;
}

/*
 *---------------------------------------------------------------
 * Thin scroll styling
 *---------------------------------------------------------------
 *
 */

.thinScroll {
    overflow-y: auto;
}

/*
 *---------------------------------------------------------------
 * LARGE POPUP (SEE AUDIT PAGE)
 *---------------------------------------------------------------
 *
 */

.scl {
    overflow-y: scroll;
}


.hide_scl {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}



.no_scl::-webkit-scrollbar,
.hide_scl::-webkit-scrollbar {
    display: none;  /* Older Safari and Chromium */
}

.dark_popup {
    background: var(--white);
}

.dark_popup .left {
    background: var(--dark-blue);
    width: 100%;
    min-width: 250px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.dark_popup .right .scroll_box {
    height: 100vh;
    max-height: 600px;
}

.dark_popup .left h2 {
    color: var(--white);
    font-size: 1.2em;
    margin: 0 0 20px 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark_popup .left .pad20 {
    padding: 20px;
}

.dark_popup .right .pad20 {
    padding: 20px;
}

.dark_popup .left h2 span {
    margin-right: 5px;
}

.dark_popup .left p {
    text-align: center;
    color: var(--white);
    font-size: 0.9em;
    margin-top: 0;
}

.dark_popup .upload_block  {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.dark_popup .left ul.pop_menu  {
    border-top: 1px solid var(--border-color);
    list-style: none;
    padding: 0;
    margin: 0;
}

.dark_popup .left ul.pop_menu li {
    border-bottom: 1px solid var(--border-color);
    padding: 0;
}

.dark_popup .left ul.pop_menu li a {
    text-decoration: none;
    font-size: 0.9em;
    color: var(--white);
    display: flex;
    padding: 15px 20px;
    cursor: pointer;
}

.dark_popup .left ul.pop_menu li a:hover {
    background: var(--purple);
    cursor: pointer !important;
}

.dark_popup .left  input[type="file"] {
    display: none;
    padding: 0;
    border: 0;
}

.dark_popup .drag_drop {
    min-height: 150px;
    outline: 1px dashed var(--border-color);
    color: var(--white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    width: 100%;
    padding: 1em;
}

.dark_popup .drag_drop:hover {
    background: var(--dark--purple);
    cursor: pointer;
}

.drag_drop > div {
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.dark_popup.full .right {
    width: 100%;
}

.dark_popup .right h2 {
    margin: 0;
}

.dark_popup .right h2 .rewrap {
    display: flex;
    align-items: center;
    justify-content: start;
}

.dark_popup .right h2 .reicon {
    border-radius: 40px;
    background: var(--dark-blue);
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.dark_popup .right h2 > div span {
    color: var(--white);
}

.dark_popup .right h2 .sub {
    display: flex;
    font-weight: 300;
    font-size: 0.7em;
    margin-top: 5px;
}


.dark_popup .right .subBlock {
    background: var(--light-gray);
    padding: 20px;
    margin: 2em 0;
}

.dark_popup .right .scroll {
    overflow-y: scroll;
    height: 100vh;
    max-height: 700px;
}


.dark_popup .right ol {
    list-style: none;
    counter-reset: my-awesome-counter;
    padding: 0;
}

.dark_popup .right ol li {
    counter-increment: my-awesome-counter;
    position: relative;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 40px;
    margin-bottom: 30px;
}

.dark_popup .right ol li::before {
    position: absolute;
    top:0;
    content: counter(my-awesome-counter) ". ";
    color: var(--purple);
    font-weight: bold;
}

.dark_popup .right ol.uploaded li::before {
    content: '';
    height: 20px;
    width: 20px;
    display: block;
}

.dark_popup .right ol.uploaded li > span {
    position: absolute;
    font-size: 20px;
    top:0;
    color: var(--purple);
}

.dark_popup .right ol.uploaded li p {
    color: var(--body-regular);
}

.dark_popup .right h4 {
    margin-bottom: 0;
    padding-left: 25px;
}

.dark_popup.niceWork .right h2 {
    font-size: 2em;
    display: flex;
    align-items: center;
}

.niceWork h2 span.material-symbols-outlined {
    color: var(--green);
    /*font-size: 1em;*/
}

.dark_popup.niceWork .right h4 {
    /*font-size: 1.2em;*/
    padding-left: 0;
    margin: 1.3em 0;
    color: var(--body-regular);
}

.dark_popup.niceWork .right h4 span {
    font-weight: 300;
}

.dark_popup.niceWork .right p {
    color: var(--body-regular);
}

.dark_popup.niceWork .right {
    height: auto;
    min-height: auto;
}

.dark_popup.niceWork .right .answers {
    margin: 1em 0 0 0;
}

.niceWorkfooter {
    background: var(--light-gray);
}

.dark_popup .right .added {
    color: var(--purple);
    margin:0.7em 0 1em 0;
    font-size: 0.8em;
}

.dark_popup .right .add_note {
    margin-bottom: 4em;
}

.dark_popup .right .add_note textarea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    width: 100%;
    margin: 2em 0 0 0;
}

.recommendations_cards {
    flex-wrap: wrap;
    gap: 1em;
    display: grid;
    grid-template-columns: 1fr;
}

.recommendations_cards .card {
    width: 100%;
    flex: 0 0 auto; /* don’t stretch/shrink */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 83px;
}

.recommendations_cards .card .box p {
    font-weight: 300;
    font-size: 1.2em;
}

.recommendations_cards .qw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 83px;
    position: absolute;
    width: 100%;
    bottom: 0;
}

.recommendations_cards .card .box p.small {
    font-size: 0.8em;
}

.recommendations_cards .card span.bolt {
    color: var(--warning);
    margin-left: auto;
}

.recommendations_cards .card .undo {
    color: var(--black);
    padding: 0 5px;
}

.recommendations_cards .card.red .undo {
    color: var(--red);
}

.recommendations_cards .card.green .undo {
    color: var(--green);
}

.recommendations_cards .card > div:nth-child(2) {
    border-top: 1px solid var(--border-color);
}

.recommendations_cards .card.red {
    border: 1px solid var(--red);
    background: #ffeced;
}

.recommendations_cards .card.red > div:nth-child(2) {
    border-top: 1px solid var(--red);
}

.recommendations_cards .card.green {
    border: 1px solid var(--green);
    background: #e9f7f6;
}

.recommendations_cards .card.green > div:nth-child(2) {
    border-top: 1px solid var(--green);
}

.recommendations_cards .card.green label {
    border: 1px solid var(--green);
    background: var(--green);
    color: var(--white);
}

.recommendations_cards .card.green .qw:before {
    display: none;
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    max-height: 83px;
    background: red;
    left: 50%;
    top: 0;

}

.recommendations_cards .card.red label {
    border: 1px solid var(--red);
    background: var(--red);
    color: var(--white);
}

.recommendations_cards .action-status-wrap {
    width: 50%;
    padding: 15px;
}

.recommendations_cards .action-status {
    text-align: center;
    gap: 1em;
    font-size: 0.7em;
    font-weight: 300;
    display: none;
}

.recommendations_cards .card.green .action-status {
    display: grid;
}

.recommendations_cards .action-status .action {
    border-radius: 10px;
    padding: 0.5em 1em;
    color: var(--black);
}

.action.actionStatus0 { background: var(--not-started); }
.action.actionStatus1 { background: var(--in-progress); }
.action.actionStatus2     { background: var(--overdue); }
.action.actionStatus3   { background: var(--completed); }


.recommendations_cards .answer-button-group > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
}

.popup-panel {
    display:none;
}

.dark_popup.full .right .popup-panel .gutter {
    padding-top: 2em;
    padding-bottom: 4em;
}


.dark_popup .answers {
    justify-content: left;
    position: relative;
    padding: 15px;
}

.recommendations_cards .card.green  .answers {
    max-width: 50%;
    border-right: 1px solid var(--green);
}

.recommendations_cards .card .cost {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    /*max-width: 50%;*/
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

.recommendations_cards .card .cost > span {
    position: relative;
    width: 30px;
    height: 30px;
    background: var(--light-gray);
    border-radius: 30px;
    color: var(--black);
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.recommendations_cards .card .cost span.cost1,
.cost_wrap .cost span.cost1,
.aco_wrap .cost span.cost1 {
    background: var(--green);
    color: var(--white);
    border: 1px solid var(--green);
}

.recommendations_cards .card .cost span.cost2,
.cost_wrap .cost span.cost2,
.aco_wrap .cost span.cost2 {
    background: var(--red);
    color: var(--white);
    border: 1px solid var(--red);
}

.recommendations_cards .card .cost span.cost3,
.cost_wrap .cost span.cost3,
.aco_wrap .cost span.cost3 {
    background: var(--orange);
    color: var(--white);
    border: 1px solid var(--orange);
}

html.with-modal {
    width: auto;
    overflow: visible;
    scroll-behavior:auto;
}

html.with-modal body.hide-scrollbar {
    width: auto;
    /*margin-right: calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));*/
    /*overflow: hidden !important;*/
    /*overscroll-behavior-y:none;*/
    scrollbar-gutter: stable; /* keeps the gutter so nothing jumps */
    overflow-y: scroll;

}


.hint--top-left:before, .hint--top-right:before, .hint--top:before {
    border-top-color: var(--dark-blue);
}

.hint--bottom-left:before, .hint--bottom-right:before, .hint--bottom:before {
    border-bottom-color: var(--dark-blue);
}

.hint--tip:after {
    background: var(--dark-blue);
    text-shadow: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

/*.hint--tip:after {*/
/*    background: var(--dark-blue);*/
/*    background: #110e3d !important;*/
/*    background-color: #110e3d !important;*/
/*    font-weight: 600 !important;*/
/*    text-align: center;*/
/*    color: #FFFFFF !important;*/
/*    color: var(--white);*/
/*    -webkit-text-fill-color: #FFFFFF !important;*/
/*}*/

/*!* Hard override Hint.css tooltip outline *!*/
/*[class*="hint--"][aria-label]:after,*/
/*[class*="hint--"][data-hint]:after,*/
/*.hint--tip[aria-label]:after,*/
/*.hint--tip[data-hint]:after{*/
/*    text-shadow: none !important;*/
/*    -webkit-text-stroke: 0 !important;*/
/*    filter: none !important;*/
/*}*/

/*[class*=hint--]:after, [class*=hint--]:before { z-index: 99999; }*/

#submitMessageBox {
    position: fixed;
    z-index: 99999;
    bottom:0;
    right:0;
    margin:1em;
    background: var(--dark-blue);
    border-radius: 5px;
    color: #fff;
    display: none;
    width: 100%;
    max-width: 92%;
}

.submitMessage > div {
    display: flex;
    align-items: center;
    justify-content: left;
}

.submitMessage > div > div {
    padding: 0.8em;
}

.submitMessage > div > div:first-child {
    border-right: 1px solid var(--border-color);
}

.submitMessage > div > div > div {
    border-radius: 100px;
    padding: 5px;
}

.submitMessage .partially {
    background: var(--purple);
}


.submitMessage .save {
    background: var(--green);
}

.submitMessage .dismiss {
    background: var(--red);
}

.dismiss, .save, .partially {
    display: none;
}

.popNav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.flex-start {
    align-items: flex-start;
}

.popNav > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.popNav a.back,
.popNav a.close,
.popNav button.close,
a.btn-edit-note,
a.btn-delete-note,
button.btn-save-edit,
button.btn-cancel-edit {
    background: var(--white);
    border:1px solid var(--dark-gray);
    color: var(--body-regular);
    transition:.2s ease;

    text-align: center;
    padding: 1em;
    /*border: none;*/
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0;
    /*min-width: 90px;*/

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    width: 50px;
    height: 50px;
}

.popNav .close:hover,
.btn-delete-note:hover {
    background: var(--red);
    border:1px solid var(--red);
    color: var(--white) !important;
}

.popNav a.back:hover,
.btn-edit-note:hover,
button.btn-cancel-edit:hover {
    background: var(--dark-blue);
    border:1px solid var(--dark-blue);
    color: var(--white);
}

button.btn-save-edit:hover {
    background: var(--green);
    border:1px solid var(--green);
    color: var(--white);
}

.btn-edit-note,
.btn-delete-note {
    /*gap: 5px;*/
}

.btn-save-edit span,
.btn-cancel-edit span,
.btn-edit-note span,
.btn-delete-note span {
    font-size: 18px;
    pointer-events: none;
}

.popNav button.close span,
.popNav a.close span,
.popNav a.back span,
button.btn-save-edit span,
button.btn-cancel-edit span {
    pointer-events: none;
}

.evidence-actions > div,
.note-edit > div {
    display: flex;
    justify-content: left;
    align-content: center;
    margin-top: 1em;
    gap: 0.5em;
}

/*
 *---------------------------------------------------------------
 * Welcome NO AUDIT accordian,
 *---------------------------------------------------------------
 *
 */

.welecome details {
    padding: 0;
    margin-bottom: 20px;
    border-radius: 10px;
    background: var(--light-gray);
    border: 1px solid var(--border-color);

}

/* summary row */
.welecome summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    padding: 20px 20px;
}

/* remove default marker */
.welecome summary::-webkit-details-marker {
    display: none;
}

/* keep heading inline */
.welecome summary h2 {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    margin: 0;
    gap: 10px;
}

.welecome summary h2 span {
    color: #8b63e4;
}

.welecome summary:hover h2 {
    color: #8b63e4;
}

/* arrow */
.welecome summary::before {
    font-family: 'Material Symbols Outlined', serif;
    content: "arrow_back_ios_new";
    position: absolute;
    color: #8b63e4;
    right: 20px;
    margin: 0;
    padding: 0;
    font-size: 30px;
    width: 35px;
    height: 35px;
    display: block;
    transition: transform 0.2s ease;
}

/* rotate when open */
.welecome details[open] summary::before {
    font-family: 'Material Symbols Outlined', serif;
    content: "arrow_back_ios_new";
    transform: rotate(90deg);
}

/* body spacing only */

.welecome details > div {
    text-align: left;
    display: grid;
    gap: 20px;
    padding: 1em 2em 2em 2em;
}


.welecome details p,
.welecome details ul,
.welecome details li  {
    text-align: left;
    margin: 0;
    line-height: 1.4em;
}

.welecome details div u {
    color: var(--purple);
}

@media screen and (min-width: 56.875em) /* 910px */ {

    .scl {
        overflow: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    .scl::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .dark_popup.full .right {
        height: initial;
        position: relative;
        overflow-y: scroll;
    }

    .dark_popup.full .right {
        height: 600px;
    }

    .getAction .dark_popup.full .right {
        height: 700px;
    }

    .getAction h2 {
        margin-top: 0;
    }

    .dark_popup {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .dark_popup .left {
        position: relative;
        width: 250px;
    }

    .dark_popup .left > div {
        max-width: 250px;
        overflow: hidden;
        width: 100%;
    }

    .dark_popup .left h2 {
        justify-content: start;
        margin-bottom: 1em;
    }

    .drag_drop > div {
        flex-direction: row;
    }

    .dark_popup .right {
        width: 80%;
        margin-left: auto;
        min-height: 600px;
    }

    .dark_popup .upload_block {
        display: block;
        grid-template-columns: none;
    }

}

.winSubmission__success .winSubmission__success_message {
    display: grid;
    grid-template-columns: 40px 1fr;
    justify-content: center;
    align-items: center;
}

.winSubmission__success .winSubmission__success_message span {
    color: var(--green);
    font-size: 2em;
}

.tiral-v-subscription {
    display: grid;
    gap: 1em;
}

.tiral-v-subscription > div {
    align-content: start;
}

.tiral-v-subscription ul {
    list-style: none;
    padding-left: 0;
}

.tiral-v-subscription ul li {
    padding-left: 2em;
    position: relative;
}

.tiral-v-subscription ul li.feature:before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--purple);
    font-size: 1.2em;
}

.tiral-v-subscription ul.leadership li.feature:before {
    color: var(--blue);
}

.tiral-v-subscription ul.curriculum li.feature:before {
    color: var(--audit-col-orange);
}

.tiral-v-subscription ul.information li.feature:before {
    color: var(--pink);
}

.tiral-v-subscription ul.physical li.feature:before {
    color: var(--audit-col-green);
}

.tiral-v-subscription ul li.feature {
    font-weight: 600;
}

@media screen and (min-width: 56.875em) /* 910px */ {

    .tiral-v-subscription {
        grid-template-columns: 1fr 1fr;
    }

}

/*
 *---------------------------------------------------------------
 * ROLE PICKER
 *---------------------------------------------------------------
 *
 */

.welcomeTitle {
    font-weight: 300;
    text-align: center;
}

.blogList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.blogList article {
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.blogList article:hover  {
    background: var(--light-gray);
    border: 1px solid var(--purple);
}

.blogList .articleHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
}

.blogList .articleHeader .icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.blogList .icon .svg_icon {
    width: 25px;
    height: 25px;
}

.like-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
}

.like-btn .st0 {
    fill: var(--not-started);
    transition: fill 0.2s ease;
}

.like-btn--liked .st0 {
    fill: var(--purple); /* or your theme accent colour */
}

.like-btn:hover:not(.like-btn--liked) .st0 {
    fill: var(--gray); /* lighter tint on hover when not yet liked */
}

.blogList .articlContent {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.blogList .title,
.blogList .title:visited,
.blogPopup h1 {
    text-align: center;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--black);
}

.blogList .title .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    height: 3em;
    line-height: 1.5em;
    max-height: 3em;
}


.blogPopup a.pill_button.cat_pill {
    float: left;
    margin-right: auto;
    margin-bottom: 2em;
}

.blogPopup h1 {
    text-align: left;
}

.blogList .title:hover {
    color: var(--purple);
}

.blogList .by {
    color: var(--body-regular);
    font-size: 0.8em;
}

.blogList .textBox {
    height: 100px;
    width: 100%;
    text-decoration: none;
    overflow: hidden;
    line-height: 2;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines you want */
    -webkit-box-orient: vertical;
    font-size: 0.8em;
}

.blogList .textBox p {
    text-overflow: ellipsis;
    white-space: wrap;
}

.blogList .img img {
    border-radius: 10px;
}

.blogList .img svg {
    width: 100px;
    height: 100px;
}

.blogList p {
    color: var(--body-regular);
    font-size: 0.8em;
    margin: 0;
}

a.pill_button.cat_pill {
    background: var(--light-purple);
    border-color: var(--light-purple);
    color: var(--purple);
    font-size: 0.7em;
    font-weight: 300;
    display: inline-block;
}

.blogList .svg {
    fill: var(--light-gray);
}

.blogList .articlContent button.pill_button,
.blogList .articlContent a.pill_button {
    font-size: 1.2em;
    padding: 0.3em 1em;
}

.blogwrap {
    margin: 0 auto;
    border-radius: 10px;
    outline: 2px solid pink;
    overflow: hidden;
}

.blogPopup {
    background: var(--white);
    overflow: hidden;
    padding: 4em;
}

.blogPopup:last-child {
    background: var(--light-purple);
}

.blogPopup .group {
    display: inline-flex;
    flex-direction: column;
    font-size: 1.1em;
    gap: 1em;
    margin-right: auto;
}

.blogPopup .group a {
    flex: 1;
}

/*
 *---------------------------------------------------------------
 * Welcome Wins Popup Article
 *---------------------------------------------------------------
 *
 */

.articleWrap {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    padding-top: 20px;
}

.welArticle {
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.welArticle .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    /*height: 1.3em;*/
    line-height: 1.3em;
    max-height: 3em;
    margin: 0 0 20px 0;
}

.welArticle img {
    border-radius: 10px;
}

.welArticle a.pill_button {
    margin-top: auto;
}

.welArticle .textBox {
    height: 100px;
    width: 100%;
    text-decoration: none;
    overflow: hidden;
    line-height: 1.5;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines you want */
    -webkit-box-orient: vertical;
    font-size: 0.8em;
}

/* Panel 3: Welcome Wins */
#panel3 .wwDetail,
.welcs .wwDetail{ display: none; }
#panel3 .wwList,
.welcs .wwList { display: grid; }

/* When a detail is targeted, show it */
#panel3 .wwDetail:target,
.welcs .wwDetail:target { display: block; }

/* When any detail is targeted, hide the list (list must come AFTER details in DOM) */
#panel3 .wwDetail:target ~ .wwList,
.welcs .wwDetail:target ~ .wwList { display: none; }

.articleOpen .pill_button:first-child {
    margin: 0 auto 20px auto;
    display: inline-block;
}

.articleOpen .pill_button:last-child {
    margin: 0  auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.articleOpen img {
    border-radius: 10px;
}

.articleBody p, .articleBody ul {
    font-weight: 300;
    line-height: 1.5;
}

.articleBody b, .articleOpen b {
    color: var(--purple);
    font-weight: 300;
}

.articleOpen .pill_button span {
    font-size: 14px;
}

/*
 *---------------------------------------------------------------
 * PAGING
 *---------------------------------------------------------------
 *
 */

.blog .blogList ul {
    grid-column: 1 / -1; /* ignores column layout */
    list-style: none;
    padding: 2em 0 ;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.blog .blogList ul li a.pill_button {
    background: var(--light-gray);
    border-color: var(--light-gray);
    color: var(--purple);
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    height: 40px;
    width: 40px;
}

.blog .blogList ul li.selected a.pill_button {
    background: var(--purple);
    border-color: var(--purple);
    color: var(--white);
}

/* -----------------------------------------
   Reset buttons to look like links / blocks
----------------------------------------- */
.title.asLink,
.imgBtn{
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: center;
}

.imgBtn{
    display: block;
    width: 100%;
}

/* -----------------------------------------
   Centered Blog Popover
----------------------------------------- */
#blogPopover[popover]{
    position: fixed;
    inset: 0;
    margin: auto;

    width: min(900px, calc(100vw - 2rem));
    height: min(80vh, calc(100vh - 2rem)); /* important: give it a height */

    border: 0;
    padding: 0;
    border-radius: 12px;

    background: #fff; /* important: visible box */
    overflow: hidden; /* keep rounded corners clean */

    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    animation: popFade .2s ease-out;
}

/* Backdrop */
#blogPopover::backdrop{
    background: rgba(0,0,0,.45);
}

/* -----------------------------------------
   Inner layout
----------------------------------------- */

.blogPopover__inner{
    display: flex;
    flex-direction: column;
    height: 100%;

    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.blogPopover__top{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.blogPopover__top strong{
    font-size: 1.05rem;
    font-weight: 600;
}

/* Close button */
.blogPopover__close{
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* Body (scrollable) */
.blogPopover__body{
    padding: 2em 3em 4em 3em;
    overflow-y: auto;
    flex: 1;
}

/* Footer */
.blogPopover__footer{
    padding: 16px 18px;
    border-top: 1px solid rgba(0,0,0,.08);
}

.blogImage {
    border-radius: 10px;
    margin: 2em 0;
}

.blogPopover__body p, .blogPopover__body ul {
    font-weight: 300;
    line-height: 1.5;
}

.blogPopover__body b {
    color: var(--purple);
}

.sharedWin {
    max-width: 500px;
}

.winSubmission__form {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.winSubmission__form > div {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.winSubmission__form .form-group {
    display: flex;
    flex-direction: column;
}

.winSubmission__form .form-group label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--black);
}

.winSubmission__form .form-title {
    font-size: var(--font-size-sm);
    color: var(--purple);
    margin-bottom: 1em;
}


.winSubmission__form p {
    max-width: 340px;
    font-size: var(--font-size-xs);
    text-align: center;
    line-height: 2;
}

.winSubmission__form .form-group textarea,
   .winSubmission__form .form-group input {
    /*background: var(--white);*/
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.winSubmission__form .form-group textarea::placeholder,
.winSubmission__form .form-group input::placeholder {
    color: var(--body-regular);
}

.winSubmission__header h2 {
    margin-top: 0;
}

.winSubmission_outer_footer {
    background: var(--light-purple);
}

.winSubmission__footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.winSubmission__footer button {
    font-size: var(--font-size-lg);
}

.winSubmission__footer button:hover {
    background: var(--dark-blue);
}

/* -----------------------------------------
   Inner layout
----------------------------------------- */

.profile-page {
    display: flex;
    flex-direction: column;
    padding-bottom: 4em;
    gap: 1em;
}

.profileWrap {
    background: var(--white);
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    overflow: hidden;
    display: grid;
    gap: 2em 0;
}

.profileWrap .profilebox {
    position: relative;
    display: grid;
}

.profilebox > div {
    /* background-color: var(--white); */
    display: grid;
    gap: 1em;
}

.profileWrap .small-gutter {
    padding: 1em;
}

.tomsclass  {
    display: grid;
    align-items: center;
    gap: 1rem;
}

.tomsclass label {
    font-size: 1rem;
    color: var(--black);
    font-weight: 600;
    padding-top: 0.4rem;
}

.tomsclass input,
.tomsclass select {
    width: 100%;
    background: var(--white);
    border-radius: 5px;
    border: 1px solid var(--border-color);
}

.profileWrap .tomsclass input {
    padding: 0 10px 0 10px;
    font-size: 12px;
    height: 39px;
    line-height: 39px;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

@media screen and (min-width: 56.875em) /* 910px */ {
    .profileWrap .tomsclass {
        grid-template-columns: 180px 1fr;
        gap: 1rem;
        align-items: center;
    }

    .profileWrap .tomsclass input {
        max-width: 50%;
        width: 100%;
    }
}

.profile-form form > .form-group {
    padding-bottom: 1em;
    border-bottom: 1px dashed var(--border-color);
}

.form-photo > div {
    border-radius: 10px;
    display: inline-flex;
}

.form-photo .fileDelete {
    outline: 1px solid red;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 20px;
    font-size: 10px;
    color: var(--white);
    z-index: 3;
}

.form-photo .fu {
    position: relative;
}

.form-photo .fu label, .profile-media__placeholder  {
    display: block;
    width: 100px !important;
    height: 100px !important;
    padding: 0;
    border: 5px solid var(--border-color);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.profile-media__placeholder {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.form-photo .fu label:hover {
    border: 5px solid var(--purple);
    background: var(--light-purple);

}

.form-photo .fu label img {
    position: relative;
    z-index: 2;
}

.form-photo .fu label::before {
    content: '\f09b'; /* Material icon code for 'add_a_photo' */
    font-family: 'Material Symbols Outlined', serif;
    font-size: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--border-color);
    z-index: 1;
}

.form-photo .fu label:hover::before {
    color: var(--purple);
}

.form-input-wrap {
    position: relative;
    width: 100%;
    background: var(--white);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.form-input-wrap select,
.form-input-wrap input[type="text"],
.form-input-wrap input[type="date"]{
    position: relative;
    z-index: 1;
    padding: 0 35px 0 10px;
    font-size: 12px;
    height: 39px;
    line-height: 39px;
    border: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.profile-form .action_link {
    display: inline-flex;
    margin-right: auto;
}

.profile-form form {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.notice.notice--success {
    padding: 0.5em 0.7em;
    background: var(--light-purple);
    margin-right: auto;
    color: var(--purple);
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 0.2em;
}

.profile-media__figure {
    border: 5px solid var(--border-color);
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100px;
    margin: 0;
    padding: 0;
}

.profile-media__figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-form  .question-item {
    border-top: 1px dashed var(--border-color);
}

.profile-form  .question-item {
    margin: 0;
}

.profile-form  .question-item:first-child {
    border-top: 0;
}

.profile-form  .action_link.rounded {
    margin-bottom: 1em;
}

.get-help-nav ul {
    display: flex;
    direction: ltr;
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    gap: 1em;
}

.get-help-nav ul a {
    font-weight: 600;
    text-decoration: underline;
    color: var(--purple);
}

.get-help-nav ul a:hover {
    font-weight: 600;
    color: var(--purple);
}

.profile-page hr {
    border-top: 1px dashed var(--border-color);
}

.profile-page summary {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    cursor: pointer;
    padding-left: 1em;
}

.help-support-content {
    display: grid;
    gap: 1em;

    align-items: stretch;
}

@media screen and (min-width: 68.75em) {
    .help-support-content {
        grid-template-columns: 1fr 1fr;
    }
}

.help-support-content > div {
    display: flex;
}

.help-support-content > div > section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: start;
}

.profile-page > summary h3:hover {
    color: var(--purple);
}

.help-support-content h2 {
    position: relative;
    padding-left: 40px;
}
.help-support-content h2:after {
    position: absolute;
    font-family: 'Material Symbols Outlined', serif;
    font-size: 1.5em;
    font-weight: normal;
    content: "chevron_right";
    line-height: 20px;
    color: var(--purple);
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-support-content #main-dashboard svg {
    position: absolute;
    left: 0;
    top: 0;
    fill: var(--purple);
    width: 1em;
    height: 1em;
}

.help-support-content #main-dashboard h2:after {
    display: none;
}

.help-support-content #audit-overview h2:after {
    content: "check_small";
    font-size: 1.5em;
}

.help-support-content #recommendations h2:after {
    content: "star";
    font-size: 1.5em;
}

.help-support-content #action-centre h2:after {
    content: "fiber_manual_record";
    font-size: 1.5em;
}

.help-support-content #reports h2:after {
    content: "bar_chart";
    font-size: 1.5em;
}

.help-support-content #welcome-wins h2:after {
    content: "trophy";
    font-size: 1.5em;
}

.help-support-content #my-profile h2:after {
    content: "account_circle";
    font-size: 1.5em;
}

.profile-page details {
    background: var(--light-gray);
    border-radius: 5px;

}

.profile-page details .pill_button {
    display: inline-flex;
}

.profile-page details:hover summary h3 {
    color: var(--purple);
}


.profile-page > summary:before {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-page.help-support-wrap {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.profile-page.help-support-wrap section {
    background: var(--white);
    border-radius: 10px;
    border: 1px dashed var(--border-color);
    overflow: hidden;
    display: grid;
    gap: 2em 0;
}

/* -----------------------------------------
   Animation
----------------------------------------- */
@keyframes popFade{
    from{
        transform: translateY(10px) scale(.98);
        opacity: 0;
    }
    to{
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* -----------------------------------------
   Animation
----------------------------------------- */

.videoWrap{
    position: relative;
    width: 100%;
    max-width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    border-radius: 10px; /* optional */
    margin: 2em 0 ;
}

.videoWrap iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* -----------------------------------------
   YOUTUBE EMBED
----------------------------------------- */

.you-tube-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.you-tube-embed img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.you-tube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 64px;
    height: 64px;
    font-size: 24px;
    cursor: pointer;
}

.yt-play-btn:hover {
    background: #ff0000;
}

/*
 *---------------------------------------------------------------
 * RESPONSIVE 30.375em AND WIDER
 *---------------------------------------------------------------
 *
 */


@-ms-viewport {
    /*width: device-width;*/
}

@viewport {
    /*width: device-width;*/
}

@media screen and (min-width: 30.375em) {
    .menuIcon {
        /*display: none;*/
    }
}

@media screen and (min-width: 40.375em) {
    .action-header-wrap .title_toggle .pill_button.add span,
    .action-header-wrap .title_toggle .pill_button.help span {
        display: block;
    }
}

/* Only hide on small screens */
@media screen and (max-width: 56.874em) { /* up to 910px - 1px */
    .hide-on-mobile {
        display: none !important;
    }
}

/* Show on larger screens */
@media screen and (min-width: 56.875em) /* 910px */ {

    .mobile-hide {
        display: flex !important;
    }

    .ipad_content.mosaic {
        grid-template-columns: 1fr 1fr;
    }
    .mosaic .tile--featured {
        grid-column: 1 / -1;       /* spans both columns */
        aspect-ratio: 16 / 7;      /* a bit taller on tablet */

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mosaic .tile {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .audit_icon {
        width: 100px;
        height: 100px;
    }

    .home_blocks > div {
        width: 50%;
    }

    .gutter {
        padding: 2.5em;
    }

    .dark_popup.full .right .gutter {
        padding: 3em;
    }

    .niceWork .gutter {
        display: grid;
        grid-template-columns: 1fr;
    }

    .side_gutter {
        padding: 0 2.5em;
    }

    .gutter-sm {
        padding: 0 1.2em;
    }

    .side_gutte-sm {
        padding:  0 1.2em;
    }

    .bottom_gutter {
        padding-bottom: 2.5em;
    }

    .wrapper {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    .header .icon_wrap_two {
        display: none;
    }

    .header .icon_wrap_three .icon {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 0.5em;
        padding: 0 0.5em;
    }

    .header .icon_wrap_three .icon > div {
        display: flex;
    }

    .header .icon {
        padding: 0 0.5em;
    }

    .header_wrap {
        position: fixed;
        left: 0;
        display:flex;
        flex-direction: row;
        width:100%;
        padding-left: 200px;
        z-index: 1;
        background: var(--white);
    }

    .header_wrap .left {
        display: flex;
        flex-direction: row;
    }

    .header_wrap .left > div:first-child {
        flex-grow: 2;
        width: 100%;
        max-width: 70%;
    }
    .header_wrap .left > div:last-child{
        flex-grow: 1;
        max-width: 30%;
    }

    .full_width .header_wrap .left > div:last-child{
        border-left: 1px solid var(--border-color);
    }

    .sub_header {
        min-height: 70px;
        flex-direction: column;
        justify-content: space-between;
    }

    .mobile_gutter {
        padding: 0;
    }

    .left,
    .left.detial {
        padding-top: 100px;
    }

    .reports-page .left {
        padding-top: 0;
    }

    .right_col {
        position: relative;
        display: block;
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        padding-top: 100px;

    }

    .left_col {
        background: var(--purple);
        width: 100%;
        min-width: 200px;
        max-width: 200px;
        color: #fff;
        position: relative;
        z-index: 2;
        padding-top: 80px;
    }

    .left_col.hide {
        display: none;
    }

    .left_col > div {
        width: 100%;
        max-width: 294px;
    }

    .sidebar h2 {
        font-size: 1em;
    }

    .title_toggle {
        justify-content: left;
    }

    .title_toggle button {
        display: block;
    }

    .task-manager-header {
        position: fixed;
        background: var(--light-gray);
        display: flex;
        right: 0   ;
        width: calc(100% - 200px);
        z-index: 5;
        box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
    }

    /* Scroll offset for anchor links with fixed header */
    .help-support-content > div[id] {
        scroll-margin-top: 200px;
    }

    .action-header-wrap .title_toggle .pill_button.help {
        display: flex;
    }

    .action-header-wrap .title_toggle .pill_button.help,
    .action-header-wrap .title_toggle .pill_button.add {
        gap: 5px;
    }

    .toggleFilters .task-manager-header {
        width: 100%;
    }

    .task-manager-header .title  .material-symbols-outlined {
        display: none;
    }

    .task-manager-header .title div {
        font-size: inherit;
    }

    .task-manager-header .task-manager-header-group {
        display: flex;
    }

    .task-manager-header .progress-box {
        display: flex;
        max-width: 79px;
        height: 70px;
    }

    .task-manager-header .progress-content {
        flex-direction: row;
    }

    .left_col .left_inner {
        flex-direction: column;
        margin: 2em 0;
    }

    .left_col .left_inner > div {
        width: 100%;
    }

    .left_col .left_inner > div:last-child {
        display: none;
    }

    .filter_help {
        display: none;
    }

    .searchBox {
        display: flex;

        flex-direction: row;
    }

    .mainmenu {
        display: block;
    }

    .left_nav li.menuitem a b {
        font-size: 1.1em;
    }


    .user_wrap {
        display: block;
    }

    .four_boxes > div {
        flex: 1 0 41%;
    }

    .score span {
        width: 100%;
    }

    a.action_link {
        font-size: 1em;
    }

    .question_selections a.action_link {
        font-size: 1.4em;
    }

    .com_up_save {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .com_up_save a {
        max-width: 49%;
        width: 100%;
    }

    .content_sections_two {
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .content_sections_two div {
        max-width: 46%;
        width: 100%;
    }

    td {
        display: revert;
    }

    .custom_table thead {
        border-top: 0;
    }

    .custom_table td:first-child {
        border-top: 0;
        border-bottom: 0;
    }

    tr {
        display: revert;
        margin-bottom:30px;
    }

    .table_question {
        font-size: 1.1em;
        min-width: 200px;
    }

    .score {
        padding: 0;
        flex-direction: row;
    }

    .score > div {
        width: 50%;
    }

    .score .progress_icon {
        min-height: 60px;
    }

    .score > .devide {
        width: 1px;
        height: 40px;
        background: var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .score span {
        font-size: 2vw;

        padding-left: 10px;
        margin-top: 0;
    }

    .recommended_action_link {
        display: flex;
        flex-direction: row;
    }

    .recommended_action_link a {
        margin-left: 20px;
        margin-top: 0;
        font-size: 1.2em;
    }

    .update_action a {
        margin-bottom: 0;
    }

    thead {
        display: table-header-group;
    }

    .mw {
        min-width: 800px;
        display: flex;
    }

    .supporting_actions .comment > div {
        text-align: left;
    }

    .supporting_actions .comment span {
        margin: 0 10px 0 0;
    }

    .content_detail {
        margin-bottom: 2em;
    }

    .flex-column .column-item-one {
        display: flex;
    }

    .flex-column .column-item-two {
        flex-basis:80%;
    }

    .login_box_wrap {
        flex-direction: row;
    }

    .btn {
        font-size: 1em;
    }

    .small,
    a.audit_link.small,
    button.audit_link.small{
        font-size: 1em;
    }

    .medium {
        font-size: 1.2em;
    }

    .update_action a.audit_link.small,
    .update_action button.audit_link.small{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }


    .update_action, .answers {
        display: flex;
        justify-content: space-between;
        gap: 5px;
    }

    .add_dismiss {
        justify-content: center;
    }

    .header > div:first-child {
        display: contents;
        width: 100%;
    }

    .header_outer_wrapp {
        position: fixed;
        width: 100%;
        z-index: 6;
    }

    .header {
        flex-direction: inherit;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header .logo {
        max-width: 150px;
        margin: 10px 0;
        display: flex;
        align-items: center;
    }

    .header .icon_wrap,
    .header .icon_wrap_three {
        /*width: 200px;*/
        height: 100px;
    }

    .right_top_menu,
    .right_school_menu {
        top: 100px;
    }

    .header .menublock {
        width: auto;
    }

    .header .crimson-dawn {
        position: static;
    }

    .header .menublock .menu_wrap {
        width: auto;
    }

    .header .menublock .topmenu {
        list-style: none;
        padding: 0;
        /*margin: 0 80px 0 0;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: auto;
        border-top: 0;
    }

    .header .menublock nav > .topmenu {
        position: relative;
        height: 100px;
        padding: 0 0.5em;

    }

    .subNavWrap > div {
        position: absolute;
        width: 200px;
        left: 0;
        top: 100px;
    }

    .header .menublock .topmenu.on {
        display: flex;
    }

    .header .menublock .topmenu li {
        display: flex;
        align-items: center;
        height: 100%;
        border-bottom: 0;
    }

    .header .menublock .topmenu li a {
        position: relative;
        text-decoration: none;
        border-radius: 100px;
        font-weight: bold;
        color: var(--white);
    }

    .header .menublock .topmenu li a {
        font-size: 0.9em;
        text-align: center;
        padding: 0.9em;
    }

    .header .menublock .topmenu li a:hover,
    .header .menublock .topmenu li.menuActive a:hover {
        background: var(--dark--purple);
        color: var(--white);
        transition: background 0.2s ease, color 0.2s ease;

    }

    .header .menublock .topmenu li a:hover:after,
    .header .menublock .topmenu li.menuActive > a:hover:before{
        color: var(--white);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .header .menublock .topmenu li.menuActive a {
        background: var(--white);
        color: var(--purple);
    }

    .header .menublock .topmenu li.menuActive li a,
    .header .menublock .topmenu li.menuActive li a:after {
        background: none;
        color: var(--white);
    }

    .header .menublock .topmenu li a:after {
        top: 5px;
    }

    .header .menublock .topmenu li a span {
        display: none;
    }

    .subNav input {
        display: none;
    }

    .header .menublock .topmenu li:hover .hidden {
        display: block;
    }

    .filter_box, .filter_box.on {
        display: block;
    }



    .home_blocks > div:nth-child(1) {
        border-bottom: 1px solid var(--border-color);
    }
    .home_blocks > div:nth-child(2) {
        border-bottom: 1px solid var(--border-color);
    }

    .home_blocks .holder {
        margin: 0 auto;
        padding: 30px 0;
    }

    .home_blocks:after {
        content: '';
        background: var(--border-color);
        position: absolute;
        left: 50%;
        width: 1px;
        height: 100%;
    }

    .home_score .progress_icon {
        height: 100px;
        width: 100px;
    }

    .half_half {
        display: flex;
        justify-content: space-between;
    }

    .side_side {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .audit_task_box_table th, .audit_task_box_table td {
        text-align: left;
    }

    .welcome_boxes {
        flex-direction: row;
    }

    .home_welcome_wrap > div {
        max-width:70%;
        margin: 0 auto;
    }

    .home_welcome_wrap > div:nth-child(1) {
        max-width: 800px;
    }

    .audit_icon.large {
        width: 200px;
        height: 200px;
    }

    .home_welcome_wrap .foundation_audit_progress_wrap,
    .foundation_audit_progress_wrap {
        max-width: 1000px;
    }

    .foundation_audit_progress_wrap {
        padding-top: 2em;
    }

    .foundation_audit_progress_wrap .help {
        /*display: flex;*/
        /*align-content: center;*/
        /*justify-content:  space-between;*/
        /*font-size: 1.2em;*/
        /*gap: 10px;*/
    }

    .foundation_audit_progress_boxes > div a.pill_button {
        font-size: 1.2em;

    }

    .foundation_audit_progress_boxes {
        justify-content: space-between;
    }

    .foundation_audit_progress_boxes > div {
        width: 49%;
    }

    .invite_submit_link {
        justify-content: end;
    }

    .invite_search_link {
        justify-content: space-between;
    }

    .invite_submit_link a {
        max-width: 200px;
    }

    .invite_search_link a {
        max-width: 300px;
    }

    .role-picker__group {
        grid-template-columns: 1fr 1fr;
    }

    .question-item,
    .question-text {
        flex-direction: row;
    }

    .question-text {
        text-align: left;
    }
    .q-num {
        padding-right: 20px;
    }

    .popup .audit_link,
    .popup a.audit_link,
    .popup button.audit_link {
        margin-bottom: 0;
    }

    .pop_com_up_save {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pop_com_up_save a {
        max-width: 49%;
        width: 100%;
    }

    /*dialog .closeModal {*/
    /*    top: 30px;*/
    /*    right: 30px;*/
    /*}*/

    .modal.scl {
        /*padding: 20px;*/
    }

    .dark_popup .right h2 {
        display: flex;
        align-items: center;
    }

    .dark_popup .right h2.rec {
        align-items: start;
        flex-direction: column;
        gap: 10px 0;
    }

    .ac_popup .dark_popup .right h2 {
        gap: 10px;
    }

    .recommendations_cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .recommendations_cards .card .box {
        display: flex;
    }

    .recommendations_cards .card .cost {
        width: auto;
    }

    .recommendations_cards .card .costWrap {
        display: flex;
        justify-content: left;
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .dark_popup .right h2 > div {
        margin-bottom: 0;
    }

    .dark_popup .right h2 .sub {
        margin-top: 0;
        margin-left: 5px;
        display: inherit;
    }

    .audit_blocks > div {
        width: 32%;
    }

    caption > div {
        flex-direction: row;
    }

    caption a.audit_link {
        margin-top: 0;
        margin-right: 0;
    }

    .task_table_footer {
        flex-direction: row;
    }

    .report_tasks {
        grid-template-columns: 1fr 1fr 1fr;
    }


    .report_tasks > div {
        border-top: 0;
    }

    .task_table_footer > div:first-child {
        border-right: 1px solid var(--border-color);
    }

    .report_tasks > div {
        border-left: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .report_tasks > div:nth-child(3n + 1) {
        border-left: none;
    }

    .report_tasks > div:last-child {
        border-bottom: none;
        border-right: 1px solid var(--border-color);

    }

    .report_tasks:nth-last-child(-n + 3) {
        border-bottom: none;
    }

    .report_tasks > div:nth-last-child(3) {
        border-bottom: none;
    }

    .report_tasks > div:nth-last-child(2) {
        border-left: 1px solid var(--border-color);
        border-bottom: none;
    }

    .btn3 fieldset {
        flex-direction: row;
        flex-wrap: wrap;
    }

    details.details_sub_drop_down summary .title strong {
        display: inline;
    }

    .grid-template-columns-5 {
        grid-template-columns: 1fr 1fr;
    }

    .gr-col-2 {
        grid-column: span 2;
    }

    .articleWrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .pu_item {
        justify-content: right;
    }

    .pu2_item .btn3 {
        justify-content: left;
    }

    .reportbox .filterappWrap {
        grid-template-columns: 1fr 1fr;
    }

    #submitMessageBox {
        max-width: 30%;
    }

    .pu_item.saveDeleteWrap {
        justify-content: right;
    }

    .pu_item.saveDeleteWrap a {
        flex: none;
    }

    .popNav a.back,
    .popNav a.close,
    .popNav button.close,
    a.btn-edit-note,
    a.btn-delete-note,
    button.btn-save-edit,
    button.btn-cancel-edit {
        font-size: 0.8em;
        height: auto;
        width: auto;
    }

    .minw_300 {
        min-width: 300px;
    }
}

@media screen and (min-width: 61.5625em) {

    .ipad_content.mosaic {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
          "featured a b"
          "featured c d";

        padding: 0  20px;
    }
    .mosaic .tile--featured {
        grid-area: featured;
        aspect-ratio: auto;
        min-height: 200px;
        max-width: 200px;
    }

    .mosaic .small--tile a {
        font-size: 0.7em;
    }

    .mosaic .tile.tile--c, .mosaic .tile.tile--d  {
        display: block;
    }

    .header .menublock .topmenu {
        /*margin: 0 161px 0 0;*/
    }

    .wrap {
        max-width: 1260px;
        margin: 0 auto;
    }

    .fixed_filters {
        position: fixed;
        top: 100px;
        left: 0;
        width: 294px;
        height: 100vh;       /* perfect full-height sidebar */
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .left_col {
        min-width: 294px;
        max-width: 294px;
    }

    .left_col, .right_col {
        padding-top: 100px;
    }

    .header .logo {
        margin: 20px 0;
    }

    .header .icon_wrap,
    .header .icon_wrap_three {
        /*width: 100px;*/
        height: 100px;
    }

    .header .icon span {
        width: 37px;
        height: 37px;
    }

    /*.header .icon span img {*/
    /*    height: 60px;*/
    /*    width: 60px;*/
    /*}*/

    .header-max-height {
        min-height: 150px;
    }

    .header_wrap {
        padding-left: 294px;
    }

    .question_actions {
        flex-direction: row;
        justify-content: space-between;
    }

    .question_actions a.action_link {
        text-align: center;
        max-width: 48%;
        width: 100%;
    }

    .left_nav li.menuitem a b {
        font-size: 1.4em;
    }

    .task-manager-header {
        width: calc(100% - 294px);
    }

    .hide .task-manager-header {
        width: 100%;
    }

    .task-manager-header .progress-content {
        font-size: 1.2em;
    }

    .task-manager-header .progress-box {
        max-width: 100px;
        width: 100px;

    }

    .sidebar h2 {
        font-size: 1.5em;
    }

    .second_header  {
        flex-direction: row;
    }

    .second_header > div {
        max-width: 58%;
        width: 100%;
    }

    .second_header .crumbs {
        text-align: left;
        padding-right: 20px;
    }

    .second_header .sec_sub_menu {
        max-width: 300px;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .second_header .round_button {
        max-width: 50%;
        margin: 0;
    }

    .access_custom_table .col-question a,
    .access_custom_table .col-question span {
        font-size: 1em;
    }


    .one_by_one {
        flex-direction: row;
    }

    .audit_icon {
        width: 100px;
        height: 100px;
    }

    .mosaic .tile--featured .audit_icon {
        width: 150px;
        height: 150px;
    }

    .cat_info {
        align-items: start;
        justify-content: space-between;
        flex-direction: row;
    }

    .cat_info > div:nth-child(2) p {
        text-align: left;
        margin-top: 0;
    }

    .header .logo {
        padding: 0 10px;
    }

    .filters summary,
    .sidebar select {
        font-size: 1.1em;
    }

    .grid-template-columns-2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-template-columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .blogList {
        grid-template-columns: repeat(2, 1fr);
    }




}

@media screen and (min-width: 68.75em) {

    .left_nav li.menuitem > a {
        padding: 2.5em 1.5em;
    }

    .left_nav li.menuitem > a:hover {
        border-radius: 0;
    }

    .show_rec_actions {
        display: flex;
        flex-direction: row;
    }

    .left_bar {
        flex-grow: 2;
        width: 100%;
    }

    .right_bar {
        flex-grow: 1;
        max-width: 30%;
        position: absolute;
        width: 100%;
        right: 0;
        height: 100%;
    }

    .right_bar:after {
        content: '';
        position: absolute;
        border-left: 1px solid var(--border-color);
        left: 0;
        top: 0;
        height: 100%;
        width: 1px;
        z-index: 1;
    }

    .header .menublock .topmenu li a {
        font-size: 1.1em;
    }

    .show_rec_actions .fix_actions {
        position: fixed;
        overflow-y: auto;
    }

    .breadcrumbs .breadcrumbs_menu {
        width: 100%;
        max-width: 80%;
        margin: 0 auto;
    }

    .breadcrumbs .breadcrumbs_menu > div.link {
        color: var(--black);
        font-size: 0.8em;
    }

    .breadcrumbs .breadcrumbs_menu > div.link span {
        position: relative;
        margin: 0 5px;
    }

    .btn2 label,
    .button-group button {
        font-size: 1em;
    }

    .score .out_of {
        font-size: 1em;
    }

    .answers {
        flex-direction: row;
    }

    .minwid400 {
        min-width: 400px;
    }

    .task-manager-header .create-btn span {
        display: none;
    }

    .task-manager-header .create-btn i {
        font-style: normal;
        display: flex;
        font-size: 0.8em;
    }

    .task-manager-header .create-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 49px;
    }

    .mosaic .tile--featured .audit_icon {
        width: 200px;
        height: 200px;
    }

    .mosaic .tile--featured a {
        font-size: 1.2em;
    }
    .header .menublock .topmenu li a:after {
        top:10px;
    }

    .btn3 fieldset {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .grid-template-columns-5 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .blogList {
        grid-template-columns: repeat(3, 1fr);
    }

    .reportWrap .reportbox.logs:before {
        position: absolute;
        content: '';
        display: block;
        background: var(--border-color);
        width: 2px;
        height: 90%;
        left: 17px;
        top: 5%;
    }

    .reportbox .filterappWrap {
        grid-template-columns: 36px 1fr 1fr 100px 1fr 1fr 10px 1fr;
    }

    .reportbox .filterappWrap .span-2 {
        grid-column: unset;
    }

    .reportbox .filterappWrap .one,
    .reportbox .filterappWrap .divide  {
        display: grid;
    }

}

@media screen and (min-width: 75em) {

    .ipad_content.mosaic {
        max-width: 550px;
    }

    .task-manager-header {
        flex-direction: row;
    }

    .task-manager-header .task-manager-header-group {
        justify-content: left;
        margin: 0;
        width: auto;
    }

    .header .logo {
        max-width: 200px;
    }
    .header .logo img {
        width: 200px;
    }

    .row-2 .reportbox > div {
        text-align: left;
    }

    .grid-template-columns-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .reportWrap .flex {
        flex-direction: row;
    }

    .reportWrap .small-gutter,
    .profileWrap .small-gutter {
        padding: 2em;
    }

}

@media screen and (min-width: 79em){

    .header .menublock .topmenu li a:after,
    .header .menublock .topmenu li a:before{
        top:10px;
    }
}

@media screen and (min-width: 90em) {

    .header .logo {
        max-width: 250px;
    }
    .header .logo img {
        width: 250px;
    }

    .task-manager-header .progress-box {
        border-radius: 0;
        margin: 0;
    }

    .update_action {
        flex-direction: row;
    }
    .minwid350 {
        min-width: 350px;
    }

    th, td {
        padding: 1.5rem;
    }

    .reportWrap .open-next-last h3 > div {
        display: inline;
    }

    .blogList {
        grid-template-columns: repeat(4, 1fr);
    }

    .max_1200 {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }
}
/* ---------------------------------------------------------------
 * NOTIFICATIONS — avatar badge + slide-out drawer
 * --------------------------------------------------------------- */

/* ---- Avatar badge ---- */
.notif-avatar-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

b.notif-avatar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--red);
    color: var(--white);
    border-radius: 18px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    z-index: 10;
    border: none;
    box-sizing: border-box;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Overlay ---- */
.notif-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 900;
}

.notif-overlay.open { display: block; }

/* ---- Drawer ---- */
.notif-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: 100dvh;
    background: var(--white);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 901;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.notif-drawer.open { transform: translateX(0); }

/* ---- Drawer header ---- */
.notif-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.notif-drawer-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--body-semi);
}

.notif-drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notif-clear-all {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--purple);
    text-decoration: underline;
    padding: 0;
}

.notif-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--body-semi);
    display: flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
}

.notif-close:hover { background: var(--lighter-gray); }

/* ---- Scrollable body ---- */
.notif-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* ---- Section headers ---- */
.notif-section-header {
    padding: 0.6rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--white);
    border-bottom: 1px solid var(--lighter-gray);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.notif-section-header.notif-section-unread {
    background: #ECF3FE;
}

.notif-section-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}

/* ---- Individual card ---- */
.notif-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--lighter-gray);
    cursor: pointer;
    transition: background 0.1s;
}

.notif-item:last-child { border-bottom: none; }

.notif-item.notif-unread { background: #ECF3FE; }

.notif-item:hover { filter: brightness(0.97); }

/* ---- Icon circle ---- */
.notif-icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-icon-circle .material-symbols-outlined {
    font-size: 1rem;
    color: var(--white);
}

.notif-icon-circle.color-green  { background: var(--green); }
.notif-icon-circle.color-orange { background: var(--orange); }
.notif-icon-circle.color-purple { background: var(--purple); }
.notif-icon-circle.color-red    { background: var(--red); }
.notif-icon-circle.color-blue   { background: var(--blue); }

/* ---- Card text ---- */
.notif-content { flex: 1; min-width: 0; }

.notif-trigger-label {
    margin: 0 0 0.15rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--body-semi);
}

.notif-message {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    color: var(--body-semi);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-meta {
    font-size: 0.68rem;
    color: var(--text-muted);
}

/* ---- Card actions (dismiss) ---- */
.notif-item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
}

.notif-action-hint {
    font-size: 0.68rem;
    color: var(--purple);
}

.notif-dismiss-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 2px 8px;
}

.notif-dismiss-btn:hover { background: var(--lighter-gray); }

/* ---- Loading / empty ---- */
.notif-loading {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
    color: var(--dark-gray);
}

.notif-spin {
    animation: notif-spin 1s linear infinite;
    font-size: 2rem;
}

@keyframes notif-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    gap: 0.5rem;
}

.notif-empty .material-symbols-outlined {
    font-size: 3rem;
    color: var(--dark-gray);
}

/* ---- Notification preferences (profile page) ---- */
.notif-pref-row {
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--lighter-gray);
}

.notif-pref-label {
    font-size: 0.875rem;
    color: var(--body-semi);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--dark-gray);
    border-radius: 24px;
    transition: background 0.2s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: transform 0.2s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--purple);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}