/* Start default css */

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lexend';
}

a {
    text-decoration: none;
    padding: 0;
    margin: 0;
}

a:hover {
    text-decoration: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
span,
input,
p {
    margin: 0;
}

button:active,
button:focus-within,
button:focus-visible,
button:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

textarea:focus,
.account-select-box .bootstrap-select .dropdown-toggle:focus,
select:focus,
input:focus {
    outline: none !important;
    box-shadow: none;
    border: 1px solid #1C8CD6 !important;
}

/* End default css */

/* Start font css */

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-Black.woff2') format('woff2'),
        url('../font/Lexend-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-Bold.woff2') format('woff2'),
        url('../font/Lexend-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-ExtraLight.woff2') format('woff2'),
        url('../font/Lexend-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-ExtraBold.woff2') format('woff2'),
        url('../font/Lexend-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-Light.woff2') format('woff2'),
        url('../font/Lexend-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-SemiBold.woff2') format('woff2'),
        url('../font/Lexend-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-Thin.woff2') format('woff2'),
        url('../font/Lexend-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-Regular.woff2') format('woff2'),
        url('../font/Lexend-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: url('../font/Lexend-Medium.woff2') format('woff2'),
        url('../font/Lexend-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* End font css */

/* Start commun css */

.admin-box-title {
    padding: 12px 40px;
    border-bottom: 1px solid #E5E8EB;
    display: flex;
    justify-content: space-between;
    padding-right: 100px;
}

.admin-box-title h6 {
    font-size: 18px;
    line-height: 23px;
    color: #121417;
    font-weight: 700;
}

.enter-code-input input,
.enter-code-input select,
.account-select-box .bootstrap-select .dropdown-toggle {
    padding: 16px !important;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    color: #121417;
    line-height: 23px;
    border: 1px solid #DBE0E5 !important;
    border-radius: 12px;
}



.welcome-select-box.enter-code-box.send-otp .create-access-box-code {
    display: block;
}

/* End commun css */

/* Start select user css */

.welcome-box {
    text-align: center;
}

.welcome-box h2 {
    font-size: 32px;
    line-height: 30px;
    color: #121417;
    font-weight: 600;
    padding: 86px 0 65px 0;
}

.welcome-box h6 {
    font-size: 16px;
    line-height: 24px;
    color: #121417;
    padding-bottom: 24px;
    font-weight: 400;
}

.create-access-box {
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    max-width: 448px;
    margin: 0 auto;
    row-gap: 16px;
}

.create-access-option {
    display: flex;
    align-items: center;
    padding: 15px 34px 15px 15px;
    border: 1px solid #DBE0E5;
    border-radius: 12px;
    width: 100%;
    cursor: pointer;
    justify-content: space-between;
}

.create-access-option-input {
    accent-color: #1C8CD6;
    width: 20px;
    height: 20px;
}

.create-access-option-text {
    color: #121417;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
}

.account-selection__icon {
    color: #989898;
}

.create-access-option-input:checked~.create-access-option-text {
    color: #45247d;
}

.create-access-option-input:checked~.account-selection__icon {
    color: #876bca;
}

.create-access-option:has(.create-access-option-input:checked) {
    border-color: #1C8CD6;
    border-width: 2px;
}

.create-access-option:has(.create-access-option-input:checked) .create-access-option-text {
    font-weight: 700;
}

.web-next-btn a {
    display: none;
}

.enter-code-input input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    appearance: none !important;
    resize: none;
}

.web-next-btn-2 {
    display: none;
}

/* End select user css */

/* Start enter code css */

.welcome-select-box.enter-code-box.send-opt .create-access-box {
    padding-bottom: 40px;
    border-bottom: 1px solid #B8B8B8;
}

.enter-code-input {
    position: relative;
}

.enter-code-input img {
    position: absolute ;
    top: 32%;
    right: 32px;
}

.enter-code-input {
    position: relative;
    max-width: 448px;
    margin: 0 auto;
}
#addGrade img {
    position: inherit !important;
}
.create-access-box-code {
    padding-top: 24px;
}

.create-access-box-code h6 {
    text-align: left;
    max-width: 448px;
    margin: 0 auto;
}

.create-access-box-code {
    max-width: 448px;
    margin: 0 auto;
}

.enter-code-h6-2 {
    padding-top: 54px;
}

.web-login-btn {
    display: block;
    padding: 11px;
    background-color: #1C8CD6;
    border-radius: 12px;
    color: #fff !important;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    width: 100%;
    border: none;
}

.log-in-box a {
    font-weight: 700;
    color: #1C8CD6;
    font-size: 16px;
    line-height: 24px;
    padding: 12px;
    text-align: center;
    display: block;
}

.log-in-box.log-in-box-2 {
    display: none;
}

/* .create-access-box-code .enter-code-input-inner,
.create-access-box-code .enter-code-input img {
    display: none !important;
} */
.enter-code-input.enter-code-input-2 .view-all-grade {
    display: none;
}



.enter-code-input.enter-code-input-2.active .view-all-grade {
    display: block;
}

.create-access-box-code.enter-with-code .enter-code-input-inner,
.create-access-box-code.enter-with-code .enter-code-input img {
    display: block !important;
}

.web-next-btn-2 a {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    color: #828282;
    display: block;
    padding: 11px;
    border-radius: 12px;
    pointer-events: none;
}

.web-next-btn-2 a:first-child {
    background: #E0E0E0;
}

.web-next-btn-2.enter-with-code-btn a {
    pointer-events: painted;
}

/* .enter-code-input-inner .log-in-box{
    display: none;
} */
.welcome-select-box.enter-code-box>h6 {
    display: none;
}

/* End enter code css */

/* Start login css */

.create-access-box-code.login-box h6 {
    text-align: center !important;
}

.create-access-box-code.login-box .enter-code-input {
    text-align: left !important;
}

.create-access-box-code.login-box .enter-code-input label {
    padding: 24px 0 8px 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #121417;
}

.log-in-box.log-in-box-3 {
    padding-top: 24px;
}

.log-in-box.log-in-box-3 p {
    text-align: start;
    padding-bottom: 24px;
    display: none;
}

.admin-box-title.admin-box-title-sm h5 {
    display: none;
}

.welcome-select-box.login-code-box h6 {
    padding-bottom: 0px;
}

.create-access-box-code.login-box {
    padding-top: 0;
}

.main-admin-box.main-admin-box-sm h2 {
    padding: 64px 0 14px !important;
    font-size: 24px;
    line-height: 30px;
}

/* End login css */

/* Start create account css */

.account-select-box {
    position: relative;
}

.account-select-box img {
    position: absolute;
    top: 44%;
}

.enter-code-input select {
    appearance: none;
}

.enter-code-input h5 {
    font-size: 16px;
    font-weight: 500;
    color: #121417;
    line-height: 24px;
    padding: 24px 0 32px 0;
}

.enter-code-input p {
    font-size: 14px;
    line-height: 21px;
    color: #61758A;
    padding-bottom: 27px;
}

.account-select-box .bootstrap-select {
    width: 100% !important;
}

.account-select-box .dropdown-toggle {
    background-color: transparent;
    color: #121417 !important;
}

.account-select-box .dropdown-toggle.bs-placeholder:hover {
    color: #121417;
}

.account-select-box .dropdown-toggle::after {
    margin-left: 32px;
    border-top: 0.7em solid #A1A1A1;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
}

.admin-box-title.admin-box-title-sm h5 {
    display: none;
}

.login-btn-sm {
    display: none !important;
}

.welcome-select-box.login-code-box.create-account-box {
    padding-bottom: 114px;
}

/* End create account css */

/* Start mood tracker css */

.main-admin-box .navbar {
    padding: 20px 40px;
}

.main-admin-box .navbar-brand {
    font-size: 18px;
    line-height: 23px;
    color: #121417;
    font-weight: 700;
    margin: 0;
}

.main-admin-box .nav-item .nav-link {
    padding: 0 !important;
}

.main-admin-box .navbar-collapse {
    justify-content: end;
}

.main-admin-box .nav-item {
    margin: 0 14px;
}

.main-admin-box .nav-item .nav-link path {
    fill: #828282;
}

.main-admin-box .nav-item .nav-link:hover,
.main-admin-box .nav-item .nav-link.active {
    color: #1C8CD6;
    font-weight: 700;
}

.web-nav-modal .modal-body ul li a.active path,
.main-admin-box .nav-item .nav-link:hover path,
.main-admin-box .nav-item .nav-link.active path {
    fill: #1C8CD6;
}

.main-admin-box .nav-item .nav-link {
    padding: 0 !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
    color: #828282;
    display: flex;
    align-items: center !important;
    column-gap: 8px;
}

.main-admin-box .navbar {
    padding: 20px 40px;
    background-color: transparent !important;
    border-bottom: 1px solid #E5E8EB;
}

.profile-box.active svg path,
.profile-box:hover svg path {
    stroke: #1C8CD6;
}

.profile-box svg path {
    fill: transparent !important;
}

.web-nav-exit .nav-link {
    padding: 10px !important;
    background-color: #F5F5F5 !important;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.main-admin-box .navbar-nav {
    align-items: center;
}

.mood-track-box-main {
    text-align: center;
}

.mood-track-box-main h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    padding: 35px 0 16px;
}

