/*
	COLOURS
*/
.impl,
.IMPLEMENT {
    /* color: rgb(112, 110, 178);*/
    /* new colours - IMPLEMENT purple #8c54a1 */
    color: rgb(140, 84, 161);
}

.igni,
.IGNITE {
    /*color: rgb(205, 111, 102);*/
    /* new colours - IGNITE red #dd1e26 */
    color: rgb(221, 30, 38);
}

.ingt,
.INVESTIGATE {
    /*color: rgb(199, 7, 79);*/
    /* new colours - INVESTIGATE teal #2c7b8f */
    color: rgb(44, 123, 143);
}

.ivst,
.INVEST {
    /*color: rgb(121, 192, 65);*/
    /* new colours - INVEST green #6cbb44 */
    color: rgb(108, 187, 68);
}

.impr,
.IMPROVE {
    /*color: rgb(34, 175, 164);*/
    /* new colours - IMPROVE orange #f58232 */
    color: rgb(245, 130, 50);
}

.iden,
.IDENTIFY {
    /*color: rgb(0, 156, 220);*/
    /* new colours - IDENTIFY blue #2785c7 */
    color: rgb(39, 133, 199);
}

/*
*/

body, table, input, select, textarea {
    font-family: Open Sans, Helvetica, sans-serif;
}

button {
    outline: none;
}

.cfit-instance .cfit-show {
    position: fixed;
    right: 10px;
    bottom: 0px;
    z-index: 1000;
}

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}
/* IE < 8 */


html, body {
    height: 100%;
}

body {
    background: #edf1f5;
    color: #333333;
    overflow-y: scroll;
}

sup {
    font-size: 0.5em;
    font-family: verdana;
    font-weight: 600;
}

p {
    margin-bottom: 16px;
}

h1, h2, h3, h4, h5 {
    font-family: 'Raleway', sans-serif;
}

h1 {
    font-size: 44px;
}

/* SITE LAYOUT */

#page {
    margin: 0 auto;
    position: relative;
    background: #FFFFFF;
    width: 100%;
}

#menu-mask {
    position: absolute;
    background-color: black;
    opacity: 0.5;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

body #menu-mask {
    display: none;
}

body.is-menu-open #menu-mask {
    display: block;
}

.header span {
    float: left;
    margin-right: 5px;
    font-weight: 600;
    font-size: 1.05em;
    color: #cd7067;
    clear: left;
    margin-left: 40px;
    font-family: 'Raleway', sans-serif;
}

.header h1 {
    float: left;
}

.header .userinfo {
    float: right;
}

.header span.nolink {
    margin-left: 0;
}

.header {
    background-color: #333333;
    color: #FFFFFF;
    padding: 0;
    position: fixed;
    top: 0;
    z-index: 100;
    box-sizing: border-box;
    left: 0;
    width: 100%;
    clear: both;
    transition: all ease 400ms;
}

.header #logo,
.header #logo .nolink {
    float: left;
    max-width: 60px;
    padding: 11px 20px;
}

.header #logo a,
.header #logo .nolink {
    display: block;
    background-image: url(/images/six-is-circle-logo.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    text-decoration: none;
    text-transform: Capitalize;
    text-indent: -9999px;
    width: 60px;
    height: 60px;
}

.header #logo:hover {
    color: #FFFFFF;
    text-decoration: none;
    background: #23b0a5;
    transition: background ease 0.75s;
}

.header h1 {
    font-weight: 600;
    font-size: 24px;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 12px 20px;
    overflow: hidden;
    box-sizing: border-box;
    width: calc(100% - 60px);
}

#headerWrapperSpacer {
    height: 117px;
}

#headerWrapperSpacer.questionnaire {
    height: 82px;
}

.team-overall {
    width: 90%;
}

.header h1 a,
.header h1 a:visited,
.header h1 .nolink {
    color: #FFFFFF;
    text-decoration: none;
    padding: 0;
    display: inline-block;
    font-weight: 500;
    transition: all ease 0.7s;
}

.header h1 a.current_page {
    background: rgba(0,0,0,0.25);
}

.header h1 a:hover {
    color: #FFFFFF;
    text-decoration: none;
    background: #23b0a5;
    transition: background ease 0.75s;
}

.unified-search-container {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    width: 30vw;
    min-width: 250px;
}

.unified-search-container input[type=text] {
    margin: 0;
    padding: 12px;
    border-radius: 0;
    font-size: 24px;
    outline: none;
    width: 100%;
    outline: none;
}

.unified-search-results {
    background: #FFFFFF;
    padding: 0;
}

.unified-search-container .fa-search,
.unified-search-container .fa-spinner {
    font-size: 22px;
    position: absolute;
    right: 25px;
    top: 15px;
    color: #2c7b8f;
}

.unified-search-results .cat {
    background: #6cbb44;
    color: #ffffff;
}

.unified-search-results li {
    display: flex;
    padding: 0;
    padding-bottom: 1px;
}

.unified-search-results li > * {
    flex-grow: 1;
    line-height: 40px;
    padding-left: 10px;
}

.unified-search-results li .usr-links {
    padding-left: 10px;
    text-align: right;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
}

.unified-search-results li .usr-links a {
    background: #2c7b8f;
    color: #ffffff !important;
    padding: 0 10px 0 10px;
    margin-left: 1px;
}

.unified-search-results li .usr-links a > * {
    vertical-align: middle;
}

.unified-search-results li .usr-links a:hover {
    background: #8c54a1
}

.inline_link,
.inline_link:visited {
    display: inline-block;
    padding: 5px 10px;
    background: rgb(140, 84, 161);
    color: #FFFFFF;
    text-decoration: none;
}

.inline_link:hover {
    background: #7ac142;
    transition: all ease 0.7s;
    color: #FFFFFF;
    text-decoration: none;
}

.cat.group {
    padding: 5px 0;
    font-weight: 600;
}

.unified-search-results .cat.group {
    padding: 10px;
}

.sub.item a:hover {
    text-decoration: none;
    color: #9c27b0;
}

.nav_bars {
    padding: 16px;
    display: block;
    float: left;
    margin: 0;
    background: #2c7b8f;
}

.nav_bars:hover {
    cursor: pointer;
    background: #8c54a1;
    transition: all ease 0.7s;
}

