:root {
    --purple: #9070A3;
    --red: #E78F6F;
    --green: #93B680;
    --yellow: #F8BD7B ;
    --blue: #6BBCD5;
    --gray: #333333;
    --darkGray: #231F20;
    --white: #DDDEDE;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

html {
}

body {
    font-family: "neulis-sans", sans-serif !important;
    font-weight: 400;
    letter-spacing: .5px;
    font-style: normal;
    background: #848484;
    background: linear-gradient(145deg, rgba(132, 132, 132, 1) 0%, rgba(255, 255, 255, 1) 100%);
    /*background: #333333;
    background: linear-gradient(145deg,rgba(51, 51, 51, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: rgba(189, 189, 189, 1) 100%);
    background: linear-gradient(165deg,rgba(252, 255, 255, 1) 0%, rgba(221, 222, 222, 1) 75%, rgba(189, 189, 189, 1) 100%);*/
}

h3 {
    font-family: "neulis-sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}
p {
    font-weight: 100;
    letter-spacing: 1px;
}
a {
    color:var(--red);
    text-decoration: none;
}

/* Wrapper */

.wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

sup {
    font-size: 10px;
}

/* Sidebar */

#sidebar {
    width: 300px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    padding: 20px;
    transition: all 0.3s;
    background: #333333;
    background: linear-gradient(162deg,rgba(51, 51, 51, 1) 0%, rgba(35, 31, 32, 1) 100%);
}

.sidebar-header {
    padding: 20px 0;
    text-align: center;
    margin: -20px -20px 0 -20px;
}

.logo {
    max-width: 180px;
    height: auto;
    padding: 10px;
}

.text-logo {
    max-width: 200px;
}

#sidebar ul.components {
    padding: 50px 0;
}

#sidebar ul li {
    margin-bottom: 10px;
}
#sidebar ul li a {
    padding: 10px;
    font-size: 14px;
    display: block;
    color: #DDDEDE;
    text-decoration: none;
    transition: all 0.3s;
    font-family: "neulis-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
}

#sidebar ul li a:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 32px;
}

#sidebar ul li.active > a {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    color: var(--yellow);
}

#sidebar ul li:hover > a {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    color: var(--blue);
}

#sidebar ul li:hover a.settings {
    color:var(--green) !important;
}

#sidebar ul li:hover a.logout {
    color:var(--red) !important;
}

#sidebar ul li a i {
    margin-right: 10px;
}

.harmonic-menu-icon {
    float: left;
    margin-right: 10px;
}

.harmonic-menu-item {
    height: 24px !important;
    line-height:24px !important;
}

.harmonic-profile-menu {
    position: absolute;
    width: 85%;
    bottom:-20px;
    left: 20px;
}

.showHide {
    display:none;
}

#mobile-menu {
    display: none;
}

#harmonic-score-container {
    height: 442px !important;
}

@media (max-width:1600px) {
    #sidebar {
        width: 250px;
    }
    .logo {
        max-width: 120px;
    }

    .text-logo {
        max-width: 175px;
    }

    #sidebar ul li {
        margin-bottom:5px !important;
    }

    #sidebar ul li a {
        font-size: 12px;
    }

    #sidebar ul.components {
        padding: 30px 0;
    }
    #harmonic-score-container {
        height: 432px !important;
    }
}

@media (max-width: 690px) {
    #sidebar {
        display: none;
    }
    #mobile-menu {
        float: none;
        display: block;
        width: 100%;
        position: fixed;
        top: 0 !important;
        z-index: 200;
        padding: 10px 15px;
        background: #333333;
        background: linear-gradient(162deg,rgba(51, 51, 51, 1) 0%, rgba(35, 31, 32, 1) 100%);
        border-bottom:4px solid #848484;
    }
    #mobile-menu ul {
        padding: 0;
        margin: 0;
    }
    #mobile-menu li {
        float: left;
        color: var(--white);
        list-style-type: none;
        padding: 0;
        margin:0;
    }
    #mobile-menu li.mobile-logo {
        float:left
    }
    #mobile-menu li.mobile-icon {
        float:right;
        height: 40px;
    }
    #mobile-menu li.mobile-icon span {
        height: 40px;
        font-size: 40px;
        display: inline-block;
        margin-top: 0;
        color: var(--yellow) !important;
    }
    #mobile-menu li img {
        height:26px;
        margin-top: 5px;
    }
    .showHide {
        display:block;
    }
}