.mood-track-box-main p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #828282;
}

.mood-track-box {
    display: flex;
    justify-content: center;
    column-gap: 50px;
    padding: 40px 0 0 0;
}

.item {
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.radio {
    display: none;
}

.radio~.mood-box .mood-svg {
    cursor: pointer;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border: 1px solid #F2F2F2;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.radio:checked~.mood-box .mood-svg {
    background-color: #56CCF2;
    border-color: #56CCF2;
}

.radio:checked~.mood-box p {
    color: #000000;
    font-weight: 700;
}

.mood-box p {
    font-size: 16px;
    color: #787878;
    font-weight: 400;
    line-height: 20px;
    padding-top: 16px;
}

.mood-track-box-bottom {
    max-width: 638px;
    margin: 57px auto 0;
    border-top: 1px solid #E0E0E0;
}

.mood-track-box-bottom h6 {
    font-size: 16px;
    line-height: 24px;
    color: #1C1A0D;
    text-align: left;
    padding: 30px 0 28px;
}

.mood-track-box-bottom textarea {
    border: 1px solid #BDBDBD;
    padding: 16px;
    border-radius: 16px;
    height: 144px;
    width: 100%;
    resize: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #1C1A0D;
}

.need-help-btn a {
    display: block;
    width: fit-content;
    margin: 32px auto 0;
    padding: 10px 41px;
    border: 1px solid #1C8CD6;
    color: #1C8CD6;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    border-radius: 12px;
}

.mood-track-box.mood-track-box-sm {
    display: none;
}

/* End mood tracker css */

/* Start reports css */

.mood-chart-box {
    max-width: 1040px;
    margin: 0 auto;
}

.mood-chart-box>h2 {
    font-size: 32px;
    line-height: 40px;
    color: #121417;
    font-weight: 700;
    padding: 46px 0 30px;
}

.nav-tabs::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background-color: #000;
}