.nav_bars .nav_bar {
    display: block;
    height: 4px;
    background: #FFFFFF;
    width: 28px;
    margin: 0;
}

.nav_bars .nav_bar:nth-of-type(1) {
    width: 18px;
}

.nav_bars .nav_bar:nth-of-type(3) {
    width: 23px;
}

.nav_bars .nav_bar:nth-child(2) {
    margin: 5px 0;
}

.main-site {
    position: absolute;
    left: 0;
    width: 100%;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -o-transition: all ease 400ms;
    -ms-transition: all ease 400ms;
    transition: all ease 400ms;
}

#page.main-site {
    background: #edf1f5;
}

.main-site.is-shifted {
    left: 270px;
    height: 100%;
}

body.is-menu-open {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
}

#page {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -56px !important;
}

#page:after {
    content: "";
    display: block;
}

.header .userinfo {
    float: right;
}

.header .details {
    float: left;
    padding: 31px 20px 30px 20px;
}

.header .logout {
    float: left;
}

.header .logout a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    padding: 31px 20px 30px 20px;
}

.header .logout a:hover {
    text-decoration: none;
    color: #FFFFFF;
    background: #f58232;
    transition: background-color ease 0.5s;
}

.general_page_container {
    padding: 20px 40px 40px 60px;
}

/* portal */

.portal_left {
    margin: 40px 2.5%;
    float: left;
    width: 65%;
    display: block;
}

.portal_menu li {
    display: inline-block;
}

.portal_menu li a {
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    background-color: #23b0a5;
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 10px;
    width: 150px;
}

.portal_menu li a:hover {
    background-color: #6cbb44;
    color: #FFFFFF;
    transition: background-color ease 0.5s;
    text-decoration: none;
}

.portal_menu li .fa {
    padding-right: 10px;
}

.portal_menu li .users .fa:before {
    content: '\f0c0'
}

.portal_menu li .results .fa:before {
    content: '\f080'
}

.my_profile {
    margin: 40px 2.5%;
    width: 25%;
    float: right;
}

.portal_actions {
    margin-top: 0px;
}

.col_1_2 {
    width: calc(50% - 10px);
}

.wizard-started {
    display: none;
}

.portal_actions .user-check-details {
    text-align: left;
}

.portal_actions .user-check-details input[type=text],
.portal_actions .user-check-details input[type=password] {
    width: 300px;
    outline: none;
}

em .guide_note {
    font-style: italic;
    display: block;
    font-size: 14px;
}

.portal_actions .user-check-details label {
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
    margin: 10px 10px 10px 0;
}

input[type=text].input_email {
    width: 220px;
}

/* MENU / LINK ITEMS */
.portal_menu a.questionnaire,
.portal_menu a.questionnaire:visited,
.portal_actions a.questionnaire,
.portal_actions a.questionnaire:visited {
    padding: 10px 20px 10px 50px;
    text-decoration: none;
    background-color: #23b0a5;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: 15px 50%;
    background-size: 24px 24px;
    display: inline-block;
}

.portal_menu a.questionnaire:hover,
.portal_actions a.questionnaire:hover {
    background-color: #6cbb44;
    transition: background-color ease 0.5s;
    text-decoration: none;
}

.portal_menu a.results,
.portal_menu a.results:visited,
.portal_actions a.results,
.portal_actions a.results:visited {
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    background-color: #23b0a5;
    color: #FFFFFF;
    display: inline-block;
    width: 150px;
}

.portal_menu a.results:hover,
.portal_actions a.results:hover {
    background-color: #6cbb44;
    transition: background-color ease 0.5s;
    text-decoration: none;
}

.portal_actions button {
    margin-top: 40px;
}

.portal_actions button.big_button,
.portal_actions a.big_button {
    width: 65%;
    box-sizing: border-box;
    padding: 15% 5%;
    font-size: 66px;
    text-align: center;
    border: 10px solid #edf1f5;
    box-shadow: 0px 0px 0 1px #dddddd;
    outline: none;
    margin: 0 17.5%;
    transition: all ease 0.7s;
}

.portal_actions a.questionnaire.big_button {
    width: 65%;
    margin: 0;
    font-size: 36px;
    padding: 40px 7.5%;
}

.questionnaire-completed {
    background: #333333;
    padding: 10px 15px;
    color: #FFFFFF;
    border: none;
    margin: 10px 0;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 600;
    width: 65%;
    margin: 0;
    font-size: 36px;
    padding: 40px 7.5%;
}

.portal_actions button .material-icons,
.portal_actions a.big_button .material-icons {
    font-size: 66px;
    transition: all ease 0.7s;
}

.portal_actions a.questionnaire.big_button .material-icons {
    font-size: 36px;
    margin-top: 20px;
    display: block;
}

/* ENND OF MENU / LINK ITEMS */

.edit_form h2 {
    display: block;
    background: #ededed;
    color: #222222;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
}

a.create_new,
a.create_new:visited,
a.addtolookup,
a.addtolookup:visited,
a.advanced,
a.advanced:visited {
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    background-color: #23b0a5;
    color: #FFFFFF;
    font-size: 14px;
    /*background-image:url('/images/sys_add_user.png');
	background-repeat:no-repeat;
	background-position:15px 50%;
	background-size:24px 24px;*/
    display: block;
    position: relative;
}

a.advanced.team,
a.advanced.team:visited {
    background-color: #009ddc;
}

a.addtolookup,
a.addtolookup:visited {
    display: inline-block;
    position: relative;
    top: 7px;
    padding: 6px 15px 6px 15px;
}

a.create_new:hover,
a.addtolookup:hover,
a.advanced:hover {
    background-color: #6cbb44;
    color: #FFFFFF;
    transition: background-color ease 0.5s;
    text-decoration: none;
}

a i.prefix {
    margin-right: 5px;
}

a i.suffix {
    position: absolute;
    top: 15px;
    right: 10px;
}

.advanced-search-options .row > .section {
    margin-right: 10px;
}

.l-sidebar-nav {
    width: 0;
    height: 100%;
    float: left;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 10;
    position: fixed;
    left: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
    font-size: 16px;
    -webkit-transition: width 400ms ease-out;
    -moz-transition: width 400ms ease-out;
    -o-transition: width 400ms ease-out;
    -ms-transition: width 400ms ease-out;
    transition: width 400ms ease-out;
}


