:root {
    --main: #957BD0;
    --secondary: #43B5E3;
    --navy: #031F40;
    --skyblue: #43B5E3;
    --mauve: #957BD0;
    --purple: #512F6C;
    --white: #FFFFFF;
    --black: #000000;
    --yellow: #F9E254;
    --peach: #FFBEA1;
    --red: #D07B7B;
    --green: #7BD0D0;
    --onceanblue: #4F869E;
    --greenIcon: #24936E;
    --gray: #9E9E9E;
    --gray-light: #E0E0E0;
    --select-border: #957BD0;
    --select-focus: #031F40;
    --select-arrow: var(--select-border);
    --sidebar-width: 280px;
    --page-background: #F9F9F9;
    --main30: #957BD04C;
    --main50: #957BD07F;
}

body {
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: auto;
    font-family: 'proxima_nova', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #4d4d4d;
    text-align: left;
    background-color: var(--page-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'effra_bold', Arial, Helvetica, sans-serif;
    margin: 0 0 1rem;
}

b,
strong {
    font-family: 'proxima_nova_bold', Arial, Helvetica, sans-serif;
    font-weight: normal;
}

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

a:hover {
    text-decoration: underline;
}

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

::-moz-selection {
    /* Code for Firefox */
    color: var(--white);
    background: var(--main);
}

::selection {
    color: var(--white);
    background: var(--main);
}

p {
    margin: 0 0 1rem;
}

.flex-container,
.flex-container-vertical,
.body-container,
.page-container,
.profile-container,
main,
section,
.tile-container,
.tile,
.tile-front,
.tile-back,
.page-back,
.profile-form-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-container-vertical,
.body-container,
header,
.logo,
main,
.tile-container,
.tile,
.tile-front,
.tile-back,
.profile-form-group {
    flex-direction: column;
}

.hide {
    display: none !important;
}


footer {
    background-color: var(--page-background);
    padding: 1rem;
    text-align: center;
    color: var(--navy);
    font-size: .75rem;
    line-height: 1.5;
    z-index: 1;
}

footer .copyright {
    margin: 0;
}

.btn {
    border: none;
    color: white;
    padding: 0.6em 1.2em;
    border-radius: 0.4em;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
    box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
}

.btn:active {
    box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)
}

.btn.disabled {
    pointer-events: none;
    opacity: .6;
}

.btn-primary {
    background-color: var(--main);
}

.btn-secondary {
    background-color: var(--secondary);
}

.btn-danger {
    background-color: var(--red);
}

.btn-default {
    background-color: var(--gray);
}

.btn-sm {
    padding: 0.55em 1.2em .45em;
    font-size: .8rem;
}

.btn .icon {
    margin-right: .5em;
    font-size: 1.2rem;
}

button[data-provider-id=password] {
    background-color: var(--mauve) !important;
}

button[data-provider-id=phone] {
    background-color: var(--skyblue) !important;
}

.under-construction {
    cursor: progress !important;
    pointer-events: none;
    display: none;
}

.alert {
    position: fixed;
    top: 24px;
    right: 0;
    width: 25em;
    padding: 1.25em;
    border-radius: .5em;
    background-color: var(--red);
    color: white;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.6s ease-in-out, transform .3s ease-in-out, box-shadow .3s linear;
    margin-bottom: 15px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20);
    z-index: 999;
}

.alert:hover {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.20);
}

.alert.show {
    opacity: 1;
    transform: translateX(-24px);
}

.alert.success {
    background-color: var(--main);
    background-image: linear-gradient(140deg, var(--main) 0%, var(--secondary) 50%, var(--main) 75%);
}

.alert.info {
    background-color: var(--skyblue);
}

.alert.warning {
    background-color: #ff9800;
}

.alert.error {
    background-color: var(--red);
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}


.dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    height: 100vh;
    z-index: 998;
    transition: opacity 0.3s ease-in-out 0.3s;
}

.dialog-backdrop.backstage {
    width: 0;
    height: 0;
    opacity: 0;
    z-index: -1;
    user-select: none;
    pointer-events: none;
}


.dialog-backdrop.show {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.dialog-box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 30em;
    max-height: fit-content;
    transform: translate(-50%, -25%);
    background-color: var(--page-background);
    border-radius: .5em;
    padding: 1em 1.25em;
    opacity: 0;
    z-index: 999;
    transition: all 0.3s ease-in-out;
}