.mood-chart-menu-ul {
    display: flex;
    column-gap: 32px;
}

.by-grade-select select {
    padding-top: 0 !important;
}

.by-grade-select select,
.mood-chart-menu-ul li a {
    font-size: 14px;
    line-height: 21px;
    padding: 16px 0 !important;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #637887;
    display: flex;
    appearance: none;
}

.mood-chart-menu-ul li a:hover,
.mood-chart-menu-ul li a.active {
    color: #1C8CD6;
    border-color: #1C8CD6;
}

.by-grade-select {
    position: relative;
}

.by-grade-select svg {
    position: absolute;
    top: 40%;
    right: -7px;
}

.by-grade-select select:focus {
    border: none !important;
}

.by-grade-select select option {
    border: 0;
    text-align: center;
}

.mood-chart-menu-ul {
    display: flex;
    column-gap: 32px;
    border-bottom: 1px solid #DBE0E5;
}

.mood-track-used,
.mood-track-days {
    margin-bottom: 21px;
    padding: 20px 0 30px;
    text-align: center;
    max-width: 253px;
    width: 253px;
    background-color: rgba(231, 231, 231, 0.18);
    border-radius: 10px;
}

.mood-track-used h6,
.mood-track-days h6 {
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0.14px;
    padding-bottom: 10px;
    font-weight: 700;
}

.mood-track-used h2,
.mood-track-days h2 {
    font-size: 60px;
    line-height: 48px;
    letter-spacing: 0.17px;
    padding-bottom: 20px;
    font-weight: 500;
}

.mood-track-used p,
.mood-track-days p {
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0.17px;
    color: rgba(72, 72, 72, 0.6);
}

.chart-title-menu {
    display: flex;
    justify-content: space-between;
    padding: 25px 0 10px;
    align-items: center;
}

.chart-title-menu h5 {
    font-size: 18px;
    line-height: 23px;
    font-weight: 400;
}

.chart-title-menu span {
    font-weight: 700;
}

.chart-title-menu .chart-list-grade-box {
    display: flex;
    column-gap: 20px;
    align-items: center;
}

.chart-title-menu div:last-child .by-grade-select select {
    padding: 5px 0 !important;
    padding-right: 0 !important;
    color: #121417;
}

.chart-title-menu div:last-child .by-grade-select select option {
    text-align: center !important;
}

