:root {
    --gray-color: #777777;
    --light-gray-color: #eeeeee;
    --pink-color: #fb5787;
    --dark-pink-color: #fa2263;
    --green-color: #3ebcb9;
    --dark-green-color: #2a7574;
    --light-orange-color: #ffd9b2;
    --orange-color: #fb7e00;
    --light-green-color: #bdfffe;
    --dark-blue-color: #0c0d2c;
    --water-color: rgb(1, 227, 254);
}

* {
    font-family: "Roboto", sans-serif;
}

*:not(i) {
    color: #777777;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--pink-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--dark-pink-color);
}

.sidebar-menu li i {
    font-size: 20px !important;
    width: 30px !important;
}

.sidebar-menu li label {
    margin: 0px auto !important;
    font-weight: 500;
    top: 3px;
    position: relative;
    cursor: pointer;
}

.sidebar-menu li.active a.active,
.sidebar-menu li.active a.active i,
.sidebar-menu li.active a.active label,
.page-title {
    color: var(--pink-color) !important;
}

.sidebar-menu li a,
.select2-selection__rendered {
    color: var(--gray-color) !important;
}

.content-page,
html,
.sidebar-inner,
.sidebar-menu,
.sidebar-menu li a,
.topbar-left,
body {
    background: white !important;
    background-color: white !important;
}

a.logo i {
    font-size: 40px;
    color: var(--pink-color);
    position: relative;
    top: 10px;
    font-weight: bold;
}

.side-menu {
    box-shadow: 2px 0 3px -2px rgb(0 0 0 / 15%);
    -webkit-box-shadow: 2px 0px 3px -2px rgb(0 0 0 / 15%);
}

.card-body {
    padding: 20px 30px;
}