.dialog-box.backstage {
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

.dialog-box.show {
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.3s ease-in-out 0.3s;
}

.dialog-box-title {
    font-family: 'effra_bold', Arial, Helvetica, sans-serif;
    font-size: 21px;
    line-height: 1.15;
    /* margin-bottom: .5em; */
}

.dialog-box-title .icon {
    font-size: 21px;
    position: relative;
    top: 2px;
}

.dialog-box-content {
    line-height: 1.5;
    padding: .5em 0;
    /* margin-bottom: 1em; */
    border-top: 1px solid rgb(0, 0, 0, 0.1);
}

.dialog-box-content input[type=text],
.dialog-box-content input[type=email],
.dialog-box-content textarea {
    width: 100%;
    border: 2px solid var(--main50);
    padding: .5em;
    border-radius: .3em;
    transition: boder 0.3s ease-in-out;
}

.dialog-box-content input[type=text]:focus,
.dialog-box-content input[type=email]:focus,
.dialog-box-content textarea:focus {
    border: 2px solid var(--main);
}

.dialog-box-content input[type=text]:focus-visible,
.dialog-box-content input[type=email]:focus-visible,
.dialog-box-content textarea:focus-visible {
    outline: none;
}

.dialog-box-content textarea {
    font-family: Arial, Helvetica, sans-serif;
    width: 440px !important;
    min-height: 5vh !important;
    max-height: 50vh !important;
}


.dialog-box-content .character-count {
    font-size: .75rem;
    color: var(--navy);
    margin: -.5em 0 0;
}

.dialog-box-content .form-group {
    margin-bottom: .5em;
}

.dialog-box-content .form-control.disabled {
    opacity: .5;
    pointer-events: none;
}

.dialog-box-content .form-check-inline {
    margin: .25em;
    /* padding-top: 5px; */
    /* padding-bottom: 5px; */
}

.dialog-box-content .form-check-input[type=radio] {
    position: absolute;
    left: -9999px;
}

.dialog-box-content .form-check-input[type=radio]+label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.dialog-box-content .form-check-input[type=radio]+label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em;
    height: 1.25em;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.dialog-box-content .form-check-input[type=radio]+label::after {
    content: '';
    width: 0.75em;
    height: 0.75em;
    background: var(--main);
    position: absolute;
    top: 50%;
    left: .25em;
    transform-origin: 50% 0%;
    transform: translateY(-50%);
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.dialog-box-content .form-check-input[type=radio]:not(:checked)+label::after {
    opacity: 0;
    -webkit-transform: scale(0) translateY(-50%);
    transform: scale(0) translateY(-50%);
}


.dialog-box-content .form-check-input[type=radio]:checked+label::after {
    opacity: 1;
    -webkit-transform: scale(1) translateY(-50%);
    transform: scale(1) translateY(-50%);
}


.dialog-box-content input[type="radio"]:focus {
    outline: max(2px, 0.15em) solid var(--main);
    outline-offset: max(2px, 0.15em);
}


.dialog-box-button {
    margin-top: .5em;
    justify-content: flex-end;
    gap: 1em;
}

.body-container {
    /* justify-content: center; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.page-container {
    flex: 1 1 auto;
    position: relative;
}

.login-container {
    margin-top: 75px;
    text-align: center;
}

.profile-container {
    flex: 1 1 auto;
    justify-content: center;
    background: var(--page-background);
}

.profile-page-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.page-back {
    align-items: center;
    cursor: pointer;
}

.page-back .material-symbols-outlined {
    margin-right: .25em;
    font-size: 16px;
}

.profile-page-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    background: var(--page-background);
    gap: 2.5rem;
    z-index: 1;
    transition: all .5s ease-in-out;
}

.profile-page {
    flex: 0 0 100%;
}

.profile-page>div {
    max-width: 1020px;
    margin: 5px auto;
    padding: 0 15px;
}

.profile-title {
    font-family: 'effra', Arial, Helvetica, sans-serif;
    margin: 50px 0 10px;
    font-size: 2.5rem;
    font-weight: 500;
    justify-content: center;
    color: #999999;
}

.profile-header,
.profile-content-wrap {
    gap: 1.5em;
}

.profile-header div {
    flex: 1 1 0px;
}

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

.profile-content-wrap {
    height: calc(100vh - 400px);
    min-height: 300px;
}

.profile-content {
    height: 100%;
    position: relative;
    background: #f7f7f7;
    padding: 1em 2em;
    border-radius: .5em;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20);
}

.profile-agree {
    color: #888;
    text-transform: uppercase;
    max-width: 990px;
    margin: 10px auto;
    text-align: center;
    user-select: none;
}

.profile-checkbox-wrap {
    padding: .5em 2em;
}

.profile-checkbox {
    position: relative;
    cursor: pointer;
    padding-left: 2em;
    font-size: 1em;
    line-height: 1.5em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.profile-checkbox:hover .profile-checkmark {
    background-color: #C9BCE7;
}

.profile-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.profile-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.25em;
    width: 1.25em;
    background-color: var(--gray-light);
}


.profile-checkbox input:checked~.profile-checkmark {
    background-color: var(--main);
}

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

/* Show the checkmark when checked */
.profile-checkbox input:checked~.profile-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.profile-checkbox .profile-checkmark:after {
    left: 0.4em;
    top: 0em;
    width: 0.5em;
    height: 1em;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.profile-form {
    max-width: 550px;
    padding: 0 2em;
    margin: 0 auto;
}

.profile-form label {
    text-transform: uppercase;
}

.profile-form .required {}

.profile-form .required.error {
    color: #B00020;
}

.profile-form .required.error label {}

.profile-form .required.error label::after {
    content: '*';
}

.profile-form .required.error .error-message {
    display: block;
}

.profile-form .required.error .help-text {
    display: none;
}

.profile-form-group {}

.profile-form-footer {
    margin-top: 2em;
}


.help-text,
.error-message {
    font-size: .6em;
    width: 100%;
    position: absolute;
}

.error-message {
    display: none;
}

.perfenct-checkbox-container {}

.perfenct-checkbox .perfenct-checkbox input[type=checkbox] {}

.perfenct-checkbox input[type=checkbox]:checked {}

.float-input-container {
    border-bottom: solid 1px #ccc;
    position: relative;
    margin: .5em 0 1em;
    width: 100%;
}

.float-input-container .prefix {
    position: absolute;
    top: 1em;
    width: 2em;
    display: none;
}

.float-input-container .prefix+input {
    margin-left: 2em;
}

.float-input-container.active .prefix {
    display: block;
}

.float-input-container .suffix {
    position: absolute;
    top: 1em;
    right: 0;
    width: 2em;
    display: none;
}

.float-input-container .suffi~input {
    margin-left: 2em;
}

.float-input-container.active .suffix {
    display: block;
}

.float-input-container .icon {
    color: var(--main);
}

.float-input-container input {
    background: var(--page-background);
    border: none;
    font-size: 1em;
    margin: 1.1em 0 0;
    outline: 0;
    width: 100%;
    min-height: 1.5em;
    z-index: 1;
}

/* Chrome, Safari, Edge, Opera */
.float-input-container input::-webkit-outer-spin-button,
.float-input-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.float-input-container input[type=number] {
    -moz-appearance: textfield;
}


.float-input-container select {
    /* position: absolute; */
    background: var(--page-background);
    min-width: 15ch;
    font-size: 1em;
    margin: 1.1em 0 0;
    outline: 0;
    width: 100%;
    min-height: 1.5em;
    cursor: pointer;
    border: none;
    overflow: hidden;
    /* appearance: none; */
}

.float-input-container select::after {
    content: "";
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.float-input-container select option:hover,
.float-input-container select option:focus,
.float-input-container select option:active,
.float-input-container select option:checked {
    background-color: var(--main) !important;
    color: var(--white);
    box-shadow: 0 0 10px 100px var(--main) inset;
}

option:hover {
    background-color: yellow;
}

/*            .float-input-container select option:checked:after {
                content: attr(title);
                background: #666;
                color: var(--main);
                position: absolute;
                width: 100%;
                left: 0;
                border: none;
            }*/


/*        .float-input-container option:hover {
            background-color: var(--main);
        }

        .float-input-container option:active {
            background-color: var(--main);
        }*/
/* Style the arrow inside the select element: */
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

.select-selected {
    /* color: #ffffff; */
    margin: 1.1em 0 .25em;
    min-height: 1.5em;
    /* border: 1px solid transparent; */
    /* border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; */
    cursor: pointer;
}

/* Style items (options): */
.select-items {
    position: absolute;
    background-color: #957BD0;
    color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform .15s ease-in-out;
}

.select-items div {
    min-height: 1.5em;
    padding: .25em .5em;
    cursor: pointer;
    transition: background-color .25s ease-in-out;
}

.select-hide {
    display: none;
}

.select-open {
    transform: scale(1);
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}


.float-input-container>label {
    position: absolute;
    left: 0;
    transform-origin: top left;
    transform: translate(0, 1.2em) scale(1);
    transition: all .15s ease-in-out;
    cursor: text;
    z-index: 2;
}

label {}

.float-input-container.active label {
    transform: translate(0, 0) scale(.75);
}

.float-input-container::after {
    display: block;
    content: '';
    border-bottom: solid 1px var(--main);
    transform: scaleX(0);
    transition: transform .25s ease-in-out;
}

.float-input-container.active::after {
    transform: scaleX(1);
}

.account-linkage-email {
    justify-content: center;
    margin-top: 2em;
}

.account-sidebar {
    flex: 1 1 25%;
    padding-right: 2em;
}

.account-name {
    text-align: center;
    font-size: large;
    /* font-weight: 700; */
    margin-bottom: .5em;
}

.account-sidebar-nav {
    width: 100%;
}

.account-sidebar-nav nav {}

.account-sidebar-nav nav a {
    position: relative;
    color: #555;
    background-color: #eee;
    border-bottom: 2px solid white;
    padding: .5em 1em;
    text-decoration: none;
}

.account-sidebar-nav nav a:hover {
    background-color: #ddd;
}

.account-sidebar-nav nav a .icon {
    margin-right: 1em;
}

.account-sidebar-nav nav a::before {
    content: "";
    position: absolute;
    left: 3em;
    top: 10%;
    height: 80%;
    border-left: 1px solid #ccc;
}

.account-sidebar-nav nav a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1em;
    width: 0.7em;
    height: 0.7em;
    opacity: 0.6;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    transform-origin: top;
    transform: rotate(45deg) translateY(-50%);
}

.account-sidebar-nav nav a.active {
    font-weight: bold;
}

.account-sidebar-nav nav a.acitve::after,
.account-sidebar-nav nav a:hover::after {
    border-top: 2px solid #444;
    border-right: 2px solid #444;
}

.account-sidebar-nav nav a.active .icon {
    color: var(--main);
}

.account-form-wrap {
    flex: 1 1 75%;
}

.account-form {}

.account-form-title {
    font-size: 20px;
    text-align: center;
}

.page-loader {
    left: calc(50vw+140px)
}

.loader {
    display: none;
    opacity: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    transition: opacity .5s ease-in-out;
}

.loader.page {
    left: calc(50vw + 140px);
}

.loader.show {
    display: block;
}

.loader.show.loading {
    opacity: 1;
}

header {
    background-color: #e0e0e0;
    width: 280px;
    position: fixed;
    top: 0;
    height: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    z-index: 99;
}

.logo {
    margin: 15px 1.7em 10px;
    /* text-align: center; */
}

.site-logo {
    margin: 0.5em 0 0 0;
    padding: 0;
    line-height: 1em;
    font-family: "effra_light", Arial, Helvetica, sans-serif;
    color: var(--main);
    font-size: 2.8em;
    letter-spacing: -.025em;
    cursor: pointer;
}

.site-description {
    color: var(--main);
    margin: 1.25em 0 .5em;
    line-height: 1.15em;
    font-size: 1.1em;
    /* color: #c7c3e6; */
    letter-spacing: -.03em;
}

.nav-wrap {}

.navbar {
    margin: 0;
    padding: 0;
    /* margin-top: 0.3em; */
    font-size: 1.125em;
    font-weight: 400;
    margin-bottom: 1em;
    border-top: solid 1px rgba(0, 0, 0, .1);
}

.nav-item {
    /* display: block; */
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    /* position: relative; */
    transition: background-color .3s ease, color .3s ease;
}

.nav-item.active,
.nav-item:hover {
    background-color: rgba(149, 121, 208, 0.72);
    color: #ffffff;
}

.nav-item div {
    padding: 0.5em 1.5em;
    margin: 0;
    text-decoration: none;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
    position: relative;
    user-select: none
}

.control-panel {
    width: 90%;
    margin: auto;
    color: rgba(128, 128, 128, 1);
    font-weight: 500;
    line-height: 1.2;
}

.control-panel .control-panel-title,
.control-panel .control-panel-body {
    transition: opacity .5s ease-in-out;
}

.control-panel.pending .control-panel-title,
.control-panel.pending .control-panel-body {
    opacity: 0;
}


.control-item {
    margin: 0 0 8px 1.5em;
    user-select: none;
    cursor: pointer;
}

.control-item:hover {
    text-decoration: underline;
}

.control-item .fa {
    width: 1.5em;
    text-align: center;
}

.control-item img {
    opacity: 0.6;
}

.control-item .icon {
    font-size: 16px;
    position: relative;
    margin-right: .25em;
    width: 1em;
    text-align: center;
    top: 2px;
}

.control-panel-title {
    margin-bottom: .75em;
    line-break: anywhere;
    /* transition: opacity .5s ease-in-out; */
}

.control-panel-title.pending {
    opacity: 0;
}

.control-panel-footer {
    font-size: small;
    margin: 1.3em 0 0 30px;
}


.control-project,
.control-rights {
    align-items: center;
    user-select: none;
    cursor: pointer;
}

.control-project img {
    margin-right: 0.3em;
    opacity: 0.6;
}

.control-rights,
.control-about {
    font-size: x-small;
    user-select: none;
    line-height: 1.6;
}


.control-about span {
    cursor: pointer;
}

.control-project:hover,
.control-rights:hover,
.control-about span:hover {
    text-decoration: underline;
}

main,
.main {
    position: relative;
    flex: 1 1 auto;
    background-color: var(--page-background);
    padding-left: 280px;
    width: 100%;
    opacity: 0;
    transition: opacity .5s ease;
}

main.backstage,
.main.backstage {
    z-index: 0;
    height: 0;
    position: fixed;
    user-select: none;
    pointer-events: none;
}

main.active,
.main.active {
    opacity: 1;
}

/*********************************
    Index page
    **********************************/
main section,
.main section {
    flex: 1 1 auto;
    width: 100%;
    position: relative;
    background: var(--page-background);
}

.section-container {
    width: 80%;
    margin: 0 auto;
    padding: 75px 1px 50px;
    justify-content: center;
}

.section-header {
    /* font-weight: 500; */
    margin-bottom: 1em;
}

.section-content {
    width: 100%;
}

.flex-container .section-header {
    width: 39.55%;
    padding-top: 32px;
}

.flex-container .section-content {
    width: 60%;
    padding-left: 3%;
}


.section-title {
    font-family: 'effra_bold', Arial, Helvetica, sans-serif;
    font-size: 2.5rem;
    margin-bottom: 0.5em;
}

.section-title-small {
    font-size: 1.5rem;
    margin-bottom: 0.5em;
}


.section-description {
    /* margin-top: -1px; */
    /* font-size: 20px; */
    line-height: 1.5;
    /* text-align: justify; */
}

.section-footer {
    width: 100%;
    margin-top: 2.5em;
}

.section .footer::after {
    content: '';
}

.tile-container {
    flex-flow: wrap;
    /* gap: 10px; */
}

.tile-container .tile {
    flex: 0 1 36%;
}

.tile-container .tile::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.tile-container .tile.big {
    flex: 0 1 72%;
}

.tile-container .tile.big::after {
    padding-bottom: 50%;
}

.tile-container.column-3 .tile {
    flex: 0 1 30%;
}


.tile-container.column-3 .tile.big {
    flex: 0 1 60%;
}

.tile {
    /* width: 265px; */
    /* height: 265px; */
    background-color: transparent;
    line-height: 1.3;
    /* cursor: pointer; */
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    perspective: 1000px;
}

.tile.prepared {
    transform-origin: center center;
    transform: scale(0.8);
    opacity: 0;
}

.tile.big {
    width: 510px;
}

.tile.locked {
    cursor: not-allowed;
}

.tile.openned {
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.tile.finished {}

.tile.survey.finished .tile-link {
    display: none;
    pointer-events: none;
}

.tile.analytics.finished .tile-link {
    display: block;
    pointer-events: auto;
}

.tile.analytics.finished .tile-description {
    display: none;
}

.tile-inner {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    bottom: 6px;
    border-radius: 10px;
    /*background: #fff;*/
    color: #000;
    text-align: center;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.20);
}

.tile:hover .tile-inner,
.tile.fixed .tile-inner {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.tile.flipped .tile-inner .tile-front,
.tile.fixed .tile-inner .tile-front {
    opacity: 0;
}

.tile.big .tile-front,
.tile.big .tile-back {
    padding: 36px 38px;
    /* font-size: 14px; */
}

.tile .tile-front::before {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: .2em;
    right: .2em;
    font-size: 2rem;
}

.tile.finished .tile-front::before {
    /*content: "\f058";
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    top: 8px;
    right: 15px;
    font-size: 32px;
    color: #008000;*/
    /* content: '';
    background: url(data:image/png;base64,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);
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    z-index: 123123;
    background-size: contain;
    background-repeat: no-repeat; */
    content: 'check_circle';
    color: var(--greenIcon);
}

.tile.locked .tile-front::before {
    content: "lock";
    color: var(--main);
}

.tile.disabled .tile-link {
    pointer-events: none;
}

.tile.disabled .tile-link .icon {
    display: none;
}

.tile.scheduled .tile-front::before {
    content: "event";
    color: var(--greenIcon);
    /* background: linear-gradient(37deg, var(--secondary) 0%, var(--main) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

.tile-front,
.tile-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    padding: 18.5px;
    text-align: left;
    -webkit-transition: opacity 0s linear 0.2s, background .5s ease-in-out;
    transition: opacity 0s linear 0.2s, background .5s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.tile-front {}

.tile-back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    font-size: 14px;
}

.tile-title {
    font-family: 'effra', Arial, Helvetica, sans-serif;
    font-size: 21px;
    margin-right: .8em;
}

.tile-description {
    margin-top: 7px;
    line-height: 1.5;
}

.tile-back-content {
    font-weight: 500;
}

.slider {
    margin-top: 2em;
}

.slider-container {
    width: 100%;
    position: relative;
}

.slider-title {
    /* font-family: 'effra_bold', Arial, Helvetica, sans-serif; */
    text-align: left;
    margin: 0 0 1.6em;
    /* padding: 1em 0 0; */
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.slider-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider-inner {
    gap: 10px;
    position: relative;
    width: 100%;
    /* overflow: hidden; */
    transition: transform .5s ease-in-out;
    /* flex-wrap: wrap; */
}

.tile-link {
    text-transform: uppercase;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    font-size: .9em;
}

.tile-link .fa-stack {
    margin-right: .3em;
}

.tile.analytics .tile-link {
    display: none;
    pointer-events: none;
}


.slide {
    flex: 1 0 0px;
    min-width: 32%;
    max-width: 50%;
    height: 200px;
    padding: .5em 1em;
    background: #fff;
    color: var(--main);
    cursor: pointer;
}

.slide-title {
    font-family: "effra_bold", Arial, Helvetica, sans-serif;
    font-size: 21px;
    line-height: 1;
    margin-bottom: .5em;
}

.slide-content {
    font-size: 14px;
}

.slider-control-container {
    margin-top: .5em;
    justify-content: center;
    align-items: center;
}

.slider-control {
    color: #d9d2db;
    width: 25px;
    justify-content: center;
    cursor: pointer;
}

.slider-control.slider-page {
    width: auto;
}

.slider-control.slider-left,
.slider-control.slider-right {}

.slider-bullet {
    line-height: 100%;
    vertical-align: middle;
    overflow: hidden;
    outline: 0;
    cursor: pointer;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 0 4px;
    border: 1px solid;
    border-radius: 100%;
    transition: border .3s ease-in-out, color .3s ease-in-out;
    color: inherit;
    box-sizing: border-box;
}

.slider-control .icon {
    font-size: 1.5em;
    line-height: 1.5;
    margin-right: .5em;
}

.slider-bullet:hover,
.slider-bullet.active {
    border: 5px solid;
}

#mySurvey {
    min-height: 700px;
    padding-top: 31px;
}

#myAnalytics {
    min-height: 691px;
    background: #646464;
    color: #fff;
}

#myInsights {
    min-height: 655px;
    background: var(--main);
    color: #fff;
}

#myInsights .insight-container {
    display: grid;
}

#myGoals {
    min-height: 100vh;
}

#myGoals .goal-container {
    font-size: .75em;
}