.chart-title-menu div:last-child .by-grade-select svg {
    right: 0 !important;
}

.mood-chart-img svg {
    width: 100%;
}

.chart-title-menu p {
    font-size: 14px;
    line-height: 21px;
    color: #637887;
    font-weight: 400;
}

/* End reports css */

/* Start resources css */

.resources-search-btn .input-group-text {
    padding: 12px 0 12px 16px;
    background-color: #F0F2F5 !important;
    border: none;
}

.resources-search-btn .form-control {
    padding: 12px 8px;
    background-color: #F0F2F5;
    border-radius: 0 12px 12px 0;
    border: none;
}

.resources-search-btn .form-control {
    font-size: 16px;
    line-height: 24px;
    color: #121417;
    font-weight: 400;
}

.resources-search-btn .form-control::placeholder {
    color: #637887;
}

.resources-search-btn .form-control:focus {
    box-shadow: none;
    outline: none;
    border: none !important;
}

.resources-box-main {
    padding: 0 16px;
}

.resources-search-btn {
    padding: 24px 0 12px;
}

.stress-info-box-main h2,
.resources-box-main h2 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: #121417;
    padding: 20px 0 28px;
}

.stress-info-box-main {
    padding-top: 30px;
}

.stress-info-box-main .resources-info-box {
    text-decoration: none !important;
}

.stress-info-box img,
.resources-info-box img {
    border-radius: 12px;
    width: 100%;
}

.stress-info-box-main h6,
.resources-info-box h6 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #121417;
    padding-top: 12px;
}

.stress-info-box-main p,
.resources-info-box p {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: #637887;
}

.stress-info-box-main.recently-info-box-main {
    padding-bottom: 50px;
}

/* End resources css */


/* Start reports-2 css */

.well-box {
    height: 30px;
    width: 30px;
    border-radius: 50%;
}

.well-chart-img img {
    padding-top: 27px;
    max-width: 100%;
}

.well-blue, .Sad {
    background-color: #56CCF2;
}

.well-dark, .Stressed {
    background-color: #7B7B7B;
}

.well-yellow, .Content {
    background-color: #F2994A;
}

.well-green , .Happy {
    background-color: #6FCF97;
}

.well-pink, .Anxious {
    background-color: #F69AC5;
}

.well-red, .Irritable {
    background-color: #EB5757;
}

.well-purple, .Miserable {
    background-color: #BB6BD9;
}

.well-grey, .Unknown {
  background-color: #808080;
}

.well-chart-img {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    column-gap: 8px;
    row-gap: 2px;
    justify-content: start;
    padding-top: 19px;
    height: fit-content;
}

.mood-chart-main-box.well-chart-main {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 25px;
}

.chart-title-menu.well-reports-title-menu {
    padding: 32px 0 8px 16px;
}

.report-chart-list {
    padding-top: 30px;
}

.report-chart-list ul {
    display: grid;
    row-gap: 11px;
}

.report-chart-list ul li {
    display: grid;
    grid-template-columns: 1fr 30px;
    column-gap: 50px;
    align-items: center;
}

.report-chart-list ul li:first-child {
    margin-bottom: 7px;
}

.report-chart-list ul li p {
    text-align: left;
    display: flex;
    justify-content: end;
    column-gap: 13px;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.17px;
    color: #828282;
}

.report-chart-list ul li h6 {
    font-size: 14px;
    line-height: 23px;
    color: #121417;
    font-weight: 600;
}

.brand-not-working p {
    font-size: 14px;
    color: #828282;
    padding-bottom: 3px;
}

.brand-not-working {
    text-align: center;
    padding-top: 60px;
}

.brand-not-working a {
    font-size: 16px;
    line-height: 21px;
    color: #1C8CD6;
    font-weight: 700;
}

.report-chart-list-sm ul {
    display: flex;
    justify-content: center;
    column-gap: 28px;
    row-gap: 10px;
    text-align: center;
    flex-wrap: wrap;
}

.report-chart-list-sm ul li span {
    color: #4F4F4F;
}

.report-chart-list-sm ul li span,
.report-chart-list-sm ul li p {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.17px;
    color: #828282;
}

.report-chart-list-sm ul li p {
    padding-top: 5px;
}

.brand-not-working.brand-not-working-sm {
    display: none;
}

.report-chart-list-sm {
    display: none;
}

/* End reports-2 css */

/* Start profile css */

.account-select-box.account-select-box-2 .dropdown-toggle::before {
    content: "";
    position: absolute;
    right: 16px;
    margin-left: 32px;
    border-top: 0.6em solid #A1A1A1;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
    rotate: 180deg;
}