.l-sidebar-nav.is-expanded {
    width: 270px;
}

.no-scrollbar {
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.l-sidebar-nav .l-sidebar-nav-header {
    width: 270px;
    padding: 20px 0 5px 0;
    background: #2c7b8f;
}

.l-sidebar-nav-header img {
    display: block;
    display: block;
    height: 50px;
    margin: 10px auto;
}

.l-sidebar-nav-list.sidebar-nav-list li a {
    display: block;
    padding: 20px;
}


.l-sidebar-nav-list.sidebar-nav-list li.nav-item a {
    text-decoration: none;
    border-bottom: 1px solid #FFFFFF;
    color: #8c54a1;
    font-weight: 600;
}

.l-sidebar-nav-list.sidebar-nav-list li.nav-item a:hover {
    transition: all ease 0.7s;
    background: #8c54a1;
    color: #FFFFFF;
}

.l-sidebar-nav .userinfo {
    padding: 20px;
    background: #2c7b8f;
    color: #FFFFFF;
}

.l-sidebar-nav .userinfo .logout a {
    text-decoration: none;
    color: #FFFFFF;
    display: block;
    background: rgba(255,255,255,0.1);
    padding: 5px 10px;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.l-sidebar-nav .userinfo .logout a:hover {
    transition: background ease 0.7s;
    background: #f58232;
}

.l-sidebar-nav .userinfo em.iinfo_currentusername {
    font-weight: 800;
}

#sidebar {
    background-color: #edf1f5;
}

.fullscreen_title .material-icons {
    font-size: 40px;
    position: relative;
    top: 6px;
    line-height: 0;
}

h1 .material-icons {
    font-size: 36px;
    top: 8px;
    position: relative;
}

.portal_page {
    padding: 40px;
}

.portal_page .row {
    flex-wrap: wrap;
}

/* footer */
footer {
    font-family: 'Raleway', sans-serif;
    color: #989898;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    padding: 20px 40px;
    font-size: 14px;
    z-index: 100;
    background: #FFFFFF;
    border-top: 1px solid #edf1f5;
}

footer a {
    text-decoration: none;
    color: #989898;
}

.body {
    position: relative;
    padding-bottom: 75px;
    width: 100%;
}

.fpowered {
    display: block;
    padding: 10px 0px;
}

.fa {
    text-indent: 0;
}

/* */

.form_group {
    margin-bottom: 1em;
}

.form_item > label {
    display: inline-block;
    width: 160px;
}

/* */

.atomic {
    white-space: nowrap;
}

i.ico1, i.ico2 {
    font-style: normal;
    padding-right: 0.3em;
}

i.ico2 {
    font-size: 1.25em;
}

.invalid_operation {
    display: none;
}

.io_message {
    display: none;
}

.ef,
.wf {
    display: block;
    display: none;
    margin: 10px 0;
    padding: 4px;
    background: #f58232;
    color: #FFFFFF;
}

.wf {
    background: #e0b100;
    color: #FFFFFF;
}

.wf:before {
    font-family: FontAwesome;
    content: '\f071';
    padding-right: 8px;
}

.ef.static,
.wf.static {
    display: inherit;
}

h2 .archive-indicator {
    font-size: 0.8em;
    padding-left: 40px;
    color: #ffe200;
}

.cf_ephemeral {
}

.cf_ephemeral.warning {
    background: #f58232 !important;
    color: #FFFFFF !important;
    border: 0 !important;
}

.wait {
    width: 30px;
    height: 30px;
    background: #ffffff url('/images/wait24trans.gif') no-repeat 3px 3px;
    border: 1px solid #e1e5e5;
    border-radius: 2px;
}

.wait.big {
    min-width: 85px;
    min-height: 85px;
    background: #ffffff url('/images/waitbig.gif') no-repeat 10px 10px;
    display: flex;
    align-items: center;
}

.wait-message {
    min-height: 85px;
    background: #ffffff url('/images/waitbig.gif') no-repeat 10px 10px;
    display: flex;
    align-items: center;
    border: 1px solid #e1e5e5;
    border-radius: 2px;
    padding-left: 100px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.rte.main_text,
.invalid_operation {
    padding: 40px 60px 0;
    width: 65%;
    min-width: 400px;
}

.rte.main_text h1 {
    color: #333333;
}

.rte.body {
    font-family: Open Sans, Helvetica, sans-serif;
    padding: 140px 40px 60px 40px;
    width: 50%;
    min-width: 400px;
    font-weight: 500;
    color: #212121;
    font-size: 19px;
}

.text_page .header {
    height: auto;
    padding-bottom: 20px;
    background: #e1e5e5;
    border-bottom: 2px solid #dddddd;
    width: 50%;
}

.questionnaire_status {
    margin-top: 120px;
}

.questionnaire_status.completed i {
    color: #6cbb44;
}

.questionnaire_status.notactive i {
    color: #f58232;
    padding-right: 5px;
}

/* */

ul.wizard-steps {
    text-align: center;
}

input[type=text], input[type=password],
input[type=checkbox], input[type=radio],
select {
    background: #FFFFFF;
    padding: 5px 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: #404040;
    border: 1px solid #EDEDED;
    width: 150px;
    /*margin: 10px 0 5px 0;*/
    display: inline-block;
    border-radius: 2px;
}

input[type=checkbox], input[type=radio] {
    width: auto
}

.profiling_container {
    padding: 0 40px;
    box-sizing: border-box;
}

input[type="submit"],
button,
a.button {
    background: #333333;
    padding: 10px 15px;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    margin: 10px 0;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.step-nav input[type="submit"],
.step-nav button,
.step-nav a.button {
    font-size: 18px;
}

input[type="submit"].step-next,
button.step-next,
a.button.step-next {
    background: #6cbb44;
    outline: none;
}

button#userSaveButton {
    width: 100%;
}

button#userActivateButton {
    background: #f58232;
}

input[type="submit"]:hover,
button:hover,
button#userActivateButton:hover,
a.button:hover {
    background: #6cbb44;
    transition: all 0.5s ease;
}

button .fa,
button .material-icons {
    vertical-align: middle;
    font-size: 16px;
}

#userProgress input[type=text] {
    background: #FFFFFF;
    font-family: Open Sans, Helvetica, sans-serif;
    color: #404040;
    border: none;
    border-bottom: 1px solid #EDEDED;
    width: 250px;
    margin: 10px 0;
    display: inline-block;
    padding: 5px 1%;
    border-radius: 0;
    outline: none;
    font-size: 20px;
    float: left;
}

