@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Lexend+Deca:wght@600&display=swap");

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

html,
body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: 300;
    font-family: Poppins;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1em;
    letter-spacing: 0px;
    color: #333;
}

h2 {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700;
    font-size: 16pt;
    color: #363636;
    line-height: 1.1em;
    padding-bottom: 10px;
}

h1,
h2 {
    margin-right: auto;
    margin-left: auto;
}

h3 {
    font-size: 14pt;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    text-align: center;
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
    /*padding-bottom: 10px;*/
    /*margin: 0 auto 30px auto;*/
    display: inline-block;
}

h4 {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333;
    margin: 1em 0 1em 0;
}

h6 {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 12pt;
    color: #9d9c9a;
    margin: 1em 0 1em 0;
}

p {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1em;
    color: #555;
    margin: 0 0 15px 0;
    padding: 0px;
    line-height: 1.3em;
}

.thumbnail_image img {
    width: 110px;
    border-radius: 500em;
    margin: 0.75em 1em !important;
}

p.left {
    text-align: left;
}

p.right {
    text-align: right;
}

p.center {
    text-align: center;
}

/* header */
.logo-zoala {
    max-width: 100px;
}

/* Logins */

.logins-wrap {
    padding: 20px;
    background: url(../images/img-logins-bg.png) center center no-repeat;
    background-size: 50%;
    text-align: center;
}

.signup-wrap {
    background: url(../images/img-signup-bg.png) top center no-repeat;
    background-size: 13%;
}

.logins {
    width: 100%;
    max-width: 400px;
    padding: 40px 20px;
    margin: 30px auto;
    background: #0e113c;
    border-radius: 10px;
}

.logins p,
.logins h1 {
    color: #efefef;
}

.logins p a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 10px;
}

.ui.checkbox label.tnc {
    text-align: start;
    color: white !important;
}

/* nav */

nav.wrapper {
    padding: 0 0px;
    margin-top: 50px;
}

.data-wrap {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 40px 20px;
    border-radius: 4px;
}

.data-wrap .mood {
    margin-left: 90px;
}

.t-small {
    font-family: "Inter", sans-serif;
    font-size: 11px;
    color: #555;
}

.t-small-2 {
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: #555;
}

.ico-moreinfo {
    width: 100%;
    /* max-width: 15px; */
    max-width: 29px;
}

.ico-moreinfo-web {
    width: 100%;
    max-width: 15px;
}

.ui.secondary.menu {
    margin-left: -10px;
}

/*Title */
.wrapper.title {
    padding-top: 10px;
}

/* Forms */
.dropdown-title {
    font-size: 0.9em;
    color: #555;
}

/*dash stats*/
.stats {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.stats div.column {
    padding: 60px 20px !important;
}

.stats .numbs {
    font-family: "Lexend Deca", sans-serif;
    font-size: 50px;
    color: #333;
    line-height: 1em;
}

/** Client info page **/
.client_info {
    padding-top: 2%;
}

/** Connection page **/
.add_connection {
    border-radius: 100px !important;
    background: #1a1818 !important;
}

.ico-plus {
    width: 17px;
    line-height: 1em;
    margin-right: 8px;
    display: inline-block;
    vertical-align: text-bottom;
}

/*dash stats*/
.wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 10px;
}