/*********************************
    Qualtircs survey page
**********************************/
#iframeContainer {
    position: fixed;
    top: 0;
    left: 280px;
    right: 0;
    bottom: 0;
    padding: 0;
    width: auto;
    height: auto;
    overflow: hidden;
}

#iframeContainer.backstage {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    opacity: 0;
}

#iframeContainer iframe {
    position: absolute;
    width: 0;
    height: 0;
    border: none;
}

#iframeContainer iframe.active {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

/* More text */
.more-text-container {
    /* margin: -1em 0 1em; */
}

.more-text-container .text-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s ease-in-out;
}

.more-text-container .text-container ul,
.more-text-container .text-container ol {
    margin: 0 0 1em;
    /* padding: 0; */
}


.more-text-container .more-text {
    position: relative;
    color: var(--secondary);
    margin-bottom: 1em;
    cursor: pointer;
    user-select: none;
}

.more-text-container .more-text:hover {
    text-decoration: underline;
}

.more-text-container .more-text::after {
    /* content: ' \f107'; */
    /* font: normal normal normal 16px/1 FontAwesome; */
    /* text-rendering: auto; */
    display: inline-block;
    border-color: var(--secondary) transparent transparent transparent;
    border-style: solid;
    border-width: 0.3125rem 0.3125rem 0 0.3125rem;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    transition: transform .3s ease;
    width: 0;
}