.account-select-box.account-select-box-2 .dropdown-toggle::after {
    margin-left: 32px;
    border-top: 0.6em solid #A1A1A1;
    border-right: .5em solid transparent;
    border-left: .5em solid transparent;
}

.account-select-box.account-select-box-2 .bootstrap-select>.dropdown-toggle::before {
    margin-top: -15px;
}

.account-select-box.account-select-box-2 .bootstrap-select>.dropdown-toggle:after {
    margin-top: 15px;
}

.profile-checkbox {
    display: block;
    position: relative;
    padding: 0 0 0 35px !important;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    font-weight: 400;
    line-height: 24px;
    color: #121417;
}

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

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 2px solid #1C8CD6;
    border-radius: 4px;
}

.profile-checkbox input:checked~.checkmark {
    background-color: #1C8CD6;
}

.profile-checkbox input:checked~.checkmark:after {
    display: block;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.profile-checkbox .checkmark:after {
    left: 5px;
    top: 0px;
    width: 7px;
    height: 13px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.profile-box-main {
    max-width: 480px;
    margin: 23px auto;
    padding: 0 16px;
}

.profile-box-main h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
    color: #121417;
    padding-bottom: 28px;
}

.input-icon-main {
    position: relative;
}

.input-icon-main img {
    position: absolute;
    right: 30px;
    top: 20px;
}

.profile-box-main label {
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #121417;
    padding-bottom: 8px;
    display: block;
}

.profile-box-main input {
    background-color: #F5F5F5;
    color: #637887;
    border-color: #F5F5F5;
}

.profile-box-main input,
.input-icon-main input {
    border: 1px solid #DBE0E5;
    width: 100%;
    padding: 15px 50px 15px 15px;
    font-size: 16px;
    line-height: 24px;
    color: #121417;
    border-radius: 12px;
    margin-bottom: 24px;
}

.input-icon-main input {
    background-color: transparent;
}

.account-select-box.account-select-box-2 {
    margin-bottom: 24px;
}

.pas-change-btn {
    padding: 8.5px 16px;
    border: 1px solid #1C8CD6;
    border-radius: 12px;
    color: #1C8CD6;
    font-weight: 700;
    font-size: 14px;
    line-height: 21px;
}

/* End profile css */

/* Start help css */

.help-submit-btn {
    display: none;
}

.help-box-main .btn-group {
    column-gap: 12px;
    row-gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 28px;
}

.help-box-main .btn-group .select {
    position: relative;
}

.help-box-main .btn-group .select input:checked+label {
    border-color: #1C8CD6;
    color: #1C8CD6;
}

.help-box-main .btn-group .select input:checked+label:hover,
.help-box-main .btn-group .select input:checked+label:focus,
.help-box-main .btn-group .select input:checked+label:active {
    border-color: #1C8CD6;
    color: #1C8CD6;
}

.help-box-main .btn-group .select input {
    opacity: 0;
    position: absolute;
}

.help-box-main .btn-group .select .button_select {
    margin: 0;
    display: flex;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #1C1A0D;
    padding: 5.5px 16px;
    border-color: #F6F6F6;
    background-color: #F6F6F6;
}

.help-box-main .btn-group .select .button_select:hover,
.help-box-main .btn-group .select .button_select:focus,
.help-box-main .btn-group .select .button_select:active {
    background-color: #F6F6F6;
}

.help-box-select-list h2 {
    color: #1C1A0D;
    font-size: 28px;
    font-weight: 700;
    line-height: 35px;
    text-align: center;
    padding: 27px 0 44px;
}

.help-box-main {
    max-width: 960px;
    margin: 0 auto 30px;
    padding: 0 16px;
}

.help-box-des {
    max-width: 638px;
}

.help-box-des label {
    font-size: 16px;
    display: block;
    font-weight: 500;
    line-height: 24px;
    color: #121417;
    padding-bottom: 23px;
}

.help-box-des textarea {
    border: 1px solid #BDBDBD;
    width: 100%;
    padding: 15px;
    height: 144px;
    border-radius: 12px;
    resize: none;
    margin-bottom: 28px;
}

.help-box-des h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
    color: #1C1A0D;
    padding-bottom: 41px;
}

.help-box-des ul li h6 {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #121417;
}

.help-box-des ul li p {
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: #61758A;
}

.help-box-des ul {
    display: grid;
    row-gap: 28px;
}

/* End help css */

/* Start help-2 css */

.help-box-main.help-box-main-2 {
    max-width: 674px;
}