.topbar-left {
    padding-left: 0px !important;
    text-align: center;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.span-title {
    font-size: 20px;
    font-weight: bold;
}

.link-a {
    color: var(--green-color);
    font-size: 16px !important;
    text-decoration: none;
    font-weight: 500 !important;
}

.under-line {
    text-decoration: underline !important;
}

.bold {
    font-weight: 500 !important;
}

.link-a:hover {
    color: var(--dark-green-color);
}

.p-t-0 {
    padding-top: 0px !important;
}

.p-t-2 {
    padding-top: 2px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-b-0 {
    padding-bottom: 0 !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
}

.btn-success {
    background: var(--green-color) !important;
    border: 1px solid var(--green-color) !important;
}

.btn-grey {
    background: #cccccc !important;
    color: #333333 !important;
    border: 1px solid #cccccc !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-justify {
    text-align: justify !important;
}

.full-width {
    width: 100% !important;
}

th,
td {
    padding: 10px 10px 0px 10px;
}

.parsley-errors-list>li,
.error {
    color: var(--pink-color) !important;
}

.parsley-error {
    border-color: var(--pink-color) !important;
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.border-radius-50 {
    border-radius: 50% !important;
}

.pink-color {
    color: var(--pink-color) !important;
}

.pink-background {
    background-color: var(--pink-color) !important;
}

.orange-color {
    color: var(--orange-color) !important;
}

.btn-orange {
    color: white !important;
    background-color: var(--orange-color) !important;
    border: none !important;
}

.orange-background {
    background-color: var(--orange-color) !important;
}

.black-color {
    color: #222222 !important;
}

.green-color {
    color: var(--green-color) !important;
}

.white-color {
    color: white !important;
}

.water-color {
    color: var(--water-color) !important;
}

.water-background {
    background: var(--water-color) !important;
}

.gray-color {
    color: var(--gray-color) !important;
}

.font-12 {
    font-size: 12px !important;
    line-height: 14px !important;
}

.font-14 {
    font-size: 14px !important;
    line-height: 16px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-50 {
    font-size: 50px !important;
}

.card {
    overflow: auto;
}

.width-100 {
    width: 100px !important;
    min-width: 100px;
}

.width-120 {
    width: 120px !important;
    min-width: 120px;
}

.width-150 {
    width: 150px !important;
    min-width: 150px;
}

.height-150 {
    height: 150px !important;
    min-height: 150px;
}

.width-170 {
    width: 170px !important;
    min-width: 170px;
}

.width-70 {
    width: 70px !important;
    min-width: 70px;
}

.width-250 {
    width: 250px !important;
    min-width: 250px;
}

.width-60 {
    width: 60px !important;
    min-width: 60px;
}

.width-40 {
    width: 40px !important;
    min-width: 40px;
}

.light-gray-background {
    background-color: var(--light-gray-color) !important;
}

.gray-background {
    background-color: var(--gray-color) !important;
}

.vertical-top td,
.vertical-top th,
.vertical-top {
    vertical-align: top !important;
}

.no-y-padding td,
.no-y-padding th {
    padding: 0px 10px;
}

.jonoff {
    position: relative;
    cursor: pointer;
    width: 55px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    margin: 0px;
}

.jonoff label {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: var(--pink-color);
    border-radius: 5px;
    font-weight: bold;
    color: #FFF;
    -webkit-transition: background 0.3s, text-indent 0.3s;
    -moz-transition: background 0.3s, text-indent 0.3s;
    -o-transition: background 0.3s, text-indent 0.3s;
    transition: background 0.3s, text-indent 0.3s;
    text-indent: 27px;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4) inset;
}

.jonoff label:after {
    content: 'No';
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    font-size: 12px;
    color: white;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.35);
    z-index: 1;
}

.jonoff label:before {
    content: '';
    width: 15px;
    height: 24px;
    border-radius: 3px;
    background: #FFF;
    position: absolute;
    z-index: 2;
    top: 3px;
    left: 3px;
    display: block;
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    -o-transition: left 0.3s;
    transition: left 0.3s;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.jonoff input:checked+label {
    background: var(--green-color);
    text-indent: 8px;
}

.jonoff input:checked+label:after {
    content: 'Yes';
    color: white;
}

.jonoff input:checked+label:before {
    left: 37px;
}

.border-spacing-20-0 {
    border-collapse: separate;
    border-spacing: 20px 5px !important;
}

.border-spacing-20-0 td {
    padding: 0px !important;
}

.one-third-column {
    width: calc(33.33% - 60px);
    min-width: 300px;
}

.m-t--10 {
    margin-top: -10px !important;
}

.m-t-0 {
    margin-top: 0px !important;
}

.m-l-auto {
    margin-left: auto !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-20 {
    margin-left: 20px !important;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-25 {
    margin-top: 25px !important;
}

.m-r-20 {
    margin-right: 20px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pink-color) !important;
    word-break: break-word;
}

.select2-results__option[aria-selected] {
    word-break: break-word;
}

.border-radius-10 {
    border-radius: 10px;
}

.half-width {
    width: 49%;
}

.quater-width {
    width: 25%;
}

.content {
    margin-bottom: 0px !important;
}

a {
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer !important;
}

a.no-background-button.pink:hover {
    color: var(--dark-pink-color);
}

.modal-content,
.modal-header,
.modal-footer {
    border-color: var(--pink-color);
}

.close,
.modal-title {
    color: var(--pink-color);
    opacity: 1;
}

.close:hover {
    color: var(--dark-pink-color) !important;
    opacity: 1 !important;
}

.desktop-responsive {
    display: block;
}

.mobile-responsive {
    display: none;
}

.alert-danger strong {
    color: #ea553d;
}

.alertify-logs {
    z-index: 100000;
}

.alertify-logs div {
    color: white !important;
}

.jdivider-div {
    border: 1px solid var(--light-gray-color);
    margin: 10px 0px;
}

.jtoggle-checkbox {
    font-size: 36px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 45px;
    height: 30px;
    background: var(--pink-color);
    border-radius: 18px;
    position: relative;
    cursor: pointer;
    outline: none;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    margin: 0px;
}

.jtoggle-checkbox:checked {
    background: var(--green-color);
}

.jtoggle-checkbox:after {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
    box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
    -webkit-transform: scale(.7);
    transform: scale(.7);
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.jtoggle-checkbox:checked:after {
    left: 15px;
}

#accordion>a:hover {
    background-color: var(--light-gray-color);
}

#accordion>a {
    display: block;
    margin: 10px 0px 0px 0px;
    padding: 5px;
    position: relative;
}

#accordion>a>label {
    margin: 0px;
}

#accordion>a:after {
    content: "+";
    font-size: 20px;
    font-weight: bolder;
    position: absolute;
    right: 10px;
    top: 0px;
    color: #777777;
}

#accordion>a[aria-expanded='true']:after {
    content: "-";
    font-size: 30px;
    font-weight: bolder;
    position: absolute;
    right: 10px;
    top: -5px;
    color: #777777;
}

.question-div {
    display: none;
}

.question-div.active {
    display: flex;
}

.button-a {
    font-size: 14px;
    margin: 0px 10px;
}

.button-a:hover {
    font-weight: bold;
    color: var(--dark-pink-color);
}

.control-label {
    font-size: 16px !important;
}

#jregister-div,
#jregister-desc-div {
    display: none;
}

.badge {
    font-weight: 300 !important;
}

.table-div .row:nth-child(even) {
    background-color: var(--light-gray-color);
}

table.pink-table th {
    background-color: var(--dark-pink-color);
    color: white;
    font-weight: bold;
    padding: 5px 10px;
}

table.grid-table tbody tr:nth-child(even) td {
    background-color: var(--light-gray-color);
}

table.grid-table td {
    padding: 5px 10px;
}

table.grid-table td label {
    margin: 0px;
}