/* Profile Layout */

#profile {
    display:flex;
    padding: 12px;
}

.profile {
    margin-left: 20px
}

.profile h3 {
    font-size: 24px;
    font-weight: 600;
}

div.profile-img {
    padding: 8px;
    width: 190px;
    height: 100%;
    background: #9070A3;
    background: linear-gradient(180deg,rgba(144, 112, 163, 1) 0%, rgba(231, 143, 111, 1) 26%, rgba(248, 189, 123, 1) 53%, rgba(147, 182, 128, 1) 78%, rgba(107, 188, 213, 1) 100%);
    border-radius: 50%;
    z-index: 200;
}

img.profile-photo {
    width: 100% !important;
    border-radius: 50%;
}

.profile-details {
    margin-left: -80px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: table;
    border-radius: 20px;
}

.profile-details ul {
    padding: 10px 20px 0 120px;
    list-style-type: none;
    width: 100%;
    font-size: 14px;
    vertical-align: middle;
}

.profile-details ul li {
    border-bottom: solid 1px #444444;
    padding-bottom: 10px;
    padding-top: 5px;
}

.profile-details ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.profile-details ul li span.profile-desc {
    width:180px;
    display: inline-block;
    font-weight: 100;
}

.profile-details ul li span.profile-title {
    display: inline-block;
    text-align: right !important;
}

@media (max-width:690px) {
    #profile {
        display:block;
    }
    .profile-details ul li span.profile-desc {
        width: 55%;
    }
    .profile-details ul {
        font-size: 13px;
    }
    div.profile-img {
        margin: 0 auto 20px;
    }
    .profile-details {
        margin:0;
    }
    .profile-details ul {
        padding:10px 20px 0;
    }
}

/* Harmonic Score Layout */

#harmonic-score-container {
    padding: 40px;
}

.harmonic-message {
    border-top:1px solid #444444;
    margin:20px;
    padding-top:20px;
}

.harmonic-message h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

#harmonic-score-container .harmonic-menu-icon {
    font-size:20px;
}

.harmonic-score {
    padding: 40px;
}

.harmonic-score-details {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

.harmonic-score-details ul {
    padding: 10px 20px;
    list-style-type: none;
    width: 100%;
    font-size: 13px;
}

.harmonic-score-details ul li {
    border-bottom: solid 1px #444444;
    padding-bottom: 10px;
    padding-top: 5px;
    width: 100%;
}

.harmonic-score-details ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.harmonic-score-details ul li span.harmonic-score-desc {
    display: inline-block;
    font-weight: 100;
    width: 50% !important;
}

.harmonic-score-details ul li span.harmonic-score-title {
    display: inline-block;
    text-align: right !important;
    width: 50% !important;
}

.harmonic-score-details ul li span.harmonic-score-title .harmonic-menu-icon {
    float: right;
    width: 20px;
    margin-right: 0;
    color:var(--red);
    cursor: pointer;
}

.harmonic-score-details ul li span.harmonic-score-title .harmonic-menu-icon:hover {
    color:var(--green);
    cursor: pointer;
}

@media (max-width: 690px) {
    .harmonic-message h3 {
        margin-top:10px !important;
        margin-bottom: 20px !important;
        padding:0 !important;
    }
}

/* Content */

#content {
    width: calc(100% - 250px);
    margin-left: 300px;
    padding: 32px;
    min-height: 100vh;
}

@media (max-width:1600px) {
    #content {
        width: calc(100% - 250px);
        margin-left: 250px;
        padding: 20px 10px;
    }
    #harmonic-triad-container .col-4,
    #harmonic-profile-container .col-4 ,
    #harmonic-profile-container .col-8 {
        width:50%;
    }
}

/* Responsive */

@media (max-width: 690px) {
    #content {
        width: 100%;
        margin: 0;
        padding: 0 !important;
    }

    #content .container-fluid {
        margin-top: 75px;
    }

    .col-4, .col-8 {
        width: 100%;
    }

    .card {
        margin-bottom: 15px !important;
    }
    #harmonic-triad-container .col-4,
    #harmonic-profile-container .col-4 ,
    #harmonic-profile-container .col-8 {
        width:100%;
    }
}