.more-text-container.more .more-text::after {
    /* content: ' \f106'; */
    transform: translateY(-50%) rotate(-180deg);
}

/* Accordion */
.accordion-container {
    margin-bottom: 1rem;
}

.accordion-container .accordion-item {
    border-bottom: solid 1px var(--page-background);
}

.accordion-container .accordion-item .accordion {
    font-family: 'proxima_nova_bold', Arial, Helvetica, sans-serif;
    background-color: var(--main);
    color: #fff;
    padding: .5em 1em .5em 2.5em;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.accordion-container .accordion-item .accordion::before {
    content: '';
    display: block;
    width: .75em;
    height: .75em;
    border-right: solid 3px var(--page-background);
    border-bottom: solid 3px var(--page-background);
    position: absolute;
    top: 0.75em;
    left: 0.75em;
    transform-origin: center center;
    transform: rotate(-45deg);
    transition: all .3s linear;
}


.accordion-container .accordion-item .accordion-content {
    max-height: 0;
    padding: 0 1em;
    overflow: hidden;
    border: 1px solid var(--main);
    border-width: 0 1px 0;
    transition: max-height .3s ease-in-out, padding .3s linear;
}

.accordion-container .accordion-item .accordion-content p {
    margin: 1em 0;
}

.accordion-container .accordion-item.active {
    border-bottom: solid 1px var(--main);
}

.accordion-container .accordion-item.active .accordion::before {
    transform: translate(.1875em, 0em) rotate(45deg);
}

.reference {
    padding-left: 36pt;
    text-indent: -36pt;
}

.card {
    margin: .5em;
    padding: 1.5em 2.5em;
    border-radius: .5em;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.20);
}

