/*
 *---------------------------------------------------------------
 * DEVELOPMENT UTILITIES - REMOVE BEFORE GOING LIVE
 *---------------------------------------------------------------
 * Move this into its own stylesheet...
 */
/*html:after {
    background: red;
    padding: 5px;
    content: '< 30em';
    font-size: 0.7em;
    position: fixed;
    color: #FFFFFF;
    z-index: 999;
    left: 0;
    top: 0;
}

@media screen and (min-width: 30.375em) {
    html:after {
        content: '> 30em';
    }
}

@media screen and (min-width: 40.375em) {
    html:after {
        content: '> 40em';
    }
}

@media screen and (min-width: 56.875em) {
    html:after {
        content: '> 56em';
    }
}

@media screen and (min-width: 61.5625em) {
    html:after {
        content: '> 61em';
    }
}
*/

/* more styles */

@import url("variables.css");

/* variables.css */





/*
 *---------------------------------------------------------------
 * LAYOUT & UTILITIES
 *---------------------------------------------------------------
 *
 */
html {
    box-sizing: border-box;
    height: 100%;
    font-size: 100%;
}

body {
    /*font-size: 0.75em;*/ /*12px*/
    /*font-size: 0.875em;*/ /*14px*/
    /*font-size: 1em;*/ /*16px*/
    color: var(--body-regular);
    font-family: "Outfit", sans-serif;
}

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

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

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;
}

.hidden {
    display: none;
}

.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;
}


/*
 *---------------------------------------------------------------
 * A TAG RESET
 *---------------------------------------------------------------
 *
 */
a:link {
    text-decoration: none;
    /*color:#2c82c9;*/
}

a:visited {
    text-decoration: none;
    /*color:#2c82c9;*/
}

a:hover {
    text-decoration: underline;
    /*color: #bb1cc9;*/
}

a:active {
    text-decoration: underline;
}

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

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




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

h2 {
    color: #bb1cc9;
}

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

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

.txtBlack {
    color: #000;
}

.txtWhite {
    color: #fff;
}

.txtGrey {
    color: #666;
}

.txtBlue {
    color:#2c82c9;
}

.txtPurple {
    color: #bb1cc9;
}

.txtGreen {
    color: #13c975;
}

.txtRed {
    color: #c92a12;
}

.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: #f3f3f3;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    padding: 15px;
}

.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:100%;
    padding: 1em;
    outline: none;
    transition: box-shadow 0.30s ease-in-out;
    /*transition: border 0.30s ease-in-out;*/
}

textarea {
    resize: none;
}

select {
    background: transparent 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);
    /*border:1px solid rgba(81, 203, 238, 1);*/
}

/*input[type="submit"] {*/
/*    width:20%;*/
/*    margin: 1em 0;*/
/*    background-color:#2c82c9;*/
/*    color: #fff;*/
/*    transition: background-color 0.8s ease;*/
/*}*/

/*input[type="submit"]:hover {*/
/*    background-color: #bb1cc9;*/
/*}*/

/* CHECKBOX AND RADIO */
/* Customize the label (the container) */
.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;
}


/*
 *---------------------------------------------------------------
 * TABLES
 *---------------------------------------------------------------
 *
 */

/*table {*/
/*    padding:0.4em;*/
/*}*/

/*tr:nth-child(odd) {*/
/*    background: #f9f9f9;*/
/*}*/

/*th, td {*/
/*    border: 1px solid #d1d1d1;*/
/*    padding:0.6em;*/
/*    vertical-align: top;*/
/*}*/

/*
 *---------------------------------------------------------------
 * RESPONSIVE NAVIGATION (BURGER)
 *---------------------------------------------------------------
 *
 */
.menuIcon {

}



/*
 *---------------------------------------------------------------
 * 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;
    /*display: flex;*/
    /*max-width: 300px;*/
    /*margin-top: 1rem;*/
    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-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: 10px;
    width: 100%;
    background: #D3C2F7;
    z-index: 1;
}

.progress_bar > div {
    max-width: 75%;
    height: 10px;
    width: 100%;
    background: var(--purple);
}

.breadcrumb_links {
    text-align: center;
    max-width: 80%;
    font-size: 0.8em;
    margin: 0 auto 1em auto;

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

.breadcrumbs .breadcrumbs_menu {
    display: flex;
    justify-content: space-between;
}

.breadcrumbs .breadcrumbs_menu > div {
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
}

.breadcrumbs .breadcrumbs_menu > div.link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /*width: 40px;*/
}

