/* Base CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a:focus {
    outline: 0 solid
}

* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
}

body {
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    line-height: 25px;
}


.selector-for-some-widget {
    box-sizing: content-box;
}

a:hover {
    text-decoration: none
}

button:focus {
    outline: 0;
    outline: 5px auto -webkit-focus-ring-color;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}


.container {
    max-width: 1170px;
    margin: auto;
}



/*-------------- Site main css Start --------------*/

.canvas_chart {
    width: 600px;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

.site__left__sidebar {
    position: fixed;
    width: 300px;
    left: 0;
    top: 0;
    height: 100%;
    background: #093F65;
    z-index: 999;
}

.site__main__content__blk {
    margin-left: 300px;
}

.site__header__top__right__blk {
    text-align: right;
}

.site__logo {
    text-align: center;
    padding: 50px 0;
}

.left__bar__menu {
    margin-top: 100px;
}

.left__bar__menu ul li a {
    font-size: 16px;
    color: #A5F3B5;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    transition: .3s;
    margin-left: 40px;
    padding: 9px 0;
    align-items: center;
}

.left__bar__menu ul li:hover {
    background: #A5F3B5;
}

.left__bar__menu ul li {
    display: block;
    transition: .3s;
    margin-bottom: 10px;
}

.left__bar__menu ul li:hover a {
    color: #093F65;
}

.left__bar__menu ul li.active {
    background: #A5F3B5;
}

.left__bar__menu ul li.active a {
    background: #A5F3B5;
    color: #093F65;
}

.left__bar__menu ul li a span {
    width: 50px;
    display: inline-block;
    text-align: center;
    font-size: 21px;
}

.site__user__profile {
    margin-left: 34px;
}

.site__user__profile .btn-secondary {
    color: #fff;
    background: none;
    border: none;
}

.btn-check:focus+.btn,
.btn:focus {
    outline: 0;
    box-shadow: none !important;
}

.site__header__top__right__blk button span {
    font-size: 16px;
    color: #093F65;
    font-weight: 500;
}

.site__header__area {
    padding: 20px 0;
}

.progress__profile a img {
    /*! width: 270px; */
    flex: 0 0 250px;
}

.progress__profile__flx {
    display: flex;
    padding: 0 26px;
}

.progress__main__content h2 {
    font-size: 42px;
    color: #093F65;
    font-weight: 700;
    margin: 0;
    padding-top: 5px;
}

.progress__main__content p {
    font-size: 22px;
    color: #093F65;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    padding-top: 5px;
}

.personality__blk {
    background: #F6F9FC;
    padding: 29px;
}

.personal__box {
    border: 1px solid#DCDCDC;
    background: #FFFFFF;
    border-radius: 4px;
}

.person__box__blk {
    padding: 30px;
}

.personal__title a {
    font-size: 22px;
    color: #E1524A;
    text-decoration: none;
    font-weight: 500;
}

.personal__title a i {
    padding-right: 15px;
}

.personal__title {
    background: #FFE2E0;
    padding: 20px 30px;
    border-bottom: 1px solid#DCDCDC;
    border-radius: 4px 4px 0 0px;
}


.chat__blk {
    text-align: center;
}

.person__content h3 {
    font-size: 22px;
    color: #E87D77;
    font-weight: 700;
    margin-bottom: 10px;
}

.person__content p {
    font-size: 20px;
    color: #376382;
}

.person__content {
    margin-bottom: 29px;
}

.person__cercal img {
    width: 420px;
}

.personal__list ul li a {
    font-size: 20px;
    color: #466F8B;
    display: block;
    text-decoration: none;
    font-weight: 400;
}

.personal__list ul li {
    position: relative;
    padding-left: 30px;
    line-height: 30px;
}

.personal__list ul li i {
    position: absolute;
    left: 0;
    color: #73C789;
    top: 4px;
}

.sub__title__1 {
    font-size: 24px;
    color: #1FA542;
    font-weight: 400;
}

.sub__title__2 {
    font-size: 24px;
    color: #E1524A;
    margin: 0;
    padding: 20px 0;
    font-weight: 400;
}

.close__cls li i {
    color: #E1524A !important;
}

.dropdown-menu {
    border-radius: 5px;
    box-shadow: 0 3px 5px #ddd;
}

.dropdown-item {
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
}

.personal__box.mbrw {
    margin-bottom: 30px;
}

.person__cercal {
    margin-bottom: 33px;
    text-align: center;
}

.personal__wrap {
    margin-bottom: 30px;
}

.chat__blk img {
    width: 567px;
}

.single__btn a {
    width: 100%;
    height: 55px;
    background: #F0EFEF;
    border-radius: 30px;
    display: block;
    line-height: 55px;
    padding: 0 35px;
    font-size: 12px;
    color: #466F8B;
    text-decoration: none;
}

.progress__profile {
    margin-right: 35px;
    flex: 0 0 auto;
}

.traits__blk {
    padding: 30px;
}

.single__btn {
    position: relative;
    margin-bottom: 30px;
}

.single__btn span {
    background: #E1524A;
    width: 340px;
    display: block;
    text-align: right;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    border-radius: 30px;
    position: absolute;
    top: 4px;
    right: 5px;
    height: 47px;
    line-height: 47px;
    padding: 0 35px;
}

.single__btn.insite__bl a {
    text-align: right;
}

.single__btn.insite__bl span {
    position: absolute;
    left: 5px;
    right: auto;
    text-align: left;
}

.left-sidebar-icon {
    display: none;
}

.close-icon {
    display: none;
}








.progress-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 0 15px;
    width: auto;
    border-radius: 5px;
    margin-bottom: 20px;
    padding-left: 0;
    margin-right: 19px;
}

