/* Minification failed. Returning unminified contents.
(5712,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '>'
(11116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11118,30): run-time error CSS1039: Token not allowed after unary operator: '-border-colour'
(11124,34): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-colour'
(11194,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11195,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11196,30): run-time error CSS1039: Token not allowed after unary operator: '-border-colour'
(11202,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-colour'
(11255,24): run-time error CSS1030: Expected identifier, found '>'
(11255,51): run-time error CSS1031: Expected selector, found ')'
(11255,51): run-time error CSS1025: Expected comma or open brace, found ')'
(11381,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11382,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11383,30): run-time error CSS1039: Token not allowed after unary operator: '-border-colour'
(11389,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-colour'
(11459,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11460,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11461,30): run-time error CSS1039: Token not allowed after unary operator: '-border-colour'
(11467,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-colour'
(11914,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11915,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11916,30): run-time error CSS1039: Token not allowed after unary operator: '-border-colour'
(11922,30): run-time error CSS1039: Token not allowed after unary operator: '-box-shadow-colour'
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
sup { vertical-align: super; font-size: .5em; }
sub { vertical-align: sub; font-size: .5em; }
body { line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
ul, ol { list-style: none outside none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; border: 0; outline: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* normalize form elements */
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button,
input { line-height: normal; }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }
button[disabled],
input[disabled] { cursor: default; }
input[type="checkbox"],
input[type="radio"] { vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
.hr { display: block; height: 2px; border: 0; margin: 15px auto; padding: 0; }
td, th, input, select { vertical-align: middle; }

/* group */
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.group { display: inline-block; }

/* Hide from IE-mac */
* html .group { height: 1%; }
.group { display: block; }
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.no-float { float: none !important; }
.t-center { text-align: center; }
.v-top { vertical-align: top; }
.v-mid { vertical-align: middle; }
.no-padd { padding: 0 !important; }
.no-marg { margin: 0 !important; }

/*********************************************************************/
/* BEGIN DEV */
#slice-menu { position: fixed; top: 0; left: 0; max-height: calc(100% - 100px); max-width: 80%; overflow: hidden; height: 100%; -moz-transform: translate(10%, -110%); -ms-transform: translate(10%, -110%); -o-transform: translate(10%, -110%); -webkit-transform: translate(10%, -110%); transform: translate(10%, -110%); background: #fff; border: 1px solid #853663; line-height: 1.3em; color: #853663; z-index: 9998; display: block; font-family: Replica, Arial, Verdana; border-radius: 5px; box-shadow: 3px 3px 5px rgba(0, 0, 0, .3); -moz-transition: transform 500ms ease-in 0s; -o-transition: transform 500ms ease-in 0s; -webkit-transition: transform 500ms ease-in 0s; transition: transform 500ms ease-in 0s; padding: 20px 0; }
#slice-menu::before { background: #fff; box-shadow: 0 0 10px 10px #fff; content: ""; height: 1px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
#slice-menu::after { background: #fff; box-shadow: 0 0 10px 10px #fff; content: ""; height: 1px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
#slice-menu.open { -moz-transform: translate(10%, 50px); -ms-transform: translate(10%, 50px); -o-transform: translate(10%, 50px); -webkit-transform: translate(10%, 50px); transform: translate(10%, 50px); -moz-transition: transform 500ms ease-out 0s; -o-transition: transform 500ms ease-out 0s; -webkit-transition: transform 500ms ease-out 0s; transition: transform 500ms ease-out 0s; }
#slice-menu .pg { color: #000; font-family: monospace; }
#slice-menu ul { list-style: circle outside none; font-weight: 400; margin: 0 0 0 20px; overflow-y: auto; height: 100%; padding: 0 20px 0 15px; }
#slice-menu li { font-weight: 700; position: relative; white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; /*display: block; overflow: hidden;*/ }
#slice-menu ul ul { list-style: none outside none; overflow: visible; padding: 0; }
#slice-menu ul ul ul { list-style: square outside none; }
#slice-menu ul a { color: #853663; font-weight: 400; }
#slice-menu .sub { list-style-type: none; margin: 0 0 10px; }
#slice-menu .d:before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; background: rgba(255, 255, 255, .8); z-index: 1; }
#slice-menu .title { list-style: none outside none; font-weight: 700; margin-top: 10px; color: #000; text-transform: uppercase; }
#slice-menu .sub-title { list-style: none outside none; font-weight: 700; margin-top: 10px; color: #000; text-transform: capitalize; }
#slice-menu .sub-title .pg { text-transform: lowercase; }
.slice-menu-inline { text-align: center; }
.slice-menu-inline #slice-menu { position: static !important; margin: 50px; width: auto; display: inline-block; text-align: left; max-width: 300px; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; }
/* END DEV */

.ispinner {
  position: relative;
  width: 20px;
  height: 20px; }
  .ispinner .ispinner-blade {
    position: absolute;
    left: 44.5%;
    top: 37%;
    width: 10%;
    height: 25%;
    border-radius: 50%/20%;
    -webkit-animation: ispinner-fade 1s linear infinite;
    animation: ispinner-fade 1s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused; }
    .ispinner .ispinner-blade:nth-child(1) {
      -webkit-animation-delay: -1.66667s;
      animation-delay: -1.66667s;
      -webkit-transform: rotate(30deg) translate(0, -150%);
      transform: rotate(30deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(2) {
      -webkit-animation-delay: -1.58333s;
      animation-delay: -1.58333s;
      -webkit-transform: rotate(60deg) translate(0, -150%);
      transform: rotate(60deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(3) {
      -webkit-animation-delay: -1.5s;
      animation-delay: -1.5s;
      -webkit-transform: rotate(90deg) translate(0, -150%);
      transform: rotate(90deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(4) {
      -webkit-animation-delay: -1.41667s;
      animation-delay: -1.41667s;
      -webkit-transform: rotate(120deg) translate(0, -150%);
      transform: rotate(120deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(5) {
      -webkit-animation-delay: -1.33333s;
      animation-delay: -1.33333s;
      -webkit-transform: rotate(150deg) translate(0, -150%);
      transform: rotate(150deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(6) {
      -webkit-animation-delay: -1.25s;
      animation-delay: -1.25s;
      -webkit-transform: rotate(180deg) translate(0, -150%);
      transform: rotate(180deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(7) {
      -webkit-animation-delay: -1.16667s;
      animation-delay: -1.16667s;
      -webkit-transform: rotate(210deg) translate(0, -150%);
      transform: rotate(210deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(8) {
      -webkit-animation-delay: -1.08333s;
      animation-delay: -1.08333s;
      -webkit-transform: rotate(240deg) translate(0, -150%);
      transform: rotate(240deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(9) {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
      -webkit-transform: rotate(270deg) translate(0, -150%);
      transform: rotate(270deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(10) {
      -webkit-animation-delay: -0.91667s;
      animation-delay: -0.91667s;
      -webkit-transform: rotate(300deg) translate(0, -150%);
      transform: rotate(300deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(11) {
      -webkit-animation-delay: -0.83333s;
      animation-delay: -0.83333s;
      -webkit-transform: rotate(330deg) translate(0, -150%);
      transform: rotate(330deg) translate(0, -150%); }
    .ispinner .ispinner-blade:nth-child(12) {
      -webkit-animation-delay: -0.75s;
      animation-delay: -0.75s;
      -webkit-transform: rotate(360deg) translate(0, -150%);
      transform: rotate(360deg) translate(0, -150%); }
  .ispinner.animating .ispinner-blade {
    -webkit-animation-play-state: running;
    animation-play-state: running; }
  .ispinner.white .ispinner-blade {
    background-color: white; }
  .ispinner.gray .ispinner-blade {
    background-color: #8C8C8C; }
  .ispinner.large {
    width: 35px;
    height: 35px; }
    .ispinner.large .ispinner-blade {
      width: 8.57143%;
      height: 25.71429%;
      border-radius: 50%/16.67%; }

@-webkit-keyframes ispinner-fade {
  0% {
    opacity: 0.85; }
  50% {
    opacity: 0.25; }
  100% {
    opacity: 0.25; } }
@keyframes ispinner-fade {
  0% {
    opacity: 0.85; }
  50% {
    opacity: 0.25; }
  100% {
    opacity: 0.25; } }
@font-face {
    font-family: "Arial";
    font-style: normal;
    src: local('Arial'), local('Helvetica'), local('Sans-Serif');
}

@font-face {
    font-family: "Tahoma";
    font-style: normal;
    src: local('Tahoma'), local('Arial'), local('Helvetica'), local('Sans-Serif');
}


/* Univers - normal - 400 */
@font-face {
    font-family: "Univers";
    font-weight: 400;
    font-style: normal;
    src: url("Fonts/19254118-a7ad-4609-8cee-8ef44a85bba1.eot?#iefix");
    src: url("Fonts/19254118-a7ad-4609-8cee-8ef44a85bba1.eot?#iefix") format("eot"),url("Fonts/c5f91eda-7bd6-4dda-920e-a8aca7f11884.woff2") format("woff2"),url("Fonts/34799647-aca8-402d-a341-220207b91cbf.woff") format("woff"),url("Fonts/8186c8c1-cfdb-4c3e-b38e-6c2fd28486b5.ttf") format("truetype"),url("Fonts/d7d2f6ed-1dde-4178-9353-bdd0821e77cb.svg#d7d2f6ed-1dde-4178-9353-bdd0821e77cb") format("svg");
}

/* Univers - italic - 400 */
@font-face {
    font-family: "Univers";
    font-weight: 400;
    font-style: italic;
    src: url("Fonts/541dccf9-50f5-47bd-9ba9-a01fd9a3792b.eot?#iefix");
    src: url("Fonts/541dccf9-50f5-47bd-9ba9-a01fd9a3792b.eot?#iefix") format("eot"),url("Fonts/5bfff3ac-e569-450d-918b-d564434e5e24.woff2") format("woff2"),url("Fonts/05d2bfe7-45b3-4cf8-b313-290651409c59.woff") format("woff"),url("Fonts/33db2509-f09f-4704-bb16-a90dd82687f7.ttf") format("truetype"),url("Fonts/32161123-fa52-4fcf-ad65-f0958c91e0c9.svg#32161123-fa52-4fcf-ad65-f0958c91e0c9") format("svg");
}

/* Univers - normal - 700 */
@font-face {
    font-family: "Univers";
    font-weight: 700;
    font-style: normal;
    src: url("Fonts/38dc895e-c366-4a3e-b212-a84a2d07a329.eot?#iefix");
    src: url("Fonts/38dc895e-c366-4a3e-b212-a84a2d07a329.eot?#iefix") format("eot"),url("Fonts/8a711a0d-3f17-4bfe-887b-6229858332b3.woff2") format("woff2"),url("Fonts/05a79c4b-9e9d-46e4-9d4b-610be05371c4.woff") format("woff"),url("Fonts/4e00405b-a96d-4972-bdff-2d55e1066c45.ttf") format("truetype"),url("Fonts/1e2c0a36-e8bb-4e3b-a4ca-dec00221c06e.svg#1e2c0a36-e8bb-4e3b-a4ca-dec00221c06e") format("svg");
}

/* Univers - italic - 700 */
@font-face {
    font-family: "Univers";
    font-weight: 700;
    font-style: oblique;
    src: url("Fonts/dca67ca5-170f-48b1-91ac-98def05d62bf.eot?#iefix");
    src: url("Fonts/dca67ca5-170f-48b1-91ac-98def05d62bf.eot?#iefix") format("eot"),url("Fonts/cc843e1a-cf1f-47e9-a03f-ef03d2b85d9a.woff2") format("woff2"),url("Fonts/653a9f79-b3ad-444c-a6c4-6bf7f1112e6e.woff") format("woff"),url("Fonts/59d447a0-a4b6-478d-b071-2c949371dca6.ttf") format("truetype"),url("Fonts/87ad650a-2d30-4c47-a78c-fbdac7b87a16.svg#87ad650a-2d30-4c47-a78c-fbdac7b87a16") format("svg");
}

html,
body
{
    overflow-x: clip;
}

html
{
    height: 100%;
}

body
{
    background-color: #fff;
    font: 400 14px/20px Arial;
    min-height: 100%;
    padding: 30px;
}

h1
{
    font: 700 40px/1 Univers;
    margin: 0 0 .5em;
}

h2
{
    font: 700 30px/1 Univers;
    margin: 0 0 .5em;
}

h3
{
    font: 400 25px/1 Univers;
    margin: 0 0 .75em;
}

h4
{
    font: 700 18px/1.11 Univers;
    margin: 0 0 .75em;
}

p
{
    margin: 0 0 1em;
}

a
{
    color: inherit;
}

    a[href]
    {
        color: inherit;
        text-decoration: underline;
    }

        a[href]:hover
        {
            text-decoration: none;
        }

.facet5-logo-svg
{
    fill: #161616;
    max-width: 100%;
    max-height: 100%;
}

.ico-globe-svg
{
    fill: #000;
    max-width: 100%;
    max-height: 100%;
}

.btn
{
    display: inline-table;
    vertical-align: middle;
    font: 700 13px/20px Univers;
    text-transform: uppercase;
    padding: 10px 15px;
    text-decoration: none !important;
    min-width: 100px;
    text-align: center;
    border-collapse: separate;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, .3);
}

    .btn > span
    {
        display: table-cell;
        vertical-align: middle;
    }

.btn-lrg
{
    font: 700 16px/20px Univers;
}

/*.btn-lrg > span { padding: 10px 5px; display: block; }*/
.btn-txt
{
    font: 400 14px/20px Univers;
    text-transform: none;
    padding: 10px 0;
    text-decoration: underline !important;
    min-width: 0;
    text-align: center;
}

    .btn-txt:hover
    {
        text-decoration: none !important;
    }

.btn:active
{
    box-shadow: none;
    position: relative;
    left: 2px;
    top: 2px;
}

.btn-grn,
a.btn-grn
{
    background-color: #078255;
    color: #fff;
}

.btn-prp,
a.btn-prp
{
    background-color: #743962;
    color: #fff;
}

.btn-bdr,
a.btn-bdr
{
    border: 1px solid rgba(17, 17, 17, 0.17);
    padding-top: 9px;
    padding-bottom: 9px;
}

.btn-blk,
a.btn-blk
{
    color: #eee;
    background-color: #222;
}

.custom-sel
{
    position: relative;
}

    .custom-sel .val
    {
        font: 400 13px/20px Univers;
        display: block;
        margin: 0;
        border: 0;
        padding: 0 30px 0 0;
        overflow: hidden;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        -webkit-display: flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
    }

    .custom-sel select
    {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }

    .custom-sel .val:before
    {
        width: 13px;
        height: 8px;
        background: url("../images/sel-darr.svg") no-repeat 50% 50%;
        position: absolute;
        right: 10px;
        top: 50%;
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        content: '';
        background-size: 100% 100%;
    }

#main-content
{
    background-color: #fff;
}

#scr-wrap
{
    background-color: #000;
    height: 100%;
}

.page-content
{
    max-width: 1044px;
    padding: 0 20px;
    width: 100%;
    margin: 0 auto;
}

#marketing-banner
{
    display: flex;
    width: 100%;
    justify-content: center;
    flex: 1 100%;
    background: linear-gradient(to bottom left, #CB3932, #B73666);
    color: white;
}

    #marketing-banner div
    {
        margin: 10px 20px;
    }

    #marketing-banner .marketing-big-text
    {
        font-size: 15px;
        font-weight: 500;
    }

    #marketing-banner .marketing-little-text
    {
        font-size: 14px;
        font-weight: 300;
    }

    #marketing-banner .marketing-url
    {
        font-size: 14px;
        font-weight: 300;
    }

#header
{
    position: relative;
    z-index: 100;
    font: 400 normal 12px/20px Univers;
}

    #header .notify
    {
        position: relative;
        text-decoration: none;
        background: url("../images/ico-notify.svg") no-repeat 50% 50% transparent;
        background-size: 16px 18px;
        width: 48px;
        height: 48px;
        display: block;
    }

        #header .notify span
        {
            position: absolute;
            top: 9px;
            right: 9px;
            background-color: #853663;
            display: flex;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            color: #fff;
            font-size: 10px;
            font-weight: 500;
            line-height: 1;
            align-items: center;
            justify-content: center;
        }

    #header .notifications-flyout
    {
        position: absolute;
        right: -60px;
        top: calc(100% + 20px);
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 3px;
        max-width: 330px;
        font-size: 14px;
        opacity: 0;
        transition: opacity .3s, visibility 0s .3s;
        visibility: hidden;
        width: 100vw;
    }

        #header .notifications-flyout::before
        {
            content: '';
            width: 14px;
            height: 14px;
            position: absolute;
            right: 60px;
            box-sizing: border-box;
            border: inherit;
            top: -7px;
            box-shadow: inherit;
            background-color: inherit;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

.notifications-flyout-scroll
{
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 486px;
    background: #fff;
}

#header .notifications-flyout strong
{
    font-weight: 500;
}

#header .notifications-flyout ul
{
    background: inherit;
    position: relative;
    height: calc(100% + 1px);
}

#header .notifications-flyout li
{
    display: -webkit-flex;
    display: flex;
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

    #header .notifications-flyout li > div
    {
        -webkit-flex: 1 1 240px;
        flex: 1 1 240px;
        margin: 0 0 0 0;
    }

    #header .notifications-flyout li time
    {
        -webkit-flex: 1 1 57px;
        flex: 1 1 57px;
        margin: 0 0 0 auto;
        font-size: 11px;
        white-space: nowrap;
    }

#header .notifications-flyout p
{
    margin: 0 10px 0 0;
}

    #header .notifications-flyout p + p
    {
        margin-top: 10px;
    }

#header .notifications-flyout .actions
{
    margin: 10px 0 0;
    display: -webkit-flex;
    display: flex;
}

    #header .notifications-flyout .actions > *
    {
        margin: 0;
    }

        #header .notifications-flyout .actions > * + *
        {
            margin-left: 10px;
        }

    #header .notifications-flyout .actions .btn-bdr
    {
        background-color: #fff;
    }

#header .notifications-flyout .share-item
{
    background-color: #f1f2f9;
}

.show-head-notifications #header .notifications-flyout
{
    visibility: visible;
    opacity: 1;
    transition: opacity .3s, visibility 0s 0s;
    z-index: 2;
}

#header .language-sel
{
    cursor: pointer;
    border: 1px solid rgba(83, 86, 90, 0.6);
    box-shadow: none !important;
    border-radius: 3px;
}

#header.center-logo header,
#header.center-logo header .logo
{
    margin: 0 auto;
    display: block;
}

#footer
{
    margin: 0 0 30px;
    background-color: #000;
    color: #fff;
}

    #footer .page-content
    {
        background-color: transparent;
        padding: 0 30px;
    }

    #footer header
    {
        height: 90px;
        margin: -90px 0 0;
    }

    #footer footer
    {
        padding: 15px 0 160px;
        font: 400 12px/30px Univers;
    }

    #footer a
    {
        margin-left: 1em;
    }

    #footer.challenge
    {
        background-color: #fff;
        color: #000;
    }

.std-cnt-block a
{
    color: #078255;
    text-decoration: underline;
}

    .std-cnt-block a:visited
    {
        color: #853663;
    }

    .std-cnt-block a:hover
    {
        text-decoration: none;
    }

.std-cnt-block h1
{
    text-transform: none;
}

.std-cnt-block h2
{
    text-transform: none;
}

.std-cnt-block h3
{
    text-transform: none;
}

.std-cnt-block h4
{
    text-transform: none;
}

.std-cnt-block * + h1,
.std-cnt-block * + h2,
.std-cnt-block * + h3,
.std-cnt-block * + h4
{
    margin-top: 1.5em;
}

.std-cnt-block table
{
    margin: 2em 0 3em;
}

    .std-cnt-block table th,
    .std-cnt-block table td
    {
        padding: 20px;
        text-align: left;
        border: 1px solid #dcddde;
    }

    .std-cnt-block table th
    {
        font-size: 1.077em;
        font-weight: 700;
        background-color: #313133;
        color: #fff;
        border-color: #fff;
    }

    .std-cnt-block table tr > :first-child
    {
        border-left-width: 0;
    }

    .std-cnt-block table tr > :last-child
    {
        border-right-width: 0;
    }

    .std-cnt-block table thead tr:first-child > *
    {
        border-top-width: 0;
    }

.std-cnt-block dl
{
    margin: 2em 0 3em;
}

.std-cnt-block dt
{
    font-weight: 700;
    margin: 1em 0;
}

.std-cnt-block dd
{
    margin: 1em 0;
}

.std-cnt-block ul,
.std-cnt-block ol
{
    margin: 2em 0 3em;
    counter-reset: list-counter;
}

    .std-cnt-block ul:after,
    .std-cnt-block ol:after
    {
        clear: both;
        content: '';
        display: table;
    }

.std-cnt-block li
{
    float: left;
    width: 50%;
    padding: 0 40px 0 0;
    counter-increment: list-counter;
    position: relative;
}

    .std-cnt-block li:nth-of-type(2n-1)
    {
        clear: left;
        padding-right: 60px;
    }

    .std-cnt-block li:nth-of-type(2n)
    {
        clear: right;
    }

    .std-cnt-block li:before
    {
        position: absolute;
        content: '';
        display: list-item;
        list-style: disc outside none;
        left: 0;
        font: 700 18px/1.1 Univers;
    }

.std-cnt-block ol li:before
{
    left: auto;
    right: 100%;
    content: counter(list-counter, decimal);
    top: -2px;
    display: block;
    margin: 0 10px 0 0;
    width: 20px;
    text-align: right;
}

.std-cnt-block .overflow-x-scroll
{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.chosen-profile-block
{
    cursor: pointer;
    position: relative;
}

    .chosen-profile-block .wrap
    {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 0;
        border-collapse: collapse;
    }

        .chosen-profile-block .wrap > .col
        {
            display: table-cell;
            vertical-align: top;
        }

    .chosen-profile-block .col .profile:nth-of-type(2n)
    {
        display: none;
    }

.profile
{
    font: 400 30px/1 Univers;
    text-transform: uppercase;
    height: 120px;
}

    .profile .content
    {
        overflow: hidden;
        padding: 25px;
        height: 100%;
    }

.compare-profile .content
{
    padding-bottom: 36px;
    padding-top: 36px;
}

.profile .name
{
    font-size: 30px;
    font-weight: 700;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.profile .type
{
    font-size: 18px;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.profile .lnks
{
    display: inline-block;
    font-size: 13px;
}

    .profile .lnks .rmv
    {
        margin-left: 15px;
    }

.profile .plot-basic
{
    float: left;
    position: relative;
    text-align: center;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 120px;
}

    .profile .plot-basic svg
    {
        display: block;
        width: 120px;
        height: 120px;
    }

.profile-plot polygon
{
    stroke: #494b54;
    stroke: rgba(73, 75, 84, 1);
    stroke-dasharray: 3, 2;
    fill: rgba(73, 75, 84, .01);
}

/*.my-profile .profile-plot polygon,
polygon.my-profile { stroke: #d8458e; stroke: rgba(216, 69, 142, 1); fill: rgba(216, 69, 142, .01); }*/
.respondent-profile .profile-plot polygon,
polygon.respondent-profile
{
    stroke: #d8458e;
    stroke: rgba(216, 69, 142, 1);
    fill: rgba(216, 69, 142, .01);
    stroke-dasharray: none;
}

.chosen-profile-block .profile .lnks .del,
.chosen-profile-block .profile .lnks .edt,
/*.chosen-profile-block .my-profile .lnks .rmv,*/
.profile-select-block .my-profile .lnks .del,
.profile-select-block .my-profile .lnks .rmv,
.profile-select-block .profile .lnks .chg,
.profile-select-block .country-profile .lnks .chg,
.profile-select-block .profile .lnks .del,
.profile-select-block .profile .lnks .rmv
{
    display: none;
}

.profile-left .profile
{
    text-align: right;
    padding: 0 30px 0 0;
}

    .profile-left .profile .plot-basic
    {
        float: right;
    }

.profile-right .profile
{
    border-left: 1px solid rgba(148, 149, 164, 0.4);
}

.profile-left .profile .rmv
{
    display: none;
}

.profile-right .profile
{
    padding: 0 0 0 30px;
}

.chosen-profile-block .profile .gps-type
{
    position: relative;
}

    .chosen-profile-block .profile .gps-type > .lnks > span
    {
        position: absolute;
        width: 100%;
        top: 20px;
        font-size: 100%;
    }

.chosen-profile-block .profile-left .gps-type > .lnks > span
{
    right: 30px;
}

.profile-template-block
{
    display: none;
}

.profile-switch
{
    position: relative;
    top: -75px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    z-index: auto !important;
    border: 0 !important;
}

    .profile-switch.no-switch
    {
        display: none;
    }

    .profile-switch .profile-switch-wrapper
    {
        position: absolute;
        width: 100%;
    }

    .profile-switch > .btn-switch,
    .profile-switch-wrapper > .btn-switch
    {
        position: relative;
        display: block;
        top: 0px;
        margin: 0 auto;
        cursor: pointer;
        font: 400 12px/19px Univers;
        letter-spacing: 5px;
        background-color: #000;
        color: #fff;
        width: 45px;
        height: 45px;
        padding: 14px 3px 14px 8px;
        border-radius: 45px;
        z-index: 2;
    }

    .profile-switch > .lnk-switch,
    .profile-switch-wrapper > .lnk-switch
    {
        position: relative;
        display: block;
        top: 20px;
        margin: 0 auto;
        width: 95px;
        padding: 5px;
        font: 400 10px/10px Univers;
        text-transform: uppercase;
        background-color: #000;
        color: #fff;
        z-index: 2;
    }

.tab-contents .profile-switch
{
    position: absolute;
    top: 10px;
    left: auto;
    right: 0;
    margin: 0 auto;
}

    .tab-contents .profile-switch > .btn-switch
    {
        position: absolute;
        top: 0px;
        right: 65px;
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .tab-contents .profile-switch > .lnk-switch
    {
        position: absolute;
        top: 50px;
        right: 40px;
    }

.dashboard-V1 .dashboard-content-block
{
    display: block;
    background-color: #fff;
    max-width: 1044px;
    margin: 0 auto;
    position: relative;
    padding: 0 0 40px;
}

.dashboard-V1 .dashboard-block .dashboard-tabs
{
    display: none;
}

.dashboard-V1 .dashboard-block .wrap,
.dashboard-V1 .dashboard-content-block .wrap
{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0;
    border-collapse: collapse;
}

    .dashboard-V1 .dashboard-block .wrap > .col,
    .dashboard-V1 .dashboard-content-block .wrap > .col
    {
        display: table-cell;
        vertical-align: top;
    }

.dashboard-V1 .dashboard header
{
    font-size: 18px;
    overflow: hidden;
    padding: 25px;
    height: 100%;
}

.dashboard-V1 .dashboard header,
.dashboard-V1 .dashboard .content
{
    padding: 25px;
    max-width: 522px;
}

    .dashboard-V1 .dashboard header .title
    {
        font: 400 25px/30px Univers;
        font-weight: 700;
        padding-bottom: 20px;
    }

    .dashboard-V1 .dashboard header p
    {
        margin: 0;
    }

.dashboard-V1 .dashboard-content-block .dashboard-left
{
    border-right: 1px solid rgba(148, 149, 164, 0.2);
}

.dashboard-V1 .dashboard-left header,
.dashboard-V1 .dashboard-left .content
{
    margin: 0 0 0 auto;
}

.dashboard-V1 .dashboard .buttons
{
    display: table;
    margin: 0 0 0 25px;
}

.dashboard-V1 .dashboard .btn-wrap
{
    display: table-cell;
    padding: 0 5px;
}

    .dashboard-V1 .dashboard .btn-wrap a
    {
        display: inline-block;
        margin: 0 5px;
        padding: 10px 15px;
    }

.dashboard .err-msg
{
    color: #cf2f30;
    width: 100%;
    padding: 0 25px 25px;
}

    .dashboard .err-msg .msg-wrap
    {
        padding: 15px;
        border-radius: 5px;
        background-color: rgba(237, 29, 36, 0.2);
        vertical-align: middle;
    }

.dashboard .err-icon
{
    display: block;
    background-color: #cf2f30;
    float: left;
    width: 23px;
    height: 23px;
    border-radius: 23px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font: 700 13px/20px Univers;
    margin: 0 10px 0 0;
}

.dashboard-V1 .dashboard ul
{
    list-style-type: disc;
    padding: 0 0 0 25px;
}

    .dashboard-V1 .dashboard ul li
    {
        padding: 5px;
    }

        .dashboard-V1 .dashboard ul li:first-child
        {
            padding: 0 5px 5px;
        }

#main-plot
{
    width: 840px;
    margin: 0 auto;
    position: relative;
    padding: 90px 0 140px;
    max-width: 100%;
    overflow: hidden;
}

    #main-plot svg
    {
        width: 330px;
        height: 330px;
        margin: 0 auto;
        display: block;
    }

.key-items .key-item-emotionality .emo-plot
{
    width: 300px;
    background-color: #a8aaad;
}

.key-items > div
{
    position: absolute;
    font: 400 13px/22px Univers;
}

.key-items .key-title
{
    display: inline-block;
    font-size: 16px;
    line-height: 40px;
    vertical-align: middle;
}

    .key-items .key-title:before,
    .key-items .key-title:after
    {
        content: '';
        display: inline-block;
        margin: -6px 0 0 20px;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #494b54;
    }

    .key-items .key-title:before
    {
        display: none;
        margin: -6px 20px 0 0;
    }

.key-items > div > span:before,
.key-items > div > span:after
{
    content: '';
    display: inline-block;
    margin: -3px 5px 0 10px;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #494b54;
}

.key-items > div > span:after
{
    display: none;
    margin: -3px 0 0 5px;
}

.key-items .key-item-will
{
    left: 50%;
    top: 45px;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.key-items .key-item-control
{
    left: calc(50% + 185px);
    top: calc(50% - 25px);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: calc(50% - 185px);
}

.key-items .key-item-affection
{
    left: 50%;
    bottom: 95px;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.key-items .key-item-energy
{
    right: calc(50% + 185px);
    top: calc(50% - 25px);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: calc(50% - 185px);
    text-align: right;
}

.key-items .key-item-emotionality
{
    right: calc(50% - 150px);
    bottom: 30px;
    white-space: nowrap;
}

    .key-items .key-item-emotionality .emo-plot
    {
        display: inline-block;
        vertical-align: middle;
        height: 1px;
        position: relative;
    }

        .key-items .key-item-emotionality .emo-plot > span
        {
            border-radius: 50%;
            height: 14px;
            left: 0;
            position: absolute;
            top: calc(50% - 7px);
            width: 14px;
            background-color: #494b54;
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            -moz-transition: all .3s;
            -o-transition: all .3s;
            -webkit-transition: all .3s;
            transition: all .3s;
        }

    .key-items .key-item-emotionality > span:last-of-type
    {
        margin-right: 15px;
    }

    .key-items .key-item-will > span,
    .key-items .key-item-affection > span,
    .key-items .key-item-emotionality > span
    {
        vertical-align: middle;
        margin-right: 15px;
    }

.key-items .key-item-control .key-title:before
{
    display: inline-block;
}

.key-items .key-item-control .key-title:after
{
    display: none;
}

.key-items .key-item-control > span:before
{
    margin: -3px 23px 0 3px;
}

.key-items .key-item-energy > span:before
{
    display: none;
}

.key-items .key-item-energy > span:after
{
    display: inline-block;
    margin: -3px 3px 0 23px;
}

.key-items .key-item-control > span,
.key-items .key-item-energy > span
{
    display: block;
}

.key-items .key-item-will .key-title:before,
.key-items .key-item-will .key-title:after,
.key-items .key-item-will .key-data-0:before,
.key-items .key-item-will .key-data-0:after
{
    background-color: #00a651;
    color: #fff;
}

.key-items .key-item-control .key-title:before,
.key-items .key-item-control .key-title:after,
.key-items .key-item-control .key-data-0:before,
.key-items .key-item-control .key-data-0:after
{
    background-color: #03558b;
    color: #fff;
}

.key-items .key-item-affection .key-title:before,
.key-items .key-item-affection .key-title:after,
.key-items .key-item-affection .key-data-0:before,
.key-items .key-item-affection .key-data-0:after
{
    background-color: #ed1d24;
    color: #fff;
}

.key-items .key-item-energy .key-title:before,
.key-items .key-item-energy .key-title:after,
.key-items .key-item-energy .key-data-0:before,
.key-items .key-item-energy .key-data-0:after
{
    background-color: #f7941e;
    color: #000;
}

.key-items .key-item-emotionality .key-title:before,
.key-items .key-item-emotionality .key-title:after,
.key-items .key-item-emotionality .key-data-0:before,
.key-items .key-item-emotionality .key-data-0:after,
.key-items .key-item-emotionality .emo-plot .handle-0
{
    background-color: #d8458e;
    color: #000;
}

.profile-select-block .profile
{
    cursor: pointer;
}

.dashboard-V1 .dashboard #main-plot
{
    width: 840px;
    margin: 0 auto;
    position: relative;
    padding: 50px 0 130px;
    max-width: 100%;
}

    .dashboard-V1 .dashboard #main-plot svg
    {
        height: 60%;
        width: 60%;
        margin: 0 auto;
        display: block;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-title
    {
        font-size: 18px;
        line-height: 40px;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-control
    {
        left: 80%;
        width: 30%;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-energy
    {
        right: 80%;
        width: 30%;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-will
    {
        right: 40%;
        top: 20px;
        width: 100%;
        text-align: center;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-affection
    {
        right: 40%;
        bottom: 100px;
        width: 100%;
        text-align: center;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-title:after
    {
        margin: -6px 0 0 8px;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-title:before
    {
        margin: -6px 8px 0 0;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-control > span:before
    {
        margin: -3px 10px 0 3px;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-energy > span:after
    {
        display: inline-block;
        margin: -3px 3px 0 10px;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-emotionality .key-title
    {
        display: inline-block;
        margin-left: 0px;
    }

    .dashboard-V1 .dashboard #main-plot .key-items .key-item-emotionality .emo-plot
    {
        display: block;
        margin: 10px auto 0;
    }

#create-plot
{
    margin: 0 auto 0 0;
    max-width: 960px;
    width: 100%;
    padding: 90px 0 190px;
    position: relative;
}

    #create-plot svg
    {
        display: block;
        height: 330px;
        margin: 0 auto;
        width: 330px;
    }

    #create-plot .key-items .key-item-control
    {
        left: calc(50% + 175px);
    }

    #create-plot .key-items .key-item-energy
    {
        right: calc(50% + 175px);
    }

    #create-plot .key-items .key-item-affection
    {
        bottom: 140px;
    }

.create-new-profile
{
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    width: 100%;
    right: 0;
    height: 0;
    overflow: hidden;
    overflow-y: auto;
    background-color: #f4f4f4;
    opacity: 0;
    -moz-transition: opacity .3s 0s, height 0s .3s;
    -o-transition: opacity .3s 0s, height 0s .3s;
    -webkit-transition: opacity .3s 0s, height 0s .3s;
    transition: opacity .3s 0s, height 0s .3s;
    -webkit-overflow-scrolling: touch;
}

.create-wrap-vis .create-new-profile
{
    -moz-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
    height: 100%;
    opacity: 1;
}

.create-wrap-vis,
body.create-wrap-vis
{
    overflow: hidden;
    position: relative;
}

.create-new-profile footer .page-content
{
    background: none;
}

.create-new-profile .txt-wrap,
.create-new-profile .custom-sel
{
    height: 40px;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    font: 400 13px/20px Arial;
    margin: 10px 0 15px;
}

    .create-new-profile [type="text"],
    .create-new-profile [type="password"],
    .create-new-profile [type="email"],
    .create-new-profile [type="tel"],
    .create-new-profile select,
    .create-new-profile textarea,
    .create-new-profile .custom-sel .val
    {
        font: 400 13px/20px Univers;
        display: block;
        margin: 0;
        padding: 10px 15px;
        width: 100%;
        border: 0;
    }

.create-new-profile .btn-row
{
    text-align: center;
    font-weight: 700;
}

.create-new-profile .btn
{
    margin: 20px auto;
    display: block;
    width: 100%;
}

.create-new-profile .data-selector
{
    position: absolute;
    left: 50%;
    top: 100%;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    -moz-transition: opacity 0.2s 0s, max-height 0s 0.2s;
    -o-transition: opacity 0.2s 0s, max-height 0s 0.2s;
    -webkit-transition: opacity 0.2s 0s, max-height 0s 0.2s;
    transition: opacity 0.2s 0s, max-height 0s 0.2s;
}

.create-new-profile .edit-active .data-selector
{
    max-height: 150px;
    opacity: 1;
    -moz-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

.create-new-profile .data-selector.flip-my-y
{
    top: auto;
    bottom: 100%;
    /*height:150px;*/
}

.create-new-profile .data-selector > .wrap
{
    width: 340px;
    text-align: center;
    font: 400 13px/36px Univers;
    border-radius: 10px;
    overflow: hidden;
}

    .create-new-profile .data-selector > .wrap > .no-ones
    {
        border-radius: 10px;
        overflow: hidden;
    }

        .create-new-profile .data-selector > .wrap > .no-ones + .fraction-row
        {
            visibility: hidden;
        }

.create-new-profile .data-selector .whole-row:after,
.create-new-profile .data-selector .fraction-row:after
{
    content: '';
    clear: both;
    display: table;
}

.create-new-profile .data-selector .whole-row
{
    background-color: #161616;
}

.create-new-profile .data-selector .fraction-row
{
    background-color: #03558b;
}

.create-new-profile .data-selector a
{
    float: left;
    border: 0 solid rgba(0, 0, 0, .1);
    border-width: 1px 0 0 1px;
    color: inherit;
    border-color: inherit;
    text-decoration: none;
    vertical-align: middle;
    width: 10%;
}

    .create-new-profile .data-selector a:first-child
    {
        border-left-width: 0;
    }

.create-new-profile .key-items > div
{
    z-index: 1;
    -moz-transition: z-index 0s 0.2s;
    -o-transition: z-index 0s 0.2s;
    -webkit-transition: z-index 0s 0.2s;
    transition: z-index 0s 0.2s;
}

    .create-new-profile .key-items > div.edit-active
    {
        z-index: 2;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
    }

    .create-new-profile .key-items > div > span
    {
        text-decoration: underline;
        cursor: pointer;
    }

.create-new-profile .key-item-control .data-selector
{
    left: auto;
    right: 20px;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform: none;
}

.create-new-profile .key-item-energy .data-selector
{
    left: 20px;
    right: auto;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform: none;
}

.create-new-profile .key-item-will .data-selector .whole-row,
.create-new-profile .key-item-will .data-selector .fraction-row,
.create-new-profile .key-item-will .data-selector .whole-row a.active
{
    background-color: #008440;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.create-new-profile .key-item-will .data-selector .whole-row
{
    background-color: #00a651;
}

.create-new-profile .key-item-control .data-selector .whole-row,
.create-new-profile .key-item-control .data-selector .fraction-row,
.create-new-profile .key-item-control .data-selector .whole-row a.active
{
    background-color: #02416a;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.create-new-profile .key-item-control .data-selector .whole-row
{
    background-color: #03558b;
}

.create-new-profile .key-item-affection .data-selector .whole-row,
.create-new-profile .key-item-affection .data-selector .fraction-row,
.create-new-profile .key-item-affection .data-selector .whole-row a.active
{
    background-color: #d71118;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.create-new-profile .key-item-affection .data-selector .whole-row
{
    background-color: #ed1d24;
}

.create-new-profile .key-item-energy .data-selector .whole-row,
.create-new-profile .key-item-energy .data-selector .fraction-row,
.create-new-profile .key-item-energy .data-selector .whole-row a.active
{
    background-color: #eb8308;
    color: #000;
    border-color: rgba(0, 0, 0, 0.1);
}

.create-new-profile .key-item-energy .data-selector .whole-row
{
    background-color: #f7941e;
}

.create-new-profile .key-item-emotionality .data-selector .whole-row,
.create-new-profile .key-item-emotionality .data-selector .fraction-row,
.create-new-profile .key-item-emotionality .data-selector .whole-row a.active
{
    background-color: #d02c7d;
    color: #000;
    border-color: rgba(0, 0, 0, 0.1);
}

.create-new-profile .key-item-emotionality .data-selector .whole-row
{
    background-color: #d8458e;
}

.create-new-profile .delete-profile
{
    display: none;
}

.create-new-profile .update
{
    display: none;
}

.split-bg,
.split-white-bg
{
    position: relative;
    background-color: #fff;
    border: 0 solid rgba(148, 149, 164, 0.4);
    border-width: 0 0 1px;
    margin: 0;
    z-index: 1;
}

.split-white-bg
{
    border-width: 1px 0;
}

    .split-white-bg + .split-white-bg
    {
        border-width: 0;
    }

    .split-bg section,
    .split-white-bg section
    {
        position: relative;
    }

    .split-bg .page-content,
    .split-white-bg .page-content
    {
        background-color: transparent !important;
    }

    .split-bg .split-bg-bg,
    .split-white-bg .split-bg-bg
    {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        content: '';
    }

        .split-bg .split-bg-bg:before
        {
            position: absolute;
            background-color: rgba(232, 232, 232, 0.6);
            left: 0;
            right: 50%;
            top: 0;
            bottom: 0;
            content: '';
        }

        .split-bg .split-bg-bg:after
        {
            position: absolute;
            background-color: rgba(244, 244, 244, 0.6);
            left: 50%;
            right: 0;
            top: 0;
            bottom: 0;
            content: '';
        }

        .split-white-bg .split-bg-bg:before
        {
            position: absolute;
            left: 0;
            right: 50%;
            top: 0;
            bottom: 0;
            content: '';
            border: 0 solid rgba(148, 149, 164, 0.4);
            border-width: 0 1px 0 0;
        }

        .split-white-bg .split-bg-bg:after
        {
            position: absolute;
            left: 50%;
            right: 0;
            top: 0;
            bottom: 0;
            content: '';
        }

.tabs-block
{
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
}

    .tabs-block .tab-header
    {
        padding: 20px 25px 25px 35px;
        position: relative;
    }

        .tabs-block .tab-header .title
        {
            font: 700 25px/1 Univers;
        }

    .tabs-block .tab-contents
    {
        position: relative;
        z-index: 1;
        padding: 0 20px 0 0;
        overflow: hidden;
        -moz-transition-duration: inherit;
        -o-transition-duration: inherit;
        -webkit-transition-duration: inherit;
        transition-duration: inherit;
    }

    .tabs-block .tab-content
    {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        -moz-transition-duration: inherit;
        -o-transition-duration: inherit;
        -webkit-transition-duration: inherit;
        transition-duration: inherit;
    }

    .tabs-block[data-tab-idx="0"] .tab-content:nth-of-type(1),
    .tabs-block[data-tab-idx="1"] .tab-content:nth-of-type(2),
    .tabs-block[data-tab-idx="2"] .tab-content:nth-of-type(3),
    .tabs-block[data-tab-idx="3"] .tab-content:nth-of-type(4),
    .tabs-block[data-tab-idx="4"] .tab-content:nth-of-type(5),
    .tabs-block[data-tab-idx="5"] .tab-content:nth-of-type(6)
    {
        position: relative;
    }

    .tabs-block .tab
    {
        text-decoration: none;
    }

.tab-tabs .tab
{
    padding: 25px 50px 30px 40px;
    font: 400 13px/1.1 Univers;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, .04);
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.tab-contents .tab
{
    padding: 25px 50px 30px 40px;
    font: 400 13px/1.1 Univers;
    background-color: rgba(0, 0, 0, .09);
}

    .tab-tabs .tab .grp,
    .tab-contents .tab .hdr
    {
        font-size: 18px;
        font: 700 25px/1 Univers;
        font-weight: 700;
        display: block;
    }

.profile-breakdown-block
{
    display: none;
}

    .profile-breakdown-block .tabs-block[data-tab-idx="0"] .tab-tabs .tab:nth-of-type(1),
    .profile-breakdown-block .tabs-block[data-tab-idx="1"] .tab-tabs .tab:nth-of-type(2)
    {
        background-color: rgba(0, 0, 0, .09);
    }

    .profile-breakdown-block #gpsHelp,
    .profile-breakdown-block #normHelp
    {
        display: none;
    }

.qanda .q
{
    border-bottom: 1px solid rgba(148, 149, 164, 0.4);
    display: block;
    padding: 27px 0 17px 40px;
    font: 700 25px/1 Univers;
    text-decoration: none;
    position: relative;
}

    .qanda .q:before,
    .qanda .q:after
    {
        content: '';
        width: 20px;
        height: 4px;
        position: absolute;
        left: 0;
        top: 39px;
        background: url("../images/ico-minus.svg") no-repeat 50% 50%;
        background-size: 100% 100%;
        -moz-transition: all .5s;
        -o-transition: all .5s;
        -webkit-transition: all .5s;
        transition: all .5s;
    }

.qanda .a
{
    font: 400 13px/20px Arial;
    display: none;
    padding: 0 35px 25px 40px;
}

    .qanda .a .param
    {
        font: 700 18px/20px Univers;
        margin: 0.5em 0 1em;
        display: block;
    }

    .qanda .a p
    {
        margin: 0 0 1em;
    }

.qanda .q:before
{
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.qanda .q:after
{
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.qanda .open > .q:before,
.qanda .open > .q:after
{
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.qanda .a li
{
    position: relative;
}

    .qanda .a li:before
    {
        border-radius: 50%;
        content: "";
        height: 20px;
        left: -30px;
        position: absolute;
        top: 2px;
        width: 20px;
    }

.qanda .a .key-will:before
{
    background-color: #00a651;
}

.qanda .key-control:before
{
    background-color: #03558b;
}

.qanda .key-affection:before
{
    background-color: #ed1d24;
}

.qanda .key-energy:before
{
    background-color: #f7941e;
}

.qanda .key-emotionality:before
{
    background-color: #d8458e;
}

.qanda .q.key-will:before,
.qanda .q.key-will:after
{
    background-image: url("../images/ico-minus-will.svg");
}

.qanda .q.key-control:before,
.qanda .q.key-control:after
{
    background-image: url("../images/ico-minus-control.svg");
}

.qanda .q.key-affection:before,
.qanda .q.key-affection:after
{
    background-image: url("../images/ico-minus-affection.svg");
}

.qanda .q.key-energy:before,
.qanda .q.key-energy:after
{
    background-image: url("../images/ico-minus-energy.svg");
}

.qanda .q.key-emotionality:before,
.qanda .q.key-emotionality:after
{
    background-image: url("../images/ico-minus-emotionality.svg");
}

.qanda li
{
    position: relative;
}

.qanda-angular
{
    display: none;
}

.matrix-sections.mobi-show .tooltip
{
    top: 8px;
}

.matrix-sections.mobi-hide .tooltip
{
    top: 0;
    margin-top: -34px;
    margin-right: 15px;
}

.tooltip
{
    position: relative;
}

    .tooltip:not(p)
    {
        position: relative;
        top: -45px;
        left: 0;
        right: 0;
        float: right;
    }

    .tooltip .tooltip-icon
    {
        background-image: url("../images/tooltip.png");
        display: block;
        cursor: pointer;
        width: 25px;
        height: 25px;
        position: relative;
    }

        .tooltip .tooltip-icon.selected
        {
            opacity: .4;
        }

.tooltip-default
{
    float: none;
}

    .tooltip-default .tooltip-icon
    {
        width: 20px;
        height: 20px;
        background: url("../images/ico-help-fff.svg") no-repeat 50% 50% #000;
        background-size: 6px 9px;
        border-radius: 5px;
        display: inline-block;
        margin: 0 0 0 5px;
        vertical-align: text-bottom;
    }

    .tooltip-default + .tooltip-text .tooltip-text-wrap
    {
        left: 0;
    }

.tooltip-text
{
    position: absolute;
    width: 200px;
    display: none;
    height: 100px;
    font-size: 13px;
    text-align: left;
    z-index: 99;
}

    .tooltip-text.tooltip-active
    {
        display: block;
    }

.tooltip-text-wrap
{
    background-color: #000;
    z-index: 105 !important;
    border-radius: 5px;
    color: #fff;
    padding: 15px 0 15px 15px;
    width: 100%;
    position: absolute;
    z-index: 1;
    -moz-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
}

    .tooltip-text-wrap p
    {
        margin: 0;
        padding: 0 28px 0 0;
    }

    .tooltip-text-wrap .tooltip-close
    {
        text-decoration: none;
        position: relative;
    }

        .tooltip-text-wrap .tooltip-close:after
        {
            content: "x";
            font: 500 16px/20px Univers;
            display: block;
            position: relative;
            top: -10px;
            float: right;
            right: 15px;
        }

.tq-tooltip .tooltip-icon.selected
{
    opacity: .4;
}

.tooltip-text
{
    width: 90%;
    height: auto;
    transform: translateX(-20px) translateY(-10px);
}

.matrix-will .tooltip-text-wrap
{
    background-color: #00a651;
}

.matrix-energy .tooltip-text-wrap
{
    background-color: #f7941e;
}

.matrix-affection .tooltip-text-wrap
{
    background-color: #ed1d24;
}

.matrix-control .tooltip-text-wrap
{
    background-color: #03558b;
}

.matrix-emotionality .tooltip-text-wrap
{
    background-color: #d8458e;
}

.matrix .tooltip-text-wrap .tooltip-close:after
{
    content: "x";
    font: 500 16px/20px Univers;
    color: #fff;
    display: block;
    position: relative;
    top: -10px;
    float: right;
    right: 15px;
}

.tabs-block .tab-header .tooltip
{
    display: inline-block;
    float: none;
    top: auto;
    bottom: -4px;
}

.profile-select-block
{
    left: 0;
    height: 0;
    position: fixed;
    top: 0;
    width: 0;
    overflow: hidden;
    -moz-transition: width 0s 0.5s, height 0s 0.5s;
    -o-transition: width 0s 0.5s, height 0s 0.5s;
    -webkit-transition: width 0s 0.5s, height 0s 0.5s;
    transition: width 0s 0.5s, height 0s 0.5s;
    z-index: 50;
}

    .profile-select-block:before
    {
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        -moz-transition: opacity .5s;
        -o-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s;
        background-color: rgba(0, 0, 0, .75);
    }

.profile-select .page-content
{
    background-color: transparent !important;
}

.profile-select-block .wrap
{
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 111px 0 0;
    width: 50%;
    left: 50%;
    background-color: rgb(227, 227, 227);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.profile-select-block .v-scroll
{
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-select-block .profile-select
{
    position: relative;
    z-index: 3;
    border: 0 solid rgba(148, 149, 164, 0.4);
    border-width: 0 0 1px;
}

    .profile-select-block .profile-select:first-child
    {
        border-top-width: 1px;
    }

    .profile-select-block .profile-select:nth-of-type(2n-1)
    {
        background-color: rgb(244, 244, 244);
    }

    .profile-select-block .profile-select > a
    {
        position: relative;
        top: 100px;
    }

    .profile-select-block .profile-select .ico-5
    {
        width: 45px;
        height: 45px;
    }

.ps-select-left .profile-select-block .wrap
{
    left: 0;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.ps-select-left .profile-select-block .profile
{
    text-align: right;
}

    .ps-select-left .profile-select-block .profile .plot-basic
    {
        float: right;
    }

.ps-select-left .profile-select-block .v-scroll
{
    direction: rtl;
}

.profile-select-block .profile-select.profile-select-odd,
.profile-select-block .profile-select.profile-select-even
{
    position: relative;
    z-index: 3;
    border: 0 solid rgba(148, 149, 164, 0.4);
    border-width: 1px 0 0;
}

.profile-select-block .profile-select.profile-select-even
{
    background-color: rgb(244, 244, 244);
}

.profile-select-block .profile-select.profile-select-odd
{
    background-color: transparent;
}

.ps-open .profile-select-block:not(.country-select-block):not(.family-select-block):before,
.cs-open .country-select-block:before,
.fs-open .family-select-block:before
{
    opacity: 1;
}

.ps-open .profile-select-block:not(.country-select-block):not(.family-select-block),
.cs-open .country-select-block,
.fs-open .family-select-block
{
    width: 100%;
    height: 100%;
    -moz-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
    z-index: 51;
}

    .ps-open .profile-select-block:not(.country-select-block):not(.family-select-block) .wrap,
    .cs-open .country-select-block .wrap,
    .fs-open .family-select-block .wrap
    {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

.ms-open .active-popup-block:before
{
    opacity: 1;
}

.ms-open .active-popup-block
{
    width: 100%;
    height: 100%;
    -moz-transition-delay: 0s, 0s;
    -o-transition-delay: 0s, 0s;
    -webkit-transition-delay: 0s, 0s;
    transition-delay: 0s, 0s;
    z-index: 102;
}

    .ms-open .active-popup-block .wrap
    {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

.ps-open body,
.cs-open body,
.fs-open body,
.ms-open body,
.create-wrap-vis body,
.ps-open,
.cs-open,
.fs-open,
.ms-open,
.create-wrap-vis,
.stop-scrolling,
.stop-scrolling body
{
    overflow: hidden;
}

.popup-block
{
    left: 0;
    height: 0;
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    z-index: 51;
}

    .popup-block:before
    {
        opacity: 2;
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, .75);
    }

    .popup-block .wrap
    {
        height: 100%;
        width: 80%;
        position: relative;
        padding: 125px 0 0;
        max-width: 700px;
        margin: 100px auto 0 auto;
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .popup-block .content
    {
        font-size: 16px;
        padding-bottom: 36px;
        padding-top: 36px;
        height: 300px;
        text-align: center;
        position: relative;
        z-index: 3;
        border: 0 solid rgba(148, 149, 164, 0.4);
        border-width: 0 0 1px;
        background-color: rgb(244, 244, 244);
    }

    .popup-block .header
    {
        font-size: 30px;
        text-transform: uppercase;
        padding: 25px;
        font-weight: 700;
        line-height: 100%;
    }

    .popup-block .footer
    {
        text-transform: uppercase;
        height: 100%;
        padding-bottom: 15px;
    }

.banner-block
{
    position: fixed;
    top: 125px;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .9);
    z-index: 100;
    display: none;
}

    .banner-block .wrap
    {
        height: 100%;
        width: 100%;
        position: relative;
        max-width: 1000px;
        margin: 10px auto 0 auto;
    }

    .banner-block .content
    {
        color: #fff;
        font: 400 13px/20px Univers;
        position: relative;
        z-index: 3;
    }

    .banner-block .banner-icon
    {
        font-size: 25px;
        text-decoration: none;
        float: left;
        font-weight: 500;
        width: 30px;
        height: 30px;
    }

.terms-conditions-block
{
    left: 0;
    height: 0;
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    z-index: 51;
}

    .terms-conditions-block:before
    {
        opacity: 2;
        content: '';
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, .75);
    }

    .terms-conditions-block .wrap
    {
        height: 80%;
        width: 80%;
        max-width: 700px;
        margin: 50px auto;
        background-color: rgb(244, 244, 244);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    .terms-conditions-block .title
    {
        padding: 20px 20px 0 40px;
        display: block;
    }

        .terms-conditions-block .title > h1
        {
            display: inline-block;
            padding: 20px 0 0 0;
            width: 90%;
            text-align: left;
        }

        .terms-conditions-block .title > .terms-conditions-close
        {
            display: inline-block;
            font-size: 30px;
            font-weight: 900;
            text-decoration: none;
            float: right;
            color: rgba(148, 149, 164, 0.9);
            margin: 0;
        }

    .terms-conditions-block .content-wrap
    {
        height: 80%;
        font: 400 16px/21px Univers;
        margin: 0 30px 0 40px;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
    }

.std-form
{
    font: 400 13px/20px Arial;
    padding: 0 0 40px;
}

    .std-form h1
    {
        text-transform: uppercase;
    }

    .std-form h3
    {
        margin: 50px 0 20px;
        text-transform: uppercase;
    }

    .std-form .instr
    {
        margin: 0 0 20px;
    }

    .std-form .form-row:after
    {
        clear: both;
        content: '';
        display: table;
    }

    .std-form label
    {
        font: 700 12px/20px Univers;
        width: 160px;
        float: left;
        padding: 15px 20px 15px 0;
        text-align: right;
    }

    .std-form .txt-wrap,
    .std-form .sel-wrap,
    .std-form .cb-wrap,
    .std-form .lnk-wrap
    {
        float: left;
        width: 332px;
        border: 0 solid #53565a;
        border-width: 0 0 1px;
        padding: 0;
        min-height: 52px;
        text-align: left;
        max-width: 100%;
    }

    .std-form .lbl-wrap
    {
        float: left;
        width: 332px;
        border-width: 0 0 1px;
        padding: 0;
        text-align: left;
        max-width: 100%;
    }

    .std-form .active .txt-wrap,
    .std-form .active .sel-wrap
    {
        border-width: 0 0 2px;
        border-color: #743962;
    }

    .std-form .active .inp-cb:before
    {
        border-color: #743962 !important;
    }

    .std-form .error .txt-wrap,
    .std-form .error.txt-wrap,
    .std-form .error .sel-wrap,
    .std-form .error.sel-wrap
    {
        border-width: 0 0 2px;
        border-color: #cf2f30;
    }

    .std-form .error .inp-cb:before,
    .std-form .error.inp-cb:before
    {
        border-color: #cf2f30 !important;
    }

    .std-form .tooltip
    {
        position: relative;
        top: 0;
        float: left;
    }

        .std-form .tooltip .tooltip-icon
        {
            background-image: none;
            background-color: #53565a;
            border-radius: 23px;
            cursor: pointer;
            width: 23px;
            height: 23px;
            float: left;
            color: #fff;
            text-decoration: none;
            text-align: center;
            font: 700 13px/13px Univers;
            margin: 15px 0 0 10px;
        }

            .std-form .tooltip .tooltip-icon:hover
            {
                opacity: .4;
            }

            .std-form .tooltip .tooltip-icon:before
            {
                content: '?';
                line-height: 23px;
            }

    .std-form .tooltip-text
    {
        position: absolute;
        width: 200px;
        display: none;
        height: 100px;
    }

        .std-form .tooltip-text.tooltip-active
        {
            display: block;
        }

    .std-form .tooltip-text-wrap
    {
        background-color: #53565a;
        z-index: 105;
        left: -5px;
        border-radius: 5px;
        color: #fff;
        padding: 15px 0 15px 15px;
        width: 100%;
        position: absolute;
        z-index: 1;
        -moz-transition-delay: 0s, 0s;
        -o-transition-delay: 0s, 0s;
        -webkit-transition-delay: 0s, 0s;
        transition-delay: 0s, 0s;
    }

    .std-form [type="text"],
    .std-form [type="password"],
    .std-form [type="email"],
    .std-form [type="tel"],
    .std-form select,
    .std-form textarea,
    .std-form .custom-sel .val,
    .std-form .lnk-wrap
    {
        font: 400 13px/20px Univers;
        display: block;
        margin: 0;
        padding: 15px 0;
        width: 100%;
        border: 0;
        min-height: 50px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .std-form textarea
    {
        resize: vertical;
    }

    .std-form [type="checkbox"]
    {
        position: absolute;
        left: -99999px;
    }

        .std-form [type="checkbox"] + .inp-cb
        {
            border: 0;
            display: block;
            margin: 2em 0 0;
        }

            .std-form [type="checkbox"] + .inp-cb > span
            {
                display: block;
                overflow: hidden;
                padding: 0.5em 0 0;
            }

            .std-form [type="checkbox"] + .inp-cb:before
            {
                float: left;
                border: 2px solid #53565a;
                width: 31px;
                height: 31px;
                vertical-align: middle;
                margin: 0 10px 0 0;
                content: '';
                background: none no-repeat 50% 50%;
                background-size: 19px 19px;
            }

        .std-form [type="checkbox"]:checked + .inp-cb:before
        {
            border: 2px solid #743962;
            background-image: url("../images/cb-x.svg");
        }

    .std-form .btn-row
    {
        font: 700 13px/20px Univers;
        text-align: center;
        margin-left: 160px;
        width: 332px;
    }

        .std-form .btn-row .btn,
        .std-form .btn-row .btn
        {
            display: block;
            width: 100%;
            margin: 20px 0;
        }

    .std-form .form-row .err-msg
    {
        color: #cf2f30;
        display: none;
        float: none;
        clear: both;
        padding: 5px 0;
    }

    .std-form .error .err-msg
    {
        display: block;
        position: relative;
        left: 160px;
    }

    .std-form .recaptcha
    {
        padding: 28px 0 0 174px;
    }

.login-email-form .error .err-msg,
.link-account-email-form .error .err-msg,
.reset-password-form .error .err-msg,
.send-password-form .error .err-msg
{
    left: 0;
}

.std-form .err-icon
{
    display: none;
}

.std-form .error .err-icon
{
    display: block;
    background-color: #cf2f30;
    float: left;
    width: 23px;
    height: 23px;
    border-radius: 23px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font: 700 13px/20px Univers;
    margin: 15px 0 0 10px;
}

a.btn-fb
{
    /*background-color: #4e69a2;*/
    background-color: #2b3894;
    color: #fff;
}

    a.btn-fb > span:before
    {
        content: '';
        display: inline-block;
        vertical-align: text-bottom;
        height: 20px;
        width: 11px;
        background: url("../images/ico-fb.svg") no-repeat 0 0;
        background-size: 100% 100%;
        margin: 0 15px 0 0;
    }

a.btn-gp
{
    background-color: #cf2f30;
    color: #fff;
}

    a.btn-gp > span:before
    {
        content: '';
        display: inline-block;
        vertical-align: text-bottom;
        height: 20px;
        width: 30px;
        background: url("../images/ico-gp.svg") no-repeat 0 0;
        background-size: 100% 100%;
        margin: 0 5px 0 0;
    }

a.btn-ms
{
    background-color: #cf2f30;
    color: #fff;
}

    a.btn-ms > span:before
    {
        content: '';
        display: inline-block;
        vertical-align: text-bottom;
        height: 20px;
        width: 30px;
        background: url("../images/ico-gp.svg") no-repeat 0 0;
        background-size: 100% 100%;
        margin: 0 5px 0 0;
    }

a.btn-email
{
    background-color: #853663;
    color: #fff;
}

    a.btn-email > span:before
    {
        content: '';
        display: inline-block;
        vertical-align: text-bottom;
        height: 20px;
        width: 28px;
        background: url("../images/ico-email.svg") no-repeat 0 0;
        background-size: 100% 100%;
        margin: 0 15px 0 0;
    }

a.btn-register
{
    background-color: #4e874d;
    color: #fff;
}

    a.btn-register > span:before
    {
        content: '';
        display: inline-block;
        vertical-align: text-bottom;
        height: 20px;
        width: 28px;
        background: url("../images/ico-email.svg") no-repeat 0 0;
        background-size: 100% 100%;
        margin: 0 15px 0 0;
    }

.contactus-form
{
    max-width: 664px;
    margin: 0 auto;
}

.login-form
{
    display: block;
    margin: 0 auto;
    text-align: center;
    width: auto;
}

    .login-form .login-form-wrap
    {
        display: inline-block;
        width: auto;
        text-align: left;
    }

    .login-form li.or
    {
        font: 700 18px/28px Univers;
        text-align: center;
        position: relative;
    }

        .login-form li.or:before
        {
            content: '';
            background-color: #53565a;
            height: 1px;
            top: 50%;
            left: 0;
            right: 0;
            position: absolute;
        }

        .login-form li.or:after
        {
            content: 'OR';
            background-color: #fff;
            display: inline-block;
            padding: 0 10px;
            position: relative;
            margin: 10px 0;
        }

    .login-form .btn
    {
        text-decoration: none;
        width: 100%;
        text-align: left;
        font: 400 16px/21px Univers;
        text-transform: none;
        padding: 10px 30px;
        height: 80px;
    }

    .login-form .btn-login,
    .login-form .btn-send
    {
        display: inline-table;
        float: right;
        vertical-align: middle;
        font: 700 13px/20px Univers;
        text-transform: uppercase;
        padding: 10px 15px;
        text-decoration: none !important;
        min-width: 100px;
        text-align: center;
    }

    .login-form .txt-wrap
    {
        width: 100%;
    }

    .login-form .cb-wrap
    {
        float: left;
        width: 250px;
        border: 0 solid #53565a;
        border-width: 0 0 1px;
        padding: 0;
        min-height: 52px;
        text-align: left;
        max-width: 100%;
    }

    /* Display is controlled via model state instead of by default */
    /*.login-form .login-email-form { display: none; }*/
    .login-form .login-email-form .forgot-password-form .form-row:last-child
    {
        padding-bottom: 30px;
    }

.register-form
{
    display: block;
    margin: 0 auto;
    text-align: center;
    width: auto;
}

    .register-form .register-form-wrap
    {
        display: inline-block;
        width: auto;
        text-align: left;
    }

    .register-form li.or
    {
        font: 700 18px/48px Univers;
        text-align: center;
        position: relative;
    }

        .register-form li.or:before
        {
            content: '';
            background-color: #53565a;
            height: 1px;
            top: 50%;
            left: 0;
            right: 0;
            position: absolute;
        }

        .register-form li.or:after
        {
            content: 'OR';
            background-color: #fff;
            display: inline-block;
            padding: 0 10px;
            position: relative;
        }

    .register-form .btn
    {
        text-decoration: none;
        width: 100%;
        text-align: left;
        font: 400 16px/21px Univers;
        text-transform: none;
        padding: 10px 30px;
        height: 80px;
    }

    .register-form .txt-wrap
    {
        border-width: 0;
        padding: 15px 0 0;
        width: 310px;
    }

.register-email-form
{
    max-width: 664px;
    margin: 0 auto;
}

.reset-password-form .btn-row
{
    margin-left: 0px;
}

.link-account-form
{
    max-width: 664px;
    margin: 0 auto;
}

    .link-account-form h1
    {
        text-transform: none;
    }

    .link-account-form h3
    {
        text-transform: none;
        margin: 10px 0;
    }

    .link-account-form h4
    {
        font-weight: normal;
    }

    .link-account-form .link-account-block
    {
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        border: 0 solid rgba(148, 149, 164, 0.4);
        border-width: 1px 0 1px;
        padding: 25px 0;
        margin: 20px 0 30px;
    }

    .link-account-form .btn
    {
        width: 100%;
        text-align: left;
        margin: 20px 0;
    }

    .link-account-form .link-account-email-form
    {
        margin: 20px 0 0;
    }

    .link-account-form .lnk-ignore-link
    {
        font: 700 18px/20px Univers;
        text-transform: uppercase;
    }

.link-account-block .block
{
    display: table-cell;
    vertical-align: top;
}

.link-account-block .block-middle
{
    width: 40px;
    height: 100%;
}

.link-account-block .block-row
{
    font: 700 14px/20px Univers;
}

.block-middle .upper
{
    border-left: 1px solid rgba(148, 149, 164, 0.4);
    height: calc(50% - 20px);
    margin: 0 0 0 8px;
}

.block-middle .middle
{
    height: 40px;
    margin: 0 auto;
}

    .block-middle .middle:before
    {
        content: '+';
        font: 700 30px/48px Univers;
        position: relative;
        top: -10px;
    }

.block-middle .lower
{
    border-left: 1px solid rgba(148, 149, 164, 0.4);
    height: calc(50% - 20px);
    margin: 0 0 0 8px;
}

.link-account-email-form .btn-link
{
    width: 100%;
    padding: 10px 15px;
    font: 700 13px/20px Univers;
    text-transform: uppercase;
    vertical-align: middle;
}

.link-account-form .lnk-forgot-password
{
    display: block;
    padding: 20px 0 0;
}

.cnt-list-block .content-wrap:after
{
    clear: both;
    content: '';
    display: table;
}

.cnt-list-block article
{
    border: 0 solid rgba(148, 149, 164, 0.4);
    border-width: 1px 0 0;
    padding: 20px 20px 0 0;
    margin: 1.5em 0 0;
}

    .cnt-list-block article .title
    {
        margin: 0 0 1em;
    }

.pagination-block
{
    font: 400 25px/1 Univers;
    border: 0 solid rgba(148, 149, 164, 0.4);
    border-width: 1px 0 0;
}

    .pagination-block .pages
    {
        display: table;
        text-align: center;
        height: 30px;
        padding: 20px 0;
    }

        .pagination-block .pages > *
        {
            display: table-cell;
            border: 0 solid rgba(148, 149, 164, 0.4);
            border-width: 0 1px 0 0;
            width: 60px;
            vertical-align: middle;
        }

.reg-confirm
{
    max-width: 600px;
    margin: 0 auto;
}

    .reg-confirm header,
    .reg-confirm .content
    {
        max-width: 420px;
        margin: 0 auto;
    }

    .reg-confirm header
    {
        font: 400 12px/1 Univers;
        text-align: center;
        padding: 40px 20px;
    }

    .reg-confirm .content
    {
        padding: 0 20px 60px;
    }

    .reg-confirm header .cnf,
    .reg-confirm header .upw
    {
        display: inline-block;
        vertical-align: middle;
    }

        .reg-confirm header .cnf:before,
        .reg-confirm header .upw:before
        {
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px 0 0;
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }

        .reg-confirm header .cnf:before
        {
            background-color: #de833c;
        }

        .reg-confirm header .upw:before
        {
            background-color: #e6e6e6;
        }

        .reg-confirm header .cnf:after
        {
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin: 0 20px;
            width: 18px;
            height: 30px;
            background: url("../images/reg-rarr.svg") no-repeat 50% 50%;
            background-size: 18px 30px;
        }

.reg-update
{
    max-width: 600px;
    margin: 0 auto;
}

    .reg-update header,
    .reg-update .content
    {
        max-width: 420px;
        margin: 0 auto;
    }

    .reg-update header
    {
        font: 400 12px/1 Univers;
        text-align: center;
        padding: 40px 20px;
    }

    .reg-update .content
    {
        padding: 0 20px 60px;
    }

    .reg-update header .cnf,
    .reg-update header .upw
    {
        display: inline-block;
        vertical-align: middle;
    }

        .reg-update header .cnf:before,
        .reg-update header .upw:before
        {
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px 0 0;
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }

        .reg-update header .cnf:before
        {
            background-color: #e6e6e6;
        }

        .reg-update header .upw:before
        {
            background-color: #de833c;
        }

        .reg-update header .cnf:after
        {
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin: 0 20px;
            width: 18px;
            height: 30px;
            background: url("../images/reg-rarr.svg") no-repeat 50% 50%;
            background-size: 18px 30px;
        }

.hp-head
{
    position: relative;
    min-height: 760px;
    margin: 0 -30px;
    background: no-repeat 50% 100% #fff;
}

    .hp-head:before
    {
        background: rgba(0, 0, 0, 0) url("../images/hp-spots.png") no-repeat scroll 50% 100%;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    .hp-head .img-wrap
    {
        display: none;
    }

    .hp-head .page-content
    {
        text-align: left;
        background-color: transparent !important;
    }

    .hp-head .content
    {
        display: inline-block;
        text-align: left;
        font: 700 25px/30px Univers;
        padding: 60px 0 60px 60px;
    }

        .hp-head .content h1
        {
            font: 700 50px/1 Univers;
        }

        .hp-head .content .btn
        {
            margin-left: 50px;
            min-width: 140px;
        }

.display-show-inline
{
    display: inline;
}

.display-show-block
{
    display: block;
}

.display-hide
{
    display: none;
}

.profile-select-block .jumpto-wrap
{
    left: 500px;
    right: auto;
    position: absolute;
    z-index: 4;
    top: 150px;
    font: 700 18px/40px Univers;
    display: none;
}

    .profile-select-block .jumpto-wrap:after
    {
        background-color: #161616;
        bottom: 20px;
        content: "";
        position: absolute;
        right: -30px;
        top: 20px;
        width: 3px;
    }

    .profile-select-block .jumpto-wrap a
    {
        display: block;
        position: relative;
        text-decoration: none;
    }

        .profile-select-block .jumpto-wrap a:hover
        {
            text-decoration: underline;
        }

        .profile-select-block .jumpto-wrap a:after
        {
            background-color: #161616;
            content: "";
            height: 3px;
            position: absolute;
            right: -30px;
            top: 19px;
            width: 20px;
        }

.profile-select-block .jumpto-wrap-back
{
    left: 500px;
    right: auto;
    position: absolute;
    z-index: 4;
    bottom: 20px;
    font: 700 18px/40px Univers;
}

.profile-select-block .jumpto-wrap-left
{
    left: auto;
    right: 500px;
}

.go-to-top
{
    z-index: 104;
    position: fixed;
    font: 400 50px/25px Univers;
    bottom: 40px;
    right: 40px;
    display: none;
    width: 40px;
    height: 40px;
}

    .go-to-top:before
    {
        display: inline-block;
        content: '';
        width: 40px;
        height: 40px;
        background: url("../images/fac-arrow-up.png") no-repeat 0 0;
        opacity: .4;
    }

.owner-name
{
    z-index: 100;
    position: fixed;
    font: 600 25px/25px Univers;
    bottom: 40px;
    left: 40px;
    display: none;
    background-color: #ccc;
    color: #111;
    opacity: .7;
    padding: 8px;
    white-space: nowrap;
}

.warning:before
{
    display: inline-block;
    content: '';
    width: 50px;
    height: 50px;
    background: url("../images/note.png") no-repeat 50% 0;
    background-size: 60%;
    float: left;
}

@media (min-width: 925px) and (max-width: 1156px)
{
    .profile-select-block .jumpto-wrap
    {
        left: auto;
        right: 50px;
    }

    .profile-select-block .jumpto-wrap-back
    {
        left: auto;
        right: 50px;
    }

    .profile-select-block .jumpto-wrap-left
    {
        left: 30px;
        right: auto;
    }
}

@media (min-width: 925px) and (max-width: 1120px)
{
    #create-plot .key-items .key-item-emotionality .emo-plot
    {
        width: 220px;
    }
}

@media (min-width: 1121px) and (max-width: 1450px)
{
    .go-to-top
    {
        bottom: 40px;
        right: 15%;
    }

    .owner-name
    {
        left: 10%;
    }
}

@media (min-width: 1451px) and (max-width: 1780px)
{
    .go-to-top
    {
        bottom: 40px;
        right: 20%;
    }

    .owner-name
    {
        left: 15%;
    }
}

@media (min-width: 1781px)
{
    .go-to-top
    {
        bottom: 40px;
        right: 25%;
    }

    .owner-name
    {
        left: 20%;
    }
}

/* StrongPass.js */
.pass-container
{
    height: 30px;
    width: 250px;
    display: none;
}

/*don't need to display pass bar*/
.pass-bar
{
    display: none;
}

.password-strength .txt-wrap,
.password-strength.active .txt-wrap
{
    border-width: 0 0 3px !important;
}

.password-too-short .txt-wrap,
.password-too-short.active .txt-wrap
{
    border-color: #ff0000 !important;
}

.password-very-weak .txt-wrap,
.password-very-weak.active .txt-wrap
{
    border-color: #550000 !important;
}

.password-weak .txt-wrap,
.password-weak.active .txt-wrap
{
    border-color: #880000 !important;
}

.password-good .txt-wrap,
.password-good.active .txt-wrap
{
    border-color: #ff6600 !important;
}

.password-strong .txt-wrap,
.password-strong.active .txt-wrap
{
    border-color: #005500 !important;
}

.password-very-strong .txt-wrap,
.password-very-strong.active .txt-wrap
{
    border-color: #00ff00 !important;
}

/* iSpinner.css */
.ispinner
{
    z-index: 102;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.75);
}

    .ispinner,
    .ispinner .ispinner-blade
    {
        position: fixed;
    }

        .ispinner .ispinner-blade
        {
            width: 5px;
            height: 15px;
            left: 50%;
            top: 40%;
        }

        .ispinner.black .ispinner-blade
        {
            background-color: #000;
        }

.spotlight-content-block .title
{
    font: 700 36px/38px Univers;
    padding: 15px 0 5px 0;
}

.spotlight-content-block .summary
{
    font: 700 18px/25px Univers;
}

.spotlight-content-block .spotlight-header
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    .spotlight-content-block .spotlight-header .summary
    {
        color: #B0226B;
    }

.spotlight-content-block a.btn-download
{
    margin: 15px 5px;
}

.flex-content
{
    clear: both;
    padding: 10px;
}

    .flex-content .title
    {
        font: 700 24px/28px Univers;
        padding: 5px 0 5px 0;
    }

    .flex-content .flex-content-wrap
    {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

        .flex-content .flex-content-wrap.flex-columns-3 .flex-content-column
        {
            width: calc(100% / 3)
        }

        .flex-content .flex-content-wrap.flex-columns-4 .flex-content-column
        {
            width: calc(100% / 4)
        }

    .flex-content .flex-content-column
    {
        padding: 15px;
    }

        .flex-content .flex-content-column .btn
        {
            width: 80%;
            margin: 15px;
            height: 60px;
        }

    .flex-content .summary
    {
        padding: 10px 0px 10px 0px;
    }

    .flex-content p
    {
        margin-bottom: 10px;
    }

    .flex-content.spotlight-steps .summary
    {
        min-height: 70px;
    }

    .flex-content.spotlight-steps p
    {
        display: list-item;
    }

    .flex-content.spotlight-steps .spotlight-step-icon
    {
        height: 80px;
        background-size: auto 40px;
        background: no-repeat center;
        margin: 15px;
    }

    .flex-content.spotlight-steps .pick-icon
    {
        background-image: url(../images/checked-box.svg)
    }

    .flex-content.spotlight-steps .explore-icon
    {
        background-image: url(../images/edit.svg)
    }

    .flex-content.spotlight-steps .plan-icon
    {
        background-image: url(../images/bell.svg)
    }

    .flex-content.spotlight-steps .share-icon
    {
        background-image: url(../images/employee.svg)
    }

.spotlight-content-block .flex-content .summary
{
    color: #B0226B
}

.report-content
{
    position: relative;
    display: table;
    width: 100%;
}

    .report-content .content-tabs
    {
        position: relative;
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 70px;
        z-index: 2;
    }

        .report-content .content-tabs > .tab
        {
            display: table-cell;
            position: relative;
            background-color: #181818;
            color: #fff;
            text-align: center;
            vertical-align: middle;
            height: 70px;
            font-weight: bold;
            border: 0 solid rgba(148, 149, 164, 0.4);
            border-width: 0 1px 0 0;
            cursor: pointer;
        }

            .report-content .content-tabs > .tab:hover
            {
                background-color: #282828;
            }

                .report-content .content-tabs > .tab:hover:after
                {
                    height: 14px;
                }

            .report-content .content-tabs > .tab:after
            {
                content: '';
                height: 8px;
                width: 100%;
                position: absolute;
                bottom: -8px;
                left: 0px;
                right: -10px;
                transition: height .2s;
            }

            .report-content .content-tabs > .tab.active:after
            {
                height: 20px;
            }

.tab-will:after
{
    background-color: #00a651;
    border-right: 1px solid #00a651;
}

.tab-energy:after
{
    background-color: #f7941e;
    border-right: 1px solid #f7941e;
}

.tab-affection:after
{
    background-color: #ed1d24;
    border-right: 1px solid #ed1d24;
}

.tab-control:after
{
    background-color: #03558b;
    border-right: 1px solid #03558b;
}

.tab-emotionality:after
{
    background-color: #d8458e;
    border-right: 1px solid #d8458e;
}

.matrices .matrix
{
    padding: 30px 0 0;
    position: relative;
}

.matrix > div:first-child
{
    display: block;
    float: left;
    padding: 0 25px 0 25px;
}

.matrix > .matrix-header
{
    padding: 5px 0 0;
    min-height: 75px;
}

    .matrix > .matrix-header > .title
    {
        font: 700 30px/28px Univers;
        padding: 12px 0 10px;
    }

.matrix-header-mobile
{
    display: none;
}

.matrix-sections > .subfactor-heading
{
    border-bottom: 2px solid;
    font: 700 18px/20px Univers;
    padding: 15px 50px 10px 0;
}

.matrix-sections > .challenge-section
{
    font: 700 18px/20px Univers;
    padding: 0 10px 10px 10px;
}

.matrix-sections .section-label
{
    padding: 10px 0 10px 0;
}


.spotlight-band-icon.tooltip
{
    margin-top: -30px;
    float: right;
    top: 0;
    left: 50px;
}

.spotlight-band-icon .tooltip-icon
{
    background-image: none;
    width: 100%;
    height: 100%;
}

.spotlight-band-icon svg
{
    height: 30px;
}

.matrix svg circle
{
    opacity: 1;
    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .3));
}

    .matrix svg circle.light-disk
    {
        opacity: .6;
    }

.spotlight-will .spotlight-difference-icon,
.domain-icon-will .spotlight-difference-icon,
.matrix-will .spotlight-difference-icon
{
    fill: #00a651;
}

.dashboard-spotlight-will,
.matrix-will .challenge-section > .section-band
{
    color: #00a651;
}

.spotlight-energy .spotlight-difference-icon,
.domain-icon-energy .spotlight-difference-icon,
.matrix-energy .spotlight-difference-icon
{
    fill: #f7941e;
}

.dashboard-spotlight-energy,
.matrix-energy .challenge-section > .section-band
{
    color: #f7941e;
}

.spotlight-affection .spotlight-difference-icon,
.domain-icon-affection .spotlight-difference-icon,
.matrix-affection .spotlight-difference-icon
{
    fill: #ed1d24;
}

.dashboard-spotlight-affection,
.matrix-affection .challenge-section > .section-band
{
    color: #ed1d24;
}

.spotlight-control .spotlight-difference-icon,
.domain-icon-control .spotlight-difference-icon,
.matrix-control .spotlight-difference-icon
{
    fill: #03558b;
}

.dashboard-spotlight-control,
.matrix-control .challenge-section > .section-band
{
    color: #03558b;
}

.spotlight-emotionality .spotlight-difference-icon,
.domain-icon-emotionality .spotlight-difference-icon,
.matrix-emotionality .spotlight-difference-icon
{
    fill: #d8458e;
}

.dashboard-spotlight-emotionality,
.matrix-emotionality .challenge-section > .section-band
{
    color: #d8458e;
}

.matrix-sections > .section
{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

    .matrix-sections > .section > div
    {
        width: calc(100%/3);
        padding: 10px 10px 10px 15px;
    }

.matrix-sections-desktop
{
    display: block;
}

.matrix-sections-mobile
{
    display: none;
}

.coaching-notes
{
    padding: 0 0 20px 0;
}

    .coaching-notes .coaching-button
    {
        font: 400 14px/16px Univers;
        padding: 10px 15px 10px 15px;
        background: #181818;
        color: white;
        width: fit-content;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        margin: 20px 10px 0 10px;
        cursor: pointer;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, .3);
    }

        .coaching-notes .coaching-button:hover
        {
            background-color: #383838;
        }

        .coaching-notes .coaching-button:active
        {
            box-shadow: none;
            position: relative;
            left: 2px;
            top: 2px;
        }

    .coaching-notes .coaching-panel
    {
        border: 3px solid #181818;
        padding: 40px 40px 40px 40px;
        margin: 0 10px 30px 10px;
        display: none;
        box-shadow: 3px 3px 2px rgba(0, 0, 0, .3);
        position: relative;
    }

        .coaching-notes .coaching-panel summary
        {
        }

        .coaching-notes .coaching-panel p
        {
            margin-top: 20px;
            display: list-item;
        }

    .coaching-notes .coaching-button span.caret
    {
        padding-left: 10px;
        display: inline-block;
        transition: 0.5s;
        transform: rotate(0);
        transform-origin: 70% 50%;
    }

    .coaching-notes .coaching-button.open span.caret
    {
        transform: rotate(90deg);
    }

    .coaching-notes .coaching-panel.flex
    {
        display: flex;
        flex-direction: column;
    }

.section-label
{
    font: 700 14px/14px Univers;
}

.matrix-keys
{
    margin: 20px 20px 0;
}

    .matrix-keys > .title
    {
        display: block;
        float: left;
        padding: 10px 30px 0 0;
    }

    .matrix-keys > .summary
    {
        font: 400 14px/16px Univers;
        color: #000 !important;
        overflow: hidden;
    }

    .matrix-keys > .key-wrap
    {
        padding: 15px 0;
    }

        .matrix-keys > .key-wrap div
        {
            overflow: hidden;
        }

        .matrix-keys > .key-wrap > div > div:first-of-type
        {
            float: left;
            width: 60px;
            padding: 10px 15px 20px 0;
        }

.matrix-keys
{
    border: 0 solid rgba(148, 149, 164, 0.4);
    border-width: 1px 0;
}

.key-wrap > div
{
    padding: 10px 0;
}

.spotlight-content-block .domains
{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-evenly;
}

    .spotlight-content-block .domains > .domain-group
    {
        display: flex;
        flex-direction: column;
        width: 50%;
    }

        .spotlight-content-block .domains > .domain-group > .domain
        {
            display: flex;
            font: 700 18px/25px Univers;
            cursor: pointer;
            margin: 15px;
            ;
        }

            .spotlight-content-block .domains > .domain-group > .domain > .domain-icon
            {
                margin-right: 4px;
            }

            .spotlight-content-block .domains > .domain-group > .domain > .domain-wrap > .summary
            {
                margin: 3px 0 5px 0;
                padding: 0;
                color: #000;
            }

            .spotlight-content-block .domains > .domain-group > .domain > .domain-wrap > p
            {
                margin: 0;
                width: 100%;
                font: 400 14px/22px Univers;
            }

.spotlight-content-block .report-content
{
    padding: 30px 0 30px;
}

.domain-icon svg
{
    height: 30px;
}

    .domain-icon svg circle
    {
        opacity: 1;
        filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .3));
    }

        .domain-icon svg circle.light-disk
        {
            opacity: .6;
        }


#spotlight-logo
{
    content: '';
    display: block;
    background: url("../images/logo-spotlight.svg") no-repeat center;
    width: 100px;
    height: 80px;
    margin: 0 5px 20px 20px;
    float: left;
}

#spotlight .report-title:before
{
    content: '';
    display: inline-block;
    background: url("../images/spotlight-icon.svg") no-repeat center;
    background-size: 40px;
    width: 40px;
    height: 40px;
    background-size: 40px 40px;
    vertical-align: middle;
    margin: 0 20px 0 0;
}

.foundation-logo-holder
{
    display: table;
    margin: 1em 0 0;
}

.foundation-logo-row
{
    display: table-row;
}

.foundation-logo-title,
.foundation-logo-text
{
    display: table-cell;
    width: 50%;
}

.foundation-logo-title
{
    padding: 5px 0 5px 0;
    font-size: 18px;
    font-weight: 700;
    vertical-align: middle;
}

    .foundation-logo-title span
    {
        position: relative;
        display: block;
        line-height: 1.666em;
        padding: 0 30px 0 45px;
    }

        .foundation-logo-title span::before
        {
            position: absolute;
            top: 50%;
            left: 0;
            content: "";
            width: 30px;
            height: 30px;
            transform: translateY(-50%);
            border-radius: 50%;
            background-color: grey;
        }

.foundation-logo-text
{
    padding-bottom: 0.5em;
    vertical-align: top;
}

.coloured-bullets
{
    padding: 0;
    margin: 0;
    list-style: none;
}

    .coloured-bullets li
    {
        position: relative;
        padding: 0 0 0 15px;
        margin: 0 0 0 1px;
        font-weight: 700;
    }

        .coloured-bullets li::before
        {
            position: absolute;
            top: 7.5px;
            left: 0;
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #616161;
        }

    .will .foundation-logo-title span::before,
    .coloured-bullets .will::before
    {
        background-color: #00a651;
    }

    .energy .foundation-logo-title span::before,
    .coloured-bullets .energy::before
    {
        background-color: #f7941e;
    }

    .affection .foundation-logo-title span::before,
    .coloured-bullets .affection::before
    {
        background-color: #ed1d24;
    }

    .control .foundation-logo-title span::before,
    .coloured-bullets .control::before
    {
        background-color: #03558b;
    }

    .emotionality .foundation-logo-title span::before,
    .coloured-bullets .emotionality::before
    {
        background-color: #d8458e;
    }

@media (max-width: 479px)
{

    .foundation-logo-title,
    .foundation-logo-text
    {
        display: block;
        width: auto;
    }

    .foundation-logo-text
    {
        padding-top: 0.5em;
    }
}

.dashboard-V1 .dashboard-content-block #spotlight ul
{
    list-style-type: none;
    padding: 0;
}

.dashboard-V1 .dashboard-content-block .spotlight-will-logo:before
{
    content: '';
    display: inline-block;
    background: url("../images/spotlight-will-small.png") no-repeat center;
    width: 29px;
    height: 29px;
    vertical-align: middle;
    margin: 0 20px 0 10px;
}

.dashboard-V1 .dashboard-content-block .spotlight-energy-logo:before
{
    content: '';
    display: inline-block;
    background: url("../images/spotlight-energy-small.png") no-repeat center;
    width: 29px;
    height: 29px;
    vertical-align: middle;
    margin: 0 20px 0 10px;
}

.dashboard-V1 .dashboard-content-block .spotlight-affection-logo:before
{
    content: '';
    display: inline-block;
    background: url("../images/spotlight-affection-small.png") no-repeat center;
    width: 29px;
    height: 29px;
    vertical-align: middle;
    margin: 0 20px 0 10px;
}

.dashboard-V1 .dashboard-content-block .spotlight-control-logo:before
{
    content: '';
    display: inline-block;
    background: url("../images/spotlight-control-small.png") no-repeat center;
    width: 29px;
    height: 29px;
    vertical-align: middle;
    margin: 0 20px 0 10px;
}

.dashboard-V1 .dashboard-content-block .spotlight-emotionality-logo:before
{
    content: '';
    display: inline-block;
    background: url("../images/spotlight-emotionality-small.png") no-repeat center;
    width: 29px;
    height: 29px;
    vertical-align: middle;
    margin: 0 20px 0 10px;
}

.stick-header .report-content .tabs-nav
{
    padding-top: 70px;
}

.stick-header .report-content .content-tabs
{
    z-index: 101;
    position: fixed;
    top: 0;
    width: 100%;
}

.stick-header .report-content .matrices
{
    padding-top: 70px;
}

@media (min-width: 1356px)
{
    .tooltip-content
    {
        max-width: 100%;
    }

        .tooltip-content:before
        {
            position: absolute;
            background-color: #fff;
            width: 1044px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: 0 auto;
            content: '';
        }

    #main-content .page-content.tooltip-content
    {
        background-color: transparent;
    }

    .tooltip-content .tabs-block
    {
        position: relative;
        padding: 0 0 0 20px;
        max-width: 1200px;
        left: 80px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: 0 auto;
    }

    .tooltip-content .tab-contents
    {
        padding: 0 156px 0 0;
    }

        .tooltip-content .tab-contents > .tab-content
        {
            padding: 0 50px 40px;
        }

    .tab-contents .profile-switch > .btn-switch
    {
        right: 95px;
    }

    .tab-contents .profile-switch > .lnk-switch
    {
        right: 70px;
    }
}

.dashboard .img-wrap
{
    display: none;
}

.hero-word-cloud
{
    padding: 40px 0 0;
    background: no-repeat 80% 40% #eee;
    margin: -50px -30px 50px;
    position: relative;
    overflow: hidden;
}

    .hero-word-cloud .bg-dots
    {
        position: absolute;
        left: 0;
        top: -100px;
        bottom: -100px;
        right: 0;
    }

    .hero-word-cloud .dot
    {
        position: absolute;
        border-radius: 50%;
        overflow: hidden;
    }

        .hero-word-cloud .dot:nth-of-type(1)
        {
            background-color: #d95697;
            width: 368px;
            height: 368px;
            left: -105px;
            /*bottom: -273px;*/
            bottom: -173px;
        }

        .hero-word-cloud .dot:nth-of-type(2)
        {
            background-color: #f59331;
            width: 240px;
            height: 240px;
            left: -150px;
            /*bottom: 76px;*/
            bottom: 176px;
        }

        .hero-word-cloud .dot:nth-of-type(3)
        {
            background-color: #e3e3e3;
            width: 130px;
            height: 130px;
            left: 65px;
            /*bottom: 35px;*/
            bottom: 135px;
        }

        .hero-word-cloud .dot:nth-of-type(4)
        {
            background-color: #d2d2d2;
            width: 130px;
            height: 130px;
            right: -32px;
            /*top: -30px;*/
            top: 70px;
        }

        .hero-word-cloud .dot:nth-of-type(5)
        {
            background-color: #ea222d;
            width: 84px;
            height: 84px;
            right: 50px;
            /*top: 82px;*/
            top: 182px;
        }

        .hero-word-cloud .dot:nth-of-type(6)
        {
            background-color: #118745;
            width: 240px;
            height: 240px;
            right: -170px;
            /*top: 81px;*/
            top: 181px;
        }

    /*.hero-word-cloud.no-facet5 .dot:nth-of-type(5) { display:none; }*/
    .hero-word-cloud.no-facet5 .page-content
    {
        padding: 0 0 120px 80px;
    }

    .hero-word-cloud.no-facet5 .dot:nth-of-type(5)
    {
        left: 280px;
        top: 420px;
    }

    .hero-word-cloud .no-facet5 h1
    {
        font: 700 50px/1 Univers;
        text-align: left;
        padding-top: 20px;
        margin: 0 0 0.5em;
    }

    .hero-word-cloud .no-facet5 .word-cloud-wrap
    {
        width: 360px;
        padding: 0;
    }

        .hero-word-cloud .no-facet5 .word-cloud-wrap .word-list
        {
            font: 500 20px/1.1 Univers;
            text-align: left;
        }

    .hero-word-cloud .page-content
    {
        background: none !important;
        position: relative !important;
    }

.word-cloud-wrap
{
    padding: 50px 0;
}

    .word-cloud-wrap .word-list
    {
        margin: 0 auto;
        text-align: center;
        font: 700 10px/1.1 Univers;
        position: relative;
    }

        .word-cloud-wrap .word-list li
        {
            display: inline-block;
            margin: 0 6px;
            padding: 0;
            position: relative;
            transition-property: all;
            transition-timing-function: ease-out;
        }

    .word-cloud-wrap:not(.wc-initialised) .word-list li
    {
        transition: none;
    }

    .word-cloud-wrap [data-factor="Will"]
    {
        color: #00a651;
    }

    .word-cloud-wrap [data-factor="Energy"]
    {
        color: #f7941e;
    }

    .word-cloud-wrap [data-factor="Affection"]
    {
        color: #ed1d24;
    }

    .word-cloud-wrap [data-factor="Control"]
    {
        color: #03558b;
    }

    .word-cloud-wrap [data-factor="Emotionality"]
    {
        color: #d8458e;
    }

    .word-cloud-wrap [data-rank="0"]
    {
        font-size: 1.5em;
    }

    .word-cloud-wrap [data-rank="1"]
    {
        font-size: 2.5em;
    }

    .word-cloud-wrap [data-rank="2"]
    {
        font-size: 3.5em;
    }

    .word-cloud-wrap [data-rank="3"]
    {
        font-size: 4.5em;
    }

    .word-cloud-wrap [data-rank="4"]
    {
        font-size: 5.5em;
    }

    .word-cloud-wrap [data-rank="5"]
    {
        font-size: 6.5em;
    }

    .word-cloud-wrap .delay-1
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .delay-2
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .delay-3
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .delay-4
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .delay-5
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .delay-6
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .delay-7
    {
        transition-delay: 0s;
    }

    .word-cloud-wrap .duration-1
    {
        transition-duration: 1s;
    }

    .word-cloud-wrap .duration-2
    {
        transition-duration: .9s;
    }

    .word-cloud-wrap .duration-3
    {
        transition-duration: .8s;
    }

    .word-cloud-wrap .duration-4
    {
        transition-duration: .7s;
    }

    .word-cloud-wrap .duration-5
    {
        transition-duration: .6s;
    }

    .word-cloud-wrap .duration-6
    {
        transition-duration: .5s;
    }

    .word-cloud-wrap .duration-7
    {
        transition-duration: .4s;
    }

.dashboard .dashboard-tabs
{
    display: none;
}


.dashboard-blocks
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    font-family: Univers;
}

    .dashboard-blocks > [class*="dashboard-block"]
    {
        -webkit-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    .dashboard-blocks h3,
    .hero-word-cloud header
    {
        margin: 0;
    }

.dashboard-block-hr-1,
.dashboard-block-hr-2,
.hero-word-cloud-hr
{
    background: #000;
    height: 3px;
    border: 0 solid #111;
    border-width: 1px 0;
    margin: 10px 0 0;
}

.dashboard-block-prof-comp
{
    border-radius: 3px;
    border: 1px solid rgba(17, 17, 17, 0.17);
}

    .dashboard-block-prof-comp header
    {
        border-bottom: 1px solid rgba(17, 17, 17, 0.17);
        padding: 20px 40px;
        text-align: center;
        font-size: 14px;
        line-height: 1.3;
        height: auto;
        font-weight: 400;
        text-transform: none;
    }

        .dashboard-block-prof-comp header .title
        {
            font-size: 25px;
            font-weight: 700;
            margin: 0 0 0.3em;
        }

        .dashboard-block-prof-comp header p
        {
            margin: 0;
        }

            .dashboard-block-prof-comp header p + p
            {
                margin-top: .5em;
            }

    .dashboard-block-prof-comp footer
    {
        padding: 0 40px 25px;
    }

        .dashboard-block-prof-comp footer .btn
        {
            margin: 0 0 12px;
            display: block;
        }

    .dashboard-block-prof-comp .plot-block
    {
        padding: 0 20px;
    }

    .dashboard-block-prof-comp #main-plot
    {
        width: 100%;
        margin: 0 auto;
        position: relative;
        padding: 50px 0 130px;
        max-width: 100%;
    }

        .dashboard-block-prof-comp #main-plot svg
        {
            height: 60%;
            width: 60%;
            margin: 0 auto;
            display: block;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-title
        {
            font-size: 18px;
            line-height: 40px;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-control
        {
            left: 80%;
            width: 20%;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-energy
        {
            right: 80%;
            width: 20%;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-will
        {
            right: 40%;
            top: 20px;
            width: 100%;
            text-align: center;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-affection
        {
            right: 40%;
            bottom: 100px;
            width: 100%;
            text-align: center;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-title:after
        {
            margin: -6px 0 0 8px;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-title:before
        {
            margin: -6px 8px 0 0;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-control > span:before
        {
            margin: -3px 10px 0 3px;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-energy > span:after
        {
            display: inline-block;
            margin: -3px 3px 0 10px;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-emotionality .key-title
        {
            display: inline-block;
            margin-left: 0px;
        }

        .dashboard-block-prof-comp #main-plot .key-items .key-item-emotionality .emo-plot
        {
            display: block;
            margin: 10px auto 0;
        }

.dashboard-block-report-list .report-list
{
    border: 1px solid rgba(17, 17, 17, 0.17);
    border-width: 1px 0;
}

.report-item
{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    text-decoration: none !important;
    padding: 15px 0;
}

    .report-item .ico
    {
        width: 29px;
        height: 29px;
        margin: 6px 23px 6px 0;
        -webkit-flex: 0 0 29px;
        flex: 0 0 29px;
    }

        .report-item .ico img
        {
            display: block;
            margin: 0;
            width: 100%;
            height: 100%;
        }

    .report-item .content
    {
        margin: 0 15px 0 0;
        color: #616161;
        align-self: center;
        font-size: 14px;
        line-height: 20px;
        flex: 1 0 0;
    }

        .report-item .content p
        {
            margin: 0;
        }

    .report-item .family
    {
        font-size: 18px;
        font-weight: 700;
        color: #161616;
    }

        .report-item .family.not-purchased
        {
            color: #616161;
        }

            .report-item .family.not-purchased span
            {
                font-weight: 500;
            }

    .report-item .buttons
    {
        flex: 0 0 100px;
    }

    .report-item .btn
    {
        margin: 0 0 0 auto;
        white-space: nowrap;
    }

a.report-item:hover .family
{
    color: #853663;
}

.report-item + .report-item
{
    border-top: 1px solid rgba(17, 17, 17, 0.17);
}

.dashboard-blocks .dashboard-block-spotlight-strength
{
    margin: -50px -8000px -40px;
    padding: 30px 8000px;
    background-color: #ebebeb;
    box-sizing: content-box;
}

span.download-icon
{
    display: inline-block;
    margin-left: 10px;
    width: 1em;
    height: 1em;
    background: url("../images/download-white.svg") no-repeat left center;
    background-size: contain;
    content: "";
}

    span.download-icon.icon-grey
    {
        display: none;
    }

.dashboard-blocks .not-sharing
{
    margin: 20px;
}

.dashboard-blocks div
{
    z-index: 1;
}

.dashboard-blocks .dashboard-block-spotlight-strength
{
    display: flex;
    align-items: center;
}

.dashboard-blocks .side-heading
{
    width: 300px;
}

    .dashboard-blocks .side-heading .title
    {
        font: bold 20px/1 Univers;
        margin-bottom: 10px;
    }

.dashboard-blocks .dashboard-spotlight-strength
{
    margin-left: 40px;
    font: 700 25px/30px Univers;
}

.dashboard .dashboard-bottom-dots
{
    display: block;
    position: relative;
}

    .dashboard .dashboard-bottom-dots img
    {
        display: block;
        width: 200%;
        margin: -175px -80px 0;
        z-index: -1;
    }

.shared-table
{
    font: 500 14px/20px Univers;
}

    .shared-table .content
    {
        overflow: hidden;
    }

    .shared-table .name
    {
        color: #010704;
        font-size: 18px;
        line-height: 25px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shared-table .share-ico
    {
        background: url("../images/sharing-icon.svg") no-repeat 50% 50% transparent;
        background-size: 16px 14px;
        height: 14px;
        width: 16px;
        display: block;
        margin: 0 15px 0 0;
        float: left;
    }

    .shared-table .share-me-ico
    {
        background-image: url("../images/sharing-me-icon.svg");
        background-size: 12px 14px;
    }

    .shared-table .initials
    {
        background-color: #92894a;
        border-radius: 50%;
        width: 42px;
        height: 42px;
        font: 700 14px/42px Univers;
        color: #fff;
        text-align: center;
        margin: 0 30px 0 15px;
        float: left;
    }

    .shared-table p
    {
        margin: 0;
    }

    .shared-table .content:not(:last-child)
    {
        margin-bottom: 15px;
    }

    .shared-table thead,
    .shared-table td:first-child
    {
        color: #717171;
    }

    .shared-table td:last-child
    {
        width: 235px;
    }

    .shared-table .btns-wrap
    {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

        .shared-table .btns-wrap > *
        {
            display: block;
            -webkit-flex: 1 1 1px;
            flex: 1 1 1px;
            padding-left: 0;
            padding-right: 0;
            min-width: 0;
        }

            .shared-table .btns-wrap > *:not(:last-child)
            {
                margin-right: 11px;
            }

.speech-bubble
{
    position: relative;
}

    .speech-bubble .speech-content
    {
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translate(-50%, -15px);
        background: #000;
        z-index: 105 !important;
        color: #fff;
        white-space: nowrap;
        padding: 10px 15px;
        border-radius: 5px;
        font: 400 14px/20px Univers;
        visibility: hidden;
        opacity: 0;
        transition: opacity .3s, visibility 0s .3s;
    }

        .speech-bubble .speech-content::after
        {
            content: '';
            width: 20px;
            height: 10px;
            border: 0 solid transparent;
            border-width: 10px 10px 0;
            border-top-color: #000;
            top: 100%;
            position: absolute;
            left: 50%;
            box-sizing: border-box;
            margin: 0 0 0 -10px;
        }

    .speech-bubble:hover .speech-content
    {
        visibility: visible;
        opacity: 1;
        transition: opacity .3s, visibility 0s;
    }

.dashboard-block-shared-table .btn
{
    margin: 30px 0 0;
}

.dashboard .dashboard-qualities-header
{
    display: flex;
    justify-content: space-between;
}

    .dashboard .dashboard-qualities-header h3
    {
        margin: 0;
        align-self: center;
    }

.key-qualities .word-cloud-wrap .word-list li:hover
{
    cursor: pointer;
    text-decoration: underline;
}

.key-qualities .word-cloud-wrap
{
    transition: width 1s;
}

.key-qualities .key-qualities-container
{
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .key-qualities .key-qualities-container .key-quality-card
    {
        flex: 0 0 auto;
        width: 0px;
        transition-property: width, padding, transform;
        transition-duration: 0.5s, 0.5s, 0.4s;
    }

.dashboard .word-cloud-wrap .word-list a[href]
{
    text-decoration: none;
}

.dashboard .word-cloud-wrap .word-list a:hover
{
    text-decoration: underline;
}

.key-qualities .word-cloud-wrap .word-list li:hover
{
    cursor: pointer;
    text-decoration: underline;
}

.key-qualities .word-cloud-wrap
{
    transition: width 1s;
}

.key-qualities .key-qualities-container
{
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .key-qualities .key-qualities-container .key-quality-card
    {
        flex: 0 0 auto;
        width: 0px;
        transition-property: width, padding, transform;
        transition-duration: 0.5s, 0.5s, 0.4s;
        >>>>>>>master transition-timing-function: ease, ease, ease-out;
        overflow: hidden;
        position: relative;
        transform: translateY(500px);
    }

.key-qualities
{
    min-height: 700px;
}

    .key-qualities .key-qualities-container .key-quality-cards-mobi-container .key-quality-card
    {
        transition-duration: 0.01s, 0.01s, 0.4s;
    }

.key-quality-card .key-quality-item
{
    min-height: 340px;
    text-align: center;
    background-color: #EBEBEB;
    border-radius: 10px;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, .3);
    margin: 10px;
    padding: 0px;
    overflow-x: hidden;
    position: relative;
}

.key-quality-card .key-quality-elements
{
    display: flex;
    transition: transform 0.5s;
}

.key-quality-card .key-quality-element
{
    flex: 0 0 100%;
    padding: 40px;
}

.key-quality-selectors
{
    display: flex;
    text-align: center;
    justify-content: space-around;
    padding: 0 20px;
}

.key-quality-position-selector
{
    flex: 1 1 0;
    transform: translateY(-25px);
}

a[href].key-quality-position-selector
{
    text-decoration: none;
    font-weight: 900;
    color: #7e7e7e;
    font-size: 15px;
}

.key-quality-card.kq-position-0 .key-quality-elements
{
    transform: translateX(0);
}

.key-quality-card.kq-position-1 .key-quality-elements
{
    transform: translateX(calc(-100% * 1));
}

.key-quality-card.kq-position-2 .key-quality-elements
{
    transform: translateX(calc(-100% * 2));
}

.key-quality-card.kq-position-0 .key-quality-card-button-previous
{
    display: none;
}

.key-quality-card.kq-position-1.kq-2-subfactors .key-quality-card-button-next
{
    display: none;
}

.key-quality-card.kq-position-2 .key-quality-card-button-next
{
    display: none;
}

.key-quality-dot-strength .key-quality-dot
{
    width: 30px;
    height: 30px;
    border-radius: 15px;
    margin: 0 auto;
}

.key-quality-dot-stretch .key-quality-dot
{
    width: 22px;
    height: 22px;
    border-radius: 11px;
    margin: 4px auto;
}

.key-quality-dot-shift .key-quality-dot
{
    width: 14px;
    height: 14px;
    border-radius: 7px;
    margin: 8px auto;
}

.key-quality-dot-strength .key-quality-selector-element-name
{
    margin-top: 6px;
}

.key-quality-dot-stretch .key-quality-selector-element-name
{
    margin-top: 10px;
}

.key-quality-dot-shift .key-quality-selector-element-name
{
    margin-top: 14px;
}

.key-quality-card .key-quality-element [data-factor="Will"]
{
    color: #00a651;
}

.key-quality-card .key-quality-element [data-factor="Energy"]
{
    color: #f7941e;
}

.key-quality-card .key-quality-element [data-factor="Affection"]
{
    color: #ed1d24;
}

.key-quality-card .key-quality-element [data-factor="Control"]
{
    color: #03558b;
}

.key-quality-card .key-quality-element [data-factor="Emotionality"]
{
    color: #d8458e;
}

.key-quality-selectors .key-quality-dot
{
    background-color: #7e7e7e;
    color: #7e7e7e
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Will"] [data-index="0"] .key-quality-dot
{
    background-color: #00a651;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Will"] [data-index="0"] div
{
    color: #00a651;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Will"] [data-index="1"] .key-quality-dot
{
    background-color: #00a651;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Will"] [data-index="1"] div
{
    color: #00a651;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Will"] [data-index="2"] .key-quality-dot
{
    background-color: #00a651;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Will"] [data-index="2"] div
{
    color: #00a651;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Energy"] [data-index="0"] .key-quality-dot
{
    background-color: #f7941e;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Energy"] [data-index="0"] div
{
    color: #f7941e;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Energy"] [data-index="1"] .key-quality-dot
{
    background-color: #f7941e;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Energy"] [data-index="1"] div
{
    color: #f7941e;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Energy"] [data-index="2"] .key-quality-dot
{
    background-color: #f7941e;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Energy"] [data-index="2"] div
{
    color: #f7941e;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Affection"] [data-index="0"] .key-quality-dot
{
    background-color: #ed1d24;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Affection"] [data-index="0"] div
{
    color: #ed1d24;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Affection"] [data-index="1"] .key-quality-dot
{
    background-color: #ed1d24;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Affection"] [data-index="1"] div
{
    color: #ed1d24;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Affection"] [data-index="2"] .key-quality-dot
{
    background-color: #ed1d24;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Affection"] [data-index="2"] div
{
    color: #ed1d24;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Control"] [data-index="0"] .key-quality-dot
{
    background-color: #03558b;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Control"] [data-index="0"] div
{
    color: #03558b;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Control"] [data-index="1"] .key-quality-dot
{
    background-color: #03558b;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Control"] [data-index="1"] div
{
    color: #03558b;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Control"] [data-index="2"] .key-quality-dot
{
    background-color: #03558b;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Control"] [data-index="2"] div
{
    color: #03558b;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Emotionality"] [data-index="0"] .key-quality-dot
{
    background-color: #d8458e;
}

.key-quality-card.kq-position-0 .key-quality-selectors[data-factor="Emotionality"] [data-index="0"] div
{
    color: #d8458e;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Emotionality"] [data-index="1"] .key-quality-dot
{
    background-color: #d8458e;
}

.key-quality-card.kq-position-1 .key-quality-selectors[data-factor="Emotionality"] [data-index="1"] div
{
    color: #d8458e;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Emotionality"] [data-index="2"] .key-quality-dot
{
    background-color: #d8458e;
}

.key-quality-card.kq-position-2 .key-quality-selectors[data-factor="Emotionality"] [data-index="2"] div
{
    color: #d8458e;
}

.key-quality-card .card-close-x
{
    position: absolute;
    right: 5px;
    top: 8px;
    width: 30px;
    height: 30px;
    transform: rotate(45deg);
    text-indent: -100vw;
    background: inherit;
    border-radius: 50%;
    z-index: 10;
}

    .key-quality-card .card-close-x::before,
    .key-quality-card .card-close-x::after
    {
        position: absolute;
        background: #1d1d1b;
        content: '';
    }

    .key-quality-card .card-close-x::before
    {
        left: 5px;
        top: 14px;
        right: 5px;
        height: 2px;
    }

    .key-quality-card .card-close-x::after
    {
        left: 14px;
        top: 5px;
        bottom: 5px;
        width: 2px;
    }

button.key-quality-card-button
{
    position: absolute;
    background-image: url("../images/reg-rarr.svg");
    top: 40%;
    transform: translateY(-40%) translateX(-5px);
    z-index: 5;
    padding: 0;
    margin: 0.5rem;
    border: none;
    background-color: transparent;
    width: 17px;
    height: 28.32px;
    background-repeat: no-repeat;
    opacity: 0.5;
}

    button.key-quality-card-button.key-quality-card-button-next
    {
        right: 0;
    }

    button.key-quality-card-button.key-quality-card-button-previous
    {
        left: 0;
        transform: translateY(-40%) translateX(5px) rotate(180deg);
    }

section #UserSearchInput
{
    padding: 4px 6px;
}

.user-admin-popup-section.flex-between
{
    align-items: start;
}

.user-admin-popup-section .hr-top
{
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #1d1d1b;
}

.user-admin-popup-section table td
{
    padding: 0.1em 1em;
}

    .user-admin-popup-section table td:first-child
    {
        text-align: right;
        vertical-align: top;
    }

.user-admin-popup-section ul li
{
    list-style-type: disc;
}

.user-admin-table
{
    table-layout: fixed;
}

.popup
{
    z-index: 200;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color .3s ease-in, width 0s .3s, height 0s .3s;
}

    .popup.show-me
    {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        transition: background-color .3s ease-out, width 0s, height 0s;
    }

    .popup .popup-wrap
    {
        max-width: 668px;
        width: 90vw;
        max-height: 90vh !important;
        background-color: #fff;
        position: relative;
        transform: scale(0);
        transition: transform .3s ease-out;
    }

@media (min-height: 600px)
{
    .popup:not(.no-min-height) .popup-wrap
    {
        min-height: 475px;
    }
}

.popup.show-me .popup-wrap
{
    transform: scale(1);
}

.popup p
{
    margin: 0;
}

    .popup p + p
    {
        margin-top: 1em;
    }

.popup .popup-head
{
    font: 700 25px/1 Univers;
    padding: 45px 60px 30px 50px;
}

.popup .popup-content
{
    padding: 0 50px 50px;
    font-size: 14px;
}

    .popup .popup-content:first-child
    {
        padding-top: 45px;
    }

.popup .popup-foot
{
    padding: 25px 50px;
    background-color: rgba(0, 0, 0, 0.04);
}

.popup .popup-close-x
{
    position: absolute;
    right: 25px;
    top: 25px;
    width: 36px;
    height: 36px;
    transform: rotate(45deg);
    text-indent: -100vw;
    background: inherit;
    border-radius: 50%;
}

    .popup .popup-close-x::before,
    .popup .popup-close-x::after
    {
        position: absolute;
        background: #1d1d1b;
        content: '';
    }

    .popup .popup-close-x::before
    {
        left: 5px;
        top: 17px;
        right: 5px;
        height: 2px;
    }

    .popup .popup-close-x::after
    {
        left: 17px;
        top: 5px;
        bottom: 5px;
        width: 2px;
    }

.popup .popup-scroll-wrap
{
    overflow: auto;
}

.popup .std-form-2 .txt-wrap,
.popup .std-form-2 .txt-wrap
{
    width: auto;
}

.popup .flex-col
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: auto;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-height: 100%;
}

.popup-subsection .summary
{
    font: 700 18px/25px Univers;
}

.popup-subsection p
{
    margin: 0.5em 0 0.5em 0;
    display: list-item;
}

.popup-subsection.subsection-type-pdfdownload p
{
    display: block;
}

.popup-subsection.subsection-type-pdfdownload select
{
    padding: 4px;
    margin-top: 4px;
}

.popup-subsection ol li
{
    list-style: decimal inside;
    margin-top: 10px;
}

.popup-subsection ul li
{
    list-style: disc inside;
    margin-top: 10px;
}

.popup-subsection li
{
    color: #d8458e;
    margin-top: 10px;
}

.popup #frmPDFReport select
{
    font-size: 120%;
    margin: 8px 0;
    padding: 4px;
}

.popup #frmPDFReport .popup-subsection p
{
    display: block;
}

.std-form-2
{
    font: 400 14px/20px Univers;
    max-width: 665px;
    margin: 0 auto;
}

    .std-form-2 fieldset
    {
        border-top: 1px solid rgba(17, 17, 17, 0.17);
        padding: 30px 0;
        display: block;
    }

    .std-form-2 .form-row
    {
        margin: 0;
    }

        .std-form-2 .form-row + .form-row
        {
            margin-top: 20px;
        }

    .std-form-2.ruled-rows .form-row
    {
        margin-top: 0;
        padding-top: 17px;
        padding-bottom: 17px;
        border-bottom: 1px solid rgba(22, 22, 22, .1);
    }

        .std-form-2.ruled-rows .form-row [type="checkbox"] + label
        {
            margin-bottom: 0;
        }

    .std-form-2 label
    {
        font-weight: 700;
    }

    .std-form-2 p
    {
        font-weight: 400;
        margin: 0 0 1em;
    }

        .std-form-2 p:last-child
        {
            margin-bottom: 0;
        }

    .std-form-2 fieldset p
    {
        max-width: 574px;
    }

    .std-form-2 label p
    {
        font-weight: 400;
        margin: 0;
    }

    .std-form-2 .form-row label
    {
        display: block;
        margin: 0 0 10px;
    }

    .std-form-2 .txt-wrap,
    .std-form-2 .custom-sel
    {
        max-width: 325px;
        display: block;
        width: 100%;
    }

    .std-form-2 input:focus
    {
        border-color: rgba(116, 57, 97, 0.6);
    }

    .std-form-2 [type=checkbox]
    {
        position: fixed;
        right: 100vw;
        left: auto;
        top: auto;
    }

        .std-form-2 [type=checkbox] + label
        {
            display: block;
            font-weight: 400;
        }

            .std-form-2 [type=checkbox] + label > div
            {
                display: block;
                overflow: hidden;
                padding: 3px 0 0;
            }

            .std-form-2 [type=checkbox] + label p
            {
                font-weight: 400;
                margin: 0;
            }

            .std-form-2 [type=checkbox] + label:before
            {
                display: block;
                float: left;
                content: '';
                width: 24px;
                height: 24px;
                border: 1px solid rgba(83, 86, 90, 0.6);
                background: url("../images/cb-tick.svg") no-repeat 50% 50% #fff;
                background-size: 15px 13px;
                transition: all 0.3s;
                margin: 0 17px 0 0;
                box-sizing: content-box;
            }

        .std-form-2 [type=checkbox]:checked + label:before
        {
            border-color: #853663;
            background-color: #853663;
        }

        .std-form-2 [type=checkbox] + label:after
        {
            display: table;
            clear: both;
            content: '';
        }

    .std-form-2 h2,
    .std-form-2 h3
    {
        font-weight: 700;
    }

    .std-form-2 input,
    .std-form-2 textarea,
    .std-form-2 .custom-sel .val
    {
        font: 400 13px/20px Univers;
        width: calc(100% - 32px);
        min-height: 40px;
        padding: 0 15px;
        margin: 0;
        display: block;
        border: 1px solid rgba(83, 86, 90, 0.6);
        box-shadow: none;
        box-sizing: content-box;
    }

        .std-form-2 input:focus,
        .std-form-2 textarea:focus,
        .std-form-2 .custom-sel select:focus + .val,
        .std-form-2 [type=checkbox]:focus + label:before
        {
            border-color: rgba(116, 57, 98, 0.6);
        }

    .std-form-2 .custom-sel
    {
        position: relative;
    }

        .std-form-2 .custom-sel .val
        {
            width: calc(100% - 47px);
            padding-right: 30px;
            overflow: hidden;
            white-space: nowrap;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }

        .std-form-2 .custom-sel select
        {
            border: 0;
            padding: 0;
            margin: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
        }

        .std-form-2 .custom-sel .val:before
        {
            width: 13px;
            height: 8px;
            background: url("../images/sel-darr.svg") no-repeat 50% 50%;
            position: absolute;
            right: 10px;
            top: 50%;
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            content: '';
            background-size: 100% 100%;
        }

    .std-form-2 .lnk-wrap
    {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
    }

    .std-form-2 .form-row .err-icon
    {
        display: none;
        background-color: #cf2f30;
        float: left;
        width: 23px;
        height: 23px;
        border-radius: 23px;
        color: #fff;
        text-decoration: none;
        text-align: center;
        font: 700 13px/20px Univers;
        margin: 10px 17px 0 3px;
    }

    .std-form-2 .error .err-icon
    {
        display: block;
    }

    .std-form-2 .form-row .err-msg
    {
        color: #cf2f30;
        display: none;
        overflow: hidden;
        margin: 10px 0 0;
    }

    .std-form-2 .error .err-msg
    {
        display: block;
    }

    .std-form-2 .form-row .err-icon + .err-msg
    {
        margin-top: 12px;
    }

    .std-form-2 .error .err-msg::after
    {
        clear: both;
        display: table;
        content: '';
    }

.errored-recipients
{
    background-color: rgba(248, 208, 200, 0.4);
    color: #c32d2e;
    padding: 12px;
    font: 400 14px/20px Univers;
    min-height: 55px;
    overflow: hidden !important;
    max-height: 215px !important;
}

    .errored-recipients dl
    {
        display: block;
        overflow: auto;
        height: 100%;
        padding: 0;
    }

    .errored-recipients dt
    {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        font-weight: 700;
        padding: 5px 20px 5px 12px;
        font-weight: 500;
    }

    .errored-recipients dd
    {
        padding: 5px 12px 5px 0;
    }

.mixed-recipients
{
    font: 400 14px/20px Univers;
}

    .mixed-recipients dl
    {
        display: block;
        overflow: auto;
        min-height: 55px;
        max-height: 290px !important;
        padding: 0;
    }

        .mixed-recipients dl > div
        {
            padding: 12px;
            border-bottom: solid 1px #C3C3C3;
        }

            .mixed-recipients dl > div.fail
            {
                background-color: rgba(248, 208, 200, 0.4);
                color: #c32d2e;
            }

            .mixed-recipients dl > div.success
            {
                background-color: #EDFAE5;
                color: #385C19;
            }

    .mixed-recipients dt
    {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        font-weight: 700;
        padding: 5px 20px 5px 12px;
        font-weight: 500;
    }

    .mixed-recipients dd
    {
        padding: 5px 12px 5px 0;
    }


.suc-tick
{
    position: relative;
    padding-left: 2em;
}

    .suc-tick::before
    {
        content: '';
        background: url("../images/suc-tick-fff.svg") no-repeat 50% 50% #00a651;
        background-size: 53.3333% 44.4444%;
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        /* left: 0; */
        top: -0.25em;
        border-radius: .75em;
        margin: 0 0 0 -2em;
    }

.FAQs-wrap
{
    font: 400 13px/20px Univers;
    max-width: 664px;
    margin: 0 auto;
}

    .FAQs-wrap .q
    {
        position: relative;
        padding: 20px 10px 20px 35px;
        font-size: 18px;
        line-height: 30px;
        font-weight: 700;
        display: block;
        border-bottom: 1px solid rgba(17, 17, 17, 0.17);
        text-decoration: none;
    }

        .FAQs-wrap .q:hover
        {
            text-decoration: underline;
        }

        .FAQs-wrap .q::before,
        .FAQs-wrap .q::after
        {
            position: absolute;
            background: #1d1d1b;
            content: '';
            margin: 28px 0 0;
            left: 0;
            top: 6px;
            width: 15px;
            height: 3px;
            transition: all .3s;
        }

        .FAQs-wrap .q::after
        {
            left: 6px;
            top: 0px;
            width: 3px;
            height: 15px;
        }

    .FAQs-wrap .open .q::before
    {
        transform: rotate(180deg);
    }

    .FAQs-wrap .open .q::after
    {
        transform: rotate(90deg);
    }

    .FAQs-wrap .a
    {
        padding: 20px 10px 10px;
        font-family: Arial;
    }

    .FAQs-wrap p
    {
        margin: 0;
    }

        .FAQs-wrap p + p
        {
            margin-top: 1em;
        }

    .FAQs-wrap .js-faq-a
    {
        display: none;
    }

/*.hr { display: block; height: 2px; border: 0; margin: 15px auto; padding: 0; }*/

.section-header
{
    border-bottom: 3px solid #1d1d1b;
    padding: 0;
    margin: 35px 0 0;
}

.server-msg
{
    background-color: #191919;
    color: #fff;
    padding: 25px 0;
    font-size: 14px;
}

    .server-msg:after
    {
        content: '';
        clear: both;
        display: table;
    }

    .server-msg .page-content
    {
        background-color: inherit;
        color: inherit;
    }

    .server-msg p:last-child
    {
        margin-bottom: 0;
    }

    .server-msg .ico-msg-suc
    {
        position: relative;
        padding-left: 40px;
    }

        .server-msg .ico-msg-suc:before
        {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 20px;
            height: 20px;
            background: url("../images/msg-tick-191919.svg") no-repeat 50% 50% #fff;
            background-size: 11px 9px;
            border-radius: 100px;
        }

.report-blocks
{
    font-family: Univers;
}

.reports .report-block-sticky-head
{
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
    z-index: 99;
    left: 0;
    background-color: #f1f2f9;
    color: #161616;
    font: 20px/1 Univers;
}

    .reports .report-block-sticky-head .page-content
    {
        background-color: inherit !important;
        color: inherit !important;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
        height: 100%;
        min-height: inherit;
    }

.reports.reports-shared .report-block-sticky-head
{
    background-color: #591943;
    color: #fff;
}

    .reports.reports-shared .report-block-sticky-head .btn-share
    {
        display: none;
    }


.report-block-breakdown
{
}

.rb-item
{
    border-top: 3px solid #161616;
    border-bottom: 1px solid rgba(22, 22, 22, .1);
    margin: 40px 0 0;
}

    .rb-item h3
    {
        margin: 15px 0;
        font-weight: 700;
    }

.rb-overview
{
    border-top: 1px solid rgba(22, 22, 22, .1);
    padding: 30px 0;
    font-size: 13px;
    line-height: 21px;
}

    .rb-overview .content
    {
        overflow: hidden;
    }

    .rb-overview .score
    {
        font-size: 30px;
        line-height: 1;
        font-weight: 500;
    }

    .rb-overview .rb-scores
    {
        margin-top: 30px;
    }

.rb-scores
{
    font-size: 14px;
    line-height: 20px;
}

    .rb-scores .less,
    .rb-scores.show-more .more
    {
        display: none;
    }

    .rb-scores .more,
    .rb-scores.show-more .less
    {
        display: unset;
    }

    .rb-scores .content
    {
        overflow: hidden;
        display: none;
        margin: 15px 0 0;
    }

        .rb-scores .content div + div
        {
            margin-top: 15px;
        }

    .rb-scores .rb-scores-toggle
    {
        margin: 15px 0 0;
        display: block;
    }

    .rb-scores .rb-scores-list
    {
        margin-top: 0px;
        margin-bottom: 1em;
    }

.rb-scores-list li:before
{
    content: '.';
}



.rb-scores-list
{
    margin: 0;
    list-style: none outside none;
    padding: 0;
}

    .rb-scores-list li
    {
        margin: 0;
        padding: 0 0 0 1.25em;
        position: relative;
    }

        .rb-scores-list li::before
        {
            content: '\2022';
            position: absolute;
            left: 0;
            top: 0;
            line-height: 2.2em;
            font-size: .75em;
        }


.rb-detail-items
{
    border-top: 1px solid rgba(22, 22, 22, .1);
    padding: 30px 0;
    font-size: 14px;
    line-height: 20px;
}

.rbd-item header
{
    position: relative;
}

    .rbd-item header::before
    {
        content: '';
        width: 30px;
        height: 3px;
        display: block;
        margin: 0 0 20px;
    }

.rbd-item .score
{
    font-size: 35px;
    line-height: 1;
    font-weight: 500;
    margin: 15px 0 0;
}

.rbd-item h4
{
    margin: 15px 0 0;
    font-weight: 500;
}

.rb-key-quality .content,
.rbd-item .content
{
    margin: 15px 0 0;
}

.rb-item p:last-child
{
    margin-bottom: 0;
}

.rb-key-plot
{
    display: block;
    position: relative;
    background-color: #bbbaba;
    height: 2px;
    border-radius: 1px;
    margin: 34px 16px 14px;
}

    .rb-key-plot::before,
    .rb-key-plot::after
    {
        content: '';
        position: absolute;
        background-color: inherit;
        width: 2px;
        border-radius: inherit;
        left: 0;
        right: auto;
        height: 6px;
        top: -2px;
    }

    .rb-key-plot::after
    {
        left: auto;
        right: 0;
    }

    .rb-key-plot .handle
    {
        position: absolute;
        width: 0;
        height: 0;
        top: 1px;
        z-index: 1;
    }

        .rb-key-plot .handle::before,
        .rb-key-plot .handle::after
        {
            content: '';
            position: absolute;
            top: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }

        .rb-key-plot .handle::before
        {
            width: 30px;
            height: 30px;
            opacity: .3;
        }

        .rb-key-plot .handle::after
        {
            width: 12px;
            height: 12px;
        }

.report-block-navigation .report-nav-will::before,
.rb-will .rbd-item header::before,
.rb-will .rb-key-plot .handle::before,
.rb-will .rb-key-plot .handle::after
{
    background-color: #00a651;
}

.report-block-navigation .report-nav-energy::before,
.rb-energy .rbd-item header::before,
.rb-energy .rb-key-plot .handle::before,
.rb-energy .rb-key-plot .handle::after
{
    background-color: #f7941e;
}

.report-block-navigation .report-nav-affection::before,
.rb-affection .rbd-item header::before,
.rb-affection .rb-key-plot .handle::before,
.rb-affection .rb-key-plot .handle::after
{
    background-color: #ed1d24;
}

.report-block-navigation .report-nav-control::before,
.rb-control .rbd-item header::before,
.rb-control .rb-key-plot .handle::before,
.rb-control .rb-key-plot .handle::after
{
    background-color: #03558b;
}

.report-block-navigation .report-nav-emotionality::before,
.rb-emotionality .rbd-item header::before,
.rb-emotionality .rb-key-plot .handle::before,
.rb-emotionality .rb-key-plot .handle::after
{
    background-color: #d8458e;
}

.rb-item.rb-will .score,
.rb-item.rb-will .key-quality-link,
.rb-will .rb-scores-list li::before
{
    color: #00a651;
}

.rb-item.rb-energy .score,
.rb-item.rb-energy .key-quality-link,
.rb-energy .rb-scores-list li::before
{
    color: #f7941e;
}

.rb-item.rb-affection .score,
.rb-item.rb-affection .key-quality-link,
.rb-affection .rb-scores-list li::before
{
    color: #ed1d24;
}

.rb-item.rb-control .score,
.rb-item.rb-control .key-quality-link,
.rb-control .rb-scores-list li::before
{
    color: #03558b;
}

.rb-item.rb-emotionality .score,
.rb-item.rb-emotionality .key-quality-link,
.rb-emotionality .rb-scores-list li::before
{
    color: #d8458e;
}

.share-invite-block
{
    padding: 60px;
    margin: 20px auto 0;
    position: relative;
    border: 1px solid rgba(22, 22, 22, .1);
    max-width: 840px
}

    .share-invite-block .std-form-2
    {
        max-width: 500px
    }

    .share-invite-block::before,
    .share-invite-block::after
    {
        content: '';
        background: url("../images/sharing-icon.svg") no-repeat 50% 50% transparent;
        position: absolute;
        left: 50%;
        top: -6px;
        transform: translate(-50%, -50%);
        width: 140px;
        height: 60px;
        background-size: 61px 56px;
    }

    .share-invite-block::before
    {
        background: #fff;
    }

    .share-invite-block::after
    {
        opacity: .2;
    }

    .share-invite-block h2
    {
        font-weight: 500;
        text-align: center;
    }

.share-invite-block
{
}

.portrait-breakdown-item header
{
    max-width: 100%;
    border-top: 3px solid rgb(22, 22, 22);
    font-weight: 700;
    line-height: 28px;
}

    .portrait-breakdown-item header *
    {
        line-height: inherit;
        font-weight: 700;
    }

.portrait-breakdown-item.highlight .content
{
    color: #2e3092;
}

.portrait-breakdown-item ul,
.family-breakdown-item ul
{
    margin: 0;
    list-style: none outside none;
    padding: 0;
    counter-reset: bd-counter;
}

.portrait-breakdown-item li,
.family-breakdown-item li
{
    margin: 0;
    padding: 0 0 0 1.75em;
    counter-increment: bd-counter;
    position: relative;
}

    .portrait-breakdown-item li::before,
    .family-breakdown-item li::before
    {
        content: '\2022';
        position: absolute;
        left: 0;
        top: 0;
        line-height: 2.2em;
        font-size: .75em;
    }

.family-block-breakdown header
{
    width: 100%;
    margin-bottom: 30px;
    border-top: 1px solid rgba(22, 22, 22, .1);
    padding-top: 45px;
}

    .family-block-breakdown header p:last-child
    {
        margin-bottom: 0;
    }

.family-block-breakdown footer
{
    width: 100%;
    display: block;
}

    .family-block-breakdown footer .btn
    {
        display: block;
        padding: 20px;
        font-size: 14px;
    }

.family-block-breakdown .family-breakdown-item
{
    max-height: 1000px;
    transition: all .3s;
    overflow: hidden;
}

.family-block-breakdown.limit-items .family-breakdown-item:nth-of-type(n+5)
{
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
}

.family-profile .plot-basic
{
    float: left;
    position: relative;
    text-align: center;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
}

    .family-profile .plot-basic svg
    {
        display: block;
        width: 100%;
        height: 100%;
    }

.family-plot polygon
{
    stroke: #626262;
    stroke: rgba(98, 98, 98, 1);
    fill: rgba(62, 62, 62, .1);
}

.content .paragraphs
{
    display: none;
    padding-top: 0.5em
}

.ico-info
{
    display: inline-block;
    width: 1.14em;
    height: 1.14em;
    background: url("../images/ico-info-fff.svg") no-repeat 50% 40% #000;
    background-size: auto .7em;
    border-radius: 3px;
    margin-right: .5em;
    vertical-align: text-bottom;
}

@media only screen and (min-width: 1025px) {
    #header {
        background-color: #fff;
        color: #000;
        margin: -30px -30px 0;
        display: -webkit-flex;
        display: flex;
        flex-flow: row wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    #header .page-content {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
        height: 111px;
        position: relative;
    }
    #header header {
        width: 100px;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        margin: 0 12px 0 0;
    }
    #header header .logo {
        width: 150px;
        height: calc(57 / 140 * 150px);
        background: url('../images/myFacet5_logo_mono.svg') no-repeat 50% 50% transparent;
        background-size: 100% 100%;
        display: block;
    }
    #header header .burger,
    #header header .notify,
    #header header .btn { display: none; }

    #header nav {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
        height: 100%;
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    #header .head-nav-links {
        display: inherit;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        white-space: nowrap;
        margin: 0 auto;
    }

    #header .primary-section {
        font-size: 13px;
        font-weight: 700;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        margin: 5px 0;
    }
    #header .primary-section > * { margin: 0 10px; display: block; }
    #header .primary-section a { text-decoration: none; text-transform: uppercase; font-size: large; padding-left: 20px;}
    #header .primary-section a:focus,
    #header .primary-section a:hover { text-decoration: underline; }

    #header .secondary-section {
        font-size: 12px;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        margin: 5px 0;
    }
    #header .secondary-section > * { margin: 0 10px; display: block; }
    #header .secondary-section a { text-decoration: none; text-transform: none; }
    #header .secondary-section a:focus,
    #header .secondary-section a:hover { text-decoration: underline; }

    #header .unauthenticated-section {
        margin: 0 10px 0 auto;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
        min-width: 210px;
    }
    #header .unauthenticated-section > * { margin: 0; display: block; }
    #header .unauthenticated-section > * + * { margin-left: 10px; display: block; }

    #header .authenticated-section {
        font-size: 12px;
        margin: 0 0 0 auto;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: center;
        align-items: center;
    }
    #header .notifications-wrap { margin-right: 20px; }
    #header .notifications-flyout { right: 60px; top: 85px; margin: 0 -60px 0 0; }
    #header .notifications-flyout::before { right: 53px; }
    .show-head-notifications #header .notifications-flyout { visibility: visible; opacity: 1; transition: opacity .3s, visibility 0s 0s; z-index: 2; }
    .show-head-notifications #header .notifications-wrap.hiding .notifications-flyout { z-index: 1; }

    #header .loggedin-wrap { font-size: 12px; margin-right: 24px; position: relative; }
    #header .loggedin-wrap .subnav-trigger { display: block; position: relative; padding-right: 14px; text-decoration: none; }
    #header .loggedin-wrap .subnav-trigger::after { content: ''; width: 6px; height: 4px; border-width: 4px 3px 0; border-style: solid; border-color: #000 transparent transparent; position: absolute; right: 4px; box-sizing: border-box; top: 50%; }
    #header .loggedin-wrap a { }
    #header .user-subnav { position: absolute; right: -24px !important; top: calc(100% + 20px); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1); background-color: #fff; border-radius: 3px; max-width: 248px; font-size: 14px; opacity: 0; transition: opacity .3s, visibility 0s .3s; visibility: hidden; width: 100vw; }
    #header .user-subnav::before { content: ''; width: 14px; height: 14px; position: absolute; right: 23px; box-sizing: border-box; border: inherit; top: -7px; box-shadow: inherit; background-color: inherit; transform: rotate(45deg); }
    #header .user-subnav a { }
    #header .user-subnav ul { background: inherit; position: relative; }
    #header .user-subnav li { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 15px; }
    #header .user-subnav li a,
    #header .user-subnav li .btn { display: block; padding: 15px; margin: -15px; background: none !important; color: inherit !important; text-transform: none !important; text-decoration: none !important; text-align: left; font: inherit !important; }
    #header .user-subnav li a:focus,
    #header .user-subnav li .btn:focus,
    #header .user-subnav li a:hover,
    #header .user-subnav li .btn:hover { text-decoration: underline !important; }
    #header .user-subnav .user-name { font-weight: 700; }
    #header .user-subnav .email { opacity: .64; }
    .show-head-user-subnav #header .user-subnav { visibility: visible; opacity: 1; transition: opacity .3s, visibility 0s 0s; z-index: 2; }
    .show-head-user-subnav #header .loggedin-wrap.hiding .user-subnav { z-index: 1; }
    .report-block-navigation a:hover {
        background-color: #323232;
        transition-duration: .1s;
    }
    #header .language-section { margin: 0; min-width: 81px; }
}
@media (min-width: 768px) and (max-width: px)
{
    .key-items .key-title
    {
        display: block;
    }
}
@media only screen and (min-width: 768px) {
    .mobi-show,
    .dtop-show,
    .tblt-hide { display: none !important; }

    .cols-wrap { display: table; width: 100%; table-layout: fixed; border-spacing: 0; border-collapse: collapse; }
    .cols-wrap > .col { display: table-cell; vertical-align: top; }

    .split-bg,
    .split-white-bg { margin: 0 -30px; }

    #main-content .page-content { background-color: #fff; position: relative; }

    .gps-before,
    .gps-after { display: none; position: absolute; background: url("../images/gps-icon.png") no-repeat; width: 25px; height: 25px; vertical-align: top; }
    .gps-before { margin: 0 10px 0 0; }
    .gps-after { margin: 0 0 0 10px; }
    .profile .name .name-text { display: block; padding-bottom: 0; white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; /*position: relative;*/ }

    .profile-select .profile .name { font-size: 25px; }
    .profile-select .profile .type { font-size: 16px; }
    .profile-select .profile .plot-basic { width: 100px; }
    .profile-select .profile .plot-basic svg { height: 100px; width: 100px; }

    .profile-left .profile .gps-type { padding-left: 40px; }

    .profile-right .profile .gps-type .name .name-text:before,
    .profile-select .profile .gps-type .name .name-text:before { display: none; }
    .profile-right .profile .gps-type .name .name-text:after,
    .profile-select .profile .gps-type .name .name-text:after { content: ''; display: inline-block; position: absolute; margin: 0 0 0 15px; background: url("../images/gps-icon.png") no-repeat; width: 25px; height: 25px; }
    .profile-right .profile .gps-type .name .name-text:after { top: 45px; }

    .profile-left .profile .gps-type .name .name-text:before,
    .ps-select-left .profile-select .profile .gps-type .name .name-text:before { content: ''; display: inline-block; position: relative; margin: 0 10px 0 0; background: url("../images/gps-icon.png") no-repeat; width: 25px; height: 30px; }
    .profile-left .profile .gps-type .name .name-text:before { top: 6px; }
    .ps-select-left .profile-select .profile .gps-type .name .name-text:before { top: 4px; height: 25px; }
    .profile-left .profile .gps-type .name .name-text:after,
    .ps-select-left .profile-select .profile .gps-type .name .name-text:after { display: none; }

    .profile-right .profile .gps-type .name.truncate .name-text:after { display: none; }
    .profile-right .profile .gps-type .name.truncate .gps-after { display: inline-block; }

    .profile-breakdown-block .tab-content { padding: 0 20px 40px 50px; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
    .profile-breakdown-block .tabs-block[data-tab-idx="0"] .tab-content:nth-of-type(1),
    .profile-breakdown-block .tabs-block[data-tab-idx="1"] .tab-content:nth-of-type(2) { -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -moz-transition-delay: .5s; -o-transition-delay: .5s; -webkit-transition-delay: .5s; transition-delay: .5s; }
    .profile-breakdown-block .tab-tabs { float: left; -moz-transition-duration: inherit; -o-transition-duration: inherit; -webkit-transition-duration: inherit; transition-duration: inherit; }
    .profile-breakdown-block .tab { display: block; font: 400 13px/1.1 Univers; position: relative; -moz-transition-duration: inherit; -o-transition-duration: inherit; -webkit-transition-duration: inherit; transition-duration: inherit; }
    .profile-breakdown-block .tab-tabs .tab { text-transform: uppercase; }
    .profile-breakdown-block .tab-tabs .tab:after { content: ''; border: 0 solid transparent; border-width: 15px 0; border-left-color: rgba(0, 0, 0, .09); position: absolute; left: 100%; top: calc(50% - 15px); -moz-transition: all .3s; -o-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; -moz-transition-duration: .1s; -o-transition-duration: .1s; -webkit-transition-duration: .1s; transition-duration: .1s; }
    .profile-breakdown-block .tab .grp { font-size: 30px; font-weight: 700; }
    .profile-breakdown-block .tab + .tab { border-top: 1px solid rgba(148, 149, 164, 0.4); }

    .profile-breakdown-block .tabs-block[data-tab-idx="0"] .tab-tabs .tab:nth-of-type(1):after,
    .profile-breakdown-block .tabs-block[data-tab-idx="1"] .tab-tabs .tab:nth-of-type(2):after { border-left-width: 27px; -moz-transition-delay: .75s; -o-transition-delay: .75s; -webkit-transition-delay: .75s; transition-delay: .75s; -moz-transition-duration: inherit; -o-transition-duration: inherit; -webkit-transition-duration: inherit; transition-duration: inherit; }

    .create-new-profile .outer-wrap { display: table; width: 100%; table-layout: auto; height: 100%; }
    .create-new-profile header { display: table-cell; vertical-align: middle; position: relative; background-color: #e8e8e8; border-right: 1px solid #c6c7cd; width: 33%; }
    .create-new-profile footer { display: table-cell; vertical-align: middle; }
    .create-new-profile footer .btn-row { display: none; }
    .create-new-profile header .wrap { position: relative; padding: 0 25px; width: 290px; margin: 0 0 0 auto; }
    .create-new-profile .data-selector :first-child > a { border-top-width: 0; }

    .login-form { padding: 50px 0 90px; }

    .std-cnt-block header { width: 215px; float: left; }
    .std-cnt-block .content-wrap { padding: 10px 0 20px 40px; }
    .std-cnt-block header + .content-wrap { overflow: hidden; }

    .spotlight-content-block .content-wrap { padding: 0 0 160px; }

    .cnt-list-block .content-wrap { margin: 0 0 0 auto; max-width: 810px; padding: 0 60px; }

    .cnt-list-block:last-child .pagination-block .pages { padding: 20px 0 80px; }

    .hp-head .img-wrap { display: none; }

    .profile-select-block .jumpto-wrap { display: block; }
    .profile-select-block .jumpto-wrap-back { display: block; }

}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .profile .name 
    {
        font-size: 22px;
    }
    .profile-left .profile .gps-type .name .name-text:before
    {
        /*display: none;*/
    }

    .hp-head { background-size: cover; min-height: 560px; }
    .hp-head .content { font-size: 18px; line-height: 24px; padding: 60px 10px 30px 80px; }
    .hp-head ol li::before { font-size: 25px; height: 45px; left: -60px; line-height: 1.7; width: 45px; }
    .hp-head ol li { margin: 0 0 0 60px; padding: 10px 0 0; }
    .hp-head h1 { font-size: 25px; line-height: 30px; }
    .hp-head ol div { padding: 0 0 30px; }
}

@media only screen and (min-width: 768px) and (max-width: 924px) {
    #create-plot svg { height: 53%; width: 53%; min-height: 253px; min-width: 253px; }
    #create-plot .key-items .key-item-control { left: 78%; width: 22%; }
    #create-plot .key-items .key-item-energy { right: 78%; width: 22%; }
    #create-plot .key-items .key-item-emotionality .emo-plot { width: 170px; }
    .key-items .key-title:before { margin-right: 10px; }
    .key-items .key-item-control > span:before { margin-right: 13px; }
    .key-items .key-title:after { margin-left: 10px; }
    .key-items .key-item-energy > span:after { margin-left: 13px; }

    .profile-select-block .jumpto-wrap { left: auto; right: 60px; }
    .profile-select-block .jumpto-wrap-back { left: auto; right: 30px; }
    .profile-select-block .jumpto-wrap-left { left: 30px; right: auto; }

    .dashboard-V1 .dashboard #main-plot .key-items .key-title { font-size: inherit; line-height: inherit; }
    .dashboard-V1 .dashboard .buttons { width: 370px; margin: 0; }
}

@media only screen and (min-width: 768px) and (max-width: 825px) {
    /*#header header { font-size: 125px; margin: 18px 0 0; padding: 0 10px 0 0; }*/
}






@media only screen and (min-width: 768px) {
    #main-content { background-color: #fff; padding-top: 50px; min-height: 140px; }
    .negate-main-padd,
    .hp-head { margin-top: -50px !important; }

    .std-form-2 .btn-row {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: flex-start;
        align-items: flex-start;
    }
    .std-form-2 .btn-row > * {
        -webkit-flex: 0 1 auto;
        flex: 0 1 auto;
    }
    .std-form-2 .btn-row > *:not(:last-child) { margin-right: 20px; }
    .std-form-2 .btn-row .btn-primary {
        -webkit-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .std-form-2 .btn-row-centered { text-align: center; }
    .std-form-2 .btn-row-centered .btn-row {
        -webkit-justify-content: center;
        justify-content: center;
        display: -webkit-inline-flex;
        display: inline-flex;
    }
    .std-form-2 .btn-row-centered .btn-row > * {
        -webkit-flex: 0 1 1px;
        flex: 0 1 1px;
        margin: 0 10px;
    }

    .dashboard-blocks { padding-bottom: 100px; }
        .dashboard-blocks .dashboard-block-reports-title {
            -webkit-order: 1;
            order: 1;
            -webkit-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
            -webkit-align-self: center;
            align-self: center;
        }
        .dashboard-blocks .dashboard-block-share-lnk {
            -webkit-order: 2;
            order: 2;
            -webkit-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
            text-align: right;
        }
        .dashboard-blocks .dashboard-block-hr-1 {
            -webkit-order: 3;
            order: 3;
        }
        .dashboard-blocks .dashboard-block-report-list {
            -webkit-order: 4;
            order: 4;
            -webkit-flex: 1 1 0px !important;
            flex: 1 1 0px !important;
            margin: 30px 18px 0;
        }
        .dashboard-blocks .dashboard-block-prof-comp {
            -webkit-order: 5;
            order: 5;
            -webkit-flex: 1 1 0px !important;
            flex: 1 1 0px !important;
            margin: 30px 0 0 18px;
        }
        .dashboard-blocks .dashboard-block-shared-title {
            -webkit-order: 1;
            order: 1;
            -webkit-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
            -webkit-align-self: center;
            align-self: center;
        }
        .dashboard-blocks .dashboard-block-share-lnk-2 {
            -webkit-order: 2;
            order: 2;
            -webkit-flex: 1 1 auto !important;
            flex: 1 1 auto !important;
            text-align: right;
        }
        .dashboard-blocks .dashboard-block-hr-2 {
            -webkit-order: 3;
            order: 3;
        }
        .dashboard-blocks .dashboard-block-shared-table {
            -webkit-order: 4;
            order: 4;
        }

    .dashboard-block-prof-comp #main-plot .key-items .key-title { font-size: inherit; line-height: inherit; }

    .shared-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
    .shared-table thead th { text-align: left; padding: 15px 0; vertical-align: bottom; }
    .shared-table tbody td { padding: 20px 0; vertical-align: top; }
    .shared-table tr > * { border: 0px solid rgba(17, 17, 17, 0.17); border-width: 1px 0; }
    .shared-table tr > *:not(:first-child) { padding-left: 20px; }

    .dashboard-block-shared-table .btn { margin: 30px 0 0; }

    .popup .popup-foot .btns-wrap {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .popup .popup-foot .btns-wrap .btn-primary { }

    .errored-recipients dl:after { content: ''; clear: both; display: table; }
    .errored-recipients dt,
    .errored-recipients dd { float: left; padding: 6px 12px; }
    .errored-recipients dt { width: 40%; padding-right: 20px; }
    .errored-recipients dd { width: 60%; padding-left: 0; }

    .mixed-recipients dl > div { overflow: hidden; }
    .mixed-recipients dt,
    .mixed-recipients dd { float: left; padding: 6px 12px; }
    .mixed-recipients dt { width: 40%; padding-right: 20px; }
    .mixed-recipients dd { width: 60%; padding-left: 0; }

    .flex-between {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .flex-between h1 { margin-bottom: 0; }

    .report-blocks {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-content: flex-start;
        align-content: flex-start;
        padding: 0 0 60px;
    }
        .report-blocks > * {
            -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
        }
    .report-blocks .report-block-summary { width: calc(40% - 18px); margin: 30px 18px 0 0; font-size: 18px; line-height: 25px; order: 1; }
    .report-blocks .dashboard-block-prof-comp { width: calc(60% - 18px); margin: 30px 0 0 18px; order: 2; }
    .report-blocks .report-block-navigation { width: 193px; order: 3; }
    .report-blocks .report-block-navigation .sticky { position: -webkit-sticky; position: sticky; top: 100px; }
    .report-blocks .report-block-navigation .report-nav-profile { display: none; }
    .report-blocks .report-block-breakdown { width: calc(100% - 250px); order: 4; }
    .reports .report-block-sticky-head { height: 60px; font-size: 20px; }
    .report-blocks .portrait-block-breakdown { width: 100%; margin: 70px 0 0 0; order: 3; }
    .report-blocks .family-block-breakdown { width: 100%; margin: 70px 0 0 0; order: 4; }

    .report-block-navigation { margin: 40px 0 0; }
    .report-block-navigation .page-content { padding: 0 !important; margin: 0 !important; background-color: none !important; }
    .report-block-navigation nav { font-size: 18px; line-height: 21px; font-weight: 700; min-height: 61px; }
    .report-block-navigation nav a { display: block; background-color: #161616; color: #fff; position: relative; padding: 20px 0 20px 28px; text-decoration: none !important; transition: all .3s; }
    .report-block-navigation a.active { background-color: #323232; transition-duration: .1s; }
    .report-block-navigation a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; }
    .report-block-navigation select,
    .report-block-navigation a { display: none; }

    .report-block-summary .btns-wrap { float: left; }
    .report-block-summary .btns-wrap > * { display: block; margin: 10px 0 0; min-width: 250px; }

    .rb-overview { font-size: 18px; line-height: 28px; }
    .rb-overview header { float: left; width: 130px; }
    .rb-overview .score { font-size: 50px; }

    .rb-overview .rb-scores .content { }
        .rb-overview .rb-scores .content > div {
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            -webkit-align-items: stretch;
            align-items: stretch;
            margin: 0 -15px;
        }
            .rb-overview .rb-scores .content > div > * {
                margin: 0 15px;
                -webkit-flex: 1 1 1px;
                flex: 1 1 1px;
            }
    .rb-overview .rb-scores .content > div > *:last-child { text-align: right; }

    .rb-detail-items {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-align-items: stretch;
        align-items: stretch;
        margin: 0 -10px;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
        .rb-detail-items .rbd-item {
            margin-left: 10px;
            margin-right: 10px;
            -webkit-flex: 1 1 1px;
            flex: 1 1 1px;
            position: relative;
        }
        .rb-detail-items .rb-key-plot {
            margin-left: 24px;
            margin-right: 24px;
            -webkit-flex: 1 1 1px;
            flex: 1 1 1px;
            position: relative;
        }
        .rb-detail-items .rb-scores {
            margin-left: 10px;
            margin-right: 10px;
            -webkit-flex: 1 1 1px;
            flex: 1 1 1px;
            position: relative;
        }
        .rb-detail-items .rb-key-quality {
            margin-left: 10px;
            margin-right: 10px;
            -webkit-flex: 1 1 1px;
            flex: 1 1 1px;
            position: relative;
        }
    .rb-detail-items .rb-detail-break { width: 100%; }

    .share-invite .page-content { padding-bottom: 90px; }

    .portrait-breakdown-item {
        display: -webkit-flex;
        display: flex;
        padding: 20px 0 0;
    }
    /*.portrait-breakdown-item + .portrait-breakdown-item { margin-top: 35px; }*/
        .portrait-breakdown-item header {
            flex: 0 0 auto;
            -webkit-flex: 0 0 auto;
            width: 245px;
            max-width: 100%;
        }
        .portrait-breakdown-item .content {
            -webkit-flex: 1 1 100%;
            flex: 1 1 100%;
            margin: 20px 0 20px 90px;
        }

    .family-block-breakdown {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .family-block-breakdown .family-breakdown-item { width: 50%; border: 0 solid rgba(22, 22, 22, .1); }
    .family-block-breakdown .family-breakdown-item:nth-of-type(2n) { border-left-width: 1px; }
    .family-block-breakdown .family-breakdown-item:nth-of-type(2n-1) { }
    .family-block-breakdown .family-breakdown-item:not(:nth-last-of-type(1)):nth-of-type(2n),
    .family-block-breakdown .family-breakdown-item:not(:nth-last-of-type(2)):nth-of-type(2n-1) { border-bottom-width: 1px; }
    .family-block-breakdown .family-breakdown-item:nth-last-of-type(1):nth-of-type(2n),
    .family-block-breakdown .family-breakdown-item:nth-last-of-type(2):nth-of-type(2n-1) { padding-bottom: 80px; }
    .family-block-breakdown .family-breakdown-item:nth-last-of-type(1):nth-of-type(2n) .lnk-compare-my-profile,
    .family-block-breakdown .family-breakdown-item:nth-last-of-type(2):nth-of-type(2n-1) .lnk-compare-my-profile { bottom: 40px; }



    .family-breakdown-item {
        display: -webkit-flex;
        display: flex;
        padding: 30px 30px 60px;
        position: relative;
    }
        .family-breakdown-item .family-profile {
            -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
            margin: 0 30px 0 0;
            width: 80px;
            height: 80px;
            max-width: 100%;
        }
    .family-breakdown-item .content { display: block !important; }
    .family-breakdown-item .fbd-content { margin: 0; max-width: 100%; }
    .family-breakdown-item .lnk-compare-my-profile { position: absolute; bottom: 20px; }
    .family-breakdown-item .fbd-content-toggle { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .report-blocks .report-block-navigation { width: 165px; }
    .report-blocks .report-block-breakdown { width: 675px; }
}

@media only screen and (min-width: 768px) and (max-width: 968px) {
    .report-blocks .report-block-breakdown { width: calc(100% - 205px); max-width: 675px; }
}

@media (max-width: 1024px) {
    #scr-wrap { padding: 61px 0 0; }
    body { padding: 0; background-color: #000; overflow-x: hidden; }
    #main-content { padding-top: 30px; padding-left: 30px; padding-right: 30px; }
    .negate-main-padd,
    .hp-head { margin-top: -30px !important; }

    #header { background-color: #fff; color: #000; margin: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; width: 100%; }
    #header .page-content { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; height: 60px; padding: 0 !important; margin: 0 !important; max-width: none; }
    #header header { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; -webkit-flex: 0 1 auto; flex: 0 1 auto; height: 60px; padding: 0 18px; width: 100%; }
    #header header .logo { margin: 0 auto 0 0; width: 132px; height: 54px; background: url('../images/myFacet5_logo_mono.svg') no-repeat 50% 50% transparent; background-size: 100% 100%; display: block; }
    #header header .burger { position: relative; display: block; width: 55px; height: 52px; margin: 0 -18px 0 0; }
    #header header .burger:before,
    #header header .burger:after { position: absolute; top: 18px; right: 18px; left: 18px; content: ''; height: 5px; border: solid 2px #000; border-left: 0; border-right: 0; background-color: #fff; }
    #header header .burger:after { top: 27px; border-top: 0; }
    #header header .notify { margin: 2px 0 0 auto; }
    #header header .btn { margin: 0 10px 0 0; }
    #header nav { -webkit-flex: 0 0 auto; flex: 0 0 auto; width: 220px; padding: 0; background-color: #000; color: #fff; height: 100vh; overflow-x: hidden; overflow-y: auto; font-size: 13px; line-height: 16px; font-weight: 400; margin: 0 -220px 0 0; }

    #header .head-nav-links { margin: 20px 0 0; }
    #header .head-nav-links a { display: block; border-bottom: 1px solid rgba(148, 149, 164, 0.4); padding: 12px 20px; text-decoration: none !important; text-transform: none; }
    #header .primary-section a { font-weight: 700; text-transform: uppercase; }

    #header .unauthenticated-section { margin: 13px 0; }
    #header .unauthenticated-section .btn { display: block; margin: 10px 20px 0; text-decoration: none !important; text-transform: none; min-width: 0 !important; }

    #header .authenticated-section .notify { display: none; }
    #header .loggedin-wrap .subnav-trigger { display: none; }
    #header .user-subnav { margin: 13px 0; }
    #header .user-subnav ul { padding: 0; margin: 0; }
    #header .user-subnav li { padding: 0; margin: 0; }
    #header .user-subnav div { padding: 8px 20px; }
    #header .user-subnav a:not(.btn) { display: block; padding: 8px 20px; text-decoration: none; text-transform: none; }
    #header .user-subnav a:not(.btn):hover { text-decoration: underline; }
    #header .user-subnav .btn { display: block; margin: 10px 20px 0; text-decoration: none !important; text-transform: none; min-width: 0 !important; }
    #header .user-subnav .user-name { font-weight: 700; }
    #header .user-subnav .email { display: none; }

    #header .language-section { margin: 20px; }

    #header .notifications-flyout { margin: 0 -90px 0 0; top: 100%; width: calc(100vw - 20px); right: 110px !important; min-width: 300px; }
    #header .notifications-flyout::before { right: 50px; }

    .show-main-nav { overflow: hidden; }
    #scr-wrap { -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    .show-main-nav #scr-wrap { -moz-transform: translateX(-220px); -ms-transform: translateX(-220px); -o-transform: translateX(-220px); -webkit-transform: translateX(-220px); transform: translateX(-220px); }
    #header nav { transition: width 0s 0.4s; width: 0px; }
    .show-main-nav #header nav { width: 220px; transition: width 0s 0s; }

    .profile-select-block .wrap { padding-top: 60px; }

    .note { font: 700 18px/25px Univers; }
}

@media (max-width: 767px) {
    .mobi-hide,
    .tblt-show,
    .dtop-show {
        display: none !important;
    }

    .btn-block-mobile {
        display: block;
    }

    .show-popup,
    .show-popup body {
        height: 100%;
    }

        .show-popup #scr-wrap {
            overflow: hidden;
            height: 100%;
        }

    body {
        background-color: #000;
        padding: 0;
        overflow-x: hidden;
        position: relative;
    }

    #scr-wrap {
        padding: 61px 0 0;
    }

    #main-content { /*padding-top: 1px;*/
        padding: 30px 0 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .negate-main-padd,
    #marketing-banner {
        flex-flow: wrap row;
        padding: 5px 0;
        text-align: center;
    }

        #marketing-banner div {
            margin: 5px 10px;
        }

    .page-content,
    #footer .page-content {
        margin: 0 8px;
        width: auto;
        padding: 0 10px;
    }

    .page-content {
        background-color: #fff;
        position: relative;
    }


    h1 {
        margin: 0 0 1em;
        text-transform: none;
        text-align: center;
        font-size: 30px;
    }

    h2 {
        margin: 0 0 0.75em;
        font-size: 25px;
    }

    h3 {
        margin: 0 0 0.75em;
        font-size: 18px;
    }

    h4 {
        margin: 0 0 0.75em;
    }

    #footer header {
        height: 50px;
        margin: -50px 0 0;
    }

    .split-bg,
    .split-white-bg {
        margin: 0;
    }

    .std-form {
        width: 100%;
        max-width: 440px;
    }

        .std-form label {
            display: block;
            float: none;
            font: 700 12px/20px Univers;
            padding: 10px 0 0;
            text-align: left;
            width: auto;
        }

        .std-form .txt-wrap,
        .std-form .sel-wrap,
        .std-form .cb-wrap,
        .std-form .btn-row {
            float: none;
            margin: 0;
            min-height: 37px;
            width: 100%;
        }

        .std-form .inp-wrap {
            position: relative;
        }

        .std-form .error a.err-icon {
            background-color: #cf2f30;
            float: none;
            margin: 0;
            position: absolute;
            right: 0;
            top: 9px;
        }

        .std-form .tooltip {
            position: absolute;
            right: 0;
            top: -5px;
            left: auto;
            float: none;
            margin: 0;
        }

            .std-form .tooltip .tooltip-icon {
                background-color: #cf2f30;
            }

        .std-form .tooltip-text-wrap {
            background-color: #cf2f30;
        }

        .std-form [type="text"],
        .std-form [type="password"],
        .std-form [type="email"],
        .std-form [type="tel"],
        .std-form select,
        .std-form textarea,
        .std-form .custom-sel .val {
            min-height: 35px;
            padding: 10px 0;
        }

        .std-form textarea {
            min-height: 10em;
        }

        .std-form [type="checkbox"] + .inp-cb:before {
            background-size: 15px 15px;
            height: 25px;
            width: 25px;
        }

        .std-form [type="checkbox"] + .inp-cb {
            margin: 1em 0 0;
        }

    .std-cnt-block li {
        float: none;
        padding: 0;
        margin: 0 0 0 20px;
        width: auto;
        display: list-item;
    }

        .std-cnt-block li:before {
            font-size: 16px;
            line-height: inherit;
        }

    .std-form [type="text"],
    .std-form [type="password"],
    .std-form [type="email"],
    .std-form [type="tel"],
    .std-form select,
    .std-form textarea,
    .std-form .custom-sel .val {
        font: 400 16px/20px Univers; /* Adding 16px on focus will prevent auto page zoom */
    }

    .std-form .recaptcha {
        padding-left: 0;
        text-align: center;
    }

        .std-form .recaptcha .g-recaptcha {
            display: inline-block;
        }

    .register-form .txt-wrap {
        width: 260px;
    }

    .link-account-form {
        padding: 20px 0 100px;
    }

        .link-account-form h1 {
            text-align: left;
            margin: 0;
        }

        .link-account-form h3 {
            text-transform: none;
            margin: 10px 0;
        }

        .link-account-form .lnk-ignore-link {
            font: 700 16px/20px Univers;
            display: table;
            margin: 0 auto;
        }

    .link-account-block .block {
        display: table;
        width: 100%;
    }

    .link-account-block .block-right .block-row:first-of-type {
        border: 0 solid rgba(148, 149, 164, 0.4);
        border-width: 0 0 1px;
        padding: 0 0 15px;
    }

    .link-account-block .block-row {
        font: 700 14px/20px Univers;
    }

    .block-middle {
        display: table;
        padding: 25px 0 5px;
        width: 100%;
        position: relative;
    }

        .block-middle div {
            display: table-cell;
            height: 0px;
        }

        .block-middle .upper {
            border-left: 0;
            border-top: 1px solid rgba(148, 149, 164, 0.4);
            width: calc(50% - 20px);
            margin: 0 0 0 8px;
        }

        .block-middle .middle {
            width: 40px;
            height: 0px;
            margin: 0 auto;
        }

            .block-middle .middle:before {
                content: '+';
                font: 700 25px/48px Univers;
                position: absolute;
                top: -2px;
                margin: 0 12px;
            }

        .block-middle .lower {
            border-left: 0;
            border-top: 1px solid rgba(148, 149, 164, 0.4);
            width: calc(50% - 20px);
            margin: 0 0 0 8px;
        }

    .profile {
        font-size: 20px;
        height: 108px;
    }

        .profile .content {
            padding: 20px 20px 20px;
            position: relative;
            top: 50%;
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            height: auto;
        }

        .profile .name {
            font-size: 15px;
        }

        .profile .type {
            font-size: 13px;
        }

        .profile .lnks .rmv {
            margin-left: 10px;
        }

        .profile .plot-basic {
            width: 108px;
        }

            .profile .plot-basic svg {
                display: block;
                height: 108px;
                width: 108px;
            }

    .profile-left .profile {
        padding: 0 10px 0 0;
        overflow: unset;
    }

    .profile-right .profile {
        padding: 0 0 0 10px;
    }

    .chosen-profile-block .profile .plot-basic {
        display: none;
    }

    .chosen-profile-block .page-content {
        margin: 0 10px;
    }

    .profile-select .page-content {
        margin: 0 auto;
        max-width: 400px;
    }

    .profile-select-block .wrap {
        width: 100%;
        left: 0;
    }

    .profile-select-block .v-scroll {
        margin-right: 0 !important;
    }

    .gps-before,
    .gps-after {
        display: none;
        position: absolute;
        background: url("../images/gps-icon-small.png") no-repeat;
        width: 15px;
        height: 15px;
        vertical-align: top;
    }

    .gps-before {
        margin: 0 10px 0 0;
    }

    .gps-after {
        margin: 0 0 0 10px;
    }

    .profile .name .name-text {
        display: block;
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .gps-type .name-text::before,
    .gps-type .name-text::after {
        display: none;
        content: '';
        width: 15px;
        height: 15px;
        margin-left: 5px;
        margin-right: 5px;
        background: url("../images/gps-icon-small.png") no-repeat;
    }

    .profile-left .gps-type .name-text::before,
    .ps-select-left .gps-type .name-text::before {
        margin-right: 5px;
    }

    .profile-left .gps-type .name-text::after,
    .ps-select-right .gps-type .name-text::after {
        margin-left: 5px;
    }

    .col.profile-left .gps-type .name-text::before,
    .col.profile-right .gps-type .name-text::after {
        display: inline-block;
    }

    .ps-select-left .profile-select-block .gps-type .name-text::before,
    .ps-select-right .profile-select-block .gps-type .name-text::after {
        display: inline-block;
    }

    .chosen-profile-block .profile .gps-type > .lnks > span {
        top: 15px;
        font-size: 12px;
    }

    .chosen-profile-block .profile-left .gps-type > .lnks > span {
        right: 20px;
    }

    .split-white-bg .split-bg-bg:before {
        border: 0;
    }

    #main-plot {
        padding: 80px 0 160px;
        width: 100%;
    }

        #main-plot svg {
            height: 58%;
            width: 58%;
        }

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

        .key-items .key-title {
            display: block;
            font-size: inherit;
            line-height: inherit;
        }

            .key-items .key-title:before,
            .key-items .key-title:after {
                display: none !important;
            }

            .key-items .key-title:before {
                margin-right: 10px;
            }

            .key-items .key-title:after {
                margin-left: 10px;
            }

        .key-items .key-item-will {
            top: 25px;
        }

        .key-items .key-item-affection {
            bottom: 125px;
        }

        .key-items .key-item-emotionality {
            bottom: 55px;
            text-align: left;
        }

        .key-items .key-item-control,
        .key-items .key-item-energy {
            top: calc(50% - 40px);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 21%;
        }

        .key-items .key-item-control {
            left: 79%;
            text-align: left;
        }

        .key-items .key-item-energy {
            right: 79%;
            text-align: right;
        }

        .key-items .key-item-control > span:before {
            margin: -3px 13px 0 0;
        }

        .key-items .key-item-energy > span:after {
            margin: -3px 0 0 13px;
        }

        .key-items .key-item-emotionality .key-title {
            display: inline-block;
            margin-left: 20px;
        }

        .key-items .key-item-emotionality .emo-plot {
            display: block;
            margin: 20px auto 0;
        }

    .tabs-block {
        margin: 0 -20px;
    }

    .profile-breakdown-block .tab-tabs {
        -moz-transition-duration: inherit;
        -o-transition-duration: inherit;
        -webkit-transition-duration: inherit;
        transition-duration: inherit;
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    .profile-breakdown-block .tab {
        display: table-cell;
        font: 400 13px/1.1 Univers;
        position: relative;
        -moz-transition-duration: inherit;
        -o-transition-duration: inherit;
        -webkit-transition-duration: inherit;
        transition-duration: inherit;
        padding: 30px 20px;
    }

    .profile-breakdown-block .tab-tabs.tab {
        text-transform: uppercase;
    }

    .profile-breakdown-block .tab .grp {
        font-size: 18px;
        font-weight: 700;
    }

    .profile-breakdown-block .tab-content {
        padding: 0 20px;
        opacity: 0;
        z-index: 0;
        -moz-transition-property: all;
        -o-transition-property: all;
        -webkit-transition-property: all;
        transition-property: all;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .profile-breakdown-block .tabs-block[data-tab-idx="0"] .tab-content:nth-of-type(1),
    .profile-breakdown-block .tabs-block[data-tab-idx="1"] .tab-content:nth-of-type(2) {
        opacity: 1;
        position: relative;
        z-index: 1;
    }

    .profile-breakdown-block .tab-contents .tab {
        display: block;
    }

    .profile-switch {
        position: relative;
        top: -70px;
    }

    .profile-switch-wrapper > .lnk-switch {
        top: 15px;
    }

    .tab-contents .profile-switch {
        position: absolute;
        top: 25px;
        left: auto;
        right: 0;
    }

        .tab-contents .profile-switch > .btn-switch {
            right: 40px;
            font: 400 12px/15px Univers;
            letter-spacing: 3px;
            background-color: #000;
            color: #fff;
            width: 40px;
            height: 40px;
            padding: 12px 3px 16px 8px;
            border-radius: 40px;
        }

        .tab-contents .profile-switch > .lnk-switch {
            display: none;
        }

    .qanda .q {
        padding: 27px 10px 17px 50px;
    }

        .qanda .q:before,
        .qanda .q:after {
            left: 10px;
        }

    .qanda .a {
        padding: 0 15px 25px 50px;
    }

    .reg-confirm header .cnf,
    .reg-confirm header .upw {
        display: block;
        margin: 20px auto;
    }

    .hp-head {
        background: #000;
        color: #fff;
        min-height: 0;
        margin: -30px 0 0 0;
    }

        .hp-head:before {
            display: none;
        }

        .hp-head .page-content {
            text-align: left;
        }

        .hp-head .img-wrap {
            display: block;
            background: inherit;
            position: relative;
        }

            .hp-head .img-wrap:before {
                background: url("../images/hp-spots.png") no-repeat scroll 40% 140% transparent;
                background-size: 230% auto;
                bottom: 0;
                content: "";
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .hp-head .img-wrap img {
                display: block;
                max-width: 100%;
            }

        .hp-head h1 {
            font-size: 25px;
            text-align: left;
            text-transform: uppercase;
            line-height: 30px;
            margin: 10px 0 20px;
        }

        .hp-head p {
            margin: 0 0 25px;
        }

        .hp-head .content {
            font-size: 18px;
            line-height: 24px;
            max-width: 100%;
            padding: 20px 10px 20px 20px;
        }

    .hp-main {
        background-color: #000;
        margin: 0;
        padding: 0 20px;
    }

        .hp-main .page-content {
            margin: 0;
        }

        .hp-main h1 {
            float: none;
            padding: 25px 25px 0;
            text-align: left;
        }

        .hp-main .content {
            float: none;
            padding: 0 25px 25px;
        }

    .create-new-profile {
        background: #fff;
    }

        .create-new-profile > .outer-wrap {
            margin: 10px;
            background: #f4f4f4;
        }

        .create-new-profile header {
            background-color: #e8e8e8;
            border-bottom: 1px solid #c6c7cd;
        }

            .create-new-profile header .btn-row {
                display: none;
            }

        .create-new-profile footer {
            padding: 0 0 25px;
        }

        .create-new-profile header .wrap {
            padding: 25px 20px;
        }

        .create-new-profile .key-item-control .data-selector {
            right: 10px;
        }

        .create-new-profile .key-item-energy .data-selector {
            left: 10px;
        }

        .create-new-profile [type="text"],
        .create-new-profile [type="password"],
        .create-new-profile [type="email"],
        .create-new-profile [type="tel"],
        .create-new-profile select,
        .create-new-profile textarea,
        .create-new-profile .custom-sel .val {
            font: 400 16px/20px Univers; /* Adding 16px on focus will prevent page zoom */
        }

    #create-plot {
        padding: 80px 0 180px;
        width: 100%;
    }

        #create-plot svg {
            height: 58%;
            width: 58%;
        }

        #create-plot .key-items .key-item-control {
            left: 78%;
            width: 22%;
        }

        #create-plot .key-items .key-item-energy {
            right: 78%;
            width: 22%;
        }

    .profile-select-block .jumpto-wrap {
        display: block;
        left: auto;
        right: 60px;
        top: 100px;
    }

    .profile-select-block .jumpto-wrap-back {
        display: block;
        left: auto;
        right: 30px;
        bottom: 20px;
    }

    .profile-select-block .jumpto-wrap-left {
        display: block;
        left: 30px;
        right: auto;
    }

    .go-to-top {
        bottom: 40px;
        right: 40px;
    }

    .terms-conditions-block .wrap {
        height: 100%;
        width: 100%;
        margin: auto;
        max-width: 767px;
    }

    .spotlight-content-block .domains > .domain-group {
        width: 100%;
    }

    .flex-content .flex-content-column {
        width: 100% !important;
    }

    .matrix-sections > .section > div {
        width: 100%;
    }

    .flex-content.spotlight-steps .summary {
        min-height: none;
    }

    .report-content .content-tabs {
        display: none;
    }

    .matrices .matrix {
        padding: 15px 0 0;
    }

    .matrix > div:first-child {
        padding: 0 15px 0 0;
    }

    .matrix-header-mobile {
        display: block;
        background-color: #000;
        color: #fff;
        font: 700 14px/20px Univers;
        padding: 25px 0 0;
        min-height: 70px;
    }

    .matrix-sections:after {
        content: '';
        height: 8px;
        width: 70%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .matrix-sections > .section-wrap {
        padding: 0 0 15px;
    }

        .matrix-sections > .section-wrap > .section {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

            .matrix-sections > .section-wrap > .section:first-child {
                padding: 0 0 20px 0;
            }

            .matrix-sections > .section-wrap > .section > div {
                display: table-cell;
                padding: 10px 10px 10px 0px;
                vertical-align: baseline;
            }

            .matrix-sections > .section-wrap > .section:first-child > div {
                padding: 10px 0;
            }

            .matrix-sections > .section-wrap > .section > .title > .title-wrap {
                padding: 8px 8px 8px 0px;
                float: left;
            }

            .matrix-sections > .section-wrap > .section > .title:first-child > .title-wrap {
                border-left: 0;
            }

            .matrix-sections > .section-wrap > .section > .title > .tooltip-text {
                font: 400 13px/20px Arial;
                top: 6px;
                right: 10px;
            }

            .matrix-sections > .section-wrap > .section > .section-label {
                padding-top: 0px;
            }

            .matrix-sections > .section-wrap > .section > .section-label,
            .matrix-sections > .section-wrap > .section > .section-band {
                border-left: 1px solid rgba(148, 149, 164, 0.4);
            }

                .matrix-sections > .section-wrap > .section > .section-label:first-child,
                .matrix-sections > .section-wrap > .section > .section-band:first-child {
                    border-left: 0;
                }

    .matrix-sections-desktop {
        display: none;
    }

    .matrix-sections-mobile {
        display: block;
    }

    .matrix-will .matrix-sections > .section-wrap > .section > .title {
        border: 0 solid #00a651;
        border-width: 1px 0;
    }

    .matrix-energy .matrix-sections > .section-wrap > .section > .title {
        border: 0 solid #f7941e;
        border-width: 1px 0;
    }

    .matrix-affection .matrix-sections > .section-wrap > .section > .title {
        border: 0 solid #ed1d24;
        border-width: 1px 0;
    }

    .matrix-control .matrix-sections > .section-wrap > .section > .title {
        border: 0 solid #03558b;
        border-width: 1px 0;
    }

    .matrix-emotionality .matrix-sections > .section-wrap > .section > .title {
        border: 0 solid #d8458e;
        border-width: 1px 0;
    }

    .matrix-keys {
        margin: 15px 0 0 0;
    }

        .matrix-keys > .title {
            padding: 20px 20px 0 0;
        }

    .spotlight-content-block .domains {
        width: 100%;
        float: none;
    }

    #spotlight-logo {
        display: none;
    }

    .spotlight-content-block .content-left {
        display: table;
        width: 100%;
        padding: 30px 10px 0;
    }

    .spotlight-content-block .content-right {
        display: table;
        padding: 0px 10px;
    }

    .spotlight-content-block .report-content {
        padding: 0 0 50px;
    }

    .matrix > div.spotlight-will-logo,
    .matrix > div.spotlight-energy-logo,
    .matrix > div.spotlight-affection-logo,
    .matrix > div.spotlight-control-logo,
    .matrix > div.spotlight-emotionality-logo {
        display: none;
        float: none;
    }

    .spotlight-content-block {
        position: relative;
    }

        .spotlight-content-block .content-dropdown {
            position: relative;
            background-color: #000;
            padding: 20px;
            height: 90px;
        }

            .spotlight-content-block .content-dropdown > .dropdown-select-wrap {
                position: relative;
                max-width: 400px;
                height: 50px;
                background-color: #fff;
                margin: 0 auto;
                border-radius: 5px;
                cursor: pointer;
                padding: 5px 60px 5px 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

                .spotlight-content-block .content-dropdown > .dropdown-select-wrap:after {
                    content: '';
                    float: right;
                    display: block;
                    background: url("../images/fac-select-arrow.png") no-repeat center;
                    position: absolute;
                    left: auto;
                    right: 0px;
                    top: 10px;
                    width: 3px;
                    height: 1px;
                    padding: 15px 0px 15px 50px;
                    border: 0 solid rgba(148, 149, 164, 0.4);
                    border-width: 0 0 0 1px;
                }

            .spotlight-content-block .content-dropdown > .dropdown-option-wrap {
                position: absolute;
                display: none;
                background-color: #fff;
                margin: 0 auto;
                border-radius: 5px;
                z-index: 10;
            }

                .spotlight-content-block .content-dropdown > .dropdown-option-wrap > .dropdown-option {
                    border: 0 solid rgba(148, 149, 164, 0.4);
                    border-width: 0 1px 1px;
                    padding: 5px 20px 5px 5px;
                }

                    .spotlight-content-block .content-dropdown > .dropdown-option-wrap > .dropdown-option.selected,
                    .spotlight-content-block .content-dropdown > .dropdown-option-wrap > .dropdown-option:hover {
                        background-color: #f4f4f4;
                        cursor: pointer;
                    }

                    .spotlight-content-block .content-dropdown > .dropdown-option-wrap > .dropdown-option:first-child {
                        border: 0 solid rgba(148, 149, 164, 0.4);
                        border-radius: 5px 5px 0 0;
                        border-width: 1px;
                    }

                    .spotlight-content-block .content-dropdown > .dropdown-option-wrap > .dropdown-option:last-child {
                        border-radius: 0 0 5px 5px;
                    }

            .spotlight-content-block .content-dropdown .spotlight-logo:before {
                content: '';
                display: inline-block;
                background: url("../images/logo-spotlight.svg") no-repeat center;
                width: 29px;
                height: 29px;
                background-size: 29px 29px;
                vertical-align: middle;
                margin: 5px 10px;
            }

            .spotlight-content-block .content-dropdown .spotlight-will,
            .spotlight-content-block .content-dropdown .spotlight-energy,
            .spotlight-content-block .content-dropdown .spotlight-affection,
            .spotlight-content-block .content-dropdown .spotlight-control {
                content: '';
                display: inline-block;
                width: 59px;
                height: 37px;
                vertical-align: middle;
                margin: 3px -5px;
            }

            .spotlight-content-block .content-dropdown .spotlight-emotionality {
                content: '';
                display: inline-block;
                width: 59px;
                height: 37px;
                vertical-align: middle;
                margin: 3px -5px 3px;
            }

        .spotlight-content-block .key-wrap > div {
            display: table;
        }

            .spotlight-content-block .key-wrap > div > span {
                display: table-cell;
            }

                .spotlight-content-block .key-wrap > div > span:first-child {
                    margin: 0 10px 0 0;
                }

    .stick-header .spotlight-content-block .dropdown-nav {
        padding-top: 90px;
    }

    .stick-header .spotlight-content-block .content-dropdown {
        z-index: 101;
        position: fixed;
        top: 0;
        width: 100%;
    }

    .stick-header .spotlight-content-block .content-left {
        padding-top: 120px;
    }

    .stick-header .spotlight-content-block .report-content {
        padding-top: 20px;
    }

        .stick-header .spotlight-content-block .report-content .matrices {
            padding-top: 0px;
        }

    .spotlight-content-block .content-wrap {
        padding-bottom: 20px;
    }



    .report-block-navigation nav,
    .report-block-navigation nav + .btn {
        margin-bottom: 10px;
    }

    .report-block-navigation .content-dropdown {
        position: relative;
        padding: 0;
        height: 50px; /*max-width: 400px;*/
        margin: 0;
    }

        .report-block-navigation .content-dropdown .dropdown-select-wrap {
            position: relative;
            height: 50px;
            background-color: #fff;
            margin: 0 auto;
            border-radius: 5px;
            cursor: pointer;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: pointer;
        }

            .report-block-navigation .content-dropdown .dropdown-select-wrap:after {
                content: '';
                float: right;
                display: block;
                background: url("../images/fac-select-arrow.png") no-repeat center;
                position: absolute;
                left: auto;
                right: 0px;
                top: 10px;
                width: 3px;
                height: 1px;
                padding: 15px 0px 15px 50px;
                border: 0 solid rgba(148, 149, 164, 0.4);
                border-width: 0 0 0 1px;
            }

        .report-block-navigation .content-dropdown .dropdown-option-wrap {
            position: absolute;
            display: none;
            background-color: #fff;
            margin: 0 auto;
            border-radius: 5px;
            z-index: 10;
            left: 20px;
            right: 20px;
            cursor: pointer;
        }

        .report-block-navigation .content-dropdown .dropdown-option {
            padding: 5px 60px 5px 5px;
        }

        .report-block-navigation .content-dropdown .dropdown-option-wrap .dropdown-option {
            border: 0 solid rgba(148, 149, 164, 0.4);
            border-width: 0 1px 1px;
        }

        .report-block-navigation .content-dropdown .dropdown-option .dropdown-option.selected,
        .report-block-navigation .content-dropdown .dropdown-option .dropdown-option:hover {
            background-color: #f4f4f4;
            cursor: pointer;
        }

        .report-block-navigation .content-dropdown .dropdown-option .dropdown-option:first-child {
            border: 0 solid rgba(148, 149, 164, 0.4);
            border-radius: 5px 5px 0 0;
            border-width: 1px;
        }

        .report-block-navigation .content-dropdown .dropdown-option .dropdown-option:last-child {
            border-radius: 0 0 5px 5px;
        }

        .report-block-navigation .content-dropdown .dropdown-option:before {
            content: '';
            border-radius: 50%;
            background: none;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            margin: 12px 10px;
            display: inline-block;
        }

        .report-block-navigation .content-dropdown .dropdown-option[data-id=will]:before {
            background-color: #00a651;
        }

        .report-block-navigation .content-dropdown .dropdown-option[data-id=energy]:before {
            background-color: #f7941e;
        }

        .report-block-navigation .content-dropdown .dropdown-option[data-id=affection]:before {
            background-color: #ed1d24;
        }

        .report-block-navigation .content-dropdown .dropdown-option[data-id=control]:before {
            background-color: #03558b;
        }

        .report-block-navigation .content-dropdown .dropdown-option[data-id=emotionality]:before {
            background-color: #d8458e;
        }

        .report-block-navigation .content-dropdown .spotlight-logo:before {
            content: '';
            display: inline-block;
            background: url("../images/spotlight-icon.svg") no-repeat center;
            width: 29px;
            height: 29px;
            background-size: 29px 29px;
            vertical-align: middle;
            margin: 5px 10px;
        }

        .report-block-navigation .content-dropdown .spotlight-will-logo:before {
            content: '';
            display: inline-block;
            background: url("../images/spotlight-will-small.png") no-repeat center;
            width: 29px;
            height: 29px;
            vertical-align: middle;
            margin: 5px 10px;
        }

        .report-block-navigation .content-dropdown .spotlight-energy-logo:before {
            content: '';
            display: inline-block;
            background: url("../images/spotlight-energy-small.png") no-repeat center;
            width: 29px;
            height: 29px;
            vertical-align: middle;
            margin: 5px 10px;
        }

        .report-block-navigation .content-dropdown .spotlight-affection-logo:before {
            content: '';
            display: inline-block;
            background: url("../images/spotlight-affection-small.png") no-repeat center;
            width: 29px;
            height: 29px;
            vertical-align: middle;
            margin: 5px 10px;
        }

        .report-block-navigation .content-dropdown .spotlight-control-logo:before {
            content: '';
            display: inline-block;
            background: url("../images/spotlight-control-small.png") no-repeat center;
            width: 29px;
            height: 29px;
            vertical-align: middle;
            margin: 5px 10px;
        }

        .report-block-navigation .content-dropdown .spotlight-emotionality-logo:before {
            content: '';
            display: inline-block;
            background: url("../images/spotlight-emotionality-small.png") no-repeat center;
            width: 29px;
            height: 29px;
            vertical-align: middle;
            margin: 5px 10px 5px;
        }

        .note { padding: 10px 15px 20px 15px; }
}

@media (max-width: 480px) {
    .create-new-profile .data-selector.flip-my-y { top: auto; bottom: 100%; /*height:150px;*/ }
    /* Don't need to reverse whole and fraction row in mobile version */
    /*.create-new-profile .data-selector.flip-my-y .whole-row { transform: translateY(100%); }
    .create-new-profile .data-selector.flip-my-y .fraction-row { transform: translateY(-100%); }*/
    .create-new-profile .data-selector > .wrap { width: 280px; }
    .create-new-profile .data-selector a { width: 20%; }
    .create-new-profile .data-selector :first-child > a:nth-of-type(1),
    .create-new-profile .data-selector :first-child > a:nth-of-type(2),
    .create-new-profile .data-selector :first-child > a:nth-of-type(3),
    .create-new-profile .data-selector :first-child > a:nth-of-type(4),
    .create-new-profile .data-selector :first-child > a:nth-of-type(5) { border-top-width: 0; }

    .popup-block .wrap { width: 90%; max-width: 400px; }
    .popup-block .header { line-height: 100%; }

    #footer footer { padding-bottom: 15px; }
    #footer a { display: block; margin-left: 0; }
}

@media (max-width: 767px) {
    .std-form-2 .btn-row { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 10px 0 25px; }
    .std-form-2 .btn-row > * { -webkit-flex: 0 0 100%; flex: 0 0 100%; -webkit-order: 1; order: 1; display: block; width: auto; min-width: 0; max-width: 100%; margin: 10px 0 0; }
    .std-form-2 .btn-row .btn-primary { order: 0; }
    .std-form-2 [type="checkbox"] + label::before { width: 22px; height: 22px; top: 1px; position: relative; }


    .hero-word-cloud { padding: 20px 0 0; margin: -30px 0 0; }
    .hero-word-cloud .bg-dots { display: none; }
    .word-cloud-wrap { padding: 15px 0 20px; }
    .word-cloud-wrap .word-list { line-height: 1.2; transform: none !important; }
    .word-cloud-wrap .word-list li { transition-duration: .1s !important; }
    .word-cloud-wrap [data-rank="0"] { font-size: 1.3em; }
    .word-cloud-wrap [data-rank="1"] { font-size: 1.8em; }
    .word-cloud-wrap [data-rank="2"] { font-size: 2.3em; }
    .word-cloud-wrap [data-rank="3"] { font-size: 2.8em; }
    .word-cloud-wrap [data-rank="4"] { font-size: 3.3em; }
    .word-cloud-wrap [data-rank="5"] { font-size: 3.8em; }

    .hero-word-cloud.no-facet5 { background: none; background-color: none; }
    .hero-word-cloud.no-facet5 .page-content { padding: 0 0 20px 20px;  }

    .dashboard .img-wrap { display: block; background: inherit; position: relative; }
    .dashboard .img-wrap:before { background: url("../images/hp-spots.png") no-repeat scroll 40% 100% transparent; background-size: 230% auto; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; }
    .dashboard .img-wrap img { display: block; max-width: 100%; }

    .dashboard .dashboard-bottom-dots img {  margin: -80px -60px 0; z-index: -1; }

    .dashboard .dashboard-tabs { display: table; width: 100%; table-layout: fixed; }
    .dashboard .dashboard-tabs > .tab { display: table-cell; font: 700 15px/35px Univers; background-color: #000; color: #fff; text-align: center; vertical-align: middle; text-transform: uppercase; height: 50px; cursor: pointer; }
    .dashboard .dashboard-tabs > .tab.active { background-color: #fff; color: #000; cursor: default; }

    .dashboard .page-content { margin: 0 8px; }
    .dashboard .dashboard-blocks { padding: 20px 0 25px; }
    .dashboard .btn { width: auto; display: block; margin: 20px auto 0; }

    .dashboard-blocks .dashboard-block-spotlight-strength { margin: -10px -8000px -40px; }
    .dashboard-blocks .dashboard-block-spotlight-strength { flex-wrap: wrap; }
    .dashboard-blocks .dashboard-spotlight-strength { margin: 0 30px; }
    .dashboard-blocks .side-heading { width: 100%; margin: 0 20px 20px; }

    .dashboard-block-reports-title { order: 1; }
    .dashboard-block-share-lnk { order: 4; }
    .dashboard-block-hr-1 { order: 2; margin: 15px 0 20px; }
    .dashboard-block-report-list { order: 3; }
    .dashboard-block-prof-comp { order: 8; }
    .dashboard-block-shared-title { order: 1; margin: 30px auto 0; }
    .dashboard-block-share-lnk-2 { order: 4; }
    .dashboard-block-hr-2 { order: 2; margin: 15px 0 20px; }
    .dashboard-block-shared-table { order: 3; }

    .dashboard-blocks .not-sharing { margin: 0; }

    .dashboard[data-tabactive="reports-tab"] .dashboard-blocks .dashboard-block-prof-comp,
    .dashboard[data-tabactive="profiles-tab"] .dashboard-blocks > *:not(.dashboard-block-prof-comp) { display: none; }

    .dashboard .dashboard-block-prof-comp { max-width: 522px; margin: 0 auto; }
    .dashboard-block-prof-comp header { padding: 15px 20px; }
    .dashboard-block-prof-comp header .title { font-size: 18px; }
    .dashboard-block-prof-comp footer { padding: 0 10px 15px; }

    .dashboard-block-prof-comp #main-plot { margin: 10px auto -10px; }
    .dashboard-block-prof-comp #main-plot .key-items .key-title { font-size: inherit; line-height: inherit; }
    .dashboard-block-prof-comp #main-plot .key-items .key-item-will { top: 10px; }
    .dashboard-block-prof-comp #main-plot .key-items .key-item-affection { bottom: 90px; }
    .dashboard-block-prof-comp #main-plot .key-items .key-item-emotionality { width: 100%; transform: translateX(50%); right: 50%; max-width: 300px; bottom: 40px; }
    .dashboard-block-prof-comp #main-plot .key-items .key-item-emotionality .emo-plot { width: 100%; }

    span.download-icon.icon-grey {
        background: url("../images/download-grey.svg") no-repeat left center; 
        background-size: contain;
        margin-bottom: -3px;
        display: inline-block;
    }
    .report-item { padding: 15px 0; }
    .report-item .ico { margin: 6px 23px 6px 15px; }
    .report-item .content { margin: 0; }
    .report-item .family { font-size: 14px; }
    .report-item .buttons { display: none; }
    .report-item .btn { display: none; }

    .shared-table { display: block; }
    .shared-table thead { display: none; }
    .shared-table tbody { display: block; }
    .shared-table td { display: block; padding: 0 15px; position: relative; margin: 0 0 15px; }
    .shared-table td:first-child { border-top: 1px solid rgba(17, 17, 17, 0.17); padding-top: 15px; padding-right: 40px; position: relative; }
    .shared-table td:first-child:before,
    .shared-table td:first-child:after { content: ''; width: 15px; height: 1px; position: absolute; background: #898989; right: 12px; top: 32px; transition: all .3s; }
    .shared-table td:first-child:after { width: 1px; height: 15px; right: 19px; top: 25px; }
    .shared-table td:last-child { padding-left: 65px; width: auto; }
    .shared-table .share-ico { width: 30px; margin: 0 20px 0 0; }
    .shared-table .initials { width: 30px; height: 30px; line-height: 30px; margin: 0 20px 0 0; font-size: 12px; }
    .shared-table .content:not(:last-child) { margin-bottom: 15px; }
    .shared-table tr { max-height: 300px; transition: all .3s; position: relative; overflow: hidden; display: block; cursor: pointer; }
    .shared-table tr:not(.open) { max-height: 76px; }
    .shared-table .open td:first-child:before { transform: rotate(180deg); }
    .shared-table .open td:first-child:after { transform: rotate(90deg); }
    .shared-table .name { font-size: 14px; }

    .shared-table .btns-wrap { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin: 0 -5px 0 -50px; }

    .shared-table .speech-bubble { }
    .shared-table .speech-bubble .speech-content { left: 0; transform: translate(0, -15px); }
    .shared-table .speech-bubble .speech-content::after { left: 5px; margin: 0; }

    .popup .popup-wrap { width: calc(100vw - 20px); max-height: calc(100vh - 20px) !important; height: auto; }
    .popup .popup-head { padding: 20px 45px 20px 20px; }
    .popup .popup-content { padding: 0 20px 20px; font-size: 14px; }
    .popup .popup-content:first-child { padding-top: 20px; }
    .popup .popup-foot { padding: 10px 20px 20px; }
    .popup .popup-foot .btns-wrap { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto -20px; }
    .popup .popup-foot .btns-wrap > * { -webkit-flex: 0 0 100%; flex: 0 0 100%; -webkit-order: 1; order: 1; display: block; width: auto; min-width: 0; max-width: 100%; }
    .popup .popup-foot .btns-wrap .btn-primary { order: 0; }
    .popup .popup-close-x { right: 12px; top: 12px; }

    .errored-recipients { padding: 12px; }
    .errored-recipients dl { padding: 0; }
    .errored-recipients dt { padding: 0 3px; }
    .errored-recipients dd { padding: 0 3px; }
    .errored-recipients dd + dt { padding-top: 9px; }

    .mixed-recipients { padding: 12px; }
    .mixed-recipients dl { padding: 0; }
    .mixed-recipients dt { padding: 0 3px; }
    .mixed-recipients dd { padding: 0 3px; }
    .mixed-recipients dd + dt { padding-top: 9px; }

    .FAQs-wrap .q { padding: 20px 10px 20px 30px; font-size: 14px; line-height: 20px; }
    .FAQs-wrap .q::before,
    .FAQs-wrap .q::after { margin: 22px 0 0; }

    .report-blocks { padding: 20px 0 30px; }
    .reports .report-block-sticky-head { height: 48px; font-size: 13px; }
    .reports .report-block-sticky-head .btn-share { font-size: 12px; padding: 4px 10px; min-width: 0; margin: 0 0 0 15px; }

    .report-block-summary .btns-wrap { }
    .report-block-summary .btns-wrap > * { display: block; margin: 10px 0 0; }
    .report-blocks .dashboard-block-prof-comp:not(:first-of-type) { margin: 20px 0 0 0; }

    .report-block-summary h1 { font-size: 25px; margin: 0 0 .6em; text-align: left; }
    .report-block-navigation { display: inline; }
    .report-block-navigation .sticky { top: 0; transition: all .3s; /*overflow: hidden; height: 70px;*/ position: fixed; left: 0; width: 100%; transform: translateY(-100%); transition: all .3s; background-color: #f1f2f9; color: #161616; z-index: 98; }
    .reports.reports-shared .report-block-navigation .sticky { background-color: #591943; color: #fff; }
    .report-block-navigation.is-active .sticky { top: 48px; transform: translateY(0); }

    .report-block-navigation .page-content { /*padding-bottom: 15px;*/ background-color: inherit !important; color: inherit !important; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; height: 100%; }
    .report-block-navigation nav { flex: 1 1 auto; }
    .report-block-navigation nav > [class*="report-nav-"] { display: none; text-decoration: none !important; }
    .report-block-navigation nav .active { display: block; }
    .report-block-navigation select { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; padding: 0; margin: 0; opacity: 0; font-size: 16px; }
    .report-block-navigation .btn-share { -webkit-flex: 0 0 auto; flex: 0 0 auto; margin: 0 0 0 10px; padding: 6px 0; min-width: 70px; height: 32px; }

    .rb-overview header { margin: 0 0 5px; }
    .rb-item { padding: 0 0 30px; }

    .rb-detail-items { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; align-items: stretch; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 0; }
    .rb-detail-items > * { -webkit-flex: 1 1 auto; flex: 1 1 auto; position: relative; width: 100%; }
    .rb-detail-items .rbd-item { -webkit-order: 1; order: 1; }
    .rb-detail-items .rbd-item + .rbd-item { -webkit-order: 5; order: 5; }
    .rb-detail-items .rbd-item + .rbd-item + .rbd-item { -webkit-order: 9; order: 9; }
    .rb-detail-items .rb-key-plot { -webkit-order: 2; order: 2; }
    .rb-detail-items .rb-key-plot + .rb-key-plot { -webkit-order: 6; order: 6; }
    .rb-detail-items .rb-key-plot + .rb-key-plot + .rb-key-plot { -webkit-order: 10; order: 10; }
    .rb-detail-items .rb-scores { -webkit-order: 3; order: 3; }
    .rb-detail-items .rb-scores + .rb-scores { -webkit-order: 7; order: 7; }
    .rb-detail-items .rb-scores + .rb-scores + .rb-scores { -webkit-order: 11; order: 11; }
    .rb-detail-items .rb-key-quality  { -webkit-order: 4; order: 4; }
    .rb-detail-items .rb-key-quality + .rb-key-quality  { -webkit-order: 8; order: 8; }
    .rb-detail-items .rb-key-quality  + .rb-key-quality + .rb-key-quality { -webkit-order: 12; order: 12; }
    .rb-detail-items .rb-detail-break { display: none; }
    .rb-detail-items > .rbd-item { margin: 30px 0 1px; }
    .rb-detail-items .rb-key-plot { }
    .rb-detail-items .rb-scores { }
    .rbd-item .score { font-size: 25px; font-weight: 400; }
    .rbd-item h4 { font-size: 15px; font-weight: 700; }

    .share-invite-block { padding: 30px 15px; }
    .share-invite .page-content { padding-bottom: 30px; }

    .portrait-block-breakdown:not(:first-of-type) { margin: 30px 0 0; }

    .portrait-breakdown-item { padding: 0 0 20px; }
    .portrait-breakdown-item header { padding: 10px 0 0; }

    .family-block-breakdown header { padding-top: 25px; margin: 20px 0; }
    .family-block-breakdown header h1 { margin: 0 0 .6em; text-align: left; font-size: 25px; }

    .family-breakdown-item { padding: 0 0 15px; }
    .family-breakdown-item:not(:first-of-type) { border-top: 1px solid rgba(22, 22, 22, .1); padding-top: 15px; }
    .family-breakdown-item .family-profile { float: left; width: 52px; height: 52px; margin: 0 19px 0 4px; }
    .family-breakdown-item .lnk-compare-my-profile { margin: 15px 0 0; display: block; }
    .family-breakdown-item .content { display: none; padding: 10px 0; }
    .family-breakdown-item h4 { display: none; margin: 0; }
    .family-breakdown-item .fbd-content-toggle { display: -webkit-flex; display: flex; min-height: 52px; -webkit-align-items: center; align-items: center; position: relative; padding: 0 45px 0 0; text-decoration: none; }
    .family-breakdown-item .fbd-content-toggle h4 { display: block; }
    .family-breakdown-item .fbd-content-toggle::before,
    .family-breakdown-item .fbd-content-toggle::after { position: absolute; background: #1d1d1b; content: ''; right: 20px; top: 50%; width: 15px; height: 1px; transition: all .3s; margin: 0; }
    .family-breakdown-item .fbd-content-toggle::after { right: 27px; width: 1px; height: 15px; margin-top: -7px; }
    .family-breakdown-item.show-more .fbd-content-toggle::before { transform: rotate(180deg); }
    .family-breakdown-item.show-more .fbd-content-toggle::after { transform: rotate(90deg); }

    .dashboard .dashboard-qualities-header .btn { min-width: 0px; font-size: 20px; padding: 8px 12px; }

    .key-qualities .key-qualities-container { min-height: 450px;  }
    .key-qualities .key-qualities-container .key-quality-cards-mobi-container { 
        position: absolute; width: 100%; height: 100%; display: flex; align-items: center;
        justify-content: space-around; background-color: rgba(0, 0, 0, 0);
    }
    .key-qualities .key-quality-cards-mobi-container .key-quality-item { transform: translateY(25px); }
    .key-qualities .key-quality-cards-mobi-container .key-quality-position-selector { transform: translateY(0); }
}

@media (max-width: 480px) {
    .dashboard .dashboard-tabs > .tab { font-size: 14px; line-height: 20px; height: 45px; }

    .std-form .lbl-wrap { width: 284px; }
}

@media (max-height: 568px) and (max-width: 767px) {
    .report-block-navigation.is-active .sticky { top: 38px; }
    .reports .report-block-sticky-head { height: 38px; }
}

/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/



/*
CONTENTS: 
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 
	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 
	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 
	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 
	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 
		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/



/* 
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE  
------------------------------------------------------------------------------------------------------------------------
*/

	.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
	.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
	
	.mCustomScrollBox{ /* contains plugin's markup */
		position: relative;
		overflow: hidden;
		height: 100%;
		max-width: 100%;
		outline: none;
		direction: ltr;
	}

	.mCSB_container{ /* contains the original content */
		overflow: hidden;
		width: auto;
		height: auto;
	}



/* 
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR 
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_inside > .mCSB_container{ margin-right: 30px; }

	.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */

	.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
		position: absolute;
		width: 16px;
		height: auto;
		left: auto;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */
		right: auto;
		left: 0;
	}
	
	.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */

	.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0; 
		height: auto;
	}

	.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }

	.mCSB_scrollTools .mCSB_draggerRail{
		width: 2px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
	}

	.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */
		cursor: pointer;
		width: 100%;
		height: 30px; /* minimum dragger height */
		z-index: 1;
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */
		position: relative;
		width: 4px;
		height: 100%;
		margin: 0 auto;
		-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;
		text-align: center;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown{
		display: block;
		position: absolute;
		height: 20px;
		width: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}

	.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR 
x-axis
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_horizontal.mCSB_inside > .mCSB_container{
		margin-right: 0;
		margin-bottom: 30px;
	}
	
	.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height: 100%; }

	.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* non-visible scrollbar */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal{
		width: auto;
		height: 16px;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
	.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom: -26px; } /* scrollbar position: outside */

	.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin: 0 20px; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 2px;
		margin: 7px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{
		width: 30px; /* minimum dragger width */
		height: 100%;
		left: 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 12px; /* auto-expanded scrollbar */
		margin: 2px auto;
	}
	
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 8px; /* auto-expanded scrollbar */
		margin: 4px 0;
	}

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{
		display: block;
		position: absolute;
		width: 20px;
		height: 100%;
		overflow: hidden;
		margin: 0 auto;
		cursor: pointer;
	}
	
	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left: 0; }

	.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS 
yx-axis 
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_container_wrapper{
		position: absolute;
		height: auto;
		width: auto;
		overflow: hidden;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin-right: 30px;
		margin-bottom: 30px;
	}
	
	.mCSB_container_wrapper > .mCSB_container{
		padding-right: 30px;
		padding-bottom: 30px;
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; }
	
	.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; }
	
	/* non-visible horizontal scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; }
	
	/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; }
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; }
	
	/* non-visible scrollbar/RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; }
	
	.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */
		margin-right: 0;
		margin-left: 30px;
	}
	
	.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; }
	
	.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; }
	
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{
		margin-right: 0; /* non-visible scrollbar */
		margin-left: 0;
	}
	
	/* non-visible horizontal scrollbar */
	.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; }



/* 
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS  
------------------------------------------------------------------------------------------------------------------------
*/

	.mCSB_scrollTools, 
	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		-webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		-o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
		transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
	}
	
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
	.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, 
	.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
		-webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		-o-transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
		transition: width .2s ease-out .2s, height .2s ease-out .2s, 
					margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, 
					margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
					opacity .2s ease-in-out, background-color .2s ease-in-out; 
	}



/* 
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS  
------------------------------------------------------------------------------------------------------------------------
*/

	/* 
	----------------------------------------
	6.1 THEMES 
	----------------------------------------
	*/
	
	/* default theme ("light") */

	.mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }
	
	.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; }
	
	.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
	.mCustomScrollBox:hover > .mCSB_scrollTools,
	.mCustomScrollBox:hover ~ .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
	.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; }

	.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.4);
		filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; 
	}

	.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.85);
		filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; 
	}
	.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.9);
		filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp,
	.mCSB_scrollTools .mCSB_buttonDown,
	.mCSB_scrollTools .mCSB_buttonLeft,
	.mCSB_scrollTools .mCSB_buttonRight{
		background-image: url(mCSB_buttons.png); /* css sprites */
		background-repeat: no-repeat;
		opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; 
	}

	.mCSB_scrollTools .mCSB_buttonUp{
		background-position: 0 0;
		/* 
		sprites locations 
		light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
		dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonDown{
		background-position: 0 -20px;
		/* 
		sprites locations
		light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
		dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonLeft{
		background-position: 0 -40px;
		/* 
		sprites locations 
		light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
		dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonRight{
		background-position: 0 -56px;
		/* 
		sprites locations 
		light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
		dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
		*/
	}

	.mCSB_scrollTools .mCSB_buttonUp:hover,
	.mCSB_scrollTools .mCSB_buttonDown:hover,
	.mCSB_scrollTools .mCSB_buttonLeft:hover,
	.mCSB_scrollTools .mCSB_buttonRight:hover{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; }

	.mCSB_scrollTools .mCSB_buttonUp:active,
	.mCSB_scrollTools .mCSB_buttonDown:active,
	.mCSB_scrollTools .mCSB_buttonLeft:active,
	.mCSB_scrollTools .mCSB_buttonRight:active{ opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; }
	

	/* theme: "dark" */

	.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.85); }

	.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(0,0,0,0.9); }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px 0; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

	.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-2", "dark-2" */

	.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 4px;
		margin: 6px auto;
	}

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

	.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px 0; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{	background-position: -32px -20px; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -40px -40px; }

	.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -56px; }
	
	
	/* theme: "dark-2" */

	.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px;
	}

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px 0; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -20px; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -40px; }

	.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-thick", "dark-thick" */

	.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		width: 4px;
		background-color: #fff; background-color: rgba(255,255,255,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 6px;
		background-color: #fff; background-color: rgba(255,255,255,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 4px;
		margin: 6px 0;
	}

	.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 6px;
		margin: 5px auto;
	}

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }

	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px 0; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{	background-position: -16px -20px; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{	background-position: -20px -40px; }

	.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -56px; }


	/* theme: "dark-thick" */
	
	.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.75);
		-webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;
	}

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px 0; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -20px; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -40px; }

	.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -100px -56px; }
	
	/* ---------------------------------------- */
	


	/* theme: "light-thin", "dark-thin" */
	
	.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.1); }

	.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 2px; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width: 100%; }

	.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 2px;
		margin: 7px auto;
	}


	/* theme "dark-thin" */
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{	background-position: -80px 0; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -20px; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -40px; }

	.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -56px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
	
	.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.15); }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger{ height: 14px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		width: 14px;
		margin: 0 1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 14px; }
	
	.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 14px;
		margin: 1px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		width: 16px; /* auto-expanded scrollbar */
		height: 16px;
		margin: -1px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 4px; /* auto-expanded scrollbar */ }
	
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{
		height: 16px; /* auto-expanded scrollbar */
		width: 16px;
		margin: 0 -1px;
	}
	
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 4px; /* auto-expanded scrollbar */
		margin: 6px 0;
	}
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{ background-position: 0 -72px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{ background-position: 0 -92px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{ background-position: 0 -112px; }
	
	.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{ background-position: 0 -128px; }
	
	
	/* theme "rounded-dark", "rounded-dots-dark" */
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.15); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -80px -72px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -80px -92px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -80px -112px; }
	
	.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -80px -128px; }
	
	
	/* theme "rounded-dots", "rounded-dots-dark" */
	
	.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail{ width: 4px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		background-color: transparent;
		background-position: center;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
		background-repeat: repeat-y;
		opacity: 0.3;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		height: 4px;
		margin: 6px 0;
		background-repeat: repeat-x;
	}
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{ background-position: -16px -72px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{ background-position: -16px -92px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -20px -112px; }
	
	.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{ background-position: -20px -128px; }
	
	
	/* theme "rounded-dots-dark" */
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
	}
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -96px -72px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -96px -92px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -100px -112px; }
	
	.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position: -100px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
	
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-y;
		background-image: -moz-linear-gradient(left, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -o-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-linear-gradient(left, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
	}
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		background-repeat: repeat-x;
		background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
		background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0)));
		background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -o-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
		background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 100%);
	}
	
	
	/* theme "3d", "3d-dark" */
	
	.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 70px; }
	
	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 70px; }
	
	.mCS-3d.mCSB_scrollTools, 
	.mCS-3d-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 8px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
		box-shadow: inset 1px 0 1px rgba(0,0,0,0.5), inset -1px 0 1px rgba(255,255,255,0.2);
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 	 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }

	.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 8px; }

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 8px;
		margin: 4px 0;
		box-shadow: inset 0 1px 1px rgba(0,0,0,0.5), inset 0 -1px 1px rgba(255,255,255,0.2);
	}

	.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		width: 100%;
		height: 8px;
		margin: 4px auto;
	}
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "3d-dark" */
	
	.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: #000; background-color: rgba(0,0,0,0.1);
		box-shadow: inset 1px 0 1px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); }
	
	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme: "3d-thick", "3d-thick-dark" */
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools{
		opacity: 1;
		filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; 
	}
	
	.mCS-3d-thick.mCSB_scrollTools, 
	.mCS-3d-thick-dark.mCSB_scrollTools, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{ -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
	
	.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical{ right: 1px; }
	
	.mCS-3d-thick.mCSB_scrollTools_vertical, 
	.mCS-3d-thick-dark.mCSB_scrollTools_vertical{ box-shadow: inset 1px 0 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5); }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{
		bottom: 1px;
		box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.5);
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		box-shadow: inset 1px 0 0 rgba(255,255,255,0.4);
		width: 12px;
		margin: 2px;
		position: absolute;
		height: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4); }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #555; }
	
	.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 12px;
		width: auto;
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{
		background-color: #000; background-color: rgba(0,0,0,0.05);
		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }

	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }

	.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{	background-position: -40px -128px; }
	
	
	/* theme: "3d-thick-dark" */
	
	.mCS-3d-thick-dark.mCSB_scrollTools{ box-shadow: inset 0 0 14px rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{ box-shadow: inset 0 1px 1px rgba(0,0,0,0.1), inset 0 0 14px rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 1px 0 0 rgba(255,255,255,0.4), inset -1px 0 0 rgba(0,0,0,0.2); }
	 
	.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -1px 0 rgba(0,0,0,0.2); }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,  
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #777; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{
		background-color: #fff; background-color: rgba(0,0,0,0.05);
		box-shadow: inset 1px 1px 16px rgba(0,0,0,0.1);
	}
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }
	
	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme: "minimal", "minimal-dark" */
	
	.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		right: 0; 
		margin: 12px 0; 
	}
	
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, 
	.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{
		bottom: 0; 
		margin: 0 12px; 
	}
	
	/* RTL direction/left-side scrollbar */
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, 
	.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical{
		left: 0; 
		right: auto;
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: transparent; }
	
	.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger{ height: 50px; }
	
	.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, 
	.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger{ width: 50px; }
	
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #fff; background-color: rgba(255,255,255,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}
	
	
	/* theme: "minimal-dark" */
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.2);
		filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; 
	}
	
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
		background-color: #000; background-color: rgba(0,0,0,0.5);
		filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; 
	}
	
	/* ---------------------------------------- */
	
	
	
	/* theme "light-3", "dark-3" */
	
	.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
		width: 6px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ width: 6px; }

	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 6px;
		margin: 5px 0;
	}
	
	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		width: 12px;
	}
	
	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
	.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "dark-3" */
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	/* ---------------------------------------- */
	
	
	
	/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
	
	.mCS-inset.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{
		width: 12px;
		background-color: #000; background-color: rgba(0,0,0,0.2);
	}

	.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ 
		width: 6px;
		margin: 3px 5px;
		position: absolute;
		height: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{
		height: 6px;
		margin: 5px 3px;
		position: absolute;
		width: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	
	.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{
		width: 100%;
		height: 12px;
		margin: 2px 0;
	}
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp{ background-position: -32px -72px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown{ background-position: -32px -92px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -40px -112px; }
	
	.mCS-inset.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight{ background-position: -40px -128px; }
	
	
	/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.1); }
	
	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position: -112px -72px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position: -112px -92px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position: -120px -112px; }

	.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, 
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight{	background-position: -120px -128px; }
	
	
	/* theme "inset-2", "inset-2-dark" */
	
	.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, 
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
		border-color: #fff;
		border-color: rgba(255,255,255,0.2);
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	}
	
	.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{ border-color: #000; border-color: rgba(0,0,0,0.2); }
	
	
	/* theme "inset-3", "inset-3-dark" */
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{ background-color: #fff; background-color: rgba(255,255,255,0.6); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color: #000; background-color: rgba(0,0,0,0.6); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.75); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.85); }
	
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #000; background-color: rgba(0,0,0,0.9); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.75); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.85); }
	
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: #fff; background-color: rgba(255,255,255,0.9); }
	
	/* ---------------------------------------- */

body:lang(ab) *,
body:lang(aa) *,
body:lang(af) *,
body:lang(sq) *,
body:lang(am) *,
body:lang(ar) *,
body:lang(an) *,
body:lang(hy) *,
body:lang(as) *,
body:lang(ay) *,
body:lang(az) *,
body:lang(ba) *,
body:lang(eu) *,
body:lang(bn) *,
body:lang(dz) *,
body:lang(bh) *,
body:lang(bi) *,
body:lang(br) *,
body:lang(bg) *,
body:lang(my) *,
body:lang(be) *,
body:lang(km) *,
body:lang(ca) *,
body:lang(zh) *,
body:lang(zh-Hans) *,
body:lang(zh-Hant) *,
body:lang(co) *,
body:lang(hr) *,
body:lang(cs) *,
body:lang(da) *,
body:lang(nl) *,
body:lang(eo) *,
body:lang(et) *,
body:lang(fo) *,
body:lang(fa) *,
body:lang(fj) *,
body:lang(fi) *,
body:lang(fr) *,
body:lang(fy) *,
body:lang(gl) *,
body:lang(gd) *,
body:lang(gv) *,
body:lang(ka) *,
body:lang(de) *,
body:lang(el) *,
body:lang(kl) *,
body:lang(gn) *,
body:lang(gu) *,
body:lang(ht) *,
body:lang(ha) *,
body:lang(he) *,
body:lang(hi) *,
body:lang(hu) *,
body:lang(is) *,
body:lang(io) *,
body:lang(id) *,
body:lang(ia) *,
body:lang(ie) *,
body:lang(iu) *,
body:lang(ik) *,
body:lang(ga) *,
body:lang(it) *,
body:lang(ja) *,
body:lang(jv) *,
body:lang(kn) *,
body:lang(ks) *,
body:lang(kk) *,
body:lang(rw) *,
body:lang(ky) *,
body:lang(rn) *,
body:lang(ko) *,
body:lang(ku) *,
body:lang(lo) *,
body:lang(la) *,
body:lang(lv) *,
body:lang(li) *,
body:lang(ln) *,
body:lang(lt) *,
body:lang(mk) *,
body:lang(mg) *,
body:lang(ms) *,
body:lang(ml) *,
body:lang(mt) *,
body:lang(mi) *,
body:lang(mr) *,
body:lang(mo) *,
body:lang(mn) *,
body:lang(na) *,
body:lang(ne) *,
body:lang(no) *,
body:lang(oc) *,
body:lang(or) *,
body:lang(om) *,
body:lang(ps) *,
body:lang(pl) *,
body:lang(pt) *,
body:lang(pa) *,
body:lang(qu) *,
body:lang(rm) *,
body:lang(ro) *,
body:lang(ru) *,
body:lang(sm) *,
body:lang(sg) *,
body:lang(sa) *,
body:lang(sr) *,
body:lang(sh) *,
body:lang(st) *,
body:lang(tn) *,
body:lang(sn) *,
body:lang(ii) *,
body:lang(sd) *,
body:lang(si) *,
body:lang(ss) *,
body:lang(sk) *,
body:lang(sl) *,
body:lang(so) *,
body:lang(es) *,
body:lang(su) *,
body:lang(sw) *,
body:lang(sv) *,
body:lang(tl) *,
body:lang(tg) *,
body:lang(ta) *,
body:lang(tt) *,
body:lang(te) *,
body:lang(th) *,
body:lang(bo) *,
body:lang(ti) *,
body:lang(to) *,
body:lang(ts) *,
body:lang(tr) *,
body:lang(tk) *,
body:lang(tw) *,
body:lang(ug) *,
body:lang(uk) *,
body:lang(ur) *,
body:lang(uz) *,
body:lang(vi) *,
body:lang(vo) *,
body:lang(wa) *,
body:lang(cy) *,
body:lang(wo) *,
body:lang(xh) *,
body:lang(yi) *,
body:lang(yo) *,
body:lang(zu) * { font-family: Sans-serif !important; }

body:lang(en) .profile-switch > .btn-switch,
body:lang(en) .profile-switch-wrapper > .btn-switch { font: 400 12px/14px Univers }



/* Challenges */

@media only screen and (min-width: 768px)
{
    #main-content-challenge
    {
        background-color: #fff;
        color: #000000;
        min-height: 140px;
        margin: 0px -30px;
        padding-bottom: 20px;
    }
}

.selection-panel
{
    padding: 0;
    margin: 0 auto;
}

#challenge-edit-menu
{
    max-width: 1044px;
    margin: 0 auto;
    padding: 0px 20px;
}

.challenge-list
{
    height: 100%;
}

.challenge-content
{
    height: 100%;
}

.selection-page
{
    display: none;
    height: 100%;
    padding: 1em 0.5em 2em 0.5em;
}

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

.mycoach-button
{
    display: flex;
    width: 400px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background-color: #000000;
    margin: 24px 0px 24px auto;
    text-decoration: none;
    padding-left: 18.98px;
    font: bold 24px Univers;
    color: #FFFFFF;
}

    .mycoach-button:disabled
    {
        background-color: lightgray;
    }


a.mycoach-button
{
    text-decoration: none;
}

.mycoach-grid
{
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-template-rows: minmax(600px,auto) 1fr;
}

    .mycoach-grid.dashboard-grid
    {
        grid-template-columns: 3fr 4fr;
        grid-template-rows: 600px 200px;
    }

.mycoach-grid-challenge-container
{
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 100%;
    position: relative;
    overflow-y: auto;
}

.mycoach-list
{
    text-align: left;
    font-weight: bold;
    width: 80%;
}

    .mycoach-list li button
    {
        padding: 1rem 0 1rem 0;
        font: bold 1.2rem Univers;
        color: #AEAEAE;
        text-align: left;
    }

        .mycoach-list li.selected button
        {
            color: #FF3100;
        }

.selection-panel h1
{
    font-size: 4rem;
    text-align: left;
    padding: 3rem 0px 3rem 0px;
    margin: 0 auto;
}

.selection-panel h2
{
    font-size: 3rem;
    color: #FF5E38;
    font-weight: bold;
    text-align: left;
    padding: 2rem 0px 2rem 0px;
    margin: 0 auto;
}

.selection-panel h3
{
    font-size: 2.5rem;
    font-weight: bold;
    text-align: left;
    padding: 2rem 0px 2rem 0px;
    margin: 0 auto;
}

.selection-panel h4
{
    font-size: 1.6rem;
    font-weight: bold;
    text-align: left;
    padding: 1.6rem 0px 1.6rem 0px;
    margin: 0 auto;
}

.selection-panel h5
{
    font-size: 1.4rem;
    font-family: Univers;
    text-align: left;
    padding: 1.2rem 0px 1.2rem 0px;
    margin: 0 auto;
}

div.mycoach-card
{
    --box-shadow-colour: #FF5E38;
    --border-colour: #FF5E38;
    border: 0.5em solid var(--border-colour);
    border-style: solid;
    border-width: 0.5em;
    border-radius: 1em;
    padding: 2rem 0rem 0rem 3rem;
    max-width: 30rem;
    box-shadow: 1.5em 1.5em var(--box-shadow-colour), 3em 3em #FF3100;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

    div.mycoach-card div.challenge
    {
        display: none;
        height: 280px;
    }

        div.mycoach-card div.challenge.active
        {
            display: block;
        }

.select-icon
{
    visibility: hidden;
}

g#cross
{
    opacity: 100;
    transition: opacity 100ms;
}

/*g.tick
{
    opacity: 0;
    transition: opacity 0.5s;
}

g.star
{
    opacity: 0;
}*/

.select:hover .shadow
{
    fill-opacity: 0.71;
}

/*g.hidden
{
    opacity: 0;
}

g.visible
{
    opacity: 100;
}*/


div.mycoach-card-sortable-container
{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

    div.mycoach-card-sortable-container :hover
    {
        cursor: grab;
    }

div.mycoach-card-sortable
{
    --box-shadow-colour: #FF5E38;
    --border-colour: #FF5E38;
    border: 0.5em solid var(--border-colour);
    border-style: solid;
    border-width: 0.5em;
    border-radius: 1em;
    padding: 0rem 2rem 0rem 2rem;
    width: 80%;
    box-shadow: 1em 1em var(--box-shadow-colour);
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}




div#sortable-container
{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0rem 1rem 0rem;
    overflow: auto;
}

div.sort-burger img
{
    height: auto;
    width: 75%;
    padding: 0rem 1rem 2rem 0rem;
}

img.circle-close
{
    align-self: start;
    position: relative;
    top: -1rem;
    right: 2rem;
    width: 2.5rem;
}

/* Dashboard */

.tabset
{
    text-align: right;
    padding-top: 1rem;
}

    .tabset input[type="radio"]
    {
        position: absolute;
        left: -200vw;
    }

    .tabset .tab-panel
    {
        display: none;
    }

.page-content.tabs:has(> input:first-child:checked) ~ .tab-panels > .tab-panel:first-child,
.page-content.tabs:has(> input:nth-child(3):checked) ~ .tab-panels > .tab-panel:nth-child(2),
.page-content.tabs:has(> input:nth-child(5):checked) ~ .tab-panels > .tab-panel:nth-child(3),
.page-content.tabs:has(> input:nth-child(7):checked) ~ .tab-panels > .tab-panel:nth-child(4),
.page-content.tabs:has(> input:nth-child(9):checked) ~ .tab-panels > .tab-panel:nth-child(5),
.page-content.tabs:has(> input:nth-child(11):checked) ~ .tab-panels > .tab-panel:nth-child(6)
{
    display: block;
}

.tabset label
{
    position: relative;
    display: inline-block;
    padding: 2rem 2rem;
    border-bottom: 0;
    cursor: pointer;
    font: bold 1.6rem Univers;
}

/*    .tabset > label::after
    {
        content: "";
        position: absolute;
        left: 15px;
        bottom: 10px;
        width: 22px;
        height: 4px;
        background: #8d8d8d;
    }*/

input:focus-visible + label
{
    outline: 2px solid rgba(0,102,204,1);
    border-radius: 3px;
}

.tabset label:hover,
.tabset input:focus + label,
.tabset input:checked + label
{
    color: white;
    background: black;
}

    .tabset label:hover::after,
    .tabset input:focus + label::after,
    .tabset input:checked + label::after
    {
        background: #06c;
    }

.tabset input:checked + label
{
    border-color: #ccc;
    margin-bottom: -1px;
}

.tab-panels
{
    border-top: 4px solid black;
}

/* Challenges */

#footer .challenge
{
    background-color: #fff;
    color: #000;
}

.note
{
    font: 500 18px/30px Univers;
    padding: 40px 60px 40px 60px
}


.bi
{
    width: 32px;
    height: 32px;
    display: inline-block;
    background: url('../images/arrow-right-circle.svg');
    background-size: contain;
}

    .bi svg path
    {
        stroke-width: 3px;
    }

.bi
{
    transition: transform 0.2s ease-in-out;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: transform;
}

.challenge-page
{
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: -50px !important;
    background: #000;
    color: #fff;
}

/*#main-content.challenge-main, #footer.challenge-footer
{
    margin-right: -50px !important;
    margin-left: -50px !important;
}*/

section#challenge-header
{
    max-width: 1044px;
    padding: 20px 20px;
    width: 100%;
    margin: 0 auto;
}

div.challenge-panel
{
    --box-shadow-colour: #743962;
    --border-colour: #743962;
    border: 0.5em solid var(--border-colour);
    border-style: solid;
    border-width: 0.5em;
    border-radius: 1em;
    padding: 1.75em 1em 1em 1em;
    width: 60%;
    box-shadow: 1em 1em var(--box-shadow-colour);
    margin: auto;
    position: relative;
    display: inline-block;
}

    div.challenge-panel.selected, div.challenge-panel.hidden
    {
        margin: 1.5em 0;
    }

        div.challenge-panel.selected span.selection-close:before
        {
            content: '✕';
            font-size: large;
            font-weight: 800;
        }

        div.challenge-panel.selected span.selection-close
        {
            position: absolute;
            top: 0.5em;
            right: 0.5em;
            cursor: pointer;
        }

    div.challenge-panel.dashboard
    {
        margin: 1.5em 0;
    }

        div.challenge-panel.dashboard > .btn-txt
        {
            font: 400 16px Univers;
            position: absolute;
            bottom: 0;
            right: 1em;
        }

div.challenge-list * a
{
    text-decoration: none;
}

    div.challenge-list * a:hover
    {
        text-decoration: underline;
    }

section#challenge
{
    max-width: 1044px;
    padding: 0px 20px;
    width: 100%;
    margin: 0 auto;
}

a.continue::before
{
    content: url('../images/20percent.svg');
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    top: 3.5em;
    right: 5em;
}

div.logbook-panel
{
    --box-shadow-colour: #743962;
    --border-colour: #743962;
    border: 0.5em solid var(--border-colour);
    border-style: solid;
    border-width: 0.5em;
    border-radius: 1em;
    padding: 1.25em 1em 1em 1em;
    width: 60%;
    box-shadow: 1em 1em var(--box-shadow-colour);
    margin: 1em auto;
    position: relative;
    display: inline-block;
}

div.challenge-grid
{
    display: grid;
    grid-template-columns: 10% 90%;
    margin: 0 auto;
    min-height: 900px;
    max-width: 1044px;
}

div.grid-col-menu
{
    grid-column: 1 / 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    color: white;
    padding-top: 2rem;
}

.grid-col-menu-item
{
    text-align: center;
    font: 400 25px/1 Univers;
    background-color: black;
    height: 75px;
    width: 75px;
    display: flex;
}

    .grid-col-menu-item .selector
    {
        width: 10%;
        background-color: black;
    }

.selector.challenge.selected
{
    background-color: #FFCE3D;
}

.selector.strengths.selected
{
    background-color: #058254;
}

.selector.different.selected
{
    background-color: #FF5E38;
}

.selector.actions.selected
{
    background-color: #743962;
}

.grid-col-menu-item-img-container
{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

div.grid-col-content
{
    grid-column: 2 / 3;
    padding-top: 2rem;
}

.selection-page .challenge-text
{
    margin-top: 15%;
    padding: 1em;
    text-align: left;
    max-width: 58%;
}

.selection-page.challenge
{
    background-image: url('../images/challenges/circle-yellow.svg');
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: 50% 20%;
}

.challenge-editor-container
{
    width: 60%;
    height: 26em;
    background-color: white;
    border: 1px solid black;
    align-self: end;
    margin-right: 4rem;
}

.challenge-editor-header
{
    padding: 1em;
    color: white;
    background-color: black;
    display: flex;
    align-items: center;
    height: 40%;
    text-align: left;
}

.challenge-editor-header-question
{
    transform: scale(0.6);
    padding: 1rem;
}

.challenge-editor-overflow
{
    overflow-y: auto;
    height: 60%;
}

.editor.general-editor
{
    font-family: 'Courier Prime', monospace;
    font-size: larger;
}

.challenge-button-container
{
    margin-top: 0.5rem;
    align-self: end;
    margin-right: 4rem;
    display: flex;
    column-gap: 0.5rem;
}

.challenge-button
{
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

    .challenge-button img
    {
        transform: scale(0.6);
    }

    .challenge-button.previous
    {
        width: 4rem;
        justify-content: center;
    }

        .challenge-button.previous img
        {
            transform: scale(0.6) scaleX(-1);
        }

    .challenge-button.next
    {
        width: 16rem;
    }

.challenge-button-text
{
    flex-grow: 1;
}

.selection-page.challenge.bridge
{
    background-size: 40%;
    background-position: 90% 10%;
}

.challenge-intro-bridge
{
    text-align: left;
    padding-left: 4rem;
}

.who-are-you-container
{
    text-align: left;
    padding-left: 4rem;
    z-index: 2;
}

    .who-are-you-container h1
    {
        text-decoration: underline;
    }

.who-are-you-text
{
    width: 60%;
}

.you-are-container
{
    text-align: left;
    align-self: end;
    position: relative;
    width: 60%;
}

.you-are-square img
{
    position: absolute;
    width: 90%;
    z-index: 1;
    left: -3rem;
    top: -6rem;
}

.you-are-content
{
    width: 100%;
    margin-top: 1rem;
    border: 2px solid black;
    position: relative;
    background-color: white;
    z-index: 2;
    padding: 2em;
}







/*    .you-are-container::after
    {
        content: "";
        background-image: url('../images/challenges/rectangle-green.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom center;
        position: absolute;
        top: -100px;
        bottom: -100px;
        left: -100px;
        right: -100px;
        z-index: -1;
    }*/

.you-are-container h1,
.you-are-container h3
{
    color: #058254;
    margin-bottom: 0;
}

.you-are-container-text
{
    padding-top: 1rem;
}

.what-does-different-look-like-container
{
    text-align: left;
    padding-left: 4rem;
    z-index: 1;
    position: relative;
}

    .what-does-different-look-like-container h1
    {
        text-decoration: underline;
    }

.different-look-like-text
{
    width: 60%;
}

.different-table-container
{
    text-align: left;
    padding-left: 4rem;
    z-index: 2;
}

.different-table-explainer
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.different-table-explainer-header
{
    width: 60%;
}

    .different-table-explainer-header h5
    {
        padding-bottom: 1rem;
    }

    .different-table-explainer-header h2
    {
        color: #FF5E38;
        text-decoration: underline;
    }

.different-look-like-header
{
    position: relative;
    z-index: 1;
}

.different-look-like-text
{
    position: relative;
    z-index: 1;
}

    .different-look-like-text h5
    {
        padding-bottom: 1rem;
    }

.different-triangle
{
    position: relative;
    z-index: 0;
    top: -7rem;
    left: 33rem;
    transform: scale(9);
}

.middle-explainer
{
    max-width: 30%;
    color: #FF5E38;
}

.different-tab-content
{
    width: 80%;
    min-height: 40em;
    padding: 1rem;
    text-align: left;
}


.tabbed-editor.different label
{
    color: white;
    background: black;
}

.tabbed-editor.different input[type="radio"]:checked + label
{
    color: black;
    background: #FF5E38;
}

.different-table-container .editor.ql-container.ql-bubble
{
    font-family: 'Courier Prime', monospace;
    font-size: larger;
    height: 10rem;
    text-align: left;
}

.bridge2-container
{
    text-align: left;
    padding-left: 4rem;
    z-index: 1;
    position: relative;
}

/* ------------------------------ */
.menu-strength img
{
    height: 50px;
    width: 50px;
}

div.card-container
{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: end;
    max-width: 80%;
    padding: 1rem 1rem;
    border: 2px solid black;
    margin-top: 0.5rem;
}

div.challenge-card-content
{
    font-size: 1rem;
    font-family: Univers;
}


button.close-card-button
{
    font: 1rem bold;
    font-family: Univers;
}




div.card-flip
{
    display: grid;
    grid-template: 1fr / 1fr;
    grid-template-areas: 'faces';
    transform-style: preserve-3d;
    transition: all 0.7s ease;
}

div.frontface
{
    backface-visibility: hidden;
    transform-style: preserve-3d;
    grid-area: faces;
}

div.backface
{
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    grid-area: faces;
}

div.challenge-card
{
    display: flex;
    flex-direction: column;
    --box-shadow-colour: #743962;
    --border-colour: #743962;
    border: 0.5em solid var(--border-colour);
    border-style: solid;
    border-width: 0.5em;
    border-radius: 1em;
    padding: 1.75em 1em 1em 1em;
    width: 500px;
    box-shadow: 1em 1em var(--box-shadow-colour);
    margin: 2em auto;
    color: #000;
    background-color: #fff;
    /*
    transition: z-index, transform calc(0.707s / 4);
    transition-delay*/
}

@media (max-width: 767px)
{
    div.challenge-card
    {
        width: 400px;
    }
}



div.challenge-card-row
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
}

    div.challenge-card-row .start, .continue
    {
        font: 600 22px/1 Univers;
        color: #743962;
        margin-left: auto;
    }

div.challenge-card-progress
{
    display: flex;
    justify-content: right;
    margin-left: auto;
    align-items: center;
}

.challenge-text-front::after
{
    content: url('../../images/arrow-repeat.svg');
    display: inline-block;
    height: 29px;
}

div.progress
{
    margin-left: auto;
}

ul.challenge-card-bullet
{
    font: 400 22px/1 Univers;
    font-size: 16px;
    padding-bottom: 20px;
    list-style-type: disc;
}

.card-container:hover .card-flip
{
    transform: rotateY(180deg);
}

div.pebble
{
    border: 2px solid #78909C; /* Pebble-like border color */
    border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%; /* Creates a more natural pebble shape */
    padding: 20px 20px; /* Adjust for text padding */
    width: 400px; /* Adjust width as needed */
    height: 140px; /* Adjust height as needed */
    resize: none; /* Prevents resizing for textarea */
    outline: none; /* Removes the focus outline */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /* Optional: Adds a subtle shadow for depth */
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow on focus */
    transform: rotate(354deg); /* Adds a slight tilt to avoid perfectly vertical/horizontal sides */
    overflow: hidden;
}

/*content: url('../images/20percent.svg');
position: relative;
display: inline-block;
width: 100%;
height: 100%;
top: 3.5em;
right: 5em;*/

.my-coach-btn-rnd
{
    color: white;
    display: block;
    background-color: black;
    font: bold 1.2rem Univers;
    padding: 1em 2em;
    border: 0;
    border-radius: 3rem;
    margin-bottom: 1rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    font-size: 1.5rem;
    width: 100%;
}

    .my-coach-btn-rnd[disabled]
    {
        background-color: dimgray;
    }

.tabbed-editor-container
{
    z-index: 2;
    border: 1px solid black;
    margin-top: 3rem;
    width: 70%;
    align-self: flex-end;
    height: 24rem;
}

.tabbed-editor-header
{
    padding: 1em;
    color: white;
    background-color: black;
    display: flex;
    align-items: center;
    text-align: left;
    height: 30%;
}

.tabbed-editor-header-text
{
}

.tabbed-editor-header-question
{
    background-color: black;
    transform: scale(0.6);
    padding-right: 1rem;
}

.tabbed-editor
{
    display: flex;
    flex-wrap: wrap;
    height: 70%;
    width: 100%;
}

    .tabbed-editor label
    {
        order: 1;
        display: block;
        padding: 1rem 2rem;
        margin-right: 0.2rem;
        cursor: pointer;
        background: #90CAF9;
        font-weight: bold;
        transition: background ease 0.2s;
    }

    .tabbed-editor.strengths label
    {
        background: #058254;
    }

    .tabbed-editor .tab
    {
        order: 99;
        flex-grow: 1;
        width: 100%;
        height: 100%;
        display: none;
        padding: 1rem;
        background: #fff;
    }

    .tabbed-editor input[type="radio"]
    {
        display: none;
    }

        .tabbed-editor input[type="radio"]:checked + label
        {
            background: #fff;
        }

            .tabbed-editor input[type="radio"]:checked + label + .tab
            {
                display: block;
            }

@media (max-width: 45em)
{
    .tabbed-editor .tab,
    .tabbed-editor label
    {
        order: initial;
    }

    .tabbed-editor label
    {
        width: 100%;
        margin-right: 0;
        margin-top: 0.2rem;
    }
}

/* habits */

.challenge-habit-card-container
{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 1rem;
    padding-left: 4rem;
}

/* Why this matters to me */

.why-this-matters-to-me
{
    text-align: left;
    margin-bottom: 1.2rem;
}

.matters-modal-container {
    padding: 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.matters-modal-header
{
    padding: 0.5rem 0rem;
    color: #743962;
}

    .matters-modal-header h3 
    {
        font-size: 1.4rem;
    }

    .matters-modal a.close-modal
    {
        margin: 30px;
        background-image: url('../images/challenges/modal-close-alt.png');
        background-size: 80%;
    }

.modal-button.matters {
    text-decoration: underline;
    border-radius: 0px;
    padding: 15px 25px;
}

.matters-editor
{
    width: 100%;
    border: none;
}

.dashboard-habit-card-container
{
    display: flex;
    gap: 2rem;
    width: 100%;
    overflow-x: auto;
}

.focus-habit-card-container
{
    display: flex;
    border-bottom: 3px solid black;
    height: 24rem;
    padding: 2rem 0rem 0rem 0rem;
    width: 100%;
    justify-content: space-around;
}

.focus-habit-card-content
{
    width: 40%;
}

#focus-habit-card-text h5
{
    color: #FF5E38;
}

.focus-habit-card-drop-zone
{
    background-image: url("/images/challenges/focus_card_drop.png");
    height: 320px;
    width: 400px;
}

.focus-habit-card-buttons-layout
{
    display: flex;
    flex-direction: column;
}

/* ------------------ */


#focus-habit-feedback-container
{
    min-width: 600px;
}

#feedback-checkboxes
{
    min-width: 6rem;
}

    #feedback-checkboxes input[type=checkbox]
    {
        accent-color: #743962;
    }

.feedback-checkboxes-complete
{
    min-width: 6rem;
}

    .feedback-checkboxes-complete input[type=checkbox]
    {
        accent-color: #74396280;
    }

.mynotes-container
{
    min-width: 600px;
}

.mynotes-container a.close-modal
{
    margin: 30px;
}

#focus-habit-feedback-container a.close-modal
{
    margin: 30px;
}

.focus-habit-feedback-card
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 0rem;
    min-height: 420px;
}

.feedback-area
{
    display: flex;
}

.feedback-note
{
    width: 60%;
}

.feedback-label
{
    font-weight: 800;
}

.feedback-editor
{
    width: 100%;
    border: 1px solid black;
}

.feedback-editor-complete
{
    width: 100%;
    background-color: #9e9e9e3b;
}

.feedback-footer
{
    text-align: right;
}

.challenge-actions-header
{
    text-align: left;
    padding-left: 4rem;
}

    .challenge-actions-header h1
    {
        text-decoration: underline;
        text-align: left;
    }

    .challenge-actions-header h5
    {
        padding-bottom: 1rem;
    }


.habit-card-challenge
{
    border: 0.3rem solid #743962;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 45%;
    padding: 1.2em;
    height: 18rem;
    text-align: left;
}

.habit-card
{
    border: 0.3rem solid #743962;
    border-radius: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 20rem;
    width: 25rem;
    padding: 0.5rem 0.8rem 0.5rem 0.8rem;
    background-color: #743962;
    color: white;
    flex-shrink: 0;
}

.habit-card-focus
{
    background-color: white;
    color: #743962;
}

.habit-card .selected
{
    background-color: #743962;
}

.habit-card-header
{
}

.habit-card-content
{
    text-align: start;
    padding-bottom: 20px;
}

.habit-card-footer
{
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 0;
}

.habit-card-button
{
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background-color: black;
    padding: 10px 20px;
    border-radius: 5px;
}

.dashboard-button-container
{
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

.dashboard-button
{
    background-color: black;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    padding: 1.5rem 6rem;
    border-radius: 5px;
    width: 100%;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
}

    .dashboard-button.challenge
    {
        padding: 1rem 2rem;
    }

    .dashboard-button.complete
    {
        background-color: #FF5E38;
    }

    .dashboard-button.continue
    {
        background-color: #FF5E38;
    }

    .dashboard-button.habit
    {
        background-color: #743962;
    }

.habit-complete
{
    background-color: #FF5E38;
    color: white;
    border-color: #FF5E38;
}

.modal-button-container
{
    padding-top: 1rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.modal-button
{
    background-color: black;
    color: white;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 5px;
}

    .modal-button:disabled
    {
        background-color: dimgrey;
        color: linen;
    }




/* mini guide */

.modal.mini-guide
{
    padding: 0px;
    background-color: #743962;
    min-height: 620px;
}

.modal.mini-guide.print
{
    display: flex;
}

.mini-guide .back-hide
{
    display: none;
}

    .mini-guide.print .back-hide
    {
        width: 500px;
    }

    .mini-guide .front h4,
    .mini-guide .front h2
    {
        color: #743962;
    }

.mini-guide .front-hide
{
    min-height: 640px;
    padding: 10px;
}

.mini-guide.print .front-hide
{
    width: 500px;
}

.mini-guide .front
{
    background-color: #FFFFFF;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 640px;
    border-radius: 8px;
}
    .mini-guide .front .top
    {
        padding: 20px 40px;
    }

    .mini-guide .front .middle
    {
        padding: 20px 40px;
        background-color: #743962;
        margin: 0px;
        color: #FFFFFF;
    }

    .mini-guide .front .bottom
    {
        padding: 20px 40px;
        display: flex;
        flex-direction: row;
    }

        .mini-guide .front .bottom h4
        {
            color: #743962;
        }

    .mini-guide .front .footer
    {
        text-align: center;
        padding-bottom: 20px;
    }

.mini-guide .back-hide
{
    min-height: 640px;
    padding: 10px;
}

.mini-guide .back
{
    background-color: #FFFFFF;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    min-height: 640px;
}

    .mini-guide .back h4
    {
        color: #743962;
    }

.mini-guide .back h5
{
    padding: 10px 0px;
}


.mini-guide .back .top
{
    padding: 20px 30px 0px 30px;
}

.mini-guide .back .middle
{
    padding: 10px 30px 0px 30px;
}

.mini-guide .back .bottom
{
    padding: 20px 0px;
    display: flex;
    flex-direction: row;
}

    .mini-guide .back .bottom h4
    {
        color: #FFFFFF;
    }

.mini-guide .back .footer
{
    text-align: center;
    padding: 20px;
    display: flex;
    justify-content: center;
}

    .mini-guide .back .footer .download
    {
        position: absolute;
        right: 40px;
        bottom: 20px;
        display: flex;
        align-items: end;
    }

        .mini-guide .back .footer .download::before
        {
            content: url('../images/challenges/download_burgundy.png');
            transform: scale(.8);
            display: inline-block;
        }

        .mini-guide .back .footer .download a
        {
            padding: 0 0 4px 5px;
            font-size: 1rem;
            font-weight: bold;
            color: #743962;
            text-decoration: underline;
        }

            .mini-guide .back .footer .download a:hover {
                text-decoration: underline;
            }


            .modal.mini-guide a.close-modal
            {
                margin: 30px;
                background-image: url('../images/challenges/modal-close-alt.png');
                background-size: 80%;
            }

    .modal.mini-guide a.close-modal.invert-img
    {
        background-image: url('../images/challenges/modal-close-alt-dark.png');
    }

.make-it-work-bulb
{
    display: flex;
    align-items: center;
}

.img-bulb
{
    padding-right: 5px;
}

/* ----------- */

.count-icon
{
    -webkit-box-align: center;
    align-items: center;
    background: rgb(148, 148, 148);
    border-radius: 25px;
    color: rgb(255, 255, 255);
    display: flex;
    font-size: 24px;
    font-weight: 500;
    height: 48px;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: normal;
    vertical-align: middle;
    width: 48px;
    margin-right: 0.5rem;
}

button#toggle-challenge-select
{
    margin-left: auto;
}

    button#toggle-challenge-select:disabled g#tick path
    {
        fill: lightgray;
    }

.challenge-reset-panel
{
    position: absolute;
    z-index: 1;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    transition: left 0.2s;
}

.reset-panel-content
{
    display: none;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.challenge-reset-row:nth-child(even)
{
    background-color: #E3E3E3;
}

.challenge-reset-panel.expand
{
    left: 0;
}

.challenge-overlay-panel
{
    display: none;
    background-color: black;
    opacity: 0.5;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
}

.mycoach-link:link, .mycoach-link:visited
{
    text-decoration: underline;
    cursor: pointer;
}

.mycoach-link.x-large
{
    font-size: x-large;
}



.back
{
    display: none;
}

.hide
{
    display: none;
}