.breadcrumbs .breadcrumbs_menu > div.link a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.breadcrumbs .breadcrumbs_menu > div.link:last-child span {
    rotate: 180deg;
}

.breadcrumbs .breadcrumbs_menu > div.link span {
    position: absolute;
    display: flex;
    align-items: center;
}

.breadcrumbs .breadcrumbs_menu > div span {
    color: var(--purple);
}





/*.breadcrumbs_wrap > div {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: start;*/
/*    height: 100%;*/
/*}*/

/*.breadcrumbs_wrap a {*/
/*    font-weight: 300;*/
/*    color: var(--body-semi);*/
/*    margin-left: 0.5rem;*/
/*}*/

/*.breadcrumbs_wrap .audit_icon {*/
/*    background: var(--purple) url("assets/icon_w.svg") no-repeat center;*/
/*    background-size: 15px;*/
/*    border-radius: 3px;*/
/*    display: flex;*/
/*    height: 25px;*/
/*    width: 25px;*/
/*    margin-right: 0.5rem;*/
/*}*/

/*.breadcrumbs_wrap a.audit_link {*/
/*    font-weight: 600;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/


/*
 *---------------------------------------------------------------
 * 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;
    /*font-size: 0.8em;*/
    /*max-width: 80%;*/
    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
 *---------------------------------------------------------------
 *
 */

/*.mainHeader {*/
/*    border-bottom: 1px solid black;*/
/*}*/

/*.mainHeader .wrap {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*}*/

.mainMenu {
    padding: 1em 0;
    margin: 0;
}

.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;
}

.gutter {
    padding: 1em;
}

.side_gutter {
    padding: 0 1em;
}

.wrapper {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*position: relative;*/
    /*height: 100%;*/
    /*width: 100%;*/
    /*overflow:  hidden;*/
}


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

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

.left_col .left_inner {
    display: flex;
    flex-direction: row;
    /*outline: red solid 1px;*/
    width: 100%;
}

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

.left_col .left_inner > div > div {
}

.left_col > * > * {
    /*outline: red solid 1px;*/
}

.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;
    background: white url("assets/bell.svg") no-repeat center;
    background-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    /*color: transparent;*/
    margin-right: 10px;
}

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

.menu span {
    font-size: 1.2rem;
    color: transparent;
    width: 100%;
}

.menu {
    width: 40px;
    height: 40px;
    background: white url("assets/menu.svg") no-repeat center;
    background-size: 1rem;
    display: flex;
    border-radius: 40px;
}

.mainmenu {
    display: none;
}

.mainmenu.on {
    display: block;
}

.on {
    display: block;
}

.right_col {
    /*overflow: scroll;*/
}






.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;
}

/* Add a red background color to navigation links on hover */
.left_nav li.menuitem:hover .menu_group {
    display: block;
}

.left_nav li.menuitem span {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*height: 30px;*/
    /*width: 30px;*/
    /*background: white;*/
    /*border-radius: 3px;*/
    /*display: flex;*/
    /*margin-right: 10px;*/
    /*color: var(--purple);*/
    /*font-size: 1.3em;*/
}

/*.left_nav li.menuitem span.autid {*/
/*    background: white url("assets/icon.svg") no-repeat center;*/
/*    background-size: 17px;*/
/*}*/

.left_nav li.menuitem span {

}

.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 > div:after {
    /*position: absolute;*/
    /*top: 3px;*/
    /*left: 0;*/
    /*content: '';*/
    /*width: 20px;*/
    /*height: 20px;*/
    /*background: url("assets/icon_w.svg") no-repeat center;");*/
}

.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;
    background: url("../assets/icon_green.svg") no-repeat center;
    /*outline: red solid 1px;*/
    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 {
    /*margin: 0.5em 0;*/
    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;
}





/*.widget_wrap {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    border-bottom: 1px solid var(--border-color);*/
/*}*/

/*.widget_wrap > div {*/
/*    width: 100%;*/
/*    !*max-width: 50%;*!*/
/*    height:auto;*/
/*    !*min-height:325px;*!*/
/*    display: flex;*/
/*}*/

/*.widget_wrap > div:first-child {*/
/*    border-bottom: 1px solid var(--border-color);*/
/*}*/