.table-row label {
    margin: 0px;
}

.table-row>div {
    padding: 5px 10px;
}

.labelauty-checked {
    color: white !important;
}

.labelauty-unchecked {
    color: #b3b3b3 !important;
}

.iti {
    display: block;
    width: 100%;
}

input.labelauty[disabled]+label {
    opacity: 1 !important;
}

@media only screen and (max-width: 600px) {
    .mobile-responsive {
        display: block;
    }

    .desktop-responsive {
        display: none;
    }

    .container-fluid {
        padding: 0px;
    }

    .half-width {
        width: 100%;
    }

    #tabs-nav {
        display: grid;
    }

    .diet_div input {
        width: 100%;
    }

    .diet_div .delete-choice {
        float: right;
    }

    .member-must-agree {
        display: inline;
    }

    .lesson-card {
        width: 100% !important;
    }

    .mobile-text-left {
        text-align: left !important;
    }

    .mobile-text-center {
        text-align: center !important;
    }

    .mobile-vertical-top td,
    .mobile-vertical-top th,
    .mobile-vertical-top {
        vertical-align: top !important;
    }

    .mobile-m-t-10 {
        margin-top: 10px;
    }

    .pignose-calendar {
        margin: 0px;
        width: 100%;
    }
}

.custom-dd {
    width: 100%;
    max-width: initial;
}

.dd-handle {
    background: white !important;
    color: var(--gray-color);
    border: none !important;
}

#card-category .dd-item:nth-child(2n+1) .dd-handle,
#program-category .dd-item:nth-child(2n+1) .dd-handle {
    background: var(--light-gray-color) !important;
}

.lesson-card {
    width: 500px;
    margin: 0px auto;
    border: 1px solid var(--gray-color);
    margin-bottom: 20px;
    margin-top: 20px;
}

.lesson-card.program {
    border: 1px solid var(--pink-color);
}

.lesson-card.workout {
    border: none !important;
    margin-top: 0px;
    margin-bottom: 0px;
}

.lesson-component {
    background-color: white;
}

.lesson-component,
.lesson-component img,
.lesson-component iframe {
    width: 100%;
}

.pd-10 {
    padding: 10px !important;
}

.pd-20 {
    padding: 20px !important;
}

.pd-0 {
    padding: 0px !important;
}

.lesson-timer {
    background: var(--light-orange-color);
    color: var(--orange-color);
    font-size: 50px;
    text-align: center;
    font-weight: bolder;
    padding: 30px 0px;
}

.card-ingredient,
.lesson-round {
    padding: 5px;
    display: inline-block;
    width: 100%;
}

.card-ingredient h5,
.lesson-round>div:first-child>h5 {
    display: inline-block;
    margin: 0px;
    padding: 0px 5px;
}

.card-ingredient h5:nth-child(1),
.lesson-round>div:first-child>h5:nth-child(1) {
    float: left;
}

.card-ingredient button,
.lesson-round>div:first-child>button {
    float: right;
    border: none;
}

.document-list-card,
.card-list-card,
.lesson-list-card {
    width: 100%;
    border: 1px solid var(--gray-color);
    padding: 10px;
}

#documentsDiv,
#cardsDiv,
#lessonsDiv {
    padding: 0px 20px 20px 20px;
}

#lessonsDiv iframe {
    width: 100%;
    height: fit-content;
}

.p-l-35 {
    padding-left: 35px;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-b-30 {
    margin-bottom: 30px !important;
}

.m-b-0 {
    margin-bottom: 0px !important;
}

.mg-0 {
    margin: 0px !important;
}

#cardsDiv .col-sm-3,
#lessonsDiv .col-sm-3 {
    display: flex;
}

.btn-white-orange {
    background: white;
    border: 2px solid var(--orange-color);
    border-radius: 50%;
    padding: 3px 12px;
    font-size: 30px;
}

.nav-tabs-custom {
    border-bottom: 2px solid black;
}

.nav-tabs-custom>li>a.active>label {
    color: var(--green-color) !important;
}

.nav-tabs-custom>li>a::after {
    background: var(--green-color) !important;
}

.card-ingredient-description {
    display: none;
}

#starsAwardDiv .one-award-div {
    border-bottom: 1px solid var(--pink-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#starsAwardDiv .avatar-upload {
    width: 100%;
    max-width: 200px;
    margin: 0px !important;
}

.one-base-award {
    width: 120px;
    height: 120px;
    border: 2px solid #ededed;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    display: inline-flex;
    margin-right: 10px;
    position: relative;
    flex-direction: column;
}

.one-base-award img {
    width: 60px;
    height: 60px;
    margin: 0px auto;
}

.one-base-award label {
    padding-top: 10px;
    color: var(--gray-color);
    font-size: 10px !important;
}

input.labelauty:checked+label {
    background-color: var(--pink-color) !important;
}