.help-submit-btn.help-submit-btn-2 {
    display: block;
    padding: 11px;
    font-size: 16px;
    line-height: 21px;
    font-weight: 700;
    border: none;
    color: #fff;
    background-color: #1C8CD6;
    width: 203px;
    border-radius: 12px;
    margin: 0 auto;
}

.help-submit.help-submit-2 {
    border: none;
}

/* End help-2 css */

/* Start admin create acc css  */

.create-access-box-code.login-box.login-box-2 {
    max-width: 480px;
}

.create-access-box-code.login-box.login-box-2 h6 {
    max-width: 480px;
}

.profile-checkbox.profile-checkbox-2 .checkmark {
    border-color: #DBE0E5;
}

.profile-checkbox.profile-checkbox-2 {
    white-space: nowrap;
    padding-top: 24px !important;
    margin-bottom: 24px;
}

.profile-checkbox.profile-checkbox-2 .checkmark {
    top: 28px;
}

/* End admin create acc css  */

/* Start admin set up css */
.course-delete-btn {
    margin-bottom: 18px;
}

.course-delete-btn img {
    position: absolute !important;
}

.enter-code-input.enter-code-input-2 img {
    position: unset;
}

.enter-code-input button , .eye-icon {
    border: 1px solid #DBE0E5 !important;
    width: 100%;
    padding: 16px;
    display: flex;
    column-gap: 30px;
    border-radius: 12px;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 16px;
    color: #637887;
    line-height: 21px;
}

.set-up-btn {
    padding: 11px !important;
    width: 100%;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    background-color: #E0E0E0 !important;
    line-height: 21px;
    color: #828282 !important;
    margin-top: 28px;
    display: block;
    font-weight: 700;
}

.log-in-box .set-up-btn {
    display: none;
}

.create-access-box-code.login-box.login-box-2 {
    max-width: 480px;
    padding: 0 15px;
}

.welcome-select-box.admin-set-up-box {
    padding-bottom: 30px;
}

.grade-level-box-done label {
    padding-top: 0 !important;
}

/* End admin set up css */

/* Start add grade css */

.grade-level-box-done button {
    justify-content: space-between !important;
}

/* End add grade css */

/* Start edit grade css */

.grade-level-box-done {
    margin-bottom: 12px;
}

/* End edit grade css */

/* Start admin add grade levels css */

.view-all-grade {
    padding: 16px 42px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
}

.view-all-grade ul {
    display: grid;
    row-gap: 32px;
}

.view-all-grade ul li p {
    padding: 0;
    color: #121417;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

.grade-level-box-done h6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 20px !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #121417;
}

.view-all-grade a {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: #828282;
    justify-content: center;
    padding: 16px 0 0 !important;
    display: block;
}


/* End admin add grade levels css */

/* Start admin add course css */

.add-course-btn {
    justify-content: center !important;
}

.course-save-btn {
    max-width: 188px;
    justify-content: center !important;
    margin: 0 auto !important;
    display: flex;
    background-color: #1C8CD6 !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.grade-level-box-done.course-btn-box {
    padding: 24px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    margin: 0;
}

.grade-level-box-done.course-btn-box button:last-child {
    justify-content: center !important;
}

.grade-level-box-done.course-btn-box label {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: #676767 !important;
    padding-top: 0 !important;
}

.course-list {
    padding: 24px 0 20px !important;
}

.grade-level-box-done.grade-level-box-done-2 {
    margin: 0;
}

.grade-level-box-done button {
    justify-content: space-between !important;
    margin-bottom: 18px;
}

.set-up-btn.set-up-btn-2 {
    display: block !important;
    margin-top: 18px !important;
}

.log-in-box.set-up-bottom {
    display: none;
}

.add-course-main {
    padding-bottom: 25px;
}

.grade-level-box-done.grade-level-box-done-2 h6 {
    padding-top: 0 !important;
}

.admin-acc-box>h6 {
    white-space: nowrap;
    margin-left: -10px;
}

.create-access-box-code.login-box.login-box-2.add-course-main>h6 {
    white-space: nowrap;
    margin-left: -15px;
}

/* End admin add course css */

/* Start admin edit course css */

.grade-level-box-done.grade-level-box-done-2.grade-level-box-done-3 {
    margin-top: 30px;
}

/* End admin edit course css */

/* Start admin student list css*/

.view-all-grade span {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #676767;
    padding-bottom: 18px;
    display: block;
}

.view-all-grade input {
    margin-bottom: 18px;
}

/* End admin student list css */

/* Start admin list of student css */