/*.four_boxes_wrap {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    width: 100%;*/
/*}*/

/*.four_boxes {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    width: 100%;*/
/*}*/


/*.four_boxes > div {*/
/*    flex: 1 0 100%; !* explanation below *!*/
/*    margin: 5px;*/
/*    height: 150px;*/
/*    background: var(--light-gray);*/
/*    border-radius: 6px;*/
/*}*/









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

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

/*
 *---------------------------------------------------------------
 * RIGHT ACTION BOX
 *---------------------------------------------------------------
 *
 */

.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);
}

/*
 *---------------------------------------------------------------
 * 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);

}

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

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

.question_group_title {
    color: var(--black);
    /*font-style: italic;*/
    font-weight: 300;
    font-size: 2vw;
}

.question_group_title span {
    font-weight: 600;
}

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

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

.question_actions > a {
    /*margin-right: 10px;*/
}

/*
 *---------------------------------------------------------------
 * 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);
    /*font-size: 0.9em;*/
    text-decoration: none;
    /*display: inline-flex;*/
    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 {

}

.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 {
    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;
    /*display: inline-flex;*/
    text-align: center;
    margin-bottom: 1em;
    width: 100%;
}



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] {
    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 {
    cursor: pointer;
    background: var(--purple);
    border: 1px solid var(--purple);
    color: var(--white);
}

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

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


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





.action_link_form input[type=button],
.action_link_form input[type=submit],
.action_link_form input[type=reset],
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;
    /*display: inline-flex;*/
    text-align: center;
    margin-bottom: 1em;
    width: 100%;
}

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

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


.action_link  input[type=submit] {
    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;
    /*justify-content: space-between;*/
    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;
    /*justify-content: space-between;*/
    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 {
    /*outline: red solid 1px;*/
    display: flex;
    width: 50%;
    height: 100%;
    min-height: 160px;
    background: url("../assets/icon_green.svg") no-repeat center;
}

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

.score  div:last-child {
    /*padding-left: 40px;*/
    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_80  {
    max-width: 80%;
    margin: 0 auto;
    width: 100%;
}

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

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

/*.cat_score_wrap {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    !*justify-content: space-between;*!*/
/*    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_score_wrap > div {*/
/*    border-left: 1px solid var(--border-color);*/
/*    padding: 1em;*/
/*}*/

/*.cat_score_wrap > div:first-child {*/

/*    border: 0;*/
/*}*/

/*.cat_score_wrap .cat_header {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

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

.overflow_scroll {
    /*border: 1px solid red;*/
    overflow: scroll;
    overflow-y: hidden;
}

table.cat_table {
    margin-bottom: 2em;
}

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

caption {
    border-top: 1px solid var(--border-color);
    font-weight: bold;
    padding: 1em 0;
    text-align: left;
}

th, td {
    /*border: 1px solid #ddd;*/
    padding: 1rem;
    text-align: left;
    vertical-align: top;
}

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

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

tr {
    display:block;
    margin-bottom:30px;
}

tr {
    border-top: 1px solid var(--border-color);

}

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

th {
    /*background-color: #f5f5f5;*/
    font-weight: bold;
}

.question {
    /*font-weight: bold;*/
    color: #333;
}

.info-icon {
    background: #673ab7;
    border-radius: 30px;
    /*padding: 0.5em 0.5em;*/
    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 {
    margin: 0 0.3em 0.3em 0.3em;
    padding: 0.5em 1em;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
}

button:focus {outline:0;}

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

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

.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;
    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 {
    /*outline: red solid 1px;*/
    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 a {
    text-decoration: underline;
    color: var(--purple);
}

.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;
}

.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;
}

/* Style the buttons that are used to open and close the accordion panel */
.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;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    color: var(--purple);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow: hidden;
}

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

.supporting_actions {
    /*overflow-y: hidden;*/
}

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

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

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

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



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

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

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

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












/*
 *---------------------------------------------------------------
 * 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 {
    background: red url('../assets/downArrow.svg') no-repeat right;
    outline: red solid 1px;
    /*content: '';*/
    position: absolute;
    right: 0;
    width: 50px;
    height: 100%;
    display: block;
}

.column-item-two select {
    position: relative;
    z-index: 2;
}

.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;
}