.progress__blk {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 25px;
}

.progress-card .percent {
    position: relative;
}

.progress-card svg {
    position: relative;
    width: 120px;
    height: 120px;
    transform: rotate(-90deg);
}

.progress-card svg circle {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 10;
    stroke-linecap: round;
}

.progress-card svg circle:last-of-type {
    stroke-dasharray: 310px;
    stroke-dashoffset: calc(310px - (310px * var(--percent)) / 100);
    stroke: #3498db;
}

.progress-card .number {
    position: absolute;
    top: 46%;
    left: 55%;
    transform: translate(-50%, -50%);
}

.progress-card .number h3 {
    font-weight: 500;
    font-size: 30px;
    margin: 0;
    line-height: 1;
}

.progress-card .title p {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.29;
    margin-bottom: 7px;
    padding: 0;
    margin-left: 15px;
}

.progress-card .number h3 span {
    font-size: 19px;
    font-weight: 400;
    margin-left: 2px;
    position: relative;
    top: -1px;
}

.progress-card.one svg circle:last-of-type {
    stroke: #8073d3;
}

.progress-card.one * {
    color: #8073d3;
}

.progress-card.one svg circle {
    stroke: rgba(128, 115, 211, 0.24);
}

.progress-card.two svg circle:last-of-type {
    stroke: #00c8d5;
}

.progress-card.two * {
    color: #00c8d5;
}

.progress-card.two svg circle {
    stroke: rgba(0, 199, 213, 0.245);
}

.progress-card.three svg circle:last-of-type {
    stroke: #ff8c61;
}

.progress-card.three svg circle {
    stroke: rgba(255, 139, 97, 0.247);
}

.progress-card.three * {
    color: #ff8c61;
}


/*-------------- Site main css End --------------*/


.off-canvas-overlay.active {
    background: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
    z-index: 999;
    visibility: hidden;
    transition: .3s;
    cursor: pointer;
}

.off-canvas-overlay.active {
    opacity: .5;
    visibility: visible;
}

.left-sidebar-icon {
    background: #8073d3;
    font-size: 16px;
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    transition: .3s;
    cursor: pointer;
}

.left-sidebar-icon:hover {
    background: #093F65;
}