input.labelauty.green:checked+label {
    background-color: var(--green-color) !important;
}

hr {
    width: 100% !important;
    margin-top: 0px !important;
}

.vertical-middle {
    display: flex;
    vertical-align: middle;
}

.d-flex {
    display: flex;
}

.line-height-30 {
    line-height: 30px;
}

.line-height-38 {
    line-height: 38px;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left !important;
}

.checkbox-container small {
    color: #999999;
}

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

.checkbox-container .radiobtn:after {
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

.radiobtn {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

.checkbox-container:hover input~.checkmark,
.checkbox-container:hover input~.radiobtn {
    background-color: #ccc;
}

.checkbox-container input:checked~.checkmark,
.checkbox-container input:checked~.radiobtn {
    background-color: var(--green-color);
}

.checkbox-container.pink input:checked~.checkmark,
.checkbox-container.pink input:checked~.radiobtn {
    background-color: var(--pink-color);
}

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

.checkcontainer input:checked~.radiobtn:after {
    display: block;
}

.checkbox-container input:checked~.checkmark:after,
.checkbox-container input:checked~.radiobtn:after {
    display: block;
}

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

.programs-table {
    width: 100%;
}

.programs-table th {
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 5px 10px;
}

.programs-table td {
    padding: 5px 10px;
}

.programs-table tr:hover td {
    background-color: #eeeeee;
}

.container-fluid {
    max-width: 1000px;
    margin: 0px auto;
}

.avatar-upload label {
    display: none;
}

.avatar-upload:hover label {
    display: inline-block;
}

.open-close {
    float: right;
    position: absolute;
    top: 0px;
    right: 10px;
    cursor: pointer;
}

.program-equipments {
    border: 1px solid var(--gray-color);
    padding: 0px 10px 0px 10px;
    overflow-x: auto;
}

.equipment-container {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.equipment-container1 {
    margin-bottom: 10px;
    display: block;
    align-items: center;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-right {
    justify-content: right;
}

.program-equipment {
    margin-right: 10px;
    position: relative;
}

.avatar-delete {
    position: absolute;
    bottom: 0px;
    right: 10px;
    cursor: pointer;
}

.position-relative {
    position: relative;
}

.margin-auto {
    margin: 0px auto !important;
}

.workouts {
    padding: 5px 0px;
}

.workout-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: black;
    cursor: pointer;
    border: 1px solid var(--gray-color);
    padding: 5px 10px;
}

.workout-title span:first-child {
    width: calc(100% - 20px)
}

.lesson-list-table {
    border-spacing: 0px;
}

.lesson-list-table td {
    vertical-align: top;
    color: black;
    border-bottom: 1px solid var(--gray-color);
    padding: 10px;
}

.lesson-list-table td:first-child {
    color: var(--green-color);
    font-size: 20px;
}

.lesson-list-table iframe {
    border: none;
}

#addEquipment {
    height: 40px;
}

.lesson-actions {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    font-size: 20px;
    color: white;
    width: calc(100% + 2px);
    padding: 10px;
    cursor: pointer;
    background-image: linear-gradient(to bottom right, red, yellow);
    margin: -1px -1px;
}

.lesson-actions span {
    color: white;
    margin: 0px auto;
}

#program-star {
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 16px;
    font-weight: bold;
}

#program-duration {
    position: absolute;
    right: 5px;
    bottom: 0px;
    font-size: 16px;
    color: var(--orange-color);
}

.pink-border {
    border-color: var(--pink-color) !important;
}

.light-green-background {
    background-color: var(--light-green-color);
}

.green-background {
    background-color: var(--green-color) !important;
}

.workout-component {
    border: 1px solid var(--gray-color);
    padding: 20px;
    text-align: center;
    position: relative;
    font-size: 20px;
    color: black;
    width: 100%;
}

.remove-workout {
    position: absolute;
    right: 5px;
    bottom: 0px;
}

.member-details-container #tabs-nav li {
    padding: 0px 15px;
}

.profile-infos-div {
    font-size: 14px;
    line-height: 16px;
    padding-left: 25px;
    position: relative;
}

.profile-infos-div i {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    text-align: center;
}

#card-profile .form-group {
    line-height: 0px;
}

#card-profile .form-group textarea {
    padding: 0px 5px;
    line-height: 14px;
    font-size: 14px;
}

#card-profile .form-group label {
    line-height: 14px;
}

.profile-one-row-div {
    border-bottom: 1px solid #eeeeee;
    padding: 10px 30px;
    margin: 0px -30px;
}

.dark-blue-color {
    color: var(--dark-blue-color);
}

.jtooltip {
    display: none;
}

.has-jtooltip:hover+.jtooltip {
    display: block;
    width: 200px;
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
    z-index: 10;
    font-size: 12px;
    transform: translate(-92px, 0px);
}