.sorting {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.connections {
    border-top: 0px solid rgba(0, 0, 0, 0.1);
    border-bottom: 0px solid rgba(0, 0, 0, 0.1);
}

.connections_name {
    font-family: "Lexend Deca", sans-serif;
    font-weight: 700;
    font-size: 16px;
}

.connections .cards .image {
    width: 110px;
    border-radius: 500em;
    margin: 0.75em 1em !important;
}

.connections .cards > :last-child .image {
    width: 110px;
    border-radius: 500em !important;
    margin: 0.75em 1em !important;
}

.connections .cards .content .label {
    font-size: 10px;
    color: #666;
}

.connections .cards .content .label.right {
    text-align: right;
}

.connections .cards .content .title {
    font-family: "Lexend Deca", sans-serif;
    font-size: 13px;
    margin-bottom: 5px !important;
}

.connections .cards .content .numbs {
    font-family: "Lexend Deca", sans-serif;
    font-size: 15px;
    margin-bottom: 0 !important;
}

.connection-overview h1 {
    margin-top: 0px;
}

.connection_avatar {
    width: 100%;
    max-width: 120px;
    display: inline-block;
    float: right;
}

.connection_avatar img {
    border-radius: 500em;
}

/* DATA / Chart */

.data-wrap .title {
    font-family: "Lexend Deca", sans-serif;
    color: #333;
}

.data-wrap .ui.progress {
    margin: 1em 0;
}

/*Semantic override*/

.ui.pagination.menu {
    box-shadow: none !important;
    border: none !important;
}

.ui.pagination.menu .item {
    margin: 0 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    text-align: center;
}

.ui.pagination.menu .item:last-child {
    margin: 0 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    text-align: center;
}

.ui.pagination.menu .item:before {
    width: 0px !important;
}

.ui.pagination.menu .active.item {
    background: #0e113c !important;
    color: #fff !important;
    box-shadow: none !important;
}

.ui.moreinfo.visible p {
    font-size: 9px !important;
}

.ui.moreinfo.inline {
    display: inline;
}

.indicator-table {
    width: 100%;
}

.indicator {
    /* width: 35px; */
    width: 40px;
    opacity: 0.2;
}

.indicator-web {
    width: 55px;
    opacity: 0.2;
}

.happiness-table-card {
    padding-left: 20px;
}

.happiness-table .indicator.selected {
    opacity: 1;
    /* filter: invert(71%) sepia(58%) saturate(4065%) hue-rotate(154deg) brightness(93%) contrast(98%); */
    background-color: #00A4DF;
}

.confident-table2 {
    width: 35%;
    padding-left: 5px;
}

.confident-table2 .indicator.selected {
    opacity: 1;
    /* filter: invert(77%) sepia(69%) saturate(2667%) hue-rotate(344deg) brightness(104%) contrast(97%); */
    background-color: #00A4DF;
}

.confident-table .indicator.selected {
    opacity: 1;
    /* filter: invert(77%) sepia(69%) saturate(2667%) hue-rotate(344deg) brightness(104%) contrast(97%); */
    background-color: #00A4DF;
}

.calmness-table .indicator.selected {
    opacity: 1;
    /* filter: invert(85%) sepia(62%) saturate(590%) hue-rotate(14deg) brightness(91%) contrast(78%); */
    background-color: #00A4DF;
}

.stat-table {
    width: 100%;
}

.stat-table tr td {
    padding: 1rem 1rem;
}

.stat-table td {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
}

.stat-table th {
    background-color: #f9fafa;
    padding: 1rem 1rem;
    font-weight: bold;
}

.stat-table .title {
    background-color: #26B8EB;
}

.stat-table .high {
    background-color: #f0d0d0;
}

.stat-table .medium {
    background-color: #fbf9c7;
}

.stat-table .mild {
    background-color: #cfe4d3;
}

.stat-h2 {
    margin: 5px 0 10px 0;
    font-size: 26px;
}

.stat-h2-web {
    margin: 5px 0 10px 0;
    font-size: 19px;
}

.stat-p {
    margin: 0px 0px 0px 0px;
    font-size: 29px;
}

.stat-p-web {
    margin: 0px 0px 0px 0px;
    font-size: 19px;
}

.stat-p2 {
    margin: 0px 36px 0px 0px;
    padding-right: 30px;
}

.square-high {
    background-color: #f0d0d0;
    display: inline;
    padding-left: 20px;
}

.square-medium {
    background-color: #fbf9c7;
    display: inline;
    padding-left: 20px;
    margin-left: 20px;
}

.square-mild {
    background-color: #cfe4d3;
    display: inline;
    padding-left: 20px;
    margin-left: 20px;
}

.words-table {
    width: 100%;
}

.words-table tr td {
    padding: 1rem 1rem;
}

.words-table td {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
}

table .right {
    text-align: right;
}

table .left {
    text-align: left;
}

table .center {
    text-align: center;
}

/** Account page **/

.account.textfield {
    top: 321px;
    left: 337px;
    width: 294px;
    height: 51px;
    /* UI Properties */
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    opacity: 1;
    margin-right: 15px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.account.textfield.wide {
    width: 608px;
}

.btnAccount {
    /* Layout Properties */
    top: 504px;
    left: 337px;
    width: 294px;
    height: 51px;
    /* UI Properties */
    background: var(--unnamed-color-0bb7eb) 0% 0% no-repeat padding-box;
    background: #0bb7eb 0% 0% no-repeat padding-box;
    border-radius: 6px;
    opacity: 1;
    border: none;
    margin: 4px 2px;
}

.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    font-size: 15px;
    font-family: "Inter", sans-serif;
}

.cart-footer {
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

#collapse {
    width: 100%;
    height: 200px; /* FIXED SIZE REQUIRED */
    transition: all 0.3s;
}

#collapse.hide {
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.alert-success {
    color: #0f5132;
    background-color: #bfeef8;
    border-color: #badbcc;
}

.alert-danger {
    color: #f42424;
    font-size: 13px;
    float: left;
    margin-bottom: 10px;
    width: 100%;
}

.alert-error {
    color: #f42424;
    background-color: #f8bfbf;
    border-color: #badbcc;
}

.alert {
    position: relative;
    padding: 10px 10px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    width: 610px;
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}

.exitButton {
    display: inline-block;
    float: right;
}

/** Progress Bar **/
.single-progressbar {
    margin-bottom: 10px;
}

.progressbar {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 25px;
    position: relative;
    background-color: #f4f4f4;
}

.proggress {
    height: 8px;
    width: 0.5em;
    background-color: #ff0;
}

.percentCount {
    float: right;
    margin-top: -42px;
    clear: both;
    font-weight: 700;
    font-size: 13px;
    color: #777777;
}

.legend {
    /* width: 2rem;
    height: 0.45rem;
    display: inline-block;
    border-radius: 1.1rem;
    margin-bottom: 0.12rem;
    margin-right: 0.8rem;
    vertical-align: middle;*/
    width: 3rem;
    height: 1rem;
    display: inline-block;
    border-radius: 1.1rem;
    margin-bottom: 0.4rem;
    margin-right: 0.9rem;
    vertical-align: middle;
}

.l-self-actualisation {
    background-color: #3366cc !important;
}

.l-esteem-needs {
    background-color: #dc3912 !important;
}

.l-belongingness-needs {
    background-color: #ff9900 !important;
}

.l-safety-needs {
    background-color: #109618 !important;
}

.l-physiological-needs {
    background-color: #990099 !important;
}

.center-div {
    margin: auto;
    width: 60%;
    padding: 10px;
}

.center-div-pie {
    margin: auto;
    width: 70%;
    /* padding: 10px;*/
}

.center-div-pie-mood {
    margin: auto;
    width: 70%;
    /* padding: 10px;*/
}

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

.bottom-space {
    margin-bottom: 30px;
}

mood-chart {
    margin-left: 90px;
}

mood-average-margin-1 {
    margin-bottom: 0px;
}

mood-average-margin-2 {
    margin-top: 5px;
}

.bar {
    width: 100%;
    height: 7px;
    border-radius: 10px;
    color: white;
    text-align: center;
    margin-bottom: 20px;
}

.open {
    height: 100%;
    background-color: #3366cc;
    float: left;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.conscientious {
    height: 100%;
    background-color: #dc3912;
    float: left;
}

.extraver {
    height: 100%;
    background-color: #ff9900;
    float: left;
}

.agreeable {
    height: 100%;
    background-color: #109618;
    float: left;
}

.neurotic {
    height: 100%;
    background-color: #990099;
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.self1 {
    height: 100%;
    background-color: #3366cc;
    float: left;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.esteem1 {
    height: 100%;
    background-color: #dc3912;
    float: left;
}

.belongingness1 {
    height: 100%;
    background-color: #ff9900;
    float: left;
}

.safety1 {
    height: 100%;
    background-color: #109618;
    float: left;
}

.physiological1 {
    height: 100%;
    background-color: #990099;
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.self2 {
    height: 100%;
    background-color: #3366cc;
    float: left;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.esteem2 {
    height: 100%;
    background-color: #dc3912;
    float: left;
}

.belongingness2 {
    height: 100%;
    background-color: #ff9900;
    float: left;
}

.safety2 {
    height: 100%;
    background-color: #109618;
    float: left;
}

.physiological2 {
    height: 100%;
    background-color: #990099;
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.self3 {
    height: 100%;
    background-color: #3366cc;
    float: left;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.esteem3 {
    height: 100%;
    background-color: #dc3912;
    float: left;
}

.belongingness3 {
    height: 100%;
    background-color: #ff9900;
    float: left;
}

.safety3 {
    height: 100%;
    background-color: #109618;
    float: left;
}

.physiological3 {
    height: 100%;
    background-color: #990099;
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.self4 {
    height: 100%;
    background-color: #3366cc;
    float: left;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.esteem4 {
    height: 100%;
    background-color: #dc3912;
    float: left;
}

.belongingness4 {
    height: 100%;
    background-color: #ff9900;
    float: left;
}

.safety4 {
    height: 100%;
    background-color: #109618;
    float: left;
}

.physiological4 {
    height: 100%;
    background-color: #990099;
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.self5 {
    height: 100%;
    background-color: #3366cc;
    float: left;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.esteem5 {
    height: 100%;
    background-color: #dc3912;
    float: left;
}

.belongingness5 {
    height: 100%;
    background-color: #ff9900;
    float: left;
}

.safety5 {
    height: 100%;
    background-color: #109618;
    float: left;
}

.physiological5 {
    height: 100%;
    background-color: #990099;
    float: left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.ui.grid .space {
    margin-left: 100px;
    margin-bottom: 10px;
}

.image-alert {
    float: right;
    width: 10%;
}

/*
CSS styling for mobile dashboard for adolescents
*/

.heading-adol {
    font-size: 42px;
}

.heading-adol-web {
    font-size: 28px;
}

.subheading-adol {
    font-size: 30px;
}

.subheading-adol-web {
    font-size: 19px;
}

.description-adol {
    font-size: 25px;
}

.description-adol-web {
    font-size: 16px;
}

.legend-text-adol {
    font-size: 23px;
}

.legend-text-adol-web {
    font-size: 16px;
}

@media (min-width: 1024px) {
    .ui.grid .space {
        margin-left: 50px;
        margin-bottom: 10px;
    }
}

@media (max-width: 1024px) {
    .logins-wrap {
        background: url(../images/img-logins-bg.png) center center no-repeat;
        background-size: 100%;
    }

    .signup-wrap {
        background: url(../images/img-signup-bg.png) top center no-repeat;
        background-size: 30%;
    }

    .center-div-pie {
        margin: auto;
        width: 100%;
        padding: 0px;
    }

    .center-div {
        margin: auto;
        left: 25px;
    }
}

@media (max-width: 768px) {
    .connection_avatar img {
        float: left !important;
    }
}

@media (min-width: 768px) {
}

@media (max-width: 550px) {
    .signup-wrap {
        background: url(../images/img-signup-bg.png) top center no-repeat;
        background-size: 50%;
    }

    nav.wrapper {
        padding: 0 0px;
    }
}