/* Radar Charts */

.radar-chart {
    height: 450px;
}

.harmonic-wave {
    text-align: center;
}

.harmonic-wave button {
    margin-top:-50px;
    background: rgba(0, 0, 0, 0.3) !important;
    color:var(--white);
    border:none !important;
    font-size:14px;
    font-family: "neulis-sans", sans-serif;
    padding: 10px 20px;
    cursor: pointer;
}

.harmonic-wave button:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    color:var(--white);
}

.harmonic-wave button.h-button-green:hover {
    background: #637458 !important;
}

.harmonic-wave button.h-button-red:hover {
    background: #90604f !important;
}

.harmonic-wave button.h-button-yellow:hover {
    background: #9a7855 !important;
}

.harmonic-wave button.h-button-blue:hover {
    background: #4d7786 !important;
}

.harmonic-wave button.h-button-purple:hover {
    background: #614e6b !important;
}

/* Chart Card */

.card {
    background: rgb(237, 242, 244);
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.card.primary {
    background: #333333;
    background: linear-gradient(162deg,rgba(51, 51, 51, 1) 0%, rgba(35, 31, 32, 1) 100%);
}

.card.secondary {
    background: #ffffff;
}

.card-body {
    padding: 24px;
    height: 100%;
}

/*.card-body .harmonic-wave {
    padding: 24px 24px 0 24px;
}*/

.card.primary,
.card.primary .card-body {
    background: #333333 !important;
    background: linear-gradient(162deg,rgba(51, 51, 51, 1) 0%, rgba(35, 31, 32, 1) 100%) !important;
}

.br-32 {
    border-radius: 32px !important;
}

.primary-text-box {
    height:520px;
    padding: 30px 0;
}

.primary-text-box h3 {
    margin:0 0 40px;
    padding:0 0 0 40px;
    font-size:24px !important;
    color: var(--white) !important;
    font-weight: 600;
}

.primary-text-box p {
    color: var(--white) !important;
}

.card-body-scroll {
    overflow: auto;
    height: 350px;
    padding:0 40px;
}

.card-body {
    color:var(--white);
}

#radialGauge, #myChart {
    height: 500px;
}

@media (max-width:1600px) {
    .primary-text-box {
        height:520px;
        padding: 30px 0;
    }

    .primary h3 {
        margin:0;
        padding:0 0 30px 0;
        font-size:20px !important;
        color: var(--white) !important;
        font-weight: 600;
        text-align: center;
    }

    .card-body-scroll {
        padding:0 30px;
    }

    .primary p {
        font-size:14px;
    }
    #radialGauge, #myChart {
        height: 400px;
    }
}

@media (max-width: 690px) {
    #radialGauge {
        height: 400px;
    }
    #myChart {
        height: 400px;
    }
    .primary-text-box {
        height:520px;
        padding: 30px 0;
    }

    .card-body-scroll {
        padding:0 20px;
    }

    .primary h3 {
        margin:0;
        padding:0 0 30px 0;
        font-size:20px !important;
        color: var(--white) !important;
        font-weight: 600;
        text-align: center;
    }

    .primary-text-box p {
        font-size:14px;
    }
}

/* Bio Markers */

.biomarker-gauge {
    padding-bottom:20px;
}

@media (max-width: 690px) {

}

/* Range Items */

.range-info {
    margin-top:20px;
}

.range-item {
    width: 80%;
    height: 30px;
    margin: 0 auto;
    color:var(--white) !important;
}

.range-item:first-child {
    border-bottom:solid 1px #444444;
}

.range-item .range-label {
    display: inline-block;
    float: left;
    height: 30px;
}

.range-item .range-value {
    display: inline-block;
    float: right;
    height: 30px;
}

#footer {
   width: 100%;
}

#footer img {
    width: 200px;
    float: right;
}

@media (max-width: 1600px) {
    .range-item {
        font-size:13px;
        height: 23px !important;
        width: 90%;
    }
    .range-value, .range-label {
        height: 20px !important;
    }
}

@media (max-width: 690px) {
    .range-item {
        font-size:13px;
        height: 23px !important;
        width: 90%;
    }
    .range-value, .range-label {
        height: 23px !important;
    }
    #footer {
        margin-bottom:20px;
    }
    #footer img {
        margin:0 auto;
            width: 150px;
    }
}