#userProgress a.refresh {
    text-decoration: none;
    text-align: center;
    padding: 8px 16px;
    background: #EDEDED;
    display: block;
    color: #222222;
    margin: 10px 0;
    float: left;
}

#userProgress a.refresh:hover {
    color: #FFFFFF;
    background: #6cbb44;
    transition: background-color ease 0.5s;
}

.item_note {
    background: #EDEDED;
    display: block;
    position: relative;
    font-size: 85%;
    padding: 20px 60px 20px 20px;
}

.item_note .fa {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: #EDEDED;
    padding: 10px;
    color: #999999;
}

.item_note .fa:hover {
    cursor: pointer;
    color: #FFFFFF;
    background: #6cbb44;
    transition: background ease 0.75s;
}

table.summary_list {
    margin-top: 10px;
    width: 100%;
}

table.summary_list th {
    border: none;
    background: #DDDDDD;
}

table.summary_list td {
    border: none;
    background: #EDEDED;
}

table.summary_list td.progress_header {
    text-align: center;
}

table.summary_list td.progress_cell {
    padding: 0;
    text-align: center;
}

table.summary_list td div {
    padding: 10px;
    background: #;
}

table.summary_list.clickable td {
    cursor: pointer;
}

table.summary_list.clickable tr:hover td {
    background: rgba(35, 176, 165, 0.15);
}

.search-unit table thead th.progress select {
    width: 140px;
}

div.progress,
a.progress {
    display: flex;
    align-items: center;
    flex-grow: 1;
    color: #FFFFFF;
    padding: 10px 20px 10px 10px;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    font-family: Pragati NArrow;
    font-size: 16px;
}

div.progress i,
a.progress i {
    font-size: 15px;
    position: absolute;
    right: 5px;
}

a.progress:hover {
    cursor: pointer;
    background: #53872c;
}

div.na {
    background: transparent;
    color: #909090;
}

div.notsent {
    background: #f58232;
}

div.notactivated {
    background: #505050;
}

div.notactivated i {
    color: #f58232;
}

div.notstarted {
    background: #c73507;
}

div.inprogress {
    background: #cfa80c;
}

div.complete,
a.complete {
    background: #6cbb44;
}

table.summary_list.clickable tr:hover td div.notsent,
table.summary_list.clickable tr:hover td div.inprogress,
table.summary_list.clickable tr:hover td div.complete {
    opacity: 0.5
}

.portal_left > i.fa-user {
    display: none;
}

.my_profile h2 i.fa-times {
    display: none;
}

.archive_indicator {
    text-align: center;
    text-transform: uppercase;
    background: #ffe100;
    padding: 1em;
    margin-bottom: 1em;
}

/*

	TABLET VIEW STYLES - MAX WIDTH 600px
	
	Updated styles for responsive view in tablets
*/

/* START OF TABLET VIEW MEDIA QUERY */

@media all and (max-width: 900px) {

    .col_1_2 {
        width: 100%;
    }

    .portal_actions {
        margin-top: 60px;
    }

    .portal_actions button.big_button, .portal_actions a.big_button {
        width: 85%;
        margin: 0 7.5%;
        font-size: 44px;
        transition: all ease 0.7s;
    }

    .portal_actions button .material-icons,
    .portal_actions a.big_button .material-icons {
        font-size: 44px;
        transition: all ease 0.7s;
    }

    .portal_left {
        margin: 20px 2.5%;
        width: 95%;
    }

    .my_profile {
        position: relative;
        margin: 10px 2.5%;
        background: #FFFFFF;
        z-index: 10;
        width: 95%;
        float: right;
        padding: 10px 0 10px 10px;
    }

    .my_profile h2 {
        position: relative;
    }

    .my_profile h2 i.fa-times {
        display: block;
        position: absolute;
        right: 14px;
        top: 14px;
        color: #FFFFFF;
    }

    .my_profile h2 i.fa-times:hover {
        color: #f58232;
        transition: all ease 0.5s;
        cursor: pointer;
    }

    .portal_left > i.fa-user {
        display: none;
        font-size: 21px;
        position: absolute;
        right: 20px;
        top: 25px;
        color: #009ddc;
    }

    .portal_left > i.fa-user:hover {
        color: #6cbb44;
        transition: all ease 0.5s;
        cursor: pointer;
    }

    #userInfo .details {
        display: none;
    }

    .rte.main_text, .invalid_operation {
        padding: 40px 60px 0;
        width: 65%;
        min-width: 65%;
    }

    .header h1 a,
    .header h1 a:visited,
    .header h1 span.nolink {
        font-size: 19px;
        transition: all ease 0.7s;
        padding: 17px 20px;
    }

    #headerWrapperSpacer.questionnaire {
        height: 82px;
    }
}
/* END OF TABLET VIEW MEDIA QUERY */

@media all and (max-width: 480px) {
    .portal_actions button.big_button, .portal_actions a.big_button {
        width: 100%;
        margin: 0;
        font-size: 30px;
        transition: all ease 0.7s;
    }

    .portal_actions button .material-icons,
    .portal_actions a.big_button .material-icons {
        font-size: 30px;
        transition: all ease 0.7s;
    }
}

/* position: absolute; */

.barchart .barcontainer {
    float: left;
    width: 50px;
    text-align: center;
}

.barchart .bar {
    vertical-align: top;
    display: inline-block;
}

.barchart .bar.n1 {
    width: 10px;
    height: 20px;
    background: rgba(0, 0, 255, 0.2);
    height:
}

.barchart .bar.n2 {
    width: 20px;
    height: 40px;
    background: rgba(0, 0, 255, 0.4);
}

.barchart .bar.n3 {
    width: 30px;
    height: 60px;
    background: rgba(0, 0, 255, 0.6);
}