.card.grey {
    background: #E3E3E3;
}

.goal-card {
    padding: 1em 1.25em .5em;
    margin-bottom: 1em;
    border-radius: 1em;
    border: 2px solid var(--main);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20);
}

.goal-card .goal-title {
    font-family: 'proxima_nova_bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--main);
    margin-bottom: .5em;
    /* padding-left: 1em; */
    /* display: flex; */
}

.goal-card .goal-title::before {
    /* content: ''; */
    display: block;
    position: absolute;
    width: .5em;
    height: .5em;
    top: 0;
    left: 0;
}

.goal-card .goal-title .goal-update {
    cursor: pointer;
}

.goal-card .goal-title .goal-update:hover {
    text-decoration: underline;
}

.goal-card .goal-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.goal-card .goal-content ul li {
    position: relative;
    margin: 0 0 .5em;
}

.goal-card .goal-content ul li::before {
    content: '';
    display: block;
    width: .5em;
    height: .5em;
    border-right: solid 2px var(--main);
    border-bottom: solid 2px var(--main);
    position: absolute;
    top: 0.5em;
    left: -1.25em;
    transform-origin: center center;
    transform: rotate(-45deg);
    transition: all .3s linear;
}

.goal-card .goal-text {
    margin-bottom: 1em;
}