.grade-level-box-done.course-btn-box .form-label-group input:focus~label,
.grade-level-box-done.course-btn-box .form-label-group input:not(:placeholder-shown)~label,
.form-label-group select~label,
.form-label-group textarea:focus~label,
.form-label-group textarea:not(:placeholder-shown)~label {
    font-size: 1em;
    top: var(--top-position);
    transform: translateY(-70%) translateX(20%) scale(.8);
    visibility: visible;
}

.grade-level-box-done.course-btn-box .form-label-group label {
    top: 55%;
    left: 30px;
    color: #757575 !important;
}

.course-save-btn.course-save-btn-2 {
    margin-top: 18px !important;
}

/* End admin list of student css */

/* Start admin list of student 2 css */

.list-of-student>h6 {
    justify-content: space-between !important;
    display: flex;
    align-items: center;
    padding: 0;
}

.list-of-student-title {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.list-of-student-title span {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: #828282;
    padding: 12px 0 4px 15px;
}

.list-of-student {
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    margin-top: 36px;
    padding: 16px;
}

.list-of-student ul {
    display: grid;
    row-gap: 12px;
}

.list-of-student ul li {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 17px 4px;
    background-color: rgba(245, 245, 245, 1);
    border-radius: 12px;
}

.list-of-student h5 {
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    padding: 0 0 0 16px;
}

.list-of-student p {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    padding: 0 0 0 16px;
    color: #121417;
    border-left: 1px solid rgba(198, 198, 198, 1);
}

.list-of-student a {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: #828282;
    display: block;
    padding-top: 4px;
}

.list-student-sm-title h6 {
    display: none;
}

/* End admin list of student 2 css */

/* Start admin add teacher css */

.view-all-grade.view-all-grade-3 {
    padding: 0;
    border: none;
}

/* End admin add teacher css */

/* Start admin list of teacher 2 css */

.set-up-btn.set-up-btn-2 {
    background-color: #1C8CD6 !important;
    color: #fff !important;
}

/* End admin list of teacher 2 css */

.view-all-grade select option {
    background-color: transparent;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #121417;
}

.course-delete-btn {
    position: relative;
}

button.add-course-btn {
    justify-content: center !important;
}

.mood-chart-menu-ul.mood-chart-menu-ul-2 .all-student {
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-align: left;
    padding: 9px 12px !important;
    border: 1px solid #1C8CD6 !important;
    border-radius: 12px;
    color: #1C8CD6;
}

.mood-chart-menu-ul.mood-chart-menu-ul-2 {
    border-bottom: 0;
    align-items: center;
    margin-top: 5px !important;
}

.by-grade-select {
    position: relative;
    display: block;
    padding-right: 30px;
}


.create-access-box-code .enter-code-input img {
    display: none;
}

.select-dropdown2,
.select-dropdown3,
.select-dropdown4,
.select-dropdown5,
.select-dropdown6,
.select-dropdown7,
.select-dropdown {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.select-dropdown__button2, .select-dropdown__button3, .select-dropdown__button4, .select-dropdown__button5, .select-dropdown__button6, .select-dropdown__button7, .select-dropdown__button {
    padding: 16px 0;
    background-color: #fff;
    border: 1px solid #cecece;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #637887;
    border: none;
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.select-dropdown__button2 svg,
.select-dropdown__button3 svg,
.select-dropdown__button4 svg,
.select-dropdown__button5 svg,
.select-dropdown__button6 svg,
.select-dropdown__button7 svg,
.select-dropdown__button svg {
    margin-left: 10px;
}
.select-dropdown__button2:hover svg path,
.select-dropdown__button3:hover svg path,
.select-dropdown__button4:hover svg path,
.select-dropdown__button5:hover svg path,
.select-dropdown__button6:hover svg path,
.select-dropdown__button7:hover svg path,
.select-dropdown__button:hover svg path{
    fill: #1C8CD6;
}
.select-dropdown__button2:hover,
.select-dropdown__button3:hover,
.select-dropdown__button4:hover,
.select-dropdown__button5:hover,
.select-dropdown__button6:hover,
.select-dropdown__button7:hover,
.select-dropdown__button:hover{
    color: #1C8CD6;
}
.select-dropdown__button2::focus,
.select-dropdown__button3::focus,
.select-dropdown__button4::focus,
.select-dropdown__button5::focus,
.select-dropdown__button6::focus,
.select-dropdown__button7::focus,
.select-dropdown__button::focus {
    outline: none;
}

.select-dropdown__list2,
.select-dropdown__list3,
.select-dropdown__list4,
.select-dropdown__list5,
.select-dropdown__list6,
.select-dropdown__list7,
.select-dropdown__list {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1, 0);
    transition: all ease-in-out 0.3s;
    z-index: 2;
    border: 1px solid #DBE0E5;
}

.select-dropdown__list2.active,
.select-dropdown__list3.active,
.select-dropdown__list4.active,
.select-dropdown__list5.active,
.select-dropdown__list6.active,
.select-dropdown__list7.active,
.select-dropdown__list.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1, 1);
}