.overflow-inherit {
    overflow: inherit !important;
}

.knob-container canvas,
.knob {
    pointer-events: none;
}

.pignose-calendar-header {
    margin-top: 0px !important;
}

.pignose-calendar .pignose-calendar-unit {
    height: 2.8rem;
}

.pignose-calendar .pignose-calendar-body {
    padding: 0px 1.2rem;
}

.c3-axis path,
.tick line {
    stroke: white;
}

.c3-ygrid-line line {
    stroke-dasharray: 5, 5;
}

.c3-ygrid-line text {
    fill: var(--dark-pink-color);
}

.c3 tspan {
    fill: var(--gray-color);
}

.c3-legend-item {
    pointer-events: none;
}

.connect-app {
    text-align: center;
    width: 44px;
    height: 44px;
    margin: 0px auto;
}

.connect-app img {
    width: 40px;
    height: 40px;
}

.connect-app.apple {
    border: 2px solid var(--green-color);
    border-radius: 10px;
}

.connect-app.google {
    border: 2px solid var(--green-color);
    border-radius: 50%;
}

.progress-photo-div {
    border: 1px solid gray;
}

.progress-photo-div img {
    width: 100%;
}

.award-row {
    display: flex;
    width: 100%;
    margin: 10px 0px;
}

.award-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    margin-right: 20px;
}

.award-image img {
    height: 70px;
}

.award-desc {
    display: flex;
    font-size: 16px;
    align-items: center;
}

.login-full-div {
    width: 100vw;
    height: 100vh;
    margin: 0px;
    max-width: inherit !important;
    display: flex;
}

.login-full-div>div {
    display: flex;
}

.login-full-div>div:first-child {
    background-image: url(/assets/images/login_background.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 40%;
    display: flex;
    flex-direction: column;
}

.login-full-div>div:last-child {
    width: 60%;
    display: flex;
}

@media only screen and (max-width: 769px) {
    .login-full-div>div:first-child {
        width: 0px;
    }

    .login-full-div>div:last-child {
        width: 100%;
    }
}

.login-card {
    width: 90%;
    margin: auto;
    max-width: 500px;
}

.login-full-div>div:first-child>.logo {
    margin-top: auto;
    margin-left: 50px;
    display: flex;
}

.login-full-div>div:first-child>.desc {
    color: white;
    font-size: 30px;
    margin: 10px 50px 50px 50px;
}

.login-btn {
    font-size: 20px;
}

.forgot-password {
    color: var(--green-color);
    font-size: 16px;
    text-decoration: underline;
}

.forgot-password:hover {
    color: var(--dark-green-color);
}

.edit-document:hover,
.edit-lesson:hover,
.edit-card:hover {
    color: var(--green-color);
    cursor: pointer;
}

.one-base-award .base-award-delete {
    position: absolute;
    top: 0px;
    right: 0px;
    display: none;
}

.one-base-award:hover .base-award-delete {
    display: block;
}

.one-removable-elem {
    display: inline-flex;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: var(--pink-color);
    margin-bottom: 5px;
}

.one-removable-elem .description {
    margin-right: 10px;
    color: white;
    font-size: 14px;
}

.one-removable-elem .remove-elem {
    cursor: pointer;
    color: white;
    font-size: 14px;
}

.search-lesson-card {
    border: 1px solid #ededed;
}

.search-lesson-image {
    height: 80px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.search-lesson-title {
    padding: 5px 10px;
    height: 52px;
    font-size: 12px;
    font-weight: bold;
    color: #222222;
}

.search-lesson-control {
    padding: 0px 10px;
}

.modal-dialog,
.modal-content {
    max-height: calc(100vh - 3.5rem);
}

.login-href {
    font-size: 16px;
    color: var(--green-color);
}

.login-href:hover {
    color: var(--dark-green-color);
    text-decoration: underline;
}

.modal-body {
    overflow-y: auto !important;
}

nav[role="navigation"] {
    margin-top: 10px;
}

nav[role="navigation"]>div:first-child {
    display: none;
}

nav[role="navigation"]>div:last-child>div:last-child {
    display: flex;
    justify-content: center;
}

nav[role="navigation"]>div:last-child>div:last-child>span {
    display: flex;
    box-shadow: none !important;
}

nav[role="navigation"]>div:last-child * {
    color: var(--green-color) !important;
    border-color: var(--green-color) !important;
}

nav[role="navigation"]>div:last-child>div:last-child>span>*,
nav[role="navigation"]>div:last-child>div:last-child>span>span>span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    padding: 0px !important;
}

nav[role="navigation"]>div:last-child>div:last-child>span>* {
    margin: 0px 2px;
}

nav[role="navigation"]>div:last-child>div:last-child svg {
    width: 20px;
}

nav[role="navigation"] span[aria-disabled="true"] * {
    color: var(--gray-color) !important;
    border-color: var(--gray-color) !important;
}

nav[role="navigation"] span[aria-current="page"] *,
nav[role="navigation"] a:hover,
nav[role="navigation"] a:hover * {
    color: white !important;
    background-color: var(--green-color) !important;
}

.pignose-calendar.pignose-calendar-blue .pignose-calendar-top,
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
    background-color: #f05382 !important;
}