.goal-card .goal-progress {
    margin-bottom: 1.5em;
}

.goal-title {
    /* padding: .5em; */
}

.goal-title input[type=checkbox] {
    display: none;
    pointer-events: none;
}

.goal-title input[type=checkbox]+label {
    cursor: pointer;
    display: flex;
    align-content: center;
    user-select: none;
}

.goal-title input[type=checkbox]+label svg {
    width: 1.6em;
    stroke: var(--secondary);
    stroke-width: 6px;
    fill: var(--page-background);
    transition: stroke .3s linear;
}

.goal-title input[type=checkbox]+label svg .box {
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    fill: var(--page-background) !important;
    transition: stroke-dashoffset .3s linear;
}

.goal-title input[type=checkbox]+label svg .check {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    fill: none;
    transition: stroke-dashoffset .3s linear;
}

.goal-title input[type=checkbox]+label span {
    padding-top: .1em;
    margin-left: .3em;
    color: var(--secondary);
    transition: color .5s;
}

.goal-title input[type=checkbox]:not(.segment):checked+label svg,
.goal-title input[type=checkbox].segment.checked:checked+label svg {
    stroke: var(--main);
}

.goal-title input[type=checkbox]:checked+label svg .box {
    stroke-dashoffset: 320;
}

.goal-title input[type=checkbox]:not(.segment):checked+label svg .check,
.goal-title input[type=checkbox].segment:not(.pending).checked:checked+label svg .check {
    stroke-dashoffset: 0;
}