.barchart .bar.n4 {
    width: 40px;
    height: 80px;
    background: rgba(0, 0, 255, 0.8);
}

.barchart .bar.n5 {
    width: 50px;
    height: 100px;
    background: rgba(0, 0, 255, 1);
}

/*
 MODAL WINDOWS ------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
.modal_window_mask {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.modal_window {
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background: #ffffff;
    z-index: 11;
}

.mw_header {
    background-color: #23b0a5;
    color: #ffffff;
}

.mw_header h2 {
    float: left;
    margin: 0px;
    padding: 5px 0px 5px 5px;
}

.mw_header .close {
    float: right;
    cursor: pointer;
    padding: 10px 15px 10px 15px;
    text-decoration: none;
    background-color: #23b0a5;
    color: #FFFFFF;
    font-size: 14px;
    display: block;
    width: 12px;
}

.mw_header .close:hover {
    background-color: #6cbb44;
    color: #FFFFFF;
    transition: background-color ease 0.5s;
    text-decoration: none;
}
/*
 ------------------------------------------------------------------------------------------------------------------------------------------------------------------
*/

/*
	New common UI styles
*/

/* ================================================================================================================================================================ */
/* Means UI.popup does not have to have auto styles */
.popup.overlay {
    background: rgba(0,0,0,0.75);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
}

.popup .content {
    background: rgba(255,255,255,1);
    position: fixed;
    left: 20%;
    right: 20%;
    top: 20%;
    bottom: 20%;
    z-index: 101;
    overflow: auto;
}

.popup.big .content {
    top: 5%;
    bottom: 5%;
    right: 10%;
    left: 10%;
}

.popup .buttons {
    padding-top: 10px;
}

.popup .btn {
    display: inline-block;
    min-width: 70px;
    cursor: pointer;
    text-decoration: none;
}

.close_overlay {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #212121;
    box-sizing: border-box;
    padding: 10px 20px;
    background: #E4E4E4;
    font-weight: 900;
}

.close_overlay:hover {
    cursor: pointer;
    background: #212121;
    color: #FFFFFF;
    transition: background ease 1.2s;
}

.close_overlay span {
    font-size: 0.8em;
    font-weight: 400;
}

.close_overlay:hover span {
    color: #FFFFFF;
}

.popup.overlay .content {
    padding: 20px 40px;
}

.popup.overlay.assign_to_team .content {
    background: #009ddc;
}

.popup.overlay.assign_to_team .content h2 {
    color: #FFFFFF;
}

.popup.overlay.assign_to_team .content h2 em {
    font-weight: 600;
    font-style: normal;
}

.popup.overlay .content h2 {
    margin: 0;
}

.popup.overlay .text {
    font-size: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.popup.overlay .content .buttons {
    padding-top: 10px;
}

.popup.overlay .content .btn {
    background: #000000;
    color: #ffffff;
    padding: 10px;
    text-align: center;
}

.popup.overlay .content .btn:hover {
    background: #dddddd;
    color: #000000;
}

.popup.overlay .content .btn.disabled {
    opacity: 0.25;
    background: #909090;
    color: #000000;
    cursor: default;
}

.popup.overlay.confirm .content h2:before {
    content: '\f059';
    font-family: FontAwesome;
    padding-right: 20px;
}

.popup.overlay.general-purpose-dialog .content h2:before {
    content: '\f05a';
}

.popup.overlay.add-dialog .content h2:before {
    content: '\f055';
}

.popup.overlay.edit-dialog .content h2:before {
    content: '\f040';
}

.popup.overlay h2 {
    font-size: 30px;
    position: relative;
}

.popup.overlay h2 .close {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 48px;
    cursor: pointer;
    color: #000000;
}

.popup.overlay h2 .close:hover {
    opacity: 0.5;
}

.popup.overlay h3 {
    font-size: 24px;
}

.popup .clickable li:hover,
.popup li.clickable:hover,
.popup .clickable tr:hover,
.popup tr.clickable:hover {
    background: #eeeeee;
    cursor: pointer;
}

.form-fields {
}

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

.row.form-fields {
    flex-direction: column;
}

.section.unit {
    padding: 20px;
}

.row > .section {
}

.row > .section:not(:last-child) {
    margin-right: 10px;
}

.wizard .row > .section {
    margin-right: 20px;
}

.wizard .row > .section {
    margin-right: 20px;
}

.row.form-fields > .section {
    margin-top: 20px;
}

.row.form-fields > .section:first-child {
    margin-top: 0;
}

.row > .section > h2 {
    padding: 10px;
    background: #c1e2f9;
    margin-top: 20px;
}

.row > .section > h2:first-child {
    margin-top: 0;
}

.row > .section > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.form-fields .row > .section > div {
    margin-top: 10px;
}

.form-fields .row > .section > div > span > input[type=text] {
    width: 380px;
}

.row > .section > div.c2 > * {
    box-sizing: border-box;
    width: 50%;
    margin-right: 10px;
}

.row > .section > div.c2 > :last-child {
    margin-right: 0;
}

.row > .section > div > label {
    flex-shrink: 0;
    width: 210px;
}

.row > .section label.top {
    padding-bottom: 10px;
    display: inline-block;
}

.section.selector {
    box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2);
    margin-right: 20px;
    position: fixed;
    background: #FFFFFF;
    height: 100%;
    z-index: 10;
    max-width: 270px;
}

.section.selector.stealth {
    box-shadow: none;
    margin-right: 0;
    height: 100%;
}

.user-selector-hidden .section.selector.stealth {
    width: 0;
}

.is-menu-open .header {
    left: 270px;
    -webkit-transition: left 400ms ease-out;
    -moz-transition: left 400ms ease-out;
    -o-transition: left 400ms ease-out;
    -ms-transition: left 400ms ease-out;
    transition: left 400ms ease-out;
}

.iadmincontainer > .row > .section {
    padding-top: 0;
}

.iadmincontainer > .row > .section.full {
    padding-top: 10px;
    width: calc(100% - 270px);
}

.section.full {
    margin-left: 270px;
    padding: 40px 40px 40px 80px;
    transition: all ease 0.7s;
}

.user-selector-hidden .section.full,
.user-selector-hidden .iadmincontainer > .row > .section.full {
    transition: all ease 0.7s;
    margin-left: 0px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 20px 20px 20px 40px;
}