.select-dropdown__list-item2,
.select-dropdown__list-item3,
.select-dropdown__list-item4,
.select-dropdown__list-item5,
.select-dropdown__list-item6,
.select-dropdown__list-item7,
.select-dropdown__list-item {
    display: block;
    list-style-type: none;
    padding: 10px 15px;
    background: #fff;
    border-top: none;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    color: #616161;
    transition: all ease-in-out 0.3s;
}
.select-dropdown4.select-weekly-2 button {
    font-size: 16px;
    font-weight: 400 !important;
    line-height: 21px;
    text-align: center;
    padding: 16px !important;
    border: 1px solid #E0E0E0 !important;
    width: 416px;
    max-width: 416px;
    justify-content: space-between;
    border-radius: 12px;
}
.select-dropdown4.select-weekly-2 button span{
    font-weight: 400 !important;
    padding-left: 10px !important;
}
.chart-list-grade-box.chart-list-grade-box-2{
    display: grid;
}
.chart-list-grade-box.chart-list-grade-box-2 p {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    padding-bottom: 8px;
}
.cart-title-main .chart-title-menu:last-child {
    padding-top: 5px;
}
.main-requests-box {
    max-width: 1056px;
    padding: 0 16px;
    margin: 0 auto;
}
.main-requests-box h2 {
    padding-top: 46px;
    font-size: 32px;
    font-weight: 700 !important;
    line-height: 40px;
    text-align: left;
    color: #121417;
}
.main-requests-box ul:before {
    display: none;
}
.main-requests-box ul {
    border-bottom: 1px solid #DBE0E5;
    padding-top: 14px;
}
.main-admin-box .nav-item {
    margin: 0 32px 0 0;
}
.main-requests-box .nav .nav-item .nav-link {
    padding: 16px 0 !important;
    border-bottom: 2px solid transparent !important;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    background-color: transparent;
    color: #637887;
}
.main-requests-box .nav .nav-item .nav-link:hover,
.main-requests-box .nav .nav-item .nav-link.active{
    border-bottom:2px solid #1C8CD6 !important;
    color: #1C8CD6;
}
.tab-pane-content-box ul li button {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.tab-pane-content-box ul li button {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #4F4F4F;
    padding: 25px 16px;
    border-bottom: 1px solid #E7E7E7 !important;
}
.main-requests-box .collapse {
    margin-top: 4px !important;
    transition: 0.5s;
}
.tab-pane-content-box ul li button p {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    color: #4F4F4F;
}
.personal-info p {
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    text-align: left;
    color: #828282;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
}
.main-requests-box input {
    background-color: #F9F9F9;
    border: none !important;
    padding: 16px 15px;
    border-radius: 12px;
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: #121417;
}
.personal-info-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.personal-info-box form{
    padding: 0 16px;
}
.personal-info-box form div {
    padding: 12px 0;
}
.personal-info label {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    padding-bottom: 8px;
}
.personal-change-password-btn {
    padding-bottom: 16px;
    border-bottom: 1px solid #B2B2B2;
}
.personal-change-password-btn a   {
    padding: 8.5px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    color: #1C8CD6;
    border: 1px solid #1C8CD6;
    border-radius: 12px;
    margin: 12px 16px;
    display: block;
    width: fit-content;
}
.setting-btn {
    padding: 8.5px 16px;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    color: #1C8CD6;
    border: 1px solid #1C8CD6;
    border-radius: 12px;
    display: block;
    width: fit-content;
}

.setting-school-btn {
    border: 1px solid #DBE0E5 !important;
    width: 100%;
    padding: 16px;
    display: flex;
    column-gap: 30px;
    border-radius: 12px;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 16px;
    color: #637887;
    line-height: 21px;
}
.setting-sm ul li {
    border-bottom: 1px solid #E7E7E7;
}
.setting-sm ul li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #121417;
    padding: 23px 36px 23px 24px;
}
.setting-sm {
    display: none;
}
.personal-info.active{
    display: block;
}
.setting-sm.deactive{
    display: none;
}