.pignose-calendar,
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
    box-shadow: none !important;
}

.pignose-calendar {
    border: 1px solid #f05382 !important;
}

.mobile-div {
    display: inline-block;
    width: 270px;
    position: relative;
    margin-right: 20px;
}

.mobile-div img {
    width: 100%;
}

.mobile-div img:not(:first-child) {
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
}

.mobile-header {
    position: absolute;
    top: 15px;
    left: 12px;
    width: 246px;
    height: 62px;
    background-color: #ff6d07;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
}

.mobile-header .mobile-header-dark {
    height: 27px;
    background-color: rgba(0, 0, 0, 0.15);
}

.mobile-todays-todo {
    position: absolute;
    top: 104px;
    left: 39px;
    color: #ff6d07;
    font-size: 8px;
}

.mobile-brand-name {
    position: absolute;
    top: 36px;
    font-size: 12px;
    color: white;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: 500;
    width: 100%;
}

.mobile-progress-div {
    position: absolute;
    width: 220px;
    top: 154px;
    left: 25px;
}

.mobile-progress-title {
    font-size: 12px;
    font-weight: 500;
    color: #ff6d07;
}

.mobile-progress-status {
    margin-left: auto;
    margin-right: 10px;
    color: #ff6d07;
    font-size: 8px;
}

.mobile-progress-bar {
    width: 197px;
    height: 15px;
    border-radius: 8px;
    background-color: #ff6d07;
    opacity: 0.5;
}

.mobile-progress-current {
    position: absolute;
    bottom: 0px;
    width: 155px;
    height: 15px;
    border-radius: 8px;
    background-color: #ff6d07;
}

.mobile-schedule {
    position: absolute;
    right: 19px;
    top: 253px;
    font-size: 10px;
    color: #ff6d07;
}

.mobile-start-button {
    position: absolute;
    right: 12px;
    top: 361px;
    background: #ff6d07;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    font-size: 10px;
    height: 21px;
    padding: 3px 0px 3px 4px;
    color: white;
    overflow: hidden;
    width: 15px;
}

.mobile-house {
    position: absolute;
    bottom: 29px;
    left: 126px;
    font-size: 18px;
    color: #ff6d07;
}

.mobile-todos-arrow {
    position: absolute;
    right: 37px;
    top: 107px;
    font-size: 18px;
    color: #22304e;
}

.mobile-appointment-arrow {
    position: absolute;
    right: 25px;
    top: 214px;
    font-size: 18px;
    color: #22304e;
}

.mobile-star {
    position: absolute;
    right: 25px;
    top: 167px;
    font-size: 16px;
    color: #22304e;
}

.color-picker-container {
    display: flex;
    align-items: center;
    width: 180px;
    border-radius: 10px;
    padding: 5px;
    border: 2px solid #b3b3b3;
    cursor: pointer;
    position: relative;
}

.color-picker-color {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    margin-right: 20px;
}

.color-picker-color-text {
    color: gray;
    text-transform: uppercase;
}

.color-picker-input {
    position: absolute;
    top: 5px;
    left: 5px;
    height: 40px;
    width: 50px;
    border: 0px;
}

.splash-logo {
    z-index: 2;
    position: absolute;
    width: 246px;
    height: 458px;
    top: 58px;
    left: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
}

.splash-background {
    position: absolute;
    width: 246px;
    height: 457px;
    top: 58px;
    left: 12px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.splash-images .jfile-div {
    background-color: #cccccc;
}

#doc-file-input input[type="file"] {
    line-height: 37px;
    padding: 0px;
    height: 40px;
}

#doc-file-input input[type="file"]::file-selector-button {
    background-color: red;
    border: none;
    background-color: var(--green-color);
    color: white;
}

.library-list-thumbnail {
    height: 110px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: black;
    font-size: 100px;
    line-height: 110px;
    text-align: center;
}

.nav-tabs-custom>li>a.active>label,
.nav-tabs-custom>li>a.active,
.nav-tabs-custom>li>a.active>label,
.nav-tabs-custom>li>a.active {
    color: var(--pink-color) !important;
}

.nav-tabs-custom>li>a::after,
.nav-tabs-custom>li>a::after {
    background-color: var(--pink-color) !important;
}

.progress-individual-tabs a {
    display: block;
    font-weight: bold;
}

.progress-individual-tabs a:hover {
    color: var(--pink-color) !important;
}