span.radio-group label {
    display: inline-block;
    width: 120px;
}

.portal_container,
.profiling_container {
    padding: 40px;
}

.portal_container h2,
.profiling_activity h2,
.profiling_container h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.profiling_container p:first-of-type {
    margin-bottom: 20px;
}

.profiling_activity {
    padding: 40px 0 0 0;
}

.portal_container button,
.profiling_container input[type="submit"],
.profiling_container button,
.portal_container a.button,
.profiling_container a.button {
    background: #6cbb44;
    padding: 15px 20px 12px 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 15px;
}

.portal_container button,
.profiling_container button,
.portal_container a.button,
.profiling_container a.button {
    display: flex;
    text-align: left;
    padding: 0 10px 0 0;
    width: 100%;
    max-width: 460px;
    outline: none;
    box-sizing: border-box;
}

.portal_container button div,
.portal_container a.button div,
.profiling_container button div {
    margin-left: 10px;
}

.portal_container button span,
.portal_container a.button span,
.profiling_container button span {
    display: block;
    padding: 5px 5px 15px 5px;
}

.portal_container button span:first-of-type,
.portal_container a.button span:first-of-type,
.profiling_container button span:first-of-type {
    padding: 10px 10px 0px 5px;
}

.portal_container button .button_note,
.portal_container a.button .button_note,
.profiling_container button .button_note {
    font-size: 14px;
}

.portal_container button:hover,
.portal_container a.button:hover,
.profiling_container input[type="submit"]:hover,
.profiling_container button:hover,
.profiling_container a.button:hover {
    transition: all ease 0.7s;
    background: #4a8c17;
    cursor: pointer;
}

.portal_container button .material-icons,
.portal_container a.button .material-icons,
.profiling_container button .fa,
.profiling_container button .material-icons {
    font-size: 46px;
    position: relative;
    height: 100%;
    display: block;
    padding: 20px;
    background: rgba(0,0,0,0.1);
}

.nondestructive-hide {
    opacity: 0;
    position: absolute;
}

.empty-container {
    margin: 40px;
    padding: 20px;
    background: #c5e5ed;
    font-size: 24px;
    border: 1px solid #a0cbd6;
    border-radius: 2px;
    display: flex;
    align-items: center;
}

.empty-container i {
    padding-right: 15px;
    color: #2c7b8f;
    font-size: 36px;
}

/* ====================================================================================================================================
	New data lists
*/
td .simple-child-items {
    display: flex;
    flex-wrap: wrap;
}

td .simple-child-items li {
    padding: 4px;
    background: #dddddd;
    margin: 2px;
}

td .simple-child-items.clickable li a {
    color: #222222;
    text-decoration: none;
    cursor: pointer;
}

td .simple-child-items.clickable.chart li a:after {
    font-family: FontAwesome;
    content: '\f080';
    padding-left: 5px;
    color: #222222;
}


td .simple-child-items.clickable li:hover {
    background: #23b0a5;
    transition: all ease 0.7s;
}

td .simple-child-items.clickable li:hover a {
    color: #ffffff;
}

td .simple-child-items.clickable.chart li a:hover:after {
    color: #FFFFFF;
}

/* ====================================================================================================================================
	Notifications for everything, including modal dialogs; therefore z-index must be higher than everything 
*/
.flash-message {
    position: fixed;
    top: 0;
    text-align: center;
    font-size: 24px;
    border-top: none;
    background: #ffcc00;
    z-index: 1000;
    transition: all ease 3s;
    opacity: 0;
    width: 800px;
    margin-left: -400px;
    left: 50%;
    height: 0;
    overflow: hidden;
}

.flash-message > * {
    display: inline-block;
    padding: 30px 20px;
}

.flash-message.show {
    transition: all ease 0.2s;
    opacity: 1;
    height: 100px;
}

.flash-message:before {
    font-family: 'Material Icons';
    content: '\e88e';
    padding-right: 0px;
    font-size: 44px;
    vertical-align: middle;
}

/* ==================================================================================================================================== */
.portal-controls-block {
    display: flex;
    flex-direction: row;
    margin: -10px;
}

.portal-controls-block > * {
    margin: 10px;
}

.portal-controls-block .section {
}

.portal-controls-block .section.primary {
    flex-grow: 1;
}