.goal-title input[type=checkbox]:not(.segment):checked+label span,
.goal-title input[type=checkbox].segment.checked:checked+label span {
    color: var(--main);
}

.goal-progress-bar {
    width: 61.8%;
    height: 6px;
    border-radius: 3px;
    background: var(--gray-light);
    user-select: none;
}

.goal-progress-bar .goal-progress-bar-fill {
    height: 100%;
    background: var(--main);
    border-radius: inherit;
}

.goal-slider {
    width: 100%;
}

.goal-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: .5em;
    border-radius: .25em;
    background: var(--secondary);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.goal-slider input[type="range"]:hover {
    opacity: 1;
}

.goal-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: var(--main);
    cursor: pointer;
    -webkit-transition: box-shadow .5s;
    transition: box-shadow .5s;
    box-shadow: 0 0 0 0px var(--main30);
}

.goal-slider input[type="range"].active::-webkit-slider-thumb {
    box-shadow: 0 0 0 .5em var(--main30);
}

.goal-slider input[type="range"].active.started::-webkit-slider-thumb {
    box-shadow: 0 0 0 .5em var(--main50);
}

.goal-slider input[type="range"]::-moz-range-thumb {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: var(--main);
    cursor: pointer;
}

.no-goal {
    margin-top: 5em;
    font-size: 1rem;
}