.progress-individual-tabs a:not(:last-child) {
    margin-bottom: 5px;
}

.progress-individual-tabs a.active {
    color: var(--pink-color);
}

.lesson-card .dd-handle {
    height: fit-content;
    padding: 0px;
}

.lesson-card .dd-item {
    min-height: 0px;
}

.lesson-card .dd-handle {
    background-color: rgba(0, 0, 0, 0) !important;
    border: 1px solid var(--gray-color) !important;
}

.report-total-number {
    color: #ff9801;
    font-size: 50px;
    line-height: 50px;
    font-weight: bold;
    text-align: center;
}

.report-statistic small {
    float: right;
    font-weight: bold;
}

.report-statistic .card-body {
    padding: 20px;
}

.report-conditions .checkbox-container {
    margin-bottom: 0px;
    height: 20px;
}

.report-conditions>div>.d-flex {
    height: 35px;
}

.report-conditions>div>.d-flex>select {
    height: 30px;
    width: fit-content;
    margin: 0px 10px;
    padding: 3px 10px;
}

.report-client-div img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 10px;
}

.report-client-div a,
.report-client-div span {
    display: block;
}

.report-client-div a {
    font-weight: 500;
    font-size: 16px;
    color: var(--green-color) !important;
}

.report-client-div a:hover {
    text-decoration: underline !important;
}

.header-video-dropdown .dropdown-item {
    padding: 10px;
    border-top: 1px solid #eeeeee;
}

.header-video-div {
    display: flex;
    align-items: center;
    position: relative;
}

.header-video-div img {
    width: 100px;
    border: 2px solid black;
}

.header-video-info {
    font-weight: 500;
    font-size: 14px;
    padding-left: 10px;
}

.header-video-div .badge {
    position: absolute;
    left: 5px;
    top: 5px;
}

.how-to-video-icon {
    position: relative;
}

.how-to-video-icon .badge {
    position: absolute;
    right: 0px;
    top: 5px;
    font-size: 10px;
}

.daily-steps {
    width: 100%;
}

.daily-steps td {
    font-size: 10.5px;
    text-align: center;
    color: var(--pink-color);
}

.daily-steps td span {
    font-size: 15px;
    font-weight: 500;
    color: var(--pink-color);
}

.program-category-header {
    position: relative;
    margin: 20px 0px 10px 0px;
}

.program-category-header span {
    font-size: 16px;
    color: black;
    font-weight: 500;
    padding: 0px 15px;
    text-align: center;
}

.program-cnt,
.workout-cnt {
    top: 11px;
    width: 170px;
    text-align: center;
    position: absolute;
    right: 300px;
    pointer-events: none;
}

.workout-cnt,
.program-category-header span:last-child {
    right: 110px;
}

.program-category-header span:not(:first-child) {
    top: 0px;
    position: absolute;
    display: block;
    width: 180px;
}

.program-category-header span:nth-child(2) {
    right: 300px;
}

.side-menu {
    background-color: white !important;
}

.supersets-container {
    position: relative;
    padding-bottom: 40px;
}

.supersets-container .lesson-card {
    width: 468px !important;
    margin-bottom: 5px !important;
}

.addSupersetExercise {
    position: absolute;
    bottom: 0px;
    right: 10px;
}

.lesson-round>div:first-child {
    min-height: 30px;
}

.dd-list .dd-list {
    padding-left: 0px !important;
}

.app-builder-content .jfile-div {
    min-width: 102px;
    min-height: 36px;
}

.calendar-header {
    padding: 10px 20px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    display: flex;
    align-items: center;
}

.calendar-header .circle-button {
    transition: 0.3s;
    padding: 5px 15px;
    border-radius: 20px;
    color: #b3b9c6;
    background-color: #f4f4f4;
    font-weight: 500;
    border: none;
    outline: none;
    margin: 0px 10px;
}

.calendar-header .circle-button:hover {
    background-color: #dedede;
}

.calendar-header .circle-button.active {
    color: #f4f4f4 !important;
    background-color: #555555 !important;
}

.calendar-header .action-button.active {
    color: #f4f4f4 !important;
    background-color: var(--pink-color) !important;
}

.calendar-header .circle-button.action-button {
    width: 100px;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    margin: 0px 0px 0px 5px;
}

.calendar-header .save-button {
    padding: 10px 20px;
    border-radius: 10px;
    margin-left: auto;
    color: white !important;
    background-color: var(--green-color) !important;
}

.calendar-header .save-button:hover {
    background-color: var(--dark-green-color) !important;
}

.move-button,
.date {
    color: #555555;
    font-weight: 500;
    font-size: 16px;
    margin: 0px 10px;
}

.date {
    display: flex;
    align-items: center;
}

.calendar-container {
    width: 1421px;
    margin: 0px auto;
}