.stat-block {
    background: #dddddd;
    color: #000000;
    font-weight: 500;
    padding: 10px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.stat-block .stat {
    display: flex;
    flex-direction: column;
    border: 5px solid rgba(255, 255, 255, 0.85);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    justify-content: center;
    margin-right: 10px;
}

.stat-block .stat.loaded {
    border-color: #23b0a5;
    color: #23b0a5;
}

.stat-block .stat var {
    font-size: 20px;
    font-weight: 800;
}

.tile-grid {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.tile-grid .row {
    display: flex;
    flex-direction: row;
    margin-left: -5px;
    margin-right: -5px;
}

.tile-grid .tile {
    margin: 5px;
}

.hypercards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    font-family: 'Raleway', sans-serif;
    margin: -10px -1%;
    margin-top: 1%;
}

.hypercards > * {
    margin: 10px 1%;
    background: #FFFFFF;
    width: calc(25% - 20px);
}

.hypercards.auto > * {
    width: 23%;
}

.overviews.single.parent {
    margin-bottom: 1%;
}

.overviews.single .hypercards.auto > * {
    width: auto;
}

.hypercards .header-info button {
    float: right;
    background: transparent;
    position: absolute;
    right: 0;
    bottom: -10px;
}

.hypercards .header-info button:hover {
    background: rgba(255, 255, 255, 0.25);
}

.hypercards .header-info button i {
    font-size: 30px;
}

.hypercard .header-info h2 a {
    color: #ffffff !important;
}

.hypercard .header-info h2 a:hover {
    opacity: 0.5;
}

.overview-header {
    padding: 20px;
    font-size: 24px;
    background: #8c54a1;
    margin-bottom: 20px;
    color: #ffffff;
    position: relative;
}

.overview-header .header-info {
    width: calc(100% - 80px);
    display: flex;
    align-items:center;
    justify-content:space-between;
    overflow: hidden;
}

.client .overview-header .header-info {
    width: 100%;
}

.overviews .hypercard .overview-header .footer-info {
    font-size: 13px;
    margin-top: auto;
}

.overview-header .team-index {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 10px;
    color: #ffffff; /*#8c54a1;*/
    background: transparent !important;
    font-weight: 800;
}

.overview-header .team-index img {
    height: 24px;
}

.overview-header .team-index > * {
    display: inline-block;
    vertical-align: middle;
}

.hypercards h2 {
    margin: 0;
    color: #FFFFFF;
}

.hypercards .overview-header h2 {
    display: inline-block;
    font-size: 24px;
}

.hypercards .overview-header h2.super {
    font-weight: 100;
    display: block;
}

.hypercards h2.editable input[type=text] {
    display: inline-block;
    font-size: 24px;
    border: 0 !important;
    outline: none !important;
    background: transparent;
    color: #ffffff;
    padding: 0;
    width: 100%;
}

.hypercards h2.editable input[type=text]:hover,
.hypercards h2.editable input[type=text]:focus {
    background: rgba(255, 255, 255, 0.1) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWBAMAAAA2mnEIAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADXRSTlMAAQYJEDI+QEVzjKbaYYwNtgAAAF9JREFUGFdjYIACUQUYi4Fx72E4W/ruHQMYm+vu3UNQpgTD2rtXYaoncN3dCFN9k2G1AFT47t0JjDDhu3dvMMCFEarv3r0tQD1hhlyEMEMtQpihFiHMUIsQZnAvT4QxAeaiQGxNsgS8AAAAAElFTkSuQmCC') no-repeat center right;
}

.hypercards .overview-header h2.team_name,
.hypercards .overview-header h2 .team_name {
    font-weight: 300;
}

.hypercards .overview-header h2.client_name,
.hypercards .overview-header h2 .client_name {
    font-weight: 600;
}

.hypercards .hypercard-content {
    position: relative;
    padding: 0 20px 25px 20px;
}

.hypercards .hypercard-content .full-hypercard-actions {
    position: absolute;
    top: 0;
    right: 10px;
}

.hypercards .hypercard-content .full-hypercard-actions button {
    padding: 8px;
    font-size: 13px;
}

.hypercard-options {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    flex-direction: column;
}

.hypercard-option {
    font-size: 14px;
    margin-top: 10px;
}

.hypercard-option input[type=checkbox] {
    zoom: 1.5;
    vertical-align: middle;
}

.form_item.compound > span {
    display: inline-block;
    vertical-align: text-top;
}

.date.last-invitation {
    text-align: center;
}

.date.last-invitation em {
    font-weight: 800;
    font-style: normal;
    font-size: 17px;
    font-style: normal;
}

.stat_container {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
}

.stat_container .stat {
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    width: 25%;
    font-size: 12px;
}

.stat_container .stat.clickable:hover {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.08);
}

.stat_container .stat:nth-of-type(2) {
    color: #dd1e26;
}

.stat_container .stat:nth-of-type(3) {
    color: #f58232;
}

.stat_container .stat:nth-of-type(4) {
    color: #6cbb44;
}

.results-unavailable {
    display: block;
    padding: 10px 20px;
    background: #EDEDED;
    color: #989898;
}

.goto-results {
    display: block;
    padding: 10px 20px;
    background: #6cbb44;
    color: #FFFFFF;
    text-decoration: none;
}

.goto-results:hover {
    transition: all ease 0.7s;
    background: #4a8c17;
    cursor: pointer;
    text-decoration: none;
}

.stat_container .stat em {
    font-size: 24px;
    font-weight: 800;
    display: block;
    font-style: normal;
    margin: 10px 0;
}

/* teams layout */

.overviews.single .hypercard.team {
    display: flex;
}