.tabs-container {}

.tabs-header {
    gap: 10px;
    border-bottom: 1px solid #00000013;
    z-index: 0;
}

.tab-header {
    padding: .625em 1.25em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    user-select: none;
    cursor: pointer;
    transition: all .25s ease-in-out;
}

.tab-header.current,
.tab-header:hover {
    background: var(--main);
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.20);
}

.tabs-body-wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: var(--page-background);
    z-index: 1;
}

.tabs-body {
    padding: 1.3em 0;
    position: relative;
    /* overflow: hidden; */
    gap: 2.5rem;
    transition: all .5s ease-in-out;
}

.tab-body {
    flex: 0 0 100%;
}

.tab-body.current {}



.goal-card {
    position: relative;
}

.keyword {
    position: relative;
    display: inline-block;
    border-bottom: 1px dashed black;
    cursor: help;
}

.keyword.icon {
    border-bottom: none;
}

.keyword .keyword-description,
.goal-card .goal-description {
    visibility: hidden;
    background-color: black;
    color: #fff;
    font-size: small;
    text-align: center;
    padding: 5px 8px;
    border-radius: 6px;
    position: absolute;
    width: 360px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.keyword:hover .keyword-description,
.goal-card:hover .goal-description {
    visibility: visible;
}

.card .keyword .keyword-description {
    width: 180px;
}

.enter-animation {
    transition: all .5s ease-in-out;
}

.enter-animation[data-enter-animation="fadeIn"] {
    opacity: 0;
    transform: scale(0.8);
}

.enter-animation[data-enter-animation="true"] {
    opacity: 1;
    transform: none;
}

@media screen and (max-width: 991px) {

    .profile-title {
        margin-top: 10px;
    }

    .profile-header {
        flex-direction: column;
        gap: 10px;
    }

    .profile-header div {}

    .profile-logo {
        order: -1;
    }

    .profile-content-wrap {
        height: calc(100vh - 435px);
        min-height: 350px;
    }
}

@media screen and (max-width: 767px) {

    .profile-header p,
    .profile-content,
    .profile-agree {
        font-size: .85em;
    }

    .profile-header div {}

    .profile-logo {}

    .profile-content-wrap {
        height: calc(100vh - 465px);
        min-height: 350px;
    }

    .profile-content {}
}