/*
 *---------------------------------------------------------------
 * 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) {
    .small,
    a.audit_link.small {
        font-size: 0.8em;
    }
}

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

    .gutter {
        padding: 2.5em;
    }

    .side_gutter {
        padding: 0 2.5em;
    }

    .gutter-sm {
        padding: 0 1.2em;
    }

    .wrapper {
        /*flex-direction: row;*/
        /*overflow: scroll;*/
        display: flex;
        width: 100%;
        align-items: stretch;
    }


    .right_col {
        /*overflow: scroll;*/

        display: block;
        width: 100%;
        min-height: 100vh;
        transition: all 0.3s;
        overflow: hidden;

    }




    .left_bar,
    .right_bar {
        padding-top: 180px;
    }









    .header_wrap {
        position: fixed;
        left: 0;
        /*right: 200px;*/
        display:flex;
        flex-direction: row;
        width:100%;
        padding-left: 200px;
        z-index: 1;
        background: var(--white);
        /*border-bottom: 1px solid var(--border-color);*/
    }

    .header_wrap .left {
        display: flex;
        flex-direction: row;
    }

    .header_wrap .left > div:first-child {
        /*outline: green solid 1px;*/
        flex-grow: 2;
        width: 100%;
        max-width: 70%;
    }
    .header_wrap .left > div:last-child{
        /*outline: yellow solid 1px;*/
        /*border-left: 1px solid var(--border-color);*/
        flex-grow: 1;
        max-width: 30%;
    }

    .full_width .header_wrap .left > div:last-child{
        /*outline: yellow solid 1px;*/
        border-left: 1px solid var(--border-color);
    }





    .sub_header {
        min-height: 70px;
        flex-direction: column;
        justify-content: space-between;
    }






    .left_right_wrap .right {
        /*max-width: 400px;*/
        /*width: 500%;*/
    }











    .left_col {
        background: var(--purple);
        width: 100%;
        min-width: 200px;
        max-width: 200px;

        color: #fff;
        position: relative;
        transition: all 0.5s;
        z-index: 2;
    }

    .left_col > div {
        /*position: relative;*/
        /*left: 0;*/
        /*right: 0;*/
        width: 100%;
        max-width: 294px;
    }





    .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;
    }

    .searchBox {
        display: flex;

        flex-direction: row;
    }

    .mainmenu {
        display: block;
    }


    .left_nav li.menuitem a b {
        font-size: 1.1em;
    }


    .user_wrap {
        display: block;
    }

    /*.widget_wrap {*/
    /*    flex-direction: row;*/
    /*}*/

    /*.widget_wrap > div {*/
    /*    max-width: 50%;*/
    /*    !*min-height:425px;*!*/
    /*}*/

    /*.widget_wrap > div:first-child {*/
    /*    border-right: 1px solid var(--border-color);*/
    /*    border-bottom: 0;*/
    /*}*/

    .four_boxes > div {
        flex: 1 0 41%;
    }

    .score span {
        /*font-size: 2.1vw;*/
        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 {
        border-right: 1px solid var(--border-color);
        display: revert;
        width: auto;
    }

    tr {
        display: revert;
        margin-bottom:30px;
    }

    .table_question {
        font-size: 1.1em;
    }

    .table_group {
        /*justify-content: space-between;*/
    }



    .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);
        /*margin: 0 5px;*/
        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;
    }

    .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;
    }

}

@media screen and (min-width: 61.5625em) {

    .wrap {
        max-width: 1260px;
        margin: 0 auto;
    }

    .left_col {
        min-width: 294px;
        max-width: 294px;
    }










    .header-max-height {
        min-height: 150px;
    }

    .header_wrap {
        /*right: 294px;*/
        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;
    }




    .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;
    }








    .one_by_one {
        flex-direction: row;
    }



}

@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;
        /*background: crimson;*/
        /*border-right: 1px solid var(--border-color);*/
    }

    .left_bar {
        /*outline: green solid 1px;*/
        flex-grow: 2;
        width: 100%;
        max-width: 70%;
    }

    .right_bar {
        /*outline: yellow solid 1px;*/
        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;
    }

    .show_rec_actions .fix_actions {
        position: fixed;
        /*padding-right: 2.5em;*/
        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;
    }

    .button-group {
        /*flex-direction: row;*/
    }

    .button-group button {
        margin: 0 0.3em;
    }

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