.overviews.single .hypercard.team .overview-header {
    width: 33.333%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.overviews.single .hypercard.team .hypercard-content {
    width: 66.667%;
}

.overviews.single .date.last-invitation {
    text-align: left;
    padding: 20px;
}

.overviews.single .stat_container .stat {
    display: flex;
    padding: 0;
    margin-bottom: 20px;
    min-width: 150px;
}

.overviews.single .stat_container .stat em {
    margin: 0 10px;
    font-size: 50px;
    font-weight: 500;
}

.overviews.single .stat_container {
    display: flex;
    margin: 0 20px;
    flex-wrap: wrap;
}

.overviews.single .stat_container .stat .material-icons {
    display: none;
}

.overviews.single .stat_container .stat label {
    margin-top: 25px;
    font-size: 20px;
    display: block;
}

.overviews.single .results-link {
    padding: 0 20px;
}

.overviews.single .hypercards.auto {
    width: 100%;
    margin: 0;
    display: block;
}

.overviews.single .hypercards > * {
    margin: 0;
}

.overviews.single .search-unit table thead th {
    background: #c1c0ec;
}

.overviews.single .search-unit table thead .pager-row th {
    background: #d2d1f5;
    padding: 10px;
}

.key-field > label {
    font-size: 18px;
    font-weight: bold;
}

input.key-field {
    font-size: 18px;
    font-weight: bold;
    width: 85%;
}

.key-field input {
    font-size: 18px;
    font-weight: bold;
}

input.key-field + .autocomplete_search {
    /*color: #000000;*/
    cursor: pointer;
    font-size: 24px;
    padding-top: 10px;
}

input.key-field + .autocomplete_search i {
}

.fa.icon_lookup:before,
.fa.icon_datepicker:before {
    font-family: 'Material Icons';
    content: "search";
    font-size: 30px;
}

.ui-multi-lookup .autocomplete_search {
    display: inline-block;
    padding: 4px 6px 0 8px;
    position: relative;
    background: #6cbb44;
    color: #FFFFFF;
    vertical-align: middle;
}

.ui-multi-lookup .autocomplete_search i:before {
    font-size: 20px;
}

.no-selection {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    font-size: 3vw;
    opacity: 0.5;
}

.placeholder-data {
    color: #909090;
}

.default-data {
    color: #dddddd;
}

.placeholder-data:before {
    content: '(';
}

.placeholder-data:after {
    content: ')';
}

.team-index {
    background: #8c54a1;
    color: #ffffff;
    position: relative;
    padding-left: 20px;
}

.team-index:before {
    content: ' ';
    background: transparent url('/images/six-is-circle-logo-white.png') no-repeat 0 0;
    background-size: 16px 16px;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 10px;
}

.overview-header .team-index {
    padding-left: 35px;
}

.overview-header .team-index:before {
    left: 10px;
    top: 19px;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
}

.user_results h1 .team-index {
    position: absolute;
    right: 190px;
    padding: 16px;
    padding-left: 50px;
}

.user_results h1 .team-index:before,
.results-meta .team-index:before {
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    left: 10px;
    top: 22px;
}

.current-user-details {
    width: 340px;
}

.current-user-details.row > .section > div {
    padding-left: 20px;
    align-items: center;
}

.current-user-details.row > .section > button {
    margin-left: 20px;
}

.current-user-details.row > .section > div > label {
    display: inline-block;
    width: 120px;
}

.current-user-details.row > .section > div > input[type=text],
.current-user-details.row > .section > div > input[type=password] {
    display: inline-block;
    width: calc(100% - 150px);
    padding: 10px;
}

.ui-lookup {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}

.ui-lookup .ui-lookup-search {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6cbb44;
    color: #FFFFFF;
    font-size: 24px;
    padding: 0 5px 0 5px;
    text-decoration: none !important;
    cursor: pointer;
}

.ui-lookup .ui-lookup-search:hover {
    opacity: 0.5;
}

.password_reset_field input[type=password] {
    width: 300px;
    font-size: 16px;
    padding: 8px;
    margin-bottom: 4px;
}

a.admin-link:hover {
    background: #6cbb44;
    transition: all ease 0.6s;
}

a.admin-link {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2c7b8f;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    margin-bottom: 10px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

a.admin-link i {
    padding-right: 10px;
}

.display-report-type {
    display: inline-flex;
    color: rgba(0, 0, 0, 0) !important;
    justify-content: center;
    align-items: center;
    background: #5aaae2;
    color: #ffffff;
    border: 2px solid #006e9b;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    font-weight: 900;
    position: relative;
}

.display-report-type.Reader {
    background: #d6bc00;
    border-color: #716614;
}

.display-report-type.Full {
    background: #6cbb44;
    border-color: #366f19;
}

.display-report-type:before {
    color: #ffffff !important;
    position: absolute;
}

.display-report-type.Standard:before {
    content: 'S';
}

.display-report-type.Full:before {
    content: 'F';
}

.display-report-type.Reader:before {
    content: 'R';
}

table.list-editor th {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #c1e2f9;
    font-size: 14px;
}

table.list-editor td {
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 14px;
}

table.list-editor tr.inactive td {
    opacity: 0.5;
    filter: saturate(25%);
}

table.list-editor tr.full td {
    opacity: 0.5;
    filter: saturate(25%);
    text-decoration: line-through;
}

.admin-units .unit:nth-child(2n) {
    background: rgba(255, 255, 255, 0.5);
}

.admin-flag {
    color: #ff0085
}

.admin-units .unit h2 {
    position: relative;
}

.admin-units .unit h2 button {
    position: absolute;
    right: 5px;
    top: -6px;
}

.fullscreen .toolbar button.purge {
    color: #ffe000 !important;
}

.fullscreen .toolbar button.purge:hover {
    color: #dd1b00 !important;
}

.fullscreen .toolbar button.purge i {
    font-size: 24px;
}

.popup-warning-text {
    color: #dd1b00 !important;
}

.popup-warning-text:before {
    font-family: FontAwesome;
    content: '\f071';
    padding-right: 10px;
}

.attention-item {
    color: #dd1b00 !important;
}

.begin-shortcuts {
    margin-top: 10px;
}

.begin-shortcuts a {
    background: #8c54a1;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    font-weight: bold;
    text-decoration: none;
    transition: background ease 300ms;
    vertical-align: middle;
}

.begin-shortcuts a i {
    padding-right: 7px;
}

.begin-shortcuts a:hover {
    background: #6cbb44;
}

.section > div.help {
    color: #008aff;
    display: flex;
    width: 100%;
}

.section > div.help:before {
    font-family: FontAwesome;
    content: '\f059';
    font-size: 16px;
    width: 24px;
    flex-grow: 0;
}

.search-unit.profile-list button.release-results {
    position: absolute;
    z-index: 1;
    right: 0;
    top: -66px;
}

.manager-flag {
    display: inline-flex;
    margin-left: 1em;
}

.manager-flag:before {
    font-family: 'FontAwesome';
    content: '\f2bd';
}


.results-release {
    padding: 0 20px 10px 20px;
}

.timeline-timestamp {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timeline-timestamp .date-time {
    font-size: 0.8em;
}

input[type=checkbox].negative {
    accent-color: #f1002c
}

/* ====================================================================================================================================
	====================================================================================================================================
	====================================================================================================================================
	====================================================================================================================================
	====================================================================================================================================
*/
@media print {
    .header {
        display: none;
    }

    .user_list {
        display: none;
    }

    .user_results {
        margin-left: 40px !important;
    }

    div.graph, div.bar {
        page-break-inside: avoid !important;
    }

    .sixis-detailed-breakdown .single-i {
        page-break-inside: avoid !important;
    }
}

@media all and (max-width: 1440px) {
    .hypercards > * {
        width: calc(50% - 20px);
    }

    .stat_container .stat {
        width: 50%;
    }

    .hypercards.auto > * {
        width: 31%;
    }

    .overviews.single .hypercards.auto > * {
        width: auto;
    }
}

@media all and (max-width: 1280px) {

    .hypercards.auto > * {
        width: 48%;
    }

    .overviews.single .hypercards.auto > * {
        width: auto;
    }
}

@media all and (max-width: 960px) {
    .overviews.single .hypercard.team {
        display: block;
    }

    .overviews.single .hypercard.team .overview-header,
    .overviews.single .hypercard.team .hypercard-content {
        width: 100%;
        box-sizing: border-box;
    }

    .hypercards.auto > * {
        width: 100%;
    }

    .overviews.single .hypercards.auto > * {
        width: auto;
    }

    .row {
        flex-wrap: wrap;
    }

    .wizard .row > .section {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
}