.calendar-day-of-weeks>div {
    color: #555555;
    font-weight: 500;
    font-size: 16px;
    display: inline-block;
    width: 190px;
    margin: 10px 5px 5px;
}

.calendar-cell {
    position: relative;
    display: inline-table;
    width: 190px;
    min-height: 190px;
    padding: 10px;
    border-radius: 5px;
    margin: 0px 5px 10px;
    background-color: #eeeeee;
}

.calendar-cell.active {
    background-color: rgba(62, 188, 185, 0.3) !important;
}

.calendar-cell .add-icon {
    display: none;
    padding: 2px 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 12px;
    border-radius: 50%;
    background-color: var(--green-color);
    color: white !important;
}

.calendar-cell:hover .add-icon {
    display: block;
}

.calendar-cell .cell-date {
    width: fit-content;
    padding: 0px 5px;
    border-radius: 10px;
    color: #555555;
    font-size: 12px;
    font-weight: 500;
}

.calendar-cell .cell-date.active {
    color: #f4f4f4;
    background-color: var(--dark-pink-color);
}

.calendar-element {
    margin-top: 5px;
    border: 1px solid #555555;
    border-radius: 5px;
    padding: 0px 10px;
    background-color: white;
    cursor: grab;
}

.calendar-element.dragging {
    cursor: grabbing;
}

.calendar-element-header {
    padding: 2px 0px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pink-color);
}

.calendar-element-body {
    font-size: 12px;
    color: #555555;
}

.calendar-element-footer {
    display: flex;
    padding: 2px 0px;
}

.calendar-element-footer a:last-child {
    margin-left: auto;
}

.calendar-body {
    overflow-x: auto;
}

.calendar-todo {
    display: none;
}

#allMealsDiv {
    max-width: 500px;
}

.choices_div>div {
    display: flex;
    align-items: center;
}

input.labelauty+label {
    margin-bottom: 0px !important;
}

.staff-membership-container {
    display: inline-grid;
    text-align: center;
    width: 100px;
    padding: 5px;
}

.staff-membership-container img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: #999999;
    cursor: pointer;
}

.staff-membership-container input:checked+label img {
    border-color: var(--pink-color);
}

.planItem {
    width: 350px !important;
}

.cke_notifications_area {
    display: none !important;
}

.label-auty+label {
    line-height: 14px;
}

.selected-days .label-auty+label {
    width: 100%;
    padding: 10px 0px;
    text-align: center;
}

.availableClassesTable td {
    vertical-align: center;
    min-height: 31px;
    font-weight: 500;
}

.selected-days .labelauty-unchecked-image,
.selected-days .labelauty-checked-image {
    display: none !important;
}

.selected-days .labelauty-unchecked,
.selected-days .labelauty-checked {
    margin-left: 0px !important;
}

[name="class-days"]+label {
    position: relative;
    width: 100%;
    text-align: center;
}

input.labelauty.hasClass+label:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0px;
    top: 0px;
    background: var(--green-color);
}

.card__header.free-trial:before {
    content: "14-days free trial";
    color: white;
    background-color: var(--pink-color);
    padding: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    position: absolute;
    left: -24px;
    top: 0px;
}

.card__header.free-trial {
    position: relative;
}

.card__header.free-trial h2 {
    margin-top: 50px;
}

.profile-one-row-div.note-div {
    position: relative;
}

.profile-one-row-div.note-div a {
    position: absolute;
    right: 20px;
    top: 0;
}

.alertify-logs {
    max-width: 300px !important;
}

.select-task-option {
    margin: 10px 0px;
    cursor: pointer;
}

.select-task-option label {
    margin-top: 10px;
}

.habit-color {
    padding: 5px;
    padding-bottom: 15px;
    border-radius: 5px;
    margin-right: 5px;
    position: relative;
}

.habit-color.active {
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
}

.habit-color .background-color {
    width: 40px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}

.habit-color .light-color {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid #eeeeee;
}

.habit-icon-selector {
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    margin-right: 10px;
    font-size: 20px;
    padding: 3px;
    text-align: center;
}

.gradient-btn {
    position: relative;
    background: linear-gradient(90deg, #E4626A, #E5A22F, #E4626A);
    background-size: 300% 300%; /* Makes the gradient big for smooth animation */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    animation: gradientShift 5s linear infinite; /* Infinite animation */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

/* Gradient animation */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Hover effect */
.gradient-btn:hover:not(.loading) {
    transform: translateY(-2px);
    color: white;
}

/* Spinner inside button */
.gradient-btn .btn-spinner {
    border: 2px solid rgba(255, 255, 255, 0.3); /* light part of spinner */
    border-top: 2px solid white; /* visible spinning part */
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    margin-left: 8px; /* space between text and spinner */
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loading state disables hover effect */
.gradient-btn.loading {
    